import type { TickerOverview, ValuationResponse } from "@/types/api";
import { fmtCurrency, fmtLarge, fmtNumber, fmtPct } from "@/lib/format";

type ValState = "idle" | "loading" | "ready" | "error";

type Props = {
  overview: TickerOverview;
  valuation: ValuationResponse | null;
  valState: ValState;
};

export function ValuationOverviewCard({ overview, valuation, valState }: Props) {
  const rows = [
    { label: "Market Cap", value: fmtLarge(overview.stats.market_cap), missing: overview.stats.market_cap == null },
    { label: "P/E TTM", value: overview.stats.trailing_pe == null ? "-" : `${fmtNumber(overview.stats.trailing_pe)}x`, missing: overview.stats.trailing_pe == null },
    { label: "EPS TTM", value: fmtCurrency(overview.stats.trailing_eps), missing: overview.stats.trailing_eps == null },
    { label: "P/B", value: overview.ratios.price_to_book == null ? "-" : `${fmtNumber(overview.ratios.price_to_book)}x`, missing: overview.ratios.price_to_book == null },
    { label: "P/S", value: overview.ratios.price_to_sales == null ? "-" : `${fmtNumber(overview.ratios.price_to_sales)}x`, missing: overview.ratios.price_to_sales == null },
    { label: "EV/Sales", value: overview.ratios.ev_to_sales == null ? "-" : `${fmtNumber(overview.ratios.ev_to_sales)}x`, missing: overview.ratios.ev_to_sales == null },
    { label: "EV/EBITDA", value: overview.ratios.ev_to_ebitda == null ? "-" : `${fmtNumber(overview.ratios.ev_to_ebitda)}x`, missing: overview.ratios.ev_to_ebitda == null },
  ];

  const visible = rows.filter((r) => !r.missing);
  const dcf = valuation?.dcf;
  const showDcf = dcf?.available && dcf.intrinsic_value_per_share != null;

  return (
    <section className="psm-card">
      <div className="psm-card-head">
        <div>
          <div className="psm-eyebrow">Valuation</div>
          <h2 className="psm-card-title">Valuation</h2>
        </div>
      </div>
      {visible.length > 0 && (
        <div className="psm-stat-list">
          {visible.map((row) => (
            <div key={row.label} className="psm-stat-row">
              <span className="psm-stat-label">{row.label}</span>
              <span className="psm-stat-value">{row.value}</span>
            </div>
          ))}
        </div>
      )}
      {valState === "loading" && (
        <>
          <hr className="psm-divider" />
          <div className="psm-stat-list">
            <div className="psm-stat-row">
              <span className="psm-stat-label psm-skeleton" style={{ width: "120px", height: "14px", display: "inline-block" }} />
              <span className="psm-stat-value psm-skeleton" style={{ width: "60px", height: "14px", display: "inline-block" }} />
            </div>
            <div className="psm-stat-row">
              <span className="psm-stat-label psm-skeleton" style={{ width: "100px", height: "14px", display: "inline-block" }} />
              <span className="psm-stat-value psm-skeleton" style={{ width: "48px", height: "14px", display: "inline-block" }} />
            </div>
          </div>
        </>
      )}
      {valState === "ready" && showDcf && dcf && (
        <>
          <hr className="psm-divider" />
          <div className="psm-stat-list">
            <div className="psm-stat-row">
              <span className="psm-stat-label">DCF Intrinsic Value</span>
              <span className="psm-stat-value">{fmtCurrency(dcf.intrinsic_value_per_share)}</span>
            </div>
            {dcf.growth_rate_used != null && (
              <div className="psm-stat-row">
                <span className="psm-stat-label">FCF Growth Used</span>
                <span className="psm-stat-value">{fmtPct(dcf.growth_rate_used)}</span>
              </div>
            )}
          </div>
        </>
      )}
    </section>
  );
}