import Link from "next/link";
import { ArrowRight, BookOpen, CheckCircle2, Circle, KeyRound, Play } from "lucide-react";
import { PLAN_LIMITS, isUnlimited, normalizePlan } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { formatBytes, formatCompact, formatMs, formatNumber, formatPercent, formatUsd, formatDateOnly } from "@/lib/format";
import { getActiveSessionCount, getMonthStats, getNetworkDistribution, getOnboardingState, getRecentRequests, getRequestSeries, type Scope } from "@/lib/queries/dashboard";
import { PageHeader, SectionTitle } from "@/components/ui/page-header";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Badge } from "@/components/ui/badge";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { ChartFrame } from "@/components/dashboard/charts/chart-frame";
import { RequestsBarChart } from "@/components/dashboard/charts/requests-bar-chart";
import { NetworkDonut } from "@/components/dashboard/charts/network-donut";
import { QuotaBar } from "@/components/dashboard/charts/quota-bar";
import { RequestsTable } from "@/components/dashboard/requests/requests-table";

export const dynamic = "force-dynamic";

export default async function DashboardOverviewPage({ 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 now = new Date();
  const monthStart = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1));
  const thirtyDaysAgo = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 29));

  const [month, series, network, recent, onboarding, activeSessions] = await Promise.all([
    getMonthStats(scope, monthStart),
    getRequestSeries(scope, thirtyDaysAgo, "day"),
    getNetworkDistribution(scope, thirtyDaysAgo),
    getRecentRequests(scope, 8),
    getOnboardingState(scope),
    getActiveSessionCount(scope),
  ]);

  const limits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];
  const unlimited = isUnlimited(limits);
  const projectLimit = ws.project.monthlyRequestLimit;
  const effectiveLimit = projectLimit && (unlimited || projectLimit < limits.monthly_requests) ? projectLimit : unlimited ? null : limits.monthly_requests;
  const firstName = ws.user.name?.trim().split(/\s+/)[0] || ws.user.email.split("@")[0];
  const verified = sp.verified === "1";
  const seriesHasData = series.some((p) => p.success + p.failed > 0);
  const onboardingDone = onboarding.hasApiKey && onboarding.hasRequest;
  const softLimit = ws.project.softLimitUsd ?? ws.organization.softLimitUsd ?? null;
  const hardLimit = ws.project.hardLimitUsd ?? ws.organization.hardLimitUsd ?? null;
  const limitSource = ws.project.softLimitUsd !== null || ws.project.hardLimitUsd !== null ? "project" : "organization";

  return (
    <div className="flex flex-col gap-6">
      {verified ? (
        <Alert variant="success" title="Email verified">
          Production API access is unlocked for this organization.
        </Alert>
      ) : null}

      <PageHeader
        eyebrow={
          <>
            {ws.project.name} · {ws.project.environment}
          </>
        }
        title={
          <span className="inline-flex flex-wrap items-center gap-2.5">
            Welcome back, {firstName}
            <Badge variant="accent">{limits.label} plan</Badge>
          </span>
        }
        description={`Here is what happened in ${ws.project.name} since ${formatDateOnly(monthStart)}. Figures reflect requests billed to this project.`}
        actions={
          <>
            <Button asChild variant="outline" size="sm">
              <Link href="/dashboard/requests">View requests</Link>
            </Button>
            <Button asChild variant="primary" size="sm">
              <Link href="/dashboard/playground">
                <Play /> Open Playground
              </Link>
            </Button>
          </>
        }
      />

      {!onboardingDone ? (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Getting started</CardTitle>
            <CardDescription>Three steps to your first routed request. This card disappears once they are all done.</CardDescription>
          </CardHeader>
          <CardContent>
            <ol className="divide-y divide-border">
              {[
                { done: onboarding.hasApiKey, icon: KeyRound, title: "Create an API key", body: "Keys are shown once at creation. Use a test key while you explore.", href: "/dashboard/api-keys", cta: "Create key" },
                { done: onboarding.hasRequest, icon: Play, title: "Run your first request", body: "Try the Playground or send a POST /v1/fetch with cURL.", href: "/dashboard/playground", cta: "Open Playground" },
                { done: false, icon: BookOpen, title: "Read the quickstart", body: "Five minutes on routing, network classes, sessions and error codes.", href: "/docs/quickstart", cta: "Read docs", external: true },
              ].map((step) => (
                <li key={step.title} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                  {step.done ? <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-success" aria-label="Done" /> : <Circle className="mt-0.5 size-4 shrink-0 text-fg-subtle" aria-label="To do" />}
                  <div className="min-w-0 flex-1">
                    <div className={`text-[13.5px] font-medium ${step.done ? "text-fg-muted line-through decoration-fg-subtle" : ""}`}>{step.title}</div>
                    <p className="text-[12.5px] text-fg-muted">{step.body}</p>
                  </div>
                  {!step.done ? (
                    <Button asChild variant="ghost" size="sm" className="shrink-0">
                      <Link href={step.href} target={step.external ? "_blank" : undefined}>
                        {step.cta} <ArrowRight />
                      </Link>
                    </Button>
                  ) : null}
                </li>
              ))}
            </ol>
          </CardContent>
        </Card>
      ) : null}

      <section aria-label="This month">
        <StatGrid cols={6}>
          <Stat label="Requests" value={formatNumber(month.total)} hint="this month" />
          <Stat label="Successful" value={formatNumber(month.successful)} hint={month.failed ? `${formatNumber(month.failed)} failed` : "no failures"} />
          <Stat label="Success rate" value={month.successRate === null ? "—" : formatPercent(month.successRate)} hint="of completed requests" />
          <Stat label="Bandwidth" value={formatBytes(month.bytes)} hint="in + out" />
          <Stat label="Estimated spend" value={formatUsd(month.spendUsd)} hint="billed usage" />
          <Stat label="Avg latency" value={formatMs(month.avgLatencyMs)} hint="end to end" />
        </StatGrid>
        <StatGrid cols={5} className="mt-3">
          <Stat label="P50 latency" value={formatMs(month.p50)} />
          <Stat label="P95 latency" value={formatMs(month.p95)} />
          <Stat label="P99 latency" value={formatMs(month.p99)} />
          <Stat label="Attempts / request" value={month.avgAttempts === null ? "—" : month.avgAttempts.toFixed(2)} hint="routes tried on average" />
          <Stat label="Active sessions" value={formatNumber(activeSessions)} hint={<Link href="/dashboard/sessions" className="underline-offset-4 hover:underline">manage</Link>} />
        </StatGrid>
      </section>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle>Quota and limits</CardTitle>
          <CardDescription>
            {unlimited ? "Requests are unlimited on this private platform" : `Monthly request allowance on the ${limits.label} plan`}
            {projectLimit ? ` (project cap: ${formatNumber(projectLimit)})` : ""}. Spending limits stop new requests with <code className="font-mono text-[12px]">USAGE_LIMIT_REACHED</code>.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-6 lg:grid-cols-2">
          <QuotaBar label="Requests this month" used={month.total} limit={effectiveLimit} unlimited={effectiveLimit === null} usedLabel={formatNumber(month.total)} limitLabel={effectiveLimit ? formatCompact(effectiveLimit) : undefined} hint={effectiveLimit ? `${formatNumber(Math.max(0, effectiveLimit - month.total))} remaining` : "no monthly cap"} />
          <div className="grid grid-cols-2 gap-4 text-[13px]">
            <div>
              <div className="text-[12px] font-medium text-fg-subtle">Soft limit</div>
              <div className="mt-1 font-mono tabular text-[15px]">{softLimit === null ? <span className="text-fg-subtle">not set</span> : formatUsd(softLimit)}</div>
              <div className="text-[11.5px] text-fg-subtle">{softLimit === null ? "alerts only" : `${limitSource} · email alert`}</div>
            </div>
            <div>
              <div className="text-[12px] font-medium text-fg-subtle">Hard limit</div>
              <div className="mt-1 font-mono tabular text-[15px]">{hardLimit === null ? <span className="text-fg-subtle">not set</span> : formatUsd(hardLimit)}</div>
              <div className="text-[11.5px] text-fg-subtle">{hardLimit === null ? "requests never blocked" : `${limitSource} · blocks requests`}</div>
            </div>
            <div className="col-span-2 text-[12px] text-fg-subtle">
              Spend so far: <span className="font-mono tabular text-fg">{formatUsd(month.spendUsd)}</span>
              {hardLimit ? <> of {formatUsd(hardLimit)} ({formatPercent(Math.min(100, (month.spendUsd / hardLimit) * 100), 0)})</> : null} ·{" "}
              <Link href="/dashboard/projects" className="underline-offset-4 hover:underline">
                Edit limits
              </Link>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 lg:grid-cols-3">
        <ChartFrame
          className="lg:col-span-2"
          title="Requests per day"
          description="Last 30 days, UTC. Successful and failed requests stacked."
          empty={!seriesHasData}
          emptyMessage="No requests in the last 30 days."
          table={{ columns: ["Day", "Successful", "Failed"], rows: series.filter((p) => p.success + p.failed > 0).map((p) => [p.t.slice(0, 10), p.success, p.failed]) }}
        >
          <RequestsBarChart data={series} bucket="day" height={240} />
        </ChartFrame>
        <ChartFrame title="Network distribution" description="Resolved network class, last 30 days." empty={network.resolved === 0} emptyMessage="No routed requests yet.">
          <NetworkDonut data={network.shares} />
          {network.unresolved > 0 ? <p className="mt-3 text-[11.5px] text-fg-subtle">{formatNumber(network.unresolved)} request(s) failed before a network was selected and are not counted.</p> : null}
        </ChartFrame>
      </div>

      <section>
        <SectionTitle
          right={
            <Link href="/dashboard/requests" className="text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
              All requests <ArrowRight className="ml-0.5 inline size-3.5" />
            </Link>
          }
        >
          Recent requests
        </SectionTitle>
        {recent.length ? (
          <Card className="overflow-hidden">
            <RequestsTable rows={recent} compact />
          </Card>
        ) : (
          <EmptyState
            compact
            icon={Play}
            title="No requests yet"
            description="Send your first request from the Playground or with an API key. Each request shows up here with its route, latency and cost."
            action={
              <>
                <Button asChild size="sm" variant="primary">
                  <Link href="/dashboard/playground">Open Playground</Link>
                </Button>
                <Button asChild size="sm" variant="outline">
                  <Link href="/docs/quickstart">Quickstart</Link>
                </Button>
              </>
            }
          />
        )}
      </section>
    </div>
  );
}