"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, ArrowRight, Check, Code2, FolderKanban, KeyRound, Play, Route, ShieldCheck, Zap } from "lucide-react";
import type { CreatedKey } from "@/actions/api-keys";
import { completeOnboarding } from "@/actions/account";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Alert } from "@/components/ui/alert";
import { CodeBlock } from "@/components/ui/code-block";
import { cn } from "@/lib/utils";
import { curlSnippet } from "@/lib/account-snippets";
import { CreateKeyForm, type ProjectOption } from "@/components/dashboard/api-keys/create-key-dialog";
import { KeyReveal } from "@/components/dashboard/api-keys/key-reveal";
import { CreateProjectDialog } from "@/components/dashboard/projects/create-project-dialog";

const STEPS = [
  { id: "welcome", label: "Welcome", icon: Zap },
  { id: "project", label: "Project", icon: FolderKanban },
  { id: "key", label: "API key", icon: KeyRound },
  { id: "request", label: "First request", icon: Play },
  { id: "code", label: "Generated code", icon: Code2 },
] as const;

export function OnboardingFlow({
  projects,
  currentProject,
  hasKey,
  hasRequest,
  alreadyCompleted,
  userName,
}: {
  projects: ProjectOption[];
  currentProject: ProjectOption;
  hasKey: boolean;
  hasRequest: boolean;
  alreadyCompleted: boolean;
  userName: string;
}) {
  const router = useRouter();
  const [step, setStep] = React.useState(0);
  const [created, setCreated] = React.useState<CreatedKey | null>(null);
  const [finishing, startFinish] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);

  const keyReady = hasKey || Boolean(created);
  const apiKeyForSnippet = created?.plaintext ?? "fch_live_YOUR_API_KEY";
  const last = step === STEPS.length - 1;

  function finish() {
    setError(null);
    startFinish(async () => {
      const res = await completeOnboarding();
      if (!res.ok) {
        setError(res.error);
        return;
      }
      router.push("/dashboard");
      router.refresh();
    });
  }

  return (
    <div className="grid gap-6">
      {/* Progress */}
      <ol className="grid grid-cols-5 gap-2" aria-label="Onboarding progress">
        {STEPS.map((s, i) => {
          const done = i < step || (i === 1) || (i === 2 && keyReady) || (i === 3 && hasRequest);
          const active = i === step;
          const Icon = s.icon;
          return (
            <li key={s.id} className="grid gap-2">
              <button
                type="button"
                onClick={() => setStep(i)}
                className={cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12.5px] font-medium transition-colors hover:bg-bg-muted", active ? "text-fg" : "text-fg-muted")}
                aria-current={active ? "step" : undefined}
              >
                <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-full border text-[11px]", active ? "border-accent bg-accent text-accent-fg" : done && !active ? "border-success/40 bg-success-soft text-success" : "border-border bg-bg")}>
                  {done && !active ? <Check className="size-3.5" /> : <Icon className="size-3.5" />}
                </span>
                <span className="hidden truncate sm:inline">{s.label}</span>
              </button>
              <span className={cn("h-1 rounded-full", i <= step ? "bg-accent" : "bg-bg-muted")} aria-hidden />
            </li>
          );
        })}
      </ol>

      <div className="rounded-lg border border-border bg-bg-elevated p-6 shadow-xs sm:p-8">
        {alreadyCompleted && step === 0 ? <Alert variant="info" className="mb-6">You already finished onboarding — feel free to walk through it again.</Alert> : null}

        {step === 0 ? (
          <div className="grid gap-5">
            <div>
              <div className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Step 1 of 5</div>
              <h2 className="mt-1 text-xl font-semibold tracking-tight">Welcome to Fetcha{userName ? `, ${userName.split(" ")[0]}` : ""}</h2>
              <p className="mt-2 max-w-xl text-[13.5px] leading-relaxed text-fg-muted">One API that fetches any public web page for you, choosing the right network and location automatically, retrying when a target blocks, and returning clean HTML, text or JSON.</p>
            </div>
            <ul className="grid gap-3 sm:grid-cols-3">
              {[
                { icon: Route, title: "Intelligent routing", desc: "Every request is scored on success history, cost, latency, network health and geography, then escalated only when needed." },
                { icon: ShieldCheck, title: "Built-in resilience", desc: "Retries with a fresh IP or alternate network, circuit breakers per domain and sticky sessions when you need the same identity." },
                { icon: Code2, title: "Developer first", desc: "A single POST /v1/fetch, request IDs on every call, a Playground that writes your code, and SDKs for JS and Python." },
              ].map((b) => (
                <li key={b.title} className="rounded-md border border-border bg-bg p-4">
                  <b.icon className="size-4 text-accent" aria-hidden />
                  <div className="mt-2 text-[13.5px] font-medium">{b.title}</div>
                  <div className="mt-1 text-[12.5px] leading-relaxed text-fg-muted">{b.desc}</div>
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        {step === 1 ? (
          <div className="grid gap-5">
            <div>
              <div className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Step 2 of 5</div>
              <h2 className="mt-1 text-xl font-semibold tracking-tight">Create your first project</h2>
              <p className="mt-2 max-w-xl text-[13.5px] leading-relaxed text-fg-muted">Projects separate keys, logs, defaults and spending limits. We created one for you — keep it or add another for a different environment.</p>
            </div>
            <div className="flex flex-col gap-3 rounded-md border border-border bg-bg p-4 sm:flex-row sm:items-center">
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="text-[14px] font-medium">{currentProject.name}</span>
                  <Badge variant={currentProject.environment === "production" ? "success" : "warning"}>{currentProject.environment}</Badge>
                  <Badge variant="accent" dot>
                    Current
                  </Badge>
                </div>
                <div className="mt-0.5 font-mono text-[11.5px] text-fg-subtle">{currentProject.id}</div>
              </div>
              <div className="flex items-center gap-2">
                <Button asChild variant="ghost" size="sm">
                  <Link href={`/dashboard/projects/${currentProject.id}`}>Edit defaults</Link>
                </Button>
                <CreateProjectDialog
                  redirectToDetail={false}
                  trigger={
                    <Button variant="outline" size="sm">
                      New project
                    </Button>
                  }
                />
              </div>
            </div>
            {projects.length > 1 ? <p className="text-[12.5px] text-fg-subtle">You have {projects.length} projects. The current one is used for the key in the next step.</p> : null}
          </div>
        ) : null}

        {step === 2 ? (
          <div className="grid gap-5">
            <div>
              <div className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Step 3 of 5</div>
              <h2 className="mt-1 text-xl font-semibold tracking-tight">Generate an API key</h2>
              <p className="mt-2 max-w-xl text-[13.5px] leading-relaxed text-fg-muted">Keys are shown once and stored hashed. This one gets the default scopes for fetching, sessions and usage.</p>
            </div>
            {created ? (
              <KeyReveal plaintext={created.plaintext} name={created.name} compact />
            ) : hasKey ? (
              <Alert
                variant="success"
                title="You already have an active key"
                action={
                  <Button asChild variant="outline" size="xs">
                    <Link href="/dashboard/api-keys">Manage keys</Link>
                  </Button>
                }
              >
                Continue with it, or create another one below for this walkthrough.
              </Alert>
            ) : null}
            {!created ? (
              <div className="rounded-md border border-border bg-bg p-4">
                <CreateKeyForm projects={projects} defaultProjectId={currentProject.id} onCreated={setCreated} compact defaultName="Getting started" submitLabel="Generate key" />
              </div>
            ) : null}
          </div>
        ) : null}

        {step === 3 ? (
          <div className="grid gap-5">
            <div>
              <div className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Step 4 of 5</div>
              <h2 className="mt-1 text-xl font-semibold tracking-tight">Run your first request</h2>
              <p className="mt-2 max-w-xl text-[13.5px] leading-relaxed text-fg-muted">
                Paste this in a terminal. {created ? "It already contains the key you just created." : "Replace the placeholder with your key."} The response includes <code className="font-mono text-[12.5px]">request_id</code>, the page content and routing metadata.
              </p>
            </div>
            {hasRequest ? <Alert variant="success">Nice — this organization has already made requests. The Requests page shows every one of them.</Alert> : null}
            <CodeBlock code={curlSnippet(apiKeyForSnippet)} lang="bash" title="terminal" />
            <div className="flex flex-wrap items-center gap-2">
              <Button asChild variant="outline" size="sm">
                <Link href="/dashboard/playground">
                  <Play /> Try it in the Playground
                </Link>
              </Button>
              <Button asChild variant="ghost" size="sm">
                <Link href="/dashboard/requests">View requests</Link>
              </Button>
            </div>
          </div>
        ) : null}

        {step === 4 ? (
          <div className="grid gap-5">
            <div>
              <div className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Step 5 of 5</div>
              <h2 className="mt-1 text-xl font-semibold tracking-tight">Get generated code</h2>
              <p className="mt-2 max-w-xl text-[13.5px] leading-relaxed text-fg-muted">The Playground writes the request in cURL, JavaScript, Python, Go, PHP, Ruby, Java and C# as you configure it. Copy it straight into your project.</p>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              <Link href="/dashboard/playground?tab=code" className="group rounded-md border border-border bg-bg p-4 transition-colors hover:border-border-strong">
                <Code2 className="size-4 text-accent" aria-hidden />
                <div className="mt-2 flex items-center gap-1 text-[13.5px] font-medium">
                  Playground · Code tab <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
                </div>
                <div className="mt-1 text-[12.5px] text-fg-muted">Snippets stay in sync with the request you build.</div>
              </Link>
              <Link href="/docs" className="group rounded-md border border-border bg-bg p-4 transition-colors hover:border-border-strong">
                <ShieldCheck className="size-4 text-accent" aria-hidden />
                <div className="mt-2 flex items-center gap-1 text-[13.5px] font-medium">
                  Documentation <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
                </div>
                <div className="mt-1 text-[12.5px] text-fg-muted">API reference, error codes, sessions, SDK install from source.</div>
              </Link>
            </div>
            {error ? <Alert variant="danger">{error}</Alert> : null}
          </div>
        ) : null}

        <div className="mt-8 flex items-center justify-between border-t border-border pt-5">
          <Button variant="ghost" size="sm" onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0 || finishing}>
            <ArrowLeft /> Back
          </Button>
          <div className="flex items-center gap-2">
            {!last ? (
              <Button variant="link" size="sm" onClick={finish} disabled={finishing} className="text-fg-muted">
                Skip for now
              </Button>
            ) : null}
            {last ? (
              <Button variant="primary" onClick={finish} loading={finishing}>
                Finish <Check />
              </Button>
            ) : (
              <Button variant="primary" onClick={() => setStep((s) => Math.min(STEPS.length - 1, s + 1))}>
                {step === 2 && !keyReady ? "Skip this step" : "Continue"} <ArrowRight />
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}