"use client";

import type { RatioPoint, RatiosResponse } from "@/types/api";
import { fmtNumber, fmtPct } from "@/lib/format";

const BRASS = "#C2AA7A";
const GAIN = "#4F8C5E";

type Props = {
  data: RatiosResponse;
};

type ValueKind = "multiple" | "percent" | "coverage";

function buildLine(values: (number | null)[], width: number, height: number): string {
  const numeric = values.filter((value): value is number => value != null && Number.isFinite(value));
  if (numeric.length === 0) return "";
  if (numeric.length === 1) {
    const y = height / 2;
    return `0,${y} ${width},${y}`;
  }

  const min = Math.min(...numeric);
  const max = Math.max(...numeric);
  const range = max - min || 1;

  return numeric
    .map((value, index) => {
      const x = (index / (numeric.length - 1)) * width;
      const y = max === min ? height / 2 : height - ((value - min) / range) * height;
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(" ");
}

function fmtMultiple(value?: number | null): string {
  if (value == null || Number.isNaN(value)) return "—";
  return `${fmtNumber(value)}x`;
}

function fmtCoverage(value?: number | null): string {
  if (value == null || Number.isNaN(value)) return "—";
  return `${fmtNumber(value)}x`;
}

function formatValue(value: number | null, kind: ValueKind): string {
  if (kind === "percent") return fmtPct(value);
  if (kind === "coverage") return fmtCoverage(value);
  return fmtMultiple(value);
}

function MiniSpark({ values, color }: { values: (number | null)[]; color: string }) {
  const points = buildLine(values, 88, 24);
  if (!points) {
    return <span className="psm-ratio-spark-empty">—</span>;
  }

  return (
    <svg className="psm-ratio-mini-spark" viewBox="0 0 88 24" aria-hidden="true">
      <polyline
        points={points}
        fill="none"
        stroke={color}
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function HeroSpark({ values, color }: { values: (number | null)[]; color: string }) {
  const points = buildLine(values, 196, 52);
  if (!points) {
    return <span className="psm-ratio-spark-empty">No trend</span>;
  }

  return (
    <svg className="psm-ratio-hero-spark" viewBox="0 0 196 52" aria-hidden="true">
      <polyline
        points={points}
        fill="none"
        stroke={color}
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function HeroCard({
  label,
  point,
  kind,
  color,
}: {
  label: string;
  point: RatioPoint;
  kind: ValueKind;
  color: string;
}) {
  return (
    <article className="psm-ratio-hero">
      <div className="psm-ratio-hero-head">
        <span className="psm-ratio-hero-label">{label}</span>
        <span className="psm-ratio-hero-sector">
          Sector {formatValue(point.vs_sector, kind)}
        </span>
      </div>
      <div className="psm-ratio-hero-value" style={{ color }}>
        {formatValue(point.value, kind)}
      </div>
      <HeroSpark values={point.spark} color={color} />
    </article>
  );
}

function DetailRow({
  label,
  point,
  kind,
  color,
}: {
  label: string;
  point: RatioPoint;
  kind: ValueKind;
  color: string;
}) {
  return (
    <div className="psm-ratio-row">
      <span className="psm-ratio-row-label">{label}</span>
      <span className="psm-ratio-row-value">{formatValue(point.value, kind)}</span>
      <span className="psm-ratio-row-sector">{formatValue(point.vs_sector, kind)}</span>
      <MiniSpark values={point.spark} color={color} />
    </div>
  );
}

function GroupHeader({ label }: { label: string }) {
  return (
    <div className="psm-ratio-group-label">
      <span>{label}</span>
      <span>Current</span>
      <span>Sector</span>
      <span>Trend</span>
    </div>
  );
}

export function RatiosCard({ data }: Props) {
  const showDividends = data.dividend_yield.value != null || data.dividend_payout.value != null;

  return (
    <section className="psm-card psm-ratio-card">
      <div className="psm-card-head">
        <div>
          <div className="psm-eyebrow">Key Ratios</div>
          <h2 className="psm-card-title">Key Ratios</h2>
        </div>
      </div>

      <div className="psm-ratio-heroes">
        <HeroCard label="P / E TTM" point={data.pe_ttm} kind="multiple" color={BRASS} />
        <HeroCard label="EV / EBITDA" point={data.ev_ebitda} kind="multiple" color={BRASS} />
        <HeroCard label="Gross Margin" point={data.gross_margin} kind="percent" color={GAIN} />
        <HeroCard label="Net Margin" point={data.net_margin} kind="percent" color={GAIN} />
      </div>

      <div className="psm-ratio-detail">
        <section>
          <GroupHeader label="Valuation" />
          <DetailRow label="P / Book" point={data.price_to_book} kind="multiple" color={BRASS} />
          <DetailRow label="P / Sales" point={data.price_to_sales} kind="multiple" color={BRASS} />
          <DetailRow label="EV / Sales" point={data.ev_to_sales} kind="multiple" color={BRASS} />
          <DetailRow label="P / FCF" point={data.p_fcf} kind="multiple" color={BRASS} />
          <DetailRow label="Forward P / E" point={data.forward_pe} kind="multiple" color={BRASS} />
        </section>

        <section>
          <GroupHeader label="Profitability" />
          <DetailRow label="Operating Margin" point={data.operating_margin} kind="percent" color={GAIN} />
          <DetailRow label="EBITDA Margin" point={data.ebitda_margin} kind="percent" color={GAIN} />
          <DetailRow label="FCF Margin" point={data.fcf_margin} kind="percent" color={GAIN} />
        </section>

        <section>
          <GroupHeader label="Returns" />
          <DetailRow label="ROE" point={data.roe} kind="percent" color={GAIN} />
          <DetailRow label="ROA" point={data.roa} kind="percent" color={GAIN} />
          <DetailRow label="ROIC" point={data.roic} kind="percent" color={GAIN} />
        </section>

        <section>
          <GroupHeader label="Leverage / Liquidity" />
          <DetailRow label="Debt / Equity" point={data.debt_to_equity} kind="multiple" color={BRASS} />
          <DetailRow label="Current Ratio" point={data.current_ratio} kind="multiple" color={BRASS} />
          <DetailRow label="Quick Ratio" point={data.quick_ratio} kind="multiple" color={BRASS} />
          <DetailRow label="Interest Coverage" point={data.interest_coverage} kind="coverage" color={BRASS} />
        </section>

        {showDividends && (
          <section>
            <GroupHeader label="Dividends" />
            <DetailRow label="Dividend Yield" point={data.dividend_yield} kind="percent" color={GAIN} />
            <DetailRow label="Payout Ratio" point={data.dividend_payout} kind="percent" color={GAIN} />
          </section>
        )}
      </div>
    </section>
  );
}