"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus } from "lucide-react";
import { COUNTRIES } from "@fetcha/core/client";
import { createDashboardSession, type DashboardSession } from "@/actions/sessions";
import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Field, FieldError, Hint, Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Alert } from "@/components/ui/alert";
import { CodeBlock } from "@/components/ui/code-block";
import { CopyButton } from "@/components/ui/copy-button";
import { Badge } from "@/components/ui/badge";

const ANY = "__any__";

function curlFor(sessionId: string, apiBase: string, country?: string): string {
  const body: Record<string, unknown> = { url: "https://example.com", session: sessionId };
  if (country) body.country = country;
  return `curl -X POST ${apiBase}/v1/fetch \\
  -H "Authorization: Bearer fch_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '${JSON.stringify(body)}'`;
}

export function CreateSessionDialog({ apiBase, defaultCountry }: { apiBase: string; defaultCountry?: string | null }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  const [created, setCreated] = React.useState<DashboardSession | null>(null);

  const [country, setCountry] = React.useState<string>(defaultCountry && defaultCountry in COUNTRIES ? defaultCountry : ANY);
  const [network, setNetwork] = React.useState<string>("auto");
  const [region, setRegion] = React.useState("");
  const [city, setCity] = React.useState("");
  const [ttl, setTtl] = React.useState(600);
  const [label, setLabel] = React.useState("");

  function reset() {
    setError(null);
    setCreated(null);
    setRegion("");
    setCity("");
    setTtl(600);
    setLabel("");
    setNetwork("auto");
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    startTransition(async () => {
      const res = await createDashboardSession({
        country: country === ANY ? undefined : country,
        region: region || undefined,
        city: city || undefined,
        network: network as "auto" | "residential",
        ttl,
        label: label || undefined,
      });
      if (!res.ok) {
        setError(res.error);
        return;
      }
      setCreated(res.data ?? null);
      router.refresh();
    });
  }

  const ttlLabel = ttl >= 60 ? `${Math.floor(ttl / 60)} min${ttl % 60 ? ` ${ttl % 60} s` : ""}` : `${ttl} s`;

  return (
    <Dialog
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) reset();
      }}
    >
      <DialogTrigger asChild>
        <Button variant="primary" size="sm">
          <Plus /> Create session
        </Button>
      </DialogTrigger>
      <DialogContent size="lg">
        {created ? (
          <>
            <DialogHeader>
              <DialogTitle>Session created</DialogTitle>
              <DialogDescription>
                Pass this id as <code className="font-mono">session</code> in each request. It keeps the same exit IP and cookies until it expires or you close it.
              </DialogDescription>
            </DialogHeader>
            <div className="flex items-center gap-2 rounded-md border border-border bg-bg-subtle px-3 py-2">
              <code className="min-w-0 flex-1 truncate font-mono text-[13px]">{created.id}</code>
              <Badge variant="success" dot>
                {created.status}
              </Badge>
              <CopyButton value={created.id} label="Copy" />
            </div>
            <dl className="grid grid-cols-3 gap-3 text-[12.5px]">
              <div>
                <dt className="text-fg-subtle">Network</dt>
                <dd className="font-medium">{created.network}</dd>
              </div>
              <div>
                <dt className="text-fg-subtle">Country</dt>
                <dd className="font-mono">{created.country ?? "any"}</dd>
              </div>
              <div>
                <dt className="text-fg-subtle">Expires</dt>
                <dd className="font-mono">{new Date(created.expires_at).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}</dd>
              </div>
            </dl>
            <CodeBlock code={curlFor(created.id, apiBase, created.country ?? undefined)} lang="bash" title="Use it in a request" />
            <DialogFooter>
              <Button variant="outline" onClick={() => reset()}>
                Create another
              </Button>
              <DialogClose asChild>
                <Button>Done</Button>
              </DialogClose>
            </DialogFooter>
          </>
        ) : (
          <form onSubmit={submit} className="contents">
            <DialogHeader>
              <DialogTitle>Create a sticky session</DialogTitle>
              <DialogDescription>A session pins one exit IP and carries cookies across requests, for logins, carts and paginated crawls. Sessions live 1 to 30 minutes.</DialogDescription>
            </DialogHeader>
            {error ? <Alert variant="danger">{error}</Alert> : null}
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="s-country">Country</Label>
                <Select value={country} onValueChange={setCountry}>
                  <SelectTrigger id="s-country">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={ANY}>Any country</SelectItem>
                    {Object.entries(COUNTRIES).map(([code, name]) => (
                      <SelectItem key={code} value={code}>
                        <span className="font-mono text-[12px] text-fg-subtle">{code}</span> {name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </Field>
              <Field>
                <Label htmlFor="s-network">Network</Label>
                <Select value={network} onValueChange={setNetwork}>
                  <SelectTrigger id="s-network">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">Auto (recommended)</SelectItem>
                    <SelectItem value="residential">Residential</SelectItem>
                    <SelectItem value="datacenter" disabled>
                      Datacenter — coming soon
                    </SelectItem>
                    <SelectItem value="isp" disabled>
                      ISP — coming soon
                    </SelectItem>
                    <SelectItem value="mobile" disabled>
                      Mobile — coming soon
                    </SelectItem>
                  </SelectContent>
                </Select>
                <Hint>Auto resolves to residential today.</Hint>
              </Field>
              <Field>
                <Label htmlFor="s-region">Region (optional)</Label>
                <Input id="s-region" value={region} onChange={(e) => setRegion(e.target.value)} placeholder="quebec" maxLength={64} autoComplete="off" />
              </Field>
              <Field>
                <Label htmlFor="s-city">City (optional)</Label>
                <Input id="s-city" value={city} onChange={(e) => setCity(e.target.value)} placeholder="montreal" maxLength={128} autoComplete="off" />
              </Field>
              <Field className="sm:col-span-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="s-ttl">Time to live</Label>
                  <span className="font-mono tabular text-[12.5px] text-fg-muted">{ttlLabel}</span>
                </div>
                <div className="flex items-center gap-3">
                  <input id="s-ttl" type="range" min={60} max={1800} step={30} value={ttl} onChange={(e) => setTtl(Number(e.target.value))} className="h-1.5 flex-1 cursor-pointer appearance-none rounded-full bg-bg-muted accent-[var(--accent)]" aria-valuetext={ttlLabel} />
                  <Input type="number" min={60} max={1800} step={1} value={ttl} onChange={(e) => setTtl(Math.min(1800, Math.max(60, Number(e.target.value) || 60)))} className="w-24 font-mono" aria-label="TTL in seconds" />
                </div>
                <Hint>Seconds, 60–1800. The clock does not reset on use.</Hint>
              </Field>
              <Field className="sm:col-span-2">
                <Label htmlFor="s-label">Label (optional)</Label>
                <Input id="s-label" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="checkout-flow-ca" maxLength={128} autoComplete="off" />
                <FieldError />
              </Field>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button type="button" variant="ghost">
                  Cancel
                </Button>
              </DialogClose>
              <Button type="submit" variant="primary" loading={pending}>
                Create session
              </Button>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
}