path: root/frontend/app/page.tsx

"use client";

import { FormEvent, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { BookmarkMinus, BookmarkPlus, Search } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import { PriceChart } from "@/components/PriceChart";
import { ApiError, api } from "@/lib/api";
import { deltaClass, fmtCurrency, fmtLarge, fmtNumber, fmtPct } from "@/lib/format";
import type { HistoryPoint, MarketIndex, SearchResult, TickerOverview, WatchlistResponse } from "@/types/api";

const PERIODS = [
  { key: "1m", label: "1M" },
  { key: "3m", label: "3M" },
  { key: "6m", label: "6M" },
  { key: "1y", label: "1Y" },
  { key: "5y", label: "5Y" }
];

type LoadState = "idle" | "loading" | "ready" | "invalid" | "error";
type ChartState = "idle" | "loading" | "ready" | "error";

export default function OverviewPage() {
  return (
    <Suspense fallback={<main className="shell"><section className="content"><div className="empty-panel">Loading Prism...</div></section></main>}>
      <OverviewClient />
    </Suspense>
  );
}

function OverviewClient() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const selectedTicker = (searchParams.get("ticker") || "").toUpperCase();
  const lastTickerRef = useRef("");

  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [searching, setSearching] = useState(false);
  const [market, setMarket] = useState<MarketIndex[]>([]);
  const [overview, setOverview] = useState<TickerOverview | null>(null);
  const [history, setHistory] = useState<HistoryPoint[]>([]);
  const [watchlist, setWatchlist] = useState<WatchlistResponse>({ items: [], limit: 10 });
  const [period, setPeriod] = useState("1y");
  const [overviewState, setOverviewState] = useState<LoadState>("idle");
  const [overviewError, setOverviewError] = useState<string | null>(null);
  const [chartState, setChartState] = useState<ChartState>("idle");
  const [chartError, setChartError] = useState<string | null>(null);
  const [watchlistError, setWatchlistError] = useState<string | null>(null);

  const watchlistSymbols = useMemo(() => new Set(watchlist.items.map((item) => item.symbol)), [watchlist]);
  const isSaved = selectedTicker ? watchlistSymbols.has(selectedTicker) : false;

  const selectTicker = useCallback(
    (symbol: string) => {
      const normalized = symbol.trim().toUpperCase();
      if (!normalized) return;
      setResults([]);
      setQuery("");
      setOverviewError(null);
      setChartError(null);
      setWatchlistError(null);
      setOverviewState("loading");
      setChartState("loading");
      setOverview(null);
      setHistory([]);
      router.push(`/?ticker=${encodeURIComponent(normalized)}`);
    },
    [router]
  );

  const clearTicker = useCallback(() => {
    setOverview(null);
    setHistory([]);
    setOverviewError(null);
    setChartError(null);
    setWatchlistError(null);
    setOverviewState("idle");
    setChartState("idle");
    router.push("/");
  }, [router]);

  const refreshWatchlist = useCallback(async () => {
    try {
      setWatchlist(await api.watchlist());
    } catch {
      setWatchlist({ items: [], limit: 10 });
    }
  }, []);

  useEffect(() => {
    api.marketIndices().then(setMarket).catch(() => setMarket([]));
    refreshWatchlist();
  }, [refreshWatchlist]);

  useEffect(() => {
    if (query.trim().length < 2) {
      setResults([]);
      return;
    }
    let cancelled = false;
    setSearching(true);
    const timer = window.setTimeout(() => {
      api
        .search(query)
        .then((rows) => {
          if (!cancelled) setResults(rows);
        })
        .catch(() => {
          if (!cancelled) setResults([]);
        })
        .finally(() => {
          if (!cancelled) setSearching(false);
        });
    }, 250);
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [query]);

  useEffect(() => {
    if (!selectedTicker) {
      lastTickerRef.current = "";
      setOverview(null);
      setHistory([]);
      setOverviewError(null);
      setChartError(null);
      setWatchlistError(null);
      setOverviewState("idle");
      setChartState("idle");
      return;
    }
    if (lastTickerRef.current === selectedTicker) return;

    let cancelled = false;
    lastTickerRef.current = selectedTicker;
    setOverviewState("loading");
    setOverviewError(null);
    setWatchlistError(null);
    setOverview(null);

    api
      .overview(selectedTicker)
      .then((overviewData) => {
        if (cancelled) return;
        setOverview(overviewData);
        setOverviewState("ready");
      })
      .catch((exc: Error) => {
        if (cancelled) return;
        setOverview(null);
        if (exc instanceof ApiError && exc.status === 404) {
          setOverviewState("invalid");
          setOverviewError("Ticker not found");
          setChartState("idle");
          setHistory([]);
          return;
        }
        setOverviewState("error");
        setOverviewError(exc.message || "Ticker data unavailable");
      });

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

  useEffect(() => {
    if (!selectedTicker) return;
    let cancelled = false;
    setChartState("loading");
    setChartError(null);
    setHistory([]);

    api
      .history(selectedTicker, period)
      .then((historyData) => {
        if (cancelled) return;
        setHistory(historyData);
        setChartState("ready");
      })
      .catch((exc: Error) => {
        if (cancelled) return;
        setHistory([]);
        setChartState("error");
        setChartError(exc.message || "Could not load chart history");
      });

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

  async function onSearchSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (results[0]) selectTicker(results[0].symbol);
    else if (query.trim()) selectTicker(query);
  }

  async function toggleWatchlist() {
    if (!selectedTicker) return;
    try {
      const next = isSaved ? await api.removeWatchlist(selectedTicker) : await api.addWatchlist(selectedTicker);
      setWatchlist(next);
      setWatchlistError(null);
    } catch (exc) {
      setWatchlistError(exc instanceof Error ? exc.message : "Could not update watchlist");
    }
  }

  const summaryTicker = overview?.profile.symbol || selectedTicker;
  const summaryName =
    overviewState === "invalid"
      ? "Ticker not found"
      : overview?.profile.name || (selectedTicker ? "Loading ticker..." : "No ticker selected");

  return (
    <main className="shell">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">P</div>
          <div>
            <div className="brand-name">Prism</div>
            <div className="brand-sub">Overview</div>
          </div>
        </div>

        <form className="search-form" onSubmit={onSearchSubmit}>
          <label htmlFor="ticker-search">Ticker Search</label>
          <div className="search-box">
            <Search size={16} aria-hidden />
            <input id="ticker-search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="AAPL, Microsoft..." />
          </div>
          {query.trim().length >= 2 && (
            <div className="search-results">
              {searching && <div className="muted-row">Searching...</div>}
              {!searching && results.length === 0 && <div className="muted-row">No matches</div>}
              {results.map((result) => (
                <button key={`${result.symbol}-${result.exchange}`} type="button" onClick={() => selectTicker(result.symbol)}>
                  <span>{result.symbol}</span>
                  <small>{result.name}</small>
                </button>
              ))}
            </div>
          )}
        </form>

        <section className="selected-summary">
          <div className="section-label">Selected</div>
          <div className="summary-symbol">{summaryTicker || "-"}</div>
          <div className="summary-name">{summaryName}</div>
          {overview ? (
            <>
              <div className="summary-price">
                {fmtCurrency(overview.quote.price)}
                <span className={deltaClass(overview.quote.change_pct)}>{fmtPct(overview.quote.change_pct, 2, true)}</span>
              </div>
              <button className="watch-action" type="button" onClick={toggleWatchlist}>
                {isSaved ? <BookmarkMinus size={16} aria-hidden /> : <BookmarkPlus size={16} aria-hidden />}
                {isSaved ? "Remove" : "Save"}
              </button>
            </>
          ) : selectedTicker ? (
            <div className="empty-copy">{overviewState === "loading" ? "Fetching overview..." : "Search for another ticker."}</div>
          ) : (
            <div className="empty-copy">No ticker selected</div>
          )}
          {watchlistError && <div className="inline-note error-copy">{watchlistError}</div>}
        </section>

        <section className="watchlist">
          <div className="section-label">Watchlist</div>
          {watchlist.items.length === 0 && <div className="empty-copy">No saved tickers</div>}
          {watchlist.items.map((item) => (
            <button key={item.symbol} type="button" className="watch-row" onClick={() => selectTicker(item.symbol)}>
              <span>{item.symbol}</span>
              <span>{fmtCurrency(item.quote?.price)}</span>
              <span className={deltaClass(item.quote?.change_pct)}>{fmtPct(item.quote?.change_pct, 2, true)}</span>
            </button>
          ))}
          <div className="watch-count">
            {watchlist.items.length}/{watchlist.limit}
          </div>
        </section>
      </aside>

      <section className="content">
        <MarketBar indices={market} />
        {!selectedTicker && <EmptyState watchlist={watchlist} onSelect={selectTicker} />}
        {selectedTicker && overviewState === "loading" && <div className="empty-panel">Loading {selectedTicker}...</div>}
        {selectedTicker && overviewState === "invalid" && <InvalidTickerState symbol={selectedTicker} onClear={clearTicker} />}
        {selectedTicker && overviewState === "error" && <div className="error-panel">{overviewError || "Ticker data unavailable"}</div>}
        {overview && overviewState === "ready" && (
          <article className="overview">
            <header className="company-header">
              <div>
                <div className="eyebrow">{overview.profile.exchange || "Ticker"}</div>
                <div className="header-title-row">
                  <h1>{overview.profile.name}</h1>
                  {overview.meta.is_partial && <span className="status-chip">Partial Data</span>}
                </div>
                <p>{identityLine(overview)}</p>
              </div>
              <div className="quote-block">
                <span>{fmtCurrency(overview.quote.price)}</span>
                <strong className={deltaClass(overview.quote.change_pct)}>{fmtPct(overview.quote.change_pct, 2, true)}</strong>
                <small>Prev close {fmtCurrency(overview.quote.prev_close)}</small>
              </div>
            </header>

            {overview.meta.is_partial && <div className="inline-note">Some fields are unavailable for this ticker. Available data is still shown below.</div>}

            <section className="signal-grid">
              {overview.signals.map((signal) => (
                <div className={`signal ${signal.state}`} key={signal.key}>
                  <span>{signal.key}</span>
                  <strong>{signal.value}</strong>
                  <small>{signal.description}</small>
                </div>
              ))}
            </section>

            <section className="stat-grid">
              <Stat label="Market Cap" value={fmtLarge(overview.stats.market_cap)} missing={overview.stats.market_cap == null} />
              <Stat label="P/E TTM" value={fmtNumber(overview.stats.trailing_pe)} missing={overview.stats.trailing_pe == null} />
              <Stat label="EPS TTM" value={fmtCurrency(overview.stats.trailing_eps)} missing={overview.stats.trailing_eps == null} />
              <Stat label="Volume" value={fmtNumber(overview.stats.volume, 0)} missing={overview.stats.volume == null} />
              <Stat label="Avg Volume" value={fmtNumber(overview.stats.average_volume, 0)} missing={overview.stats.average_volume == null} />
              <Stat label="Beta" value={fmtNumber(overview.stats.beta)} missing={overview.stats.beta == null} />
            </section>

            <section className="split-row">
              <RangeCard overview={overview} />
              <ShortInterest overview={overview} />
            </section>

            <section className="split-row">
              <ProfileCard overview={overview} />
              <SourceCard overview={overview} />
            </section>

            <section className="chart-shell">
              <div className="chart-head">
                <div>
                  <div className="section-label">Price History</div>
                  <strong>{overview.profile.symbol}</strong>
                </div>
                <div className="segmented">
                  {PERIODS.map((option) => (
                    <button key={option.key} type="button" className={period === option.key ? "active" : ""} onClick={() => setPeriod(option.key)}>
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>
              {chartState === "loading" && <div className="empty-panel compact-panel">Loading {period.toUpperCase()} history...</div>}
              {chartState === "error" && <div className="error-panel compact-panel">{chartError || "Could not load chart history"}</div>}
              {chartState === "ready" && <PriceChart symbol={overview.profile.symbol} points={history} />}
            </section>
          </article>
        )}
      </section>
    </main>
  );
}

function MarketBar({ indices }: { indices: MarketIndex[] }) {
  if (!indices.length) return <div className="market-bar empty">Market data unavailable</div>;
  return (
    <section className="market-bar">
      {indices.map((index) => (
        <div className="market-item" key={index.name}>
          <span>{index.name}</span>
          <strong>{fmtNumber(index.price)}</strong>
          <small className={deltaClass(index.change_pct)}>{fmtPct(index.change_pct, 2, true)}</small>
        </div>
      ))}
    </section>
  );
}

function EmptyState({ watchlist, onSelect }: { watchlist: WatchlistResponse; onSelect: (symbol: string) => void }) {
  return (
    <section className="empty-state">
      <h1>Overview</h1>
      {watchlist.items.length ? (
        <>
          <p>Select a saved ticker to load its company profile, quote, stats, and chart.</p>
          <div className="watch-table">
            {watchlist.items.map((item) => (
              <button key={item.symbol} type="button" onClick={() => onSelect(item.symbol)}>
                <span>{item.symbol}</span>
                <span>{fmtCurrency(item.quote?.price)}</span>
                <span className={deltaClass(item.quote?.change_pct)}>{fmtPct(item.quote?.change_pct, 2, true)}</span>
              </button>
            ))}
          </div>
        </>
      ) : (
        <p>Search for a ticker to begin.</p>
      )}
    </section>
  );
}

function InvalidTickerState({ symbol, onClear }: { symbol: string; onClear: () => void }) {
  return (
    <section className="error-panel invalid-state">
      <h1>{symbol}</h1>
      <p>This ticker could not be resolved to usable market data.</p>
      <button type="button" className="ghost-action" onClick={onClear}>
        Back to Search
      </button>
    </section>
  );
}

function Stat({ label, value, missing = false }: { label: string; value: string; missing?: boolean }) {
  return (
    <div className="stat">
      <span>{label}</span>
      <strong className={missing ? "missing-value" : undefined}>{missing ? "Unavailable" : value}</strong>
    </div>
  );
}

function RangeCard({ overview }: { overview: TickerOverview }) {
  const low = overview.range_52w.low;
  const high = overview.range_52w.high;
  const price = overview.range_52w.price;
  const pct = low != null && high != null && price != null && high > low ? Math.max(0, Math.min(100, ((price - low) / (high - low)) * 100)) : null;
  return (
    <div className="detail-panel">
      <div className="section-label">52 Week Range</div>
      {pct === null ? (
        <div className="empty-copy">Range unavailable</div>
      ) : (
        <>
          <div className="range-values">
            <span>{fmtCurrency(low)}</span>
            <strong>{fmtCurrency(price)}</strong>
            <span>{fmtCurrency(high)}</span>
          </div>
          <div className="range-rail">
            <span style={{ width: `${pct}%` }} />
            <i style={{ left: `${pct}%` }} />
          </div>
        </>
      )}
    </div>
  );
}

function ShortInterest({ overview }: { overview: TickerOverview }) {
  const short = overview.short_interest;
  return (
    <div className="detail-panel">
      <div className="section-label">Short Interest</div>
      <div className="mini-grid">
        <Stat label="Short Float" value={fmtPct(short.short_percent_of_float)} missing={short.short_percent_of_float == null} />
        <Stat label="Days Cover" value={fmtNumber(short.short_ratio)} missing={short.short_ratio == null} />
        <Stat label="Shares Short" value={fmtNumber(short.shares_short, 0)} missing={short.shares_short == null} />
        <Stat label="Prior Delta" value={fmtPct(short.shares_short_delta_pct, 1, true)} missing={short.shares_short_delta_pct == null} />
      </div>
    </div>
  );
}

function ProfileCard({ overview }: { overview: TickerOverview }) {
  return (
    <div className="detail-panel">
      <div className="section-label">Company Profile</div>
      <div className="profile-list">
        <div>
          <span>Sector</span>
          <strong className={!overview.profile.sector ? "missing-value" : undefined}>{overview.profile.sector || "Unavailable"}</strong>
        </div>
        <div>
          <span>Industry</span>
          <strong className={!overview.profile.industry ? "missing-value" : undefined}>{overview.profile.industry || "Unavailable"}</strong>
        </div>
        <div>
          <span>Website</span>
          {overview.profile.website ? (
            <a href={overview.profile.website} target="_blank" rel="noreferrer">
              {overview.profile.website}
            </a>
          ) : (
            <strong className="missing-value">Unavailable</strong>
          )}
        </div>
      </div>
      <p className={overview.profile.summary ? "profile-summary" : "profile-summary missing-value"}>
        {overview.profile.summary || "Business summary unavailable."}
      </p>
    </div>
  );
}

function SourceCard({ overview }: { overview: TickerOverview }) {
  const fields = Object.entries(overview.meta.sources).slice(0, 6);
  return (
    <div className="detail-panel">
      <div className="section-label">Data Quality</div>
      <div className="quality-copy">
        Status <strong>{overview.meta.status}</strong>
      </div>
      <div className="profile-list compact-list">
        {fields.length ? (
          fields.map(([field, source]) => (
            <div key={field}>
              <span>{field}</span>
              <strong>{source}</strong>
            </div>
          ))
        ) : (
          <div>
            <span>Sources</span>
            <strong className="missing-value">Unavailable</strong>
          </div>
        )}
      </div>
    </div>
  );
}

function identityLine(overview: TickerOverview) {
  const parts = [overview.profile.symbol, overview.profile.sector, overview.profile.industry].filter(Boolean);
  return parts.length ? parts.join(" · ") : overview.profile.symbol;
}