"use client";

import { useState } from "react";
import { PageHeader, StatTile, Card, Spinner, ErrorState } from "@/components/ui";
import { EarningsChart } from "@/components/EarningsChart";
import { useApi } from "@/hooks/useApi";
import { api } from "@/lib/api";
import { useLocale } from "@/i18n/LocaleProvider";
import { useSession } from "@/session/SessionProvider";
import { TranslationKey } from "@/i18n/dictionaries";

const PERIODS: { days: number; labelKey: TranslationKey }[] = [
  { days: 7, labelKey: "earnings.period.7" },
  { days: 30, labelKey: "earnings.period.30" },
  { days: 90, labelKey: "earnings.period.90" },
];

export default function EarningsPage() {
  const { t } = useLocale();
  const { investorId, ready } = useSession();

  if (!ready) return <Spinner />;
  if (!investorId) {
    return (
      <div>
        <PageHeader titleKey="earnings.title" />
        <Card>
          <p className="text-sm text-muted">{t("session.needed")}</p>
        </Card>
      </div>
    );
  }
  return <Earnings investorId={investorId} />;
}

function Earnings({ investorId }: { investorId: string }) {
  const { t, locale } = useLocale();
  const [days, setDays] = useState(30);

  const { data, loading, error, reload } = useApi(() => {
    const end = new Date();
    const start = new Date(end.getTime() - days * 86_400_000);
    return api.earnings(investorId, start.toISOString(), end.toISOString());
  }, [investorId, days]);

  const money = (n: number, currency: string) =>
    new Intl.NumberFormat(locale === "ar" ? "ar-SA" : "en-GB", {
      style: "currency",
      currency,
    }).format(n);

  const day = (iso: string) =>
    new Date(iso).toLocaleDateString(locale === "ar" ? "ar-SA" : "en-GB", {
      weekday: "short",
      day: "numeric",
      month: "short",
    });

  return (
    <div>
      <PageHeader titleKey="earnings.title" />

      {/* Period filter, one row above the chart */}
      <div className="mb-6 flex items-center gap-2">
        <span className="text-sm text-muted">{t("earnings.period")}:</span>
        {PERIODS.map((p) => (
          <button
            key={p.days}
            onClick={() => setDays(p.days)}
            className={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${
              days === p.days
                ? "bg-brand-soft/50 text-brand-ink"
                : "border border-line bg-surface text-foreground hover:bg-background"
            }`}
          >
            {t(p.labelKey)}
          </button>
        ))}
      </div>

      {loading && <Spinner />}
      {!loading && !!error && <ErrorState onRetry={reload} />}

      {!loading && !error && data && (
        <div className="space-y-6">
          <div className="grid grid-cols-2 gap-4 md:max-w-sm">
            <StatTile
              label={t("earnings.total")}
              value={money(data.total, data.currency)}
              accent
            />
          </div>

          <Card>
            <div className="mb-4 text-sm font-semibold">{t("earnings.daily")}</div>
            {data.daily.length > 0 ? (
              <EarningsChart data={data.daily} currency={data.currency} />
            ) : (
              <p className="text-sm text-muted">{t("earnings.empty")}</p>
            )}
          </Card>

          {data.daily.length > 0 && (
            <Card className="overflow-x-auto p-0">
              <table className="w-full text-start text-sm">
                <thead className="border-b border-line text-xs text-muted">
                  <tr>
                    <th className="px-4 py-3 text-start font-medium">{t("earnings.day")}</th>
                    <th className="px-4 py-3 text-end font-medium">{t("earnings.amount")}</th>
                  </tr>
                </thead>
                <tbody>
                  {data.daily.map((d) => (
                    <tr key={d.day} className="border-b border-line last:border-0">
                      <td className="px-4 py-2.5">{day(d.day)}</td>
                      <td className="px-4 py-2.5 text-end tabular-nums">
                        {money(d.amount, data.currency)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          )}
        </div>
      )}
    </div>
  );
}