import { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import type { CostByProviderModel, CostWindowSpendRow, QuotaWindow } from "@paperclipai/shared";
import { costsApi } from "../api/costs";
import { useCompany } from "../context/CompanyContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { EmptyState } from "../components/EmptyState";
import { PageSkeleton } from "../components/PageSkeleton";
import { ProviderQuotaCard } from "../components/ProviderQuotaCard";
import { PageTabBar } from "../components/PageTabBar";
import { formatCents, formatTokens, providerDisplayName } from "../lib/utils";
import { Identity } from "../components/Identity";
import { StatusBadge } from "../components/StatusBadge";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { DollarSign } from "lucide-react";
import { useDateRange, PRESET_LABELS, PRESET_KEYS } from "../hooks/useDateRange";

// sentinel used in query keys when no company is selected, to avoid polluting the cache
// with undefined/null entries before the early-return guard fires
const NO_COMPANY = "__none__";

// ---------- helpers ----------

/** current week mon-sun boundaries as iso strings */
function currentWeekRange(): { from: string; to: string } {
  const now = new Date();
  const day = now.getDay(); // 0 = Sun
  const diffToMon = day === 0 ? -6 : 1 - day;
  const mon = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diffToMon, 0, 0, 0, 0);
  const sun = new Date(mon.getFullYear(), mon.getMonth(), mon.getDate() + 6, 23, 59, 59, 999);
  return { from: mon.toISOString(), to: sun.toISOString() };
}

function ProviderTabLabel({ provider, rows }: { provider: string; rows: CostByProviderModel[] }) {
  const totalTokens = rows.reduce((s, r) => s + r.inputTokens + r.outputTokens, 0);
  const totalCost = rows.reduce((s, r) => s + r.costCents, 0);
  return (
    <span className="flex items-center gap-1.5">
      <span>{providerDisplayName(provider)}</span>
      <span className="text-xs text-muted-foreground font-mono">{formatTokens(totalTokens)}</span>
      <span className="text-xs text-muted-foreground">{formatCents(totalCost)}</span>
    </span>
  );
}

// ---------- page ----------

export function Costs() {
  const { selectedCompanyId } = useCompany();
  const { setBreadcrumbs } = useBreadcrumbs();

  const [mainTab, setMainTab] = useState<"spend" | "providers">("spend");
  const [activeProvider, setActiveProvider] = useState("all");

  const {
    preset,
    setPreset,
    customFrom,
    setCustomFrom,
    customTo,
    setCustomTo,
    from,
    to,
    customReady,
  } = useDateRange();

  useEffect(() => {
    setBreadcrumbs([{ label: "Costs" }]);
  }, [setBreadcrumbs]);

  // today as state so a scheduled effect can flip it at midnight, triggering a fresh weekRange
  const [today, setToday] = useState(() => new Date().toDateString());
  useEffect(() => {
    const msUntilMidnight = () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime() - now.getTime();
    };
    const timer = setTimeout(() => setToday(new Date().toDateString()), msUntilMidnight());
    return () => clearTimeout(timer);
  }, [today]);
  const weekRange = useMemo(() => currentWeekRange(), [today]);

  // ---------- spend tab queries (no polling — cost data doesn't change in real time) ----------

  const companyId = selectedCompanyId ?? NO_COMPANY;

  const { data: spendData, isLoading: spendLoading, error: spendError } = useQuery({
    queryKey: queryKeys.costs(companyId, from || undefined, to || undefined),
    queryFn: async () => {
      const [summary, byAgent, byProject] = await Promise.all([
        costsApi.summary(companyId, from || undefined, to || undefined),
        costsApi.byAgent(companyId, from || undefined, to || undefined),
        costsApi.byProject(companyId, from || undefined, to || undefined),
      ]);
      return { summary, byAgent, byProject };
    },
    enabled: !!selectedCompanyId && customReady,
  });

  // ---------- providers tab queries (polling — provider quota changes during agent runs) ----------

  const { data: providerData } = useQuery({
    queryKey: queryKeys.usageByProvider(companyId, from || undefined, to || undefined),
    queryFn: () => costsApi.byProvider(companyId, from || undefined, to || undefined),
    enabled: !!selectedCompanyId && customReady,
    refetchInterval: 30_000,
    staleTime: 10_000,
  });

  const { data: weekData } = useQuery({
    queryKey: queryKeys.usageByProvider(companyId, weekRange.from, weekRange.to),
    queryFn: () => costsApi.byProvider(companyId, weekRange.from, weekRange.to),
    enabled: !!selectedCompanyId,
    refetchInterval: 30_000,
    staleTime: 10_000,
  });

  const { data: windowData } = useQuery({
    queryKey: queryKeys.usageWindowSpend(companyId),
    queryFn: () => costsApi.windowSpend(companyId),
    enabled: !!selectedCompanyId,
    refetchInterval: 30_000,
    staleTime: 10_000,
  });

  const { data: quotaData } = useQuery({
    queryKey: queryKeys.usageQuotaWindows(companyId),
    queryFn: () => costsApi.quotaWindows(companyId),
    enabled: !!selectedCompanyId,
    // quota windows come from external provider apis; refresh every 5 minutes
    refetchInterval: 300_000,
    staleTime: 60_000,
  });

  // ---------- providers tab derived maps ----------

  const byProvider = useMemo(() => {
    const map = new Map<string, CostByProviderModel[]>();
    for (const row of providerData ?? []) {
      const arr = map.get(row.provider) ?? [];
      arr.push(row);
      map.set(row.provider, arr);
    }
    return map;
  }, [providerData]);

  const weekSpendByProvider = useMemo(() => {
    const map = new Map<string, number>();
    for (const row of weekData ?? []) {
      map.set(row.provider, (map.get(row.provider) ?? 0) + row.costCents);
    }
    return map;
  }, [weekData]);

  const windowSpendByProvider = useMemo(() => {
    const map = new Map<string, CostWindowSpendRow[]>();
    for (const row of windowData ?? []) {
      const arr = map.get(row.provider) ?? [];
      arr.push(row);
      map.set(row.provider, arr);
    }
    return map;
  }, [windowData]);

  const quotaWindowsByProvider = useMemo(() => {
    const map = new Map<string, QuotaWindow[]>();
    for (const result of quotaData ?? []) {
      if (result.ok && result.windows.length > 0) {
        map.set(result.provider, result.windows);
      }
    }
    return map;
  }, [quotaData]);

  // deficit notch: projected month-end spend vs pro-rata budget share (mtd only)
  // memoized to avoid stale closure reads when summary and byProvider arrive separately
  const deficitNotchByProvider = useMemo(() => {
    const map = new Map<string, boolean>();
    if (preset !== "mtd") return map;
    const budget = spendData?.summary.budgetCents ?? 0;
    if (budget <= 0) return map;
    const totalSpend = spendData?.summary.spendCents ?? 0;
    const now = new Date();
    const daysElapsed = now.getDate();
    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
    for (const [providerKey, rows] of byProvider) {
      const providerCostCents = rows.reduce((s, r) => s + r.costCents, 0);
      const providerShare = totalSpend > 0 ? providerCostCents / totalSpend : 0;
      const providerBudget = budget * providerShare;
      if (providerBudget <= 0) { map.set(providerKey, false); continue; }
      const burnRate = providerCostCents / Math.max(daysElapsed, 1);
      map.set(providerKey, providerCostCents + burnRate * (daysInMonth - daysElapsed) > providerBudget);
    }
    return map;
  }, [preset, spendData, byProvider]);

  const providers = useMemo(() => Array.from(byProvider.keys()), [byProvider]);

  // derive effective provider synchronously so the tab body never flashes blank.
  // when activeProvider is no longer in the providers list, fall back to "all".
  const effectiveProvider =
    activeProvider === "all" || providers.includes(activeProvider)
      ? activeProvider
      : "all";

  // write the fallback back into state so subsequent renders and user interactions
  // start from a consistent baseline — without this, activeProvider stays stale and
  // any future setActiveProvider call would re-derive from the wrong base value.
  useEffect(() => {
    if (effectiveProvider !== activeProvider) setActiveProvider("all");
  }, [effectiveProvider, activeProvider]);

  // ---------- provider tab items (memoized — contains jsx, recreating on every render
  // forces PageTabBar to diff the full item tree on every 30s poll tick).
  // totals are derived from byProvider (already memoized on providerData) so this memo
  // only rebuilds when the underlying data actually changes, not on every query refetch. ----------
  const providerTabItems = useMemo(() => {
    const allTokens = providers.reduce(
      (s, p) => s + (byProvider.get(p)?.reduce((a, r) => a + r.inputTokens + r.outputTokens, 0) ?? 0),
      0,
    );
    const allCents = providers.reduce(
      (s, p) => s + (byProvider.get(p)?.reduce((a, r) => a + r.costCents, 0) ?? 0),
      0,
    );
    return [
      {
        value: "all",
        label: (
          <span className="flex items-center gap-1.5">
            <span>All providers</span>
            {providers.length > 0 && (
              <>
                <span className="text-xs text-muted-foreground font-mono">
                  {formatTokens(allTokens)}
                </span>
                <span className="text-xs text-muted-foreground">
                  {formatCents(allCents)}
                </span>
              </>
            )}
          </span>
        ),
      },
      ...providers.map((p) => ({
        value: p,
        label: <ProviderTabLabel provider={p} rows={byProvider.get(p)!} />,
      })),
    ];
  }, [providers, byProvider]);

  // ---------- guard ----------

  if (!selectedCompanyId) {
    return <EmptyState icon={DollarSign} message="Select a company to view costs." />;
  }

  // ---------- render ----------

  return (
    <div className="space-y-6">
      {/* date range selector */}
      <div className="flex flex-wrap items-center gap-2">
        {PRESET_KEYS.map((p) => (
          <Button
            key={p}
            variant={preset === p ? "secondary" : "ghost"}
            size="sm"
            onClick={() => setPreset(p)}
          >
            {PRESET_LABELS[p]}
          </Button>
        ))}
        {preset === "custom" && (
          <div className="flex items-center gap-2 ml-2">
            <input
              type="date"
              value={customFrom}
              onChange={(e) => setCustomFrom(e.target.value)}
              className="h-8 border border-input bg-background px-2 text-sm text-foreground"
            />
            <span className="text-sm text-muted-foreground">to</span>
            <input
              type="date"
              value={customTo}
              onChange={(e) => setCustomTo(e.target.value)}
              className="h-8 border border-input bg-background px-2 text-sm text-foreground"
            />
          </div>
        )}
      </div>

      {/* main spend / providers tab switcher */}
      <Tabs value={mainTab} onValueChange={(v) => setMainTab(v as "spend" | "providers")}>
        <TabsList>
          <TabsTrigger value="spend">Spend</TabsTrigger>
          <TabsTrigger value="providers">Providers</TabsTrigger>
        </TabsList>

        {/* ── spend tab ─────────────────────────────────────────────── */}
        <TabsContent value="spend" className="mt-4 space-y-4">
          {spendLoading ? (
            <PageSkeleton variant="costs" />
          ) : preset === "custom" && !customReady ? (
            <p className="text-sm text-muted-foreground">Select a start and end date to load data.</p>
          ) : spendError ? (
            <p className="text-sm text-destructive">{(spendError as Error).message}</p>
          ) : spendData ? (
            <>
              {/* summary card */}
              <Card>
                <CardContent className="p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <p className="text-sm text-muted-foreground">{PRESET_LABELS[preset]}</p>
                    {spendData.summary.budgetCents > 0 && (
                      <p className="text-sm text-muted-foreground">
                        {spendData.summary.utilizationPercent}% utilized
                      </p>
                    )}
                  </div>
                  <p className="text-2xl font-bold">
                    {formatCents(spendData.summary.spendCents)}{" "}
                    <span className="text-base font-normal text-muted-foreground">
                      {spendData.summary.budgetCents > 0
                        ? `/ ${formatCents(spendData.summary.budgetCents)}`
                        : "Unlimited budget"}
                    </span>
                  </p>
                  {spendData.summary.budgetCents > 0 && (
                    <div className="w-full h-2 border border-border overflow-hidden">
                      <div
                        className={`h-full transition-[width,background-color] duration-150 ${
                          spendData.summary.utilizationPercent > 90
                            ? "bg-red-400"
                            : spendData.summary.utilizationPercent > 70
                              ? "bg-yellow-400"
                              : "bg-green-400"
                        }`}
                        style={{ width: `${Math.min(100, spendData.summary.utilizationPercent)}%` }}
                      />
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* by agent / by project */}
              <div className="grid md:grid-cols-2 gap-4">
                <Card>
                  <CardContent className="p-4">
                    <h3 className="text-sm font-semibold mb-3">By Agent</h3>
                    {spendData.byAgent.length === 0 ? (
                      <p className="text-sm text-muted-foreground">No cost events yet.</p>
                    ) : (
                      <div className="space-y-2">
                        {spendData.byAgent.map((row) => (
                          <div
                            key={row.agentId}
                            className="flex items-start justify-between text-sm"
                          >
                            <div className="flex items-center gap-2 min-w-0">
                              <Identity name={row.agentName ?? row.agentId} size="sm" />
                              {row.agentStatus === "terminated" && (
                                <StatusBadge status="terminated" />
                              )}
                            </div>
                            <div className="text-right shrink-0 ml-2">
                              <span className="font-medium block">{formatCents(row.costCents)}</span>
                              <span className="text-xs text-muted-foreground block">
                                in {formatTokens(row.inputTokens)} / out {formatTokens(row.outputTokens)} tok
                              </span>
                              {(row.apiRunCount > 0 || row.subscriptionRunCount > 0) && (
                                <span className="text-xs text-muted-foreground block">
                                  {row.apiRunCount > 0 ? `api runs: ${row.apiRunCount}` : null}
                                  {row.apiRunCount > 0 && row.subscriptionRunCount > 0 ? " | " : null}
                                  {row.subscriptionRunCount > 0
                                    ? `subscription runs: ${row.subscriptionRunCount} (${formatTokens(row.subscriptionInputTokens)} in / ${formatTokens(row.subscriptionOutputTokens)} out tok)`
                                    : null}
                                </span>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="p-4">
                    <h3 className="text-sm font-semibold mb-3">By Project</h3>
                    {spendData.byProject.length === 0 ? (
                      <p className="text-sm text-muted-foreground">No project-attributed run costs yet.</p>
                    ) : (
                      <div className="space-y-2">
                        {spendData.byProject.map((row, i) => (
                          <div
                            key={row.projectId ?? `na-${i}`}
                            className="flex items-center justify-between text-sm"
                          >
                            <span className="truncate">
                              {row.projectName ?? row.projectId ?? "Unattributed"}
                            </span>
                            <span className="font-medium">{formatCents(row.costCents)}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            </>
          ) : null}
        </TabsContent>

        {/* ── providers tab ─────────────────────────────────────────── */}
        <TabsContent value="providers" className="mt-4">
          {preset === "custom" && !customReady ? (
            <p className="text-sm text-muted-foreground">Select a start and end date to load data.</p>
          ) : (
            <Tabs value={effectiveProvider} onValueChange={setActiveProvider}>
              <PageTabBar
                items={providerTabItems}
                value={effectiveProvider}
              />

              <TabsContent value="all" className="mt-4">
                {providers.length === 0 ? (
                  <p className="text-sm text-muted-foreground">No cost events in this period.</p>
                ) : (
                  <div className="grid md:grid-cols-2 gap-4">
                    {providers.map((p) => (
                      <ProviderQuotaCard
                        key={p}
                        provider={p}
                        rows={byProvider.get(p)!}
                        budgetMonthlyCents={spendData?.summary.budgetCents ?? 0}
                        totalCompanySpendCents={spendData?.summary.spendCents ?? 0}
                        weekSpendCents={weekSpendByProvider.get(p) ?? 0}
                        windowRows={windowSpendByProvider.get(p) ?? []}
                        showDeficitNotch={deficitNotchByProvider.get(p) ?? false}
                        quotaWindows={quotaWindowsByProvider.get(p) ?? []}
                      />
                    ))}
                  </div>
                )}
              </TabsContent>

              {providers.map((p) => (
                <TabsContent key={p} value={p} className="mt-4">
                  <ProviderQuotaCard
                    provider={p}
                    rows={byProvider.get(p)!}
                    budgetMonthlyCents={spendData?.summary.budgetCents ?? 0}
                    totalCompanySpendCents={spendData?.summary.spendCents ?? 0}
                    weekSpendCents={weekSpendByProvider.get(p) ?? 0}
                    windowRows={windowSpendByProvider.get(p) ?? []}
                    showDeficitNotch={deficitNotchByProvider.get(p) ?? false}
                    quotaWindows={quotaWindowsByProvider.get(p) ?? []}
                  />
                </TabsContent>
              ))}
            </Tabs>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}