"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { RatiosCard } from "@/components/prism/RatiosCard";
import type { RatiosResponse } from "@/types/api";

type RatiosState = "loading" | "ready" | "error";

type Props = {
  ticker: string;
};

export function RatiosPage({ ticker }: Props) {
  const [data, setData] = useState<RatiosResponse | null>(null);
  const [ratiosState, setRatiosState] = useState<RatiosState>("loading");

  useEffect(() => {
    let cancelled = false;
    setRatiosState("loading");
    setData(null);

    api
      .ratios(ticker)
      .then((res) => {
        if (!cancelled) {
          setData(res);
          setRatiosState("ready");
        }
      })
      .catch(() => {
        if (!cancelled) setRatiosState("error");
      });

    return () => {
      cancelled = true;
    };
  }, [ticker]);

  if (ratiosState === "loading") {
    return <section className="psm-card psm-skeleton" style={{ minHeight: 320 }} />;
  }

  if (ratiosState === "error") {
    return (
      <section className="psm-card">
        <p className="psm-muted-copy">Ratio data unavailable for {ticker}.</p>
      </section>
    );
  }

  if (ratiosState === "ready" && data) {
    return <RatiosCard data={data} />;
  }

  return null;
}