"use client";

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";

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

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

function Overview({ investorId }: { investorId: string }) {
  const { t, locale } = useLocale();
  const summary = useApi(() => api.summary(investorId), [investorId]);
  const earnings = useApi(() => {
    const end = new Date();
    const start = new Date(end.getTime() - 30 * 86_400_000);
    return api.earnings(investorId, start.toISOString(), end.toISOString());
  }, [investorId]);

  const loading = summary.loading || earnings.loading;
  const error = summary.error || earnings.error;

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

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

      {loading && <Spinner />}
      {!loading && !!error && (
        <ErrorState
          onRetry={() => {
            summary.reload();
            earnings.reload();
          }}
        />
      )}

      {!loading && !error && summary.data && (
        <div className="space-y-6">
          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            <StatTile
              label={t("overview.fleetShare")}
              value={`${summary.data.fleetSharePercent.toFixed(1)}%`}
              accent
            />
            <StatTile label={t("overview.ownedScooters")} value={summary.data.ownedScooterCount} />
            <StatTile label={t("overview.totalFleet")} value={summary.data.totalFleet} />
            <StatTile
              label={t("overview.totalEarnings")}
              value={money(summary.data.totalEarnings, summary.data.currency)}
            />
          </div>

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

          <p className="text-xs text-muted">{t("overview.privacy")}</p>
        </div>
      )}
    </div>
  );
}