import Link from "next/link";
import { Waypoints } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { API_PUBLIC_URL } from "@/lib/utils";
import { listProjectSessions, type Scope } from "@/lib/queries/dashboard";
import { PageHeader } from "@/components/ui/page-header";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { Stat, StatGrid } from "@/components/ui/stat";
import { CodeBlock } from "@/components/ui/code-block";
import { formatNumber } from "@/lib/format";
import { SessionsTable } from "@/components/dashboard/sessions/sessions-table";
import { CreateSessionDialog } from "@/components/dashboard/sessions/create-session-dialog";

export const dynamic = "force-dynamic";

const API_SNIPPET = `# 1. Create a session (60–1800 s)
curl -X POST ${API_PUBLIC_URL}/v1/sessions \\
  -H "Authorization: Bearer fch_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{ "country": "CA", "ttl": 600, "label": "checkout" }'
# → { "id": "sess_…", "status": "active", … }

# 2. Reuse it on every request that must share the same IP and cookies
curl -X POST ${API_PUBLIC_URL}/v1/fetch \\
  -H "Authorization: Bearer fch_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{ "url": "https://example.com/cart", "session": "sess_…" }'`;

export default async function SessionsPage() {
  const ws = await getWorkspace();
  const scope: Scope = { organizationId: ws.organization.id, projectId: ws.project.id };
  const rows = await listProjectSessions(scope);
  const active = rows.filter((r) => r.status === "active");
  const totalRequests = rows.reduce((a, r) => a + r.requestCount, 0);

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        title="Sessions"
        description={`Sticky sessions for ${ws.project.name}. A session keeps the same exit IP and cookie jar across requests until it expires or is closed.`}
        actions={<CreateSessionDialog apiBase={API_PUBLIC_URL} defaultCountry={ws.project.defaultCountry} />}
      />

      <StatGrid cols={3}>
        <Stat label="Active sessions" value={formatNumber(active.length)} hint="expire automatically" />
        <Stat label="Sessions created" value={formatNumber(rows.length)} hint="in this project" />
        <Stat label="Requests via sessions" value={formatNumber(totalRequests)} hint="all time" />
      </StatGrid>

      {rows.length ? (
        <Card className="overflow-hidden">
          <SessionsTable rows={rows} />
        </Card>
      ) : (
        <EmptyState
          icon={Waypoints}
          title="No sessions yet"
          description="Create one here to try it, or from your code with POST /v1/sessions. Sessions are optional: stateless requests get a fresh IP every time."
          action={<CreateSessionDialog apiBase={API_PUBLIC_URL} defaultCountry={ws.project.defaultCountry} />}
        />
      )}

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>How sessions work</CardTitle>
            <CardDescription>When to pin an IP, and when not to.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-[13px] leading-relaxed text-fg-muted">
            <p>
              <strong className="text-fg">Same IP, same cookies.</strong> Every request that passes <code className="font-mono">session: &quot;sess_…&quot;</code> is routed through the same exit IP in the requested country, and cookies set by the target are replayed automatically. Use it for logins, carts, multi-step forms and paginated listings that break when the visitor changes.
            </p>
            <p>
              <strong className="text-fg">Short-lived by design.</strong> TTL is 60 to 1800 seconds and does not extend on use. When a session expires or the IP is rotated away by the network, requests fail with <code className="font-mono">SESSION_EXPIRED</code>; create a new one and retry.
            </p>
            <p>
              <strong className="text-fg">Network class.</strong> Only <code className="font-mono">auto</code> and <code className="font-mono">residential</code> are available for sessions today. Datacenter, ISP and mobile are coming soon.
            </p>
            <p>
              <strong className="text-fg">Billing.</strong> Sessions are free; you pay for the requests and bandwidth that go through them. Closing a session early frees the sticky slot immediately.
            </p>
            <p className="text-fg-subtle">
              Requests made through a session are listed in <Link href="/dashboard/requests" className="underline-offset-4 hover:underline">Requests</Link> with the session id on the detail page.
            </p>
          </CardContent>
        </Card>
        <CodeBlock code={API_SNIPPET} lang="bash" title="Sessions from the API" className="self-start" />
      </div>
    </div>
  );
}