"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Check, FileText, Loader2, Plus, RotateCcw, Settings2, Upload, X } from "lucide-react";
import { cn } from "@/lib/utils";

const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
const btn = (primary?: boolean) =>
  cn(
    "inline-flex h-9 items-center justify-center gap-1.5 rounded-lg px-3.5 text-sm font-medium transition disabled:opacity-60",
    focusRing,
    primary ? "bg-foreground text-background shadow-sm hover:opacity-90" : "border bg-background shadow-xs hover:bg-accent",
  );

export interface EmptyStateProps {
  illustration: React.ReactNode;
  title: string;
  description: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

/** Generic shell: use it to build your own empty states in the same style. */
export function EmptyState({ illustration, title, description, children, className }: EmptyStateProps) {
  return (
    <div className={cn("flex h-full flex-col items-center justify-center rounded-2xl border bg-card px-6 py-8 text-center text-card-foreground shadow-xs", className)}>
      <div className="relative grid h-28 w-40 place-items-center" aria-hidden>
        <div className="absolute inset-2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--primary)_14%,transparent),transparent)]" />
        {illustration}
      </div>
      <h3 className="mt-4 text-base font-semibold tracking-tight">{title}</h3>
      <div className="mt-1.5 max-w-xs text-sm text-muted-foreground">{description}</div>
      {children && <div className="mt-5 flex w-full flex-col items-center gap-2">{children}</div>}
    </div>
  );
}

const svgCls = "relative h-full w-full overflow-visible";

/* 1 ─ No projects */
export function EmptyNoProjects({ onCreate, onTemplate, className }: { onCreate?: () => void; onTemplate?: () => void; className?: string }) {
  const reduce = useReducedMotion();
  const cards = [
    { x: 30, r: -12, d: 0 },
    { x: 58, r: 0, d: 0.3 },
    { x: 86, r: 12, d: 0.6 },
  ];
  return (
    <EmptyState
      className={className}
      title="No projects yet"
      description="Projects keep tasks, docs and people together. Create your first one to get going."
      illustration={
        <svg viewBox="0 0 160 110" className={svgCls}>
          {cards.map((c, i) => (
            <motion.g key={i} animate={reduce ? undefined : { y: [0, -5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: c.d, ease: "easeInOut" }}>
              <g transform={`rotate(${c.r} ${c.x + 22} 80)`}>
                <rect x={c.x} y={28} width={44} height={56} rx={8} fill="var(--card)" stroke="var(--border)" strokeWidth="2" />
                <rect x={c.x + 8} y={38} width={16} height={4} rx={2} fill={i === 1 ? "var(--primary)" : "var(--muted-foreground)"} opacity={i === 1 ? 0.9 : 0.4} />
                <rect x={c.x + 8} y={48} width={28} height={3} rx={1.5} fill="var(--muted-foreground)" opacity="0.25" />
                <rect x={c.x + 8} y={55} width={22} height={3} rx={1.5} fill="var(--muted-foreground)" opacity="0.25" />
              </g>
            </motion.g>
          ))}
          <motion.g animate={reduce ? undefined : { scale: [1, 1.12, 1] }} transition={{ duration: 1.8, repeat: Infinity }} style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }}>
            <circle cx="120" cy="30" r="13" fill="var(--primary)" />
            <path d="M120 24v12M114 30h12" stroke="var(--primary-foreground)" strokeWidth="2.4" strokeLinecap="round" />
          </motion.g>
        </svg>
      }
    >
      <div className="flex flex-wrap justify-center gap-2">
        <button type="button" onClick={onCreate} className={btn(true)}>
          <Plus className="size-4" /> New project
        </button>
        <button type="button" onClick={onTemplate} className={btn()}>
          Use a template
        </button>
      </div>
    </EmptyState>
  );
}

/* 2 ─ No search results */
export function EmptyNoResults({ query = "quarterly roadmap", filters: initialFilters = ["Status: Done", "Owner: Me"], onClear, className }: { query?: string; filters?: string[]; onClear?: () => void; className?: string }) {
  const reduce = useReducedMotion();
  const [filters, setFilters] = React.useState(initialFilters);
  return (
    <EmptyState
      className={className}
      title="No results found"
      description={
        <>
          Nothing matches <span className="font-medium text-foreground">“{query}”</span>
          {filters.length ? " with the current filters." : ". Try different keywords."}
        </>
      }
      illustration={
        <svg viewBox="0 0 160 110" className={svgCls}>
          <rect x="36" y="18" width="88" height="76" rx="10" fill="var(--card)" stroke="var(--border)" strokeWidth="2" />
          {[32, 44, 56, 68, 80].map((y, i) => (
            <rect key={y} x="48" y={y} width={[56, 40, 60, 34, 48][i]} height="4" rx="2" fill="var(--muted-foreground)" opacity="0.22" />
          ))}
          <motion.g
            animate={reduce ? undefined : { x: [0, 22, 8, -14, 0], y: [0, -8, 10, 4, 0], rotate: [0, 8, -4, 6, 0] }}
            transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
            style={{ transformBox: "fill-box", transformOrigin: "40% 40%" }}
          >
            <circle cx="78" cy="54" r="18" fill="color-mix(in oklab, var(--primary) 12%, var(--card))" stroke="var(--primary)" strokeWidth="4" />
            <path d="M91 67l14 14" stroke="var(--primary)" strokeWidth="6" strokeLinecap="round" />
            <motion.text x="78" y="60" textAnchor="middle" fontSize="16" fontWeight="700" fill="var(--primary)" animate={reduce ? undefined : { opacity: [0, 1, 1, 0] }} transition={{ duration: 5, repeat: Infinity, times: [0, 0.3, 0.8, 1] }}>
              ?
            </motion.text>
          </motion.g>
        </svg>
      }
    >
      {filters.length > 0 && (
        <ul className="flex flex-wrap justify-center gap-1.5" aria-label="Active filters">
          <AnimatePresence initial={false}>
            {filters.map((f) => (
              <motion.li key={f} layout initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}>
                <span className="inline-flex h-7 items-center gap-1 rounded-full border bg-muted/50 pl-2.5 pr-1 text-xs">
                  {f}
                  <button type="button" onClick={() => setFilters((l) => l.filter((x) => x !== f))} aria-label={`Remove filter ${f}`} className={cn("grid size-5 place-items-center rounded-full text-muted-foreground hover:bg-foreground/10 hover:text-foreground", focusRing)}>
                    <X className="size-3" />
                  </button>
                </span>
              </motion.li>
            ))}
          </AnimatePresence>
        </ul>
      )}
      <button
        type="button"
        onClick={() => {
          setFilters([]);
          onClear?.();
        }}
        className={btn()}
      >
        <RotateCcw className="size-4" /> Clear search & filters
      </button>
    </EmptyState>
  );
}

/* 3 ─ Inbox zero */
export function EmptyInboxZero({ onBrowse, className }: { onBrowse?: () => void; className?: string }) {
  const reduce = useReducedMotion();
  return (
    <EmptyState
      className={className}
      title="Inbox zero"
      description="You've handled everything. Enjoy the calm — new messages will land here."
      illustration={
        <svg viewBox="0 0 160 110" className={svgCls}>
          <motion.g style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }} animate={reduce ? undefined : { rotate: 360 }} transition={{ duration: 30, repeat: Infinity, ease: "linear" }}>
            {Array.from({ length: 12 }, (_, i) => {
              const a = (i / 12) * Math.PI * 2;
              return <line key={i} x1={80 + Math.cos(a) * 30} y1={52 + Math.sin(a) * 30} x2={80 + Math.cos(a) * 40} y2={52 + Math.sin(a) * 40} stroke="#f59e0b" strokeWidth="3" strokeLinecap="round" opacity="0.7" />;
            })}
          </motion.g>
          <circle cx="80" cy="52" r="22" fill="#fbbf24" />
          <path d="M34 70h26l6 10h28l6-10h26v22a8 8 0 0 1-8 8H42a8 8 0 0 1-8-8z" fill="var(--card)" stroke="var(--border)" strokeWidth="2" strokeLinejoin="round" />
          <path d="M34 70l12-18h68l12 18" fill="none" stroke="var(--border)" strokeWidth="2" strokeLinejoin="round" />
          <motion.path d="M68 88l8 6 16-14" fill="none" stroke="#10b981" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" initial={{ pathLength: reduce ? 1 : 0 }} animate={{ pathLength: 1 }} transition={{ delay: 0.4, duration: 0.6 }} />
        </svg>
      }
    >
      <button type="button" onClick={onBrowse} className={btn()}>
        View archived
      </button>
    </EmptyState>
  );
}

/* 4 ─ No notifications */
export function EmptyNoNotifications({ onPreferences, className }: { onPreferences?: () => void; className?: string }) {
  const reduce = useReducedMotion();
  return (
    <EmptyState
      className={className}
      title="No notifications"
      description="When teammates mention you or something needs attention, you'll see it here."
      illustration={
        <svg viewBox="0 0 160 110" className={svgCls}>
          <motion.g animate={reduce ? undefined : { rotate: [0, 14, -12, 8, -4, 0, 0] }} transition={{ duration: 2.6, repeat: Infinity, times: [0, 0.1, 0.22, 0.34, 0.44, 0.52, 1] }} style={{ transformBox: "fill-box", transformOrigin: "50% 8%" }}>
            <circle cx="80" cy="22" r="4" fill="var(--muted-foreground)" />
            <path d="M80 24c-16 0-26 12-26 28v18l-8 10h68l-8-10V52c0-16-10-28-26-28z" fill="var(--card)" stroke="var(--foreground)" strokeOpacity="0.55" strokeWidth="2.5" strokeLinejoin="round" />
            <path d="M62 50c0-8 6-14 14-15" fill="none" stroke="var(--primary)" strokeWidth="3" strokeLinecap="round" opacity="0.7" />
            <motion.circle cx="80" cy="88" r="7" fill="var(--primary)" animate={reduce ? undefined : { x: [0, 3, -3, 2, 0, 0] }} transition={{ duration: 2.6, repeat: Infinity, times: [0, 0.14, 0.26, 0.38, 0.5, 1] }} />
          </motion.g>
          {!reduce &&
            ["z", "z", "Z"].map((z, i) => (
              <motion.g key={i} initial={{ opacity: 0, x: 0, y: 0 }} animate={{ opacity: [0, 1, 0], x: [0, 8 + i * 4], y: [0, -18 - i * 6] }} transition={{ duration: 2.4, repeat: Infinity, delay: i * 0.7 }}>
                <text x={112} y={40} fontSize={9 + i * 3} fontWeight="700" fill="var(--muted-foreground)">
                  {z}
                </text>
              </motion.g>
            ))}
        </svg>
      }
    >
      <button type="button" onClick={onPreferences} className={btn()}>
        <Settings2 className="size-4" /> Notification settings
      </button>
    </EmptyState>
  );
}

/* 5 ─ Upload first file */
export function EmptyUpload({ accept, maxSizeMb = 25, onFiles, className }: { accept?: string; maxSizeMb?: number; onFiles?: (files: File[]) => void; className?: string }) {
  const reduce = useReducedMotion();
  const uid = React.useId();
  const inputRef = React.useRef<HTMLInputElement>(null);
  const [drag, setDrag] = React.useState(false);
  const [file, setFile] = React.useState<{ name: string; size: number } | null>(null);
  const [progress, setProgress] = React.useState(0);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    if (!file || progress >= 100) return;
    const t = setTimeout(() => setProgress((p) => Math.min(100, p + 7 + ((p * 13) % 11))), 120);
    return () => clearTimeout(t);
  }, [file, progress]);

  const take = (list: FileList | null) => {
    const files = list ? Array.from(list) : [];
    if (!files.length) return;
    const f = files[0];
    if (f.size > maxSizeMb * 1024 * 1024) return setError(`${f.name} is larger than ${maxSizeMb} MB.`);
    setError("");
    setFile({ name: f.name, size: f.size });
    setProgress(0);
    onFiles?.(files);
  };

  const done = progress >= 100;
  return (
    <div
      className={cn("relative h-full rounded-2xl transition", drag && "ring-2 ring-primary ring-offset-2 ring-offset-background", className)}
      onDragOver={(e) => {
        e.preventDefault();
        setDrag(true);
      }}
      onDragLeave={() => setDrag(false)}
      onDrop={(e) => {
        e.preventDefault();
        setDrag(false);
        take(e.dataTransfer.files);
      }}
    >
      <EmptyState
        className={cn("border-dashed", drag && "border-primary bg-primary/5")}
        title={drag ? "Drop to upload" : "Upload your first file"}
        description={`Drag & drop anywhere on this card, or browse. Up to ${maxSizeMb} MB.`}
        illustration={
          <svg viewBox="0 0 160 110" className={svgCls}>
            <rect x="30" y="16" width="100" height="84" rx="14" fill="none" stroke="var(--muted-foreground)" strokeOpacity="0.4" strokeWidth="2" strokeDasharray="6 6" />
            <motion.g animate={reduce ? undefined : drag ? { y: 8, scale: 1.05 } : { y: [0, -4, 0] }} transition={drag ? { type: "spring", stiffness: 300, damping: 18 } : { duration: 2.6, repeat: Infinity, ease: "easeInOut" }} style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }}>
              <path d="M64 34h24l12 12v36a6 6 0 0 1-6 6H64a6 6 0 0 1-6-6V40a6 6 0 0 1 6-6z" fill="var(--card)" stroke="var(--foreground)" strokeOpacity="0.5" strokeWidth="2" strokeLinejoin="round" />
              <path d="M88 34v12h12" fill="none" stroke="var(--foreground)" strokeOpacity="0.5" strokeWidth="2" strokeLinejoin="round" />
            </motion.g>
            <motion.g animate={reduce ? undefined : { y: [4, -6, 4], opacity: [0.6, 1, 0.6] }} transition={{ duration: 1.4, repeat: Infinity, ease: "easeInOut" }}>
              <circle cx="110" cy="76" r="12" fill="var(--primary)" />
              <path d="M110 82v-11M105 75l5-5 5 5" fill="none" stroke="var(--primary-foreground)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </motion.g>
          </svg>
        }
      >
        <input ref={inputRef} id={`${uid}-file`} type="file" accept={accept} className="sr-only" onChange={(e) => take(e.target.files)} />
        <AnimatePresence mode="wait" initial={false}>
          {file ? (
            <motion.div key="file" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="w-full max-w-xs rounded-lg border bg-background p-2.5 text-left">
              <div className="flex items-center gap-2.5">
                <span className={cn("grid size-8 shrink-0 place-items-center rounded-md", done ? "bg-emerald-500/12 text-emerald-600 dark:text-emerald-400" : "bg-muted")}>{done ? <Check className="size-4" /> : <FileText className="size-4" />}</span>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium">{file.name}</p>
                  <p className="text-xs text-muted-foreground" aria-live="polite">
                    {done ? "Uploaded" : `Uploading… ${progress}%`} · {(file.size / 1024).toFixed(file.size > 10240 ? 0 : 1)} KB
                  </p>
                </div>
                <button type="button" onClick={() => setFile(null)} aria-label="Remove file" className={cn("grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", focusRing)}>
                  <X className="size-3.5" />
                </button>
              </div>
              <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted">
                <motion.div className={cn("h-full rounded-full", done ? "bg-emerald-500" : "bg-primary")} animate={{ width: `${progress}%` }} transition={{ duration: 0.12 }} />
              </div>
            </motion.div>
          ) : (
            <motion.button key="browse" type="button" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => inputRef.current?.click()} className={btn(true)}>
              <Upload className="size-4" /> Browse files
            </motion.button>
          )}
        </AnimatePresence>
        {error && (
          <p role="alert" className="text-xs font-medium text-destructive">
            {error}
          </p>
        )}
      </EmptyState>
    </div>
  );
}

/* 6 ─ Connect integration */
export type Integration = { id: string; name: string; description: string; color: string };

const DEFAULT_INTEGRATIONS: Integration[] = [
  { id: "relay", name: "Relay", description: "Team chat alerts", color: "#6366f1" },
  { id: "ledgerly", name: "Ledgerly", description: "Sync invoices", color: "#10b981" },
  { id: "pulse", name: "Pulse", description: "Error tracking", color: "#f43f5e" },
];

function IntegrationMark({ i }: { i: Integration }) {
  return (
    <span className="grid size-8 shrink-0 place-items-center rounded-lg text-white shadow-sm" style={{ background: `linear-gradient(135deg, ${i.color}, color-mix(in oklab, ${i.color} 60%, black))` }} aria-hidden>
      <svg viewBox="0 0 16 16" className="size-4">
        {i.id === "relay" && <path d="M3 5h10M3 8h7M3 11h9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />}
        {i.id === "ledgerly" && <path d="M4 3v10h8M7 10l2-3 2 2 2-4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
        {i.id !== "relay" && i.id !== "ledgerly" && <path d="M2 8h3l2-4 2 8 2-4h3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
      </svg>
    </span>
  );
}

export function EmptyConnectIntegration({ integrations = DEFAULT_INTEGRATIONS, onConnect, className }: { integrations?: Integration[]; onConnect?: (id: string) => Promise<void> | void; className?: string }) {
  const reduce = useReducedMotion();
  const [state, setState] = React.useState<Record<string, "idle" | "loading" | "done">>({});
  const connected = Object.values(state).filter((s) => s === "done").length;
  const connect = async (id: string) => {
    setState((s) => ({ ...s, [id]: "loading" }));
    await Promise.all([onConnect?.(id), new Promise((r) => setTimeout(r, 900))]);
    setState((s) => ({ ...s, [id]: "done" }));
  };
  return (
    <EmptyState
      className={className}
      title={connected ? `${connected} integration${connected > 1 ? "s" : ""} connected` : "Connect your first integration"}
      description="Pipe events in and out of your workspace. Takes about a minute."
      illustration={
        <svg viewBox="0 0 160 110" className={svgCls}>
          <rect x="18" y="36" width="38" height="38" rx="10" fill="var(--card)" stroke="var(--border)" strokeWidth="2" />
          <rect x="29" y="47" width="16" height="16" rx="4" fill="var(--foreground)" opacity="0.8" />
          <rect x="104" y="36" width="38" height="38" rx="10" fill="var(--card)" stroke="var(--border)" strokeWidth="2" />
          <circle cx="123" cy="55" r="8" fill="var(--primary)" />
          <motion.path
            d="M56 55 H104"
            stroke={connected ? "#10b981" : "var(--muted-foreground)"}
            strokeOpacity={connected ? 1 : 0.5}
            strokeWidth="3"
            strokeLinecap="round"
            strokeDasharray="4 7"
            animate={reduce ? undefined : { strokeDashoffset: [0, -22] }}
            transition={{ duration: 0.9, repeat: Infinity, ease: "linear" }}
          />
          <motion.g animate={reduce || connected ? undefined : { scale: [1, 1.1, 1] }} transition={{ duration: 1.6, repeat: Infinity }} style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }}>
            <circle cx="80" cy="55" r="12" fill={connected ? "#10b981" : "var(--card)"} stroke={connected ? "#10b981" : "var(--border)"} strokeWidth="2" />
            {connected ? (
              <path d="M74 55l4 4 8-8" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            ) : (
              <path d="M77 50v4M83 50v4M75 54h10v2a5 5 0 0 1-10 0z M80 61v3" fill="none" stroke="var(--foreground)" strokeOpacity="0.7" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            )}
          </motion.g>
        </svg>
      }
    >
      <ul className="w-full max-w-xs divide-y rounded-lg border bg-background text-left">
        {integrations.map((i) => {
          const s = state[i.id] ?? "idle";
          return (
            <li key={i.id} className="flex items-center gap-2.5 p-2">
              <IntegrationMark i={i} />
              <span className="min-w-0 flex-1">
                <span className="block text-sm font-medium">{i.name}</span>
                <span className="block truncate text-xs text-muted-foreground">{i.description}</span>
              </span>
              <button
                type="button"
                onClick={() => connect(i.id)}
                disabled={s !== "idle"}
                aria-label={s === "done" ? `${i.name} connected` : `Connect ${i.name}`}
                className={cn(
                  "inline-flex h-7 min-w-[5.5rem] items-center justify-center gap-1 rounded-md px-2.5 text-xs font-medium transition",
                  focusRing,
                  s === "done" ? "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300" : "border hover:bg-accent disabled:opacity-70",
                )}
              >
                {s === "loading" && <Loader2 className="size-3 animate-spin" />}
                {s === "done" && <Check className="size-3" />}
                {s === "idle" ? "Connect" : s === "loading" ? "Linking" : "Connected"}
              </button>
            </li>
          );
        })}
      </ul>
    </EmptyState>
  );
}

/* Gallery */
export function EmptyStatesGallery({ title = "Empty states", description = "Six ready-made moments for when there's nothing to show yet.", className }: { title?: string; description?: string; className?: string }) {
  return (
    <section className={cn("w-full bg-muted/40 px-4 py-8 text-foreground sm:px-8 sm:py-10", className)}>
      <div className="mx-auto max-w-6xl">
        <div className="mb-6">
          <h2 className="text-xl font-semibold tracking-tight sm:text-2xl">{title}</h2>
          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <EmptyNoProjects />
          <EmptyNoResults />
          <EmptyInboxZero />
          <EmptyNoNotifications />
          <EmptyUpload />
          <EmptyConnectIntegration />
        </div>
      </div>
    </section>
  );
}