import Link from "next/link";
import { Activity, ArrowRight } from "lucide-react";
import { PLAN_LIMITS, isUnlimited, normalizePlan } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { formatBytes, formatCompact, formatDate, formatDateOnly, formatNumber, formatUsd } from "@/lib/format";
import { getUsageMonth, lastMonths, type Scope } from "@/lib/queries/dashboard";
import { cn } from "@/lib/utils";
import { PageHeader, SectionTitle } from "@/components/ui/page-header";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { QuotaBar } from "@/components/dashboard/charts/quota-bar";

export const dynamic = "force-dynamic";

const GB = 1024 ** 3;

function formatQuantity(metric: string, quantity: number, unit: string): string {
  if (unit === "bytes") return formatBytes(quantity);
  if (unit === "seconds") return `${formatNumber(quantity, { maximumFractionDigits: 1 })} s`;
  if (metric === "request") return `${formatNumber(quantity)} req`;
  return formatNumber(quantity, { maximumFractionDigits: 2 });
}

function metricLabel(metric: string): string {
  switch (metric) {
    case "request":
      return "Request";
    case "bandwidth":
      return "Bandwidth";
    case "residential_bandwidth":
      return "Residential bandwidth";
    case "mobile_bandwidth":
      return "Mobile bandwidth";
    case "browser_seconds":
      return "Browser seconds";
    default:
      return metric.replace(/_/g, " ");
  }
}

export default async function UsagePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const [ws, sp] = await Promise.all([getWorkspace(), searchParams]);
  const scope: Scope = { organizationId: ws.organization.id, projectId: ws.project.id };
  const monthParam = Array.isArray(sp.month) ? sp.month[0] : sp.month;
  const usage = await getUsageMonth(scope, monthParam);
  const months = lastMonths(6);
  const isCurrent = usage.month === months[0]!.key;

  const limits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];
  const unlimited = isUnlimited(limits);
  const projectCap = ws.project.monthlyRequestLimit;
  const requestLimit = projectCap && (unlimited || projectCap < limits.monthly_requests) ? projectCap : unlimited ? null : limits.monthly_requests;
  const includedBytes = limits.included_gb * GB;
  const residentialUsed = usage.residentialBytes || usage.bandwidthBytes;

  const monthLabel = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric", timeZone: "UTC" }).format(usage.from);
  const hasData = usage.requests > 0 || usage.ledger.length > 0;

  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        title="Usage"
        description={`Usage for ${ws.project.name}. Fetcha is a private platform with no billing: amounts are internal cost estimates used only for optional spending limits. The ledger below is the source of truth.`}
        actions={
          <nav className="inline-flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1" aria-label="Month">
            {months.map((m) => (
              <Link
                key={m.key}
                href={m.key === months[0]!.key ? "/dashboard/usage" : `/dashboard/usage?month=${m.key}`}
                className={cn("inline-flex h-7 items-center rounded-[5px] px-2.5 text-[12.5px] font-medium transition-colors", m.key === usage.month ? "bg-bg text-fg shadow-xs" : "text-fg-muted hover:text-fg")}
                aria-current={m.key === usage.month ? "page" : undefined}
              >
                {m.label}
              </Link>
            ))}
          </nav>
        }
      />

      <section aria-label={monthLabel}>
        <SectionTitle right={<span className="text-[12px] text-fg-subtle">{isCurrent ? `Month to date · resets ${formatDateOnly(usage.to)}` : `${formatDateOnly(usage.from)} – ${formatDateOnly(new Date(usage.to.getTime() - 1))}`}</span>}>{monthLabel}</SectionTitle>
        <StatGrid cols={4}>
          <Stat label="Requests" value={formatNumber(usage.requests)} hint={requestLimit ? `of ${formatCompact(requestLimit)} included` : "unlimited"} />
          <Stat label="Successful" value={formatNumber(usage.successful)} hint={usage.requests ? `${((usage.successful / usage.requests) * 100).toFixed(1)}% of requests` : "—"} />
          <Stat label="Bandwidth" value={formatBytes(usage.bytes)} hint="transferred in + out" />
          <Stat label="Estimated spend" value={formatUsd(usage.spendUsd)} hint="internal estimate, not billed" />
        </StatGrid>
        <StatGrid cols={3} className="mt-3">
          <Stat label="Residential bandwidth" value={formatBytes(residentialUsed)} hint="no allowance cap" />
          <Stat label="Mobile bandwidth" value={formatBytes(usage.mobileBytes)} hint="no allowance cap" />
          <Stat label="Browser seconds" value={formatNumber(usage.browserSeconds)} hint={<Badge variant="success">live</Badge>} />
        </StatGrid>
      </section>

      <div className="grid gap-4 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Quotas</CardTitle>
            <CardDescription>{unlimited ? `No monthly quota on this private platform for ${monthLabel}; only a project cap you set yourself can limit requests.` : `Included allowances on the ${limits.label} plan for ${monthLabel}.`}</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-6 sm:grid-cols-2">
            <QuotaBar label="Requests" used={usage.requests} limit={requestLimit} unlimited={requestLimit === null} usedLabel={formatNumber(usage.requests)} limitLabel={requestLimit ? formatNumber(requestLimit) : undefined} hint={projectCap && requestLimit === projectCap ? "project cap" : requestLimit === null ? "unlimited" : "hard stop at the limit"} />
            <QuotaBar label="Residential bandwidth" used={residentialUsed} limit={includedBytes > 0 ? includedBytes : null} unlimited={includedBytes <= 0} usedLabel={formatBytes(residentialUsed)} limitLabel={includedBytes > 0 ? `${limits.included_gb} GB` : undefined} hint={includedBytes > 0 ? "included allowance" : "unmetered"} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              {limits.label} plan
              <Badge variant="solid">private platform</Badge>
            </CardTitle>
            <CardDescription>Limits that apply to every project in {ws.organization.name}. No billing.</CardDescription>
          </CardHeader>
          <CardContent>
            <dl className="divide-y divide-border text-[13px]">
              {[
                ["Requests / month", unlimited ? "Unlimited" : formatNumber(limits.monthly_requests)],
                ["Concurrency", formatNumber(limits.concurrency)],
                ["Max timeout", `${limits.max_timeout_ms / 1000} s`],
                ["Max retries", String(limits.max_retries)],
                ["Network classes", limits.networks.length === 4 ? "All" : limits.networks.join(", ")],
                ["Browser renders", `${limits.browser_concurrency} concurrent`],
                ["Crawl jobs", `${formatNumber(limits.crawl_max_pages)} pages · ${limits.crawl_concurrent_jobs} parallel`],
                ["Log retention", `${limits.retention_days} days`],
              ].map(([k, v]) => (
                <div key={k} className="flex items-center justify-between py-1.5">
                  <dt className="text-fg-muted">{k}</dt>
                  <dd className="font-mono tabular">{v}</dd>
                </div>
              ))}
            </dl>
            <Button asChild variant="outline" size="sm" className="mt-4 w-full">
              <Link href="/dashboard/billing">
                Plan &amp; access <ArrowRight />
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader className="flex-row items-start justify-between gap-3">
          <div>
            <CardTitle>Spending limits</CardTitle>
            <CardDescription>
              Soft limits email you; hard limits reject new requests with <code className="font-mono text-[12px]">USAGE_LIMIT_REACHED</code>. The stricter of project and organization applies.
            </CardDescription>
          </div>
          <div className="flex shrink-0 gap-2">
            <Button asChild variant="ghost" size="sm">
              <Link href="/dashboard/projects">Project limits</Link>
            </Button>
            <Button asChild variant="ghost" size="sm">
              <Link href="/dashboard/settings">Org limits</Link>
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Scope</TableHead>
                <TableHead className="text-right">Soft limit</TableHead>
                <TableHead className="text-right">Hard limit</TableHead>
                <TableHead className="text-right">Spend this month</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[
                { scope: `Project · ${ws.project.name}`, soft: ws.project.softLimitUsd, hard: ws.project.hardLimitUsd },
                { scope: `Organization · ${ws.organization.name}`, soft: ws.organization.softLimitUsd, hard: ws.organization.hardLimitUsd },
              ].map((r) => (
                <TableRow key={r.scope}>
                  <TableCell>{r.scope}</TableCell>
                  <TableCell className="text-right font-mono tabular">{r.soft === null ? <span className="text-fg-subtle">not set</span> : formatUsd(r.soft)}</TableCell>
                  <TableCell className="text-right font-mono tabular">{r.hard === null ? <span className="text-fg-subtle">not set</span> : formatUsd(r.hard)}</TableCell>
                  <TableCell className="text-right font-mono tabular">{formatUsd(usage.spendUsd)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {!hasData ? (
        <EmptyState
          icon={Activity}
          title={`No usage in ${monthLabel}`}
          description="Usage is metered per request the moment it completes. Send a request from the Playground or the API and it will show up here within seconds."
          action={
            <Button asChild size="sm" variant="primary">
              <Link href="/dashboard/playground">Open Playground</Link>
            </Button>
          }
        />
      ) : (
        <>
          <section>
            <SectionTitle>Daily usage</SectionTitle>
            <Card className="overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow className="hover:bg-transparent">
                    <TableHead>Day (UTC)</TableHead>
                    <TableHead className="text-right">Requests</TableHead>
                    <TableHead className="text-right">Bandwidth</TableHead>
                    <TableHead className="text-right">Spend</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {usage.daily.length === 0 ? (
                    <TableEmpty colSpan={4}>No usage events recorded for this month yet.</TableEmpty>
                  ) : (
                    usage.daily.map((d) => (
                      <TableRow key={d.day}>
                        <TableCell className="font-mono tabular">{d.day}</TableCell>
                        <TableCell className="text-right font-mono tabular">{formatNumber(d.requests)}</TableCell>
                        <TableCell className="text-right font-mono tabular">{formatBytes(d.bandwidthBytes)}</TableCell>
                        <TableCell className="text-right font-mono tabular">{formatUsd(d.spendUsd, true)}</TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </Card>
          </section>

          <section>
            <SectionTitle right={<span className="text-[12px] text-fg-subtle">Last 100 events · append-only, never edited</span>}>Usage ledger</SectionTitle>
            <Card className="overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow className="hover:bg-transparent">
                    <TableHead>Time</TableHead>
                    <TableHead>Metric</TableHead>
                    <TableHead className="text-right">Quantity</TableHead>
                    <TableHead className="text-right">Price</TableHead>
                    <TableHead>Request</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {usage.ledger.length === 0 ? (
                    <TableEmpty colSpan={5}>No ledger entries for this month.</TableEmpty>
                  ) : (
                    usage.ledger.map((e) => (
                      <TableRow key={e.id}>
                        <TableCell className="whitespace-nowrap text-fg-muted" title={e.createdAt.toISOString()}>
                          {formatDate(e.createdAt, { timeStyle: "medium" })}
                        </TableCell>
                        <TableCell>{metricLabel(e.metric)}</TableCell>
                        <TableCell className="text-right font-mono tabular">{formatQuantity(e.metric, e.quantity, e.unit)}</TableCell>
                        <TableCell className="text-right font-mono tabular">{formatUsd(e.priceUsd, true)}</TableCell>
                        <TableCell>
                          {e.requestId ? (
                            <Link href={`/dashboard/requests/${e.requestId}`} className="font-mono text-[12.5px] text-accent underline-offset-4 hover:underline" prefetch={false}>
                              {e.requestId}
                            </Link>
                          ) : (
                            <span className="text-fg-subtle">—</span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </Card>
            <p className="mt-2 text-[12px] text-fg-subtle">The ledger is immutable: corrections are posted as new entries, never by editing past ones. Prices are internal estimates used for spending limits only; nothing is invoiced on this platform.</p>
          </section>
        </>
      )}
    </div>
  );
}