"use client";
import * as React from "react";
import Link from "next/link";
import { KeyRound, Code2, PenLine, Search, FileUp, Columns3, EyeOff } from "lucide-react";
import type { PolyModel } from "@/lib/client/types";
import { useApp } from "@/components/app/store";
import { LogoMark } from "@/components/brand/logo";
import { Button } from "@/components/ui/button";
import { CapabilityBadges } from "./model-badges";
import { Onboarding } from "@/components/app/onboarding";
import { cn } from "@/lib/utils";

interface QuickAction {
  key: string;
  icon: React.ReactNode;
  title: string;
  hint: string;
  /** Text inserted into the composer (Write / Code / Research). */
  text?: string;
}

const QUICK: QuickAction[] = [
  { key: "write", icon: <PenLine className="size-4" />, title: "Write", hint: "Emails, posts, docs", text: "Help me write a concise, friendly " },
  { key: "code", icon: <Code2 className="size-4" />, title: "Code", hint: "Review, debug, generate", text: "Review the following code for bugs, edge cases and readability, and suggest concrete fixes.\n\n```\n\n```" },
  { key: "research", icon: <Search className="size-4" />, title: "Research", hint: "Sources, comparisons", text: "Research the current state of " },
  { key: "file", icon: <FileUp className="size-4" />, title: "Analyze a file", hint: "PDF, CSV, image, code" },
  { key: "compare", icon: <Columns3 className="size-4" />, title: "Compare models", hint: "Same prompt, 2–4 models" },
];

export function ChatEmptyState({ model, onPick, onAnalyzeFile, onCompare, temporary, projectName }: { model?: PolyModel; onPick: (text: string) => void; onAnalyzeFile?: () => void; onCompare?: () => void; temporary?: boolean; projectName?: string | null }) {
  const { connectedProviders, loadingModels, user, connections } = useApp();
  const noProviders = !loadingModels && connectedProviders.size === 0;
  return (
    <div className="mx-auto flex h-full w-full max-w-3xl flex-col items-center justify-center px-4 py-8 text-center sm:py-10">
      {!user.onboardingCompletedAt && connections.length === 0 ? <Onboarding /> : null}
      <LogoMark size={44} className="mb-4 rounded-xl shadow-md" />
      <h1 className="text-balance text-[22px] font-semibold tracking-tight sm:text-2xl">What do you want to work on?</h1>
      <p className="mt-1.5 max-w-md text-balance text-[14px] text-fg-muted">
        {temporary ? (
          <span className="inline-flex items-center gap-1.5">
            <EyeOff className="size-3.5" /> Temporary chat — not stored in history.
          </span>
        ) : projectName ? (
          <>
            In project <span className="font-medium text-fg">{projectName}</span>
            {model ? (
              <>
                {" "}
                · <span className="font-medium text-fg">{model.displayName}</span>
              </>
            ) : null}
          </>
        ) : model ? (
          <>
            Chatting with <span className="font-medium text-fg">{model.displayName}</span>. <span className="hidden sm:inline">Switch anytime with ⌘/.</span>
          </>
        ) : (
          "One interface. Every model. Bring your own keys."
        )}
      </p>
      {model ? <CapabilityBadges model={model} className="mt-3 justify-center" /> : null}
      {noProviders ? (
        <div className="mt-6 flex flex-col items-center gap-3 rounded-xl border border-border bg-bg-elevated p-5">
          <KeyRound className="size-5 text-accent" />
          <p className="text-sm font-medium">Connect your first provider</p>
          <p className="max-w-sm text-[13px] text-fg-muted">Add a key from OpenAI, Anthropic, Gemini, xAI, Mistral, DeepSeek, Kimi, OpenRouter or Cerebras. Keys are encrypted at rest and only decrypted server-side right before a request.</p>
          <Button asChild variant="accent" size="sm">
            <Link href="/app/settings/providers">Connect a provider</Link>
          </Button>
        </div>
      ) : (
        <div className="mt-7 grid w-full grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
          {QUICK.map((q) => {
            const onClick = q.key === "file" ? onAnalyzeFile : q.key === "compare" ? onCompare : () => onPick(q.text ?? "");
            return (
              <button key={q.key} type="button" onClick={onClick} disabled={!onClick} className={cn("flex min-h-[84px] flex-col items-start gap-2 rounded-xl border border-border bg-bg-elevated p-3 text-left transition-colors hover:border-border-strong hover:bg-bg-subtle disabled:opacity-50", q.key === "compare" && "col-span-2 sm:col-span-1")}>
                <span className="flex size-8 items-center justify-center rounded-lg bg-accent-soft text-accent">{q.icon}</span>
                <span className="min-w-0">
                  <span className="block text-[13.5px] font-medium">{q.title}</span>
                  <span className="block text-[12px] text-fg-muted">{q.hint}</span>
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}