// src/pages/BrandKit/BrandKitPage.tsx
import React, { useMemo, useState } from "react";
import { LogoCard } from "../../components/LogoCard";
import { ColorSwatch } from "../../components/ColorSwatch";
import { rollAll, rollOne, type Palette, type PaletteKey } from "../../services/brand/palette";

// ---- Types & Stubs you can wire to your real services ----
type StylePack = "balanced" | "monogram" | "badge";
type MarkMode = "auto" | "wordmark" | "icon";

type GeneratedLogo = { id: string; filename: string; svg?: string; url?: string };

async function generateBrandAssets(_args: {
  name: string;
  industry: string;
  tone: string;
  palette: Palette;
  stylePack: StylePack;
  markMode: MarkMode;
  logoType: "text" | "icon";
  prompt?: string;
}): Promise<{ logos: GeneratedLogo[] }> {
  // TODO: replace with your backend call. For now, returns placeholder tiles.
  return {
    logos: [
      { id: "1", filename: "logo-primary.svg", svg: `<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="${_args.palette.primary}"/><text x="50%" y="54%" font-size="140" font-family="Inter, Arial" fill="${_args.palette.surface}" text-anchor="middle" dominant-baseline="middle">${_args.name[0] ?? "A"}</text></svg>` },
      { id: "2", filename: "logo-reverse.svg", svg: `<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="${_args.palette.surface}"/><circle cx="256" cy="256" r="180" fill="${_args.palette.primary}"/></svg>` },
      { id: "3", filename: "logo-mark.svg", svg: `<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" rx="64" fill="${_args.palette.accent}"/><text x="50%" y="52%" font-size="200" font-family="Inter, Arial" fill="${_args.palette.surface}" text-anchor="middle" dominant-baseline="middle">${_args.logoType === "text" ? "Aa" : "◎"}</text></svg>` },
    ],
  };
}

// ---- Component ----
export default function BrandKitPage() {
  // Stepper
  const [step, setStep] = useState<1 | 2 | 3>(1);

  // Step 1 — Basics
  const [name, setName] = useState("Cafe DuMonte");
  const [industry, setIndustry] = useState("restaurant");
  const [tone, setTone] = useState("Modern");
  const [stylePack, setStylePack] = useState<StylePack>("balanced");
  const [markMode, setMarkMode] = useState<MarkMode>("auto");

  // Step 2 — Colors
  const [palette, setPalette] = useState<Palette>({
    primary: "#4274b9",
    secondary: "#b94c42",
    accent: "#42afb9",
    neutral: "#f3f4f6",
    surface: "#ffffff",
    text: "#1f2937",
  });
  const [locks, setLocks] = useState<Record<PaletteKey, boolean>>({
    primary: false, secondary: false, accent: false, neutral: true, surface: true, text: true,
  });

  // Step 3 — Logo Type
  const [logoType, setLogoType] = useState<"text" | "icon">("text");
  const [iconPrompt, setIconPrompt] = useState("simple geometric coffee cup, friendly, minimal");

  // Output
  const [logos, setLogos] = useState<GeneratedLogo[]>([]);
  const canNextFrom1 = name.trim().length > 1;

  const rollAllUnlocked = () => {
    const all = rollAll(palette);
    const next: Palette = { ...palette };
    (Object.keys(next) as PaletteKey[]).forEach((k) => {
      if (!locks[k]) next[k] = (all as any)[k];
    });
    setPalette(next);
  };

  const rollSingle = (key: PaletteKey) => {
    if (locks[key]) return;
    setPalette((p) => rollOne(p, key));
  };

  const toggleLock = (key: PaletteKey) =>
    setLocks((l) => ({ ...l, [key]: !l[key] }));

  const lockAll = () => {
    const next: Record<PaletteKey, boolean> = { primary: true, secondary: true, accent: true, neutral: true, surface: true, text: true };
    setLocks(next);
  };
  const unlockAll = () => {
    const next: Record<PaletteKey, boolean> = { primary: false, secondary: false, accent: false, neutral: false, surface: false, text: false };
    setLocks(next);
  };

  const generate = async () => {
    const res = await generateBrandAssets({
      name, industry, tone, palette, stylePack, markMode, logoType, prompt: logoType === "icon" ? iconPrompt : undefined,
    });
    setLogos(res.logos);
    setStep(3);
  };

  // UI helpers
  const paletteEntries: { key: PaletteKey; label: string }[] = useMemo(() => ([
    { key: "primary", label: "Primary" },
    { key: "secondary", label: "Secondary" },
    { key: "accent", label: "Accent" },
    { key: "neutral", label: "Neutral" },
    { key: "surface", label: "Surface" },
    { key: "text", label: "Text" },
  ]), []);

  return (
    <div className="max-w-6xl mx-auto p-4 md:p-6">
      <h1 className="text-2xl md:text-3xl font-semibold mb-4">Brand Kit Generator</h1>

      {/* Stepper Header */}
      <div className="flex items-center gap-3 mb-6">
        {([1,2,3] as const).map((n) => (
          <button
            key={n}
            className={`px-3 py-1.5 rounded-full text-sm border ${step===n?'bg-neutral-900 text-white border-neutral-900':'bg-white text-neutral-700 hover:bg-neutral-50'}`}
            onClick={() => setStep(n)}
            aria-current={step===n? 'step' : undefined}
          >
            Step {n}
          </button>
        ))}
        <div className="text-sm text-neutral-500">1) Basics → 2) Colors → 3) Logo & Generate</div>
      </div>

      {step === 1 && (
        <section className="space-y-4">
          <div className="grid md:grid-cols-3 gap-3">
            <input className="px-3 py-2 rounded-md border" value={name} onChange={(e)=>setName(e.target.value)} placeholder="Brand name" />
            <input className="px-3 py-2 rounded-md border" value={industry} onChange={(e)=>setIndustry(e.target.value)} placeholder="Industry (e.g., restaurant)" />
            <select className="px-3 py-2 rounded-md border" value={tone} onChange={(e)=>setTone(e.target.value)}>
              <option>Modern</option>
              <option>Classic</option>
              <option>Playful</option>
              <option>Luxury</option>
            </select>
          </div>

          <div className="grid md:grid-cols-3 gap-3">
            <select className="px-3 py-2 rounded-md border" value={stylePack} onChange={(e)=>setStylePack(e.target.value as StylePack)}>
              <option value="balanced">Balanced (Geometric + Monogram + Badge)</option>
              <option value="monogram">Monogram-focused (3x)</option>
              <option value="badge">Badge-focused (3x)</option>
            </select>
            <select className="px-3 py-2 rounded-md border" value={markMode} onChange={(e)=>setMarkMode(e.target.value as MarkMode)}>
              <option value="auto">Auto</option>
              <option value="wordmark">Keep wordmark</option>
              <option value="icon">Icon-only</option>
            </select>
          </div>

          <div className="pt-2">
            <button disabled={!canNextFrom1} onClick={()=>setStep(2)} className={`px-4 py-2 rounded-lg ${canNextFrom1?'bg-emerald-600 hover:bg-emerald-700 text-white':'bg-neutral-200 text-neutral-500 cursor-not-allowed'}`}>
              Next: Colors →
            </button>
          </div>
        </section>
      )}

      {step === 2 && (
        <section className="space-y-4">
          <div className="flex flex-wrap items-center gap-2">
            <button onClick={rollAllUnlocked} className="px-3 py-1.5 rounded-md border hover:bg-neutral-50">🎲 Roll all unlocked</button>
            <button onClick={lockAll} className="px-3 py-1.5 rounded-md border hover:bg-neutral-50">📌 Lock all</button>
            <button onClick={unlockAll} className="px-3 py-1.5 rounded-md border hover:bg-neutral-50">🔓 Unlock all</button>
            <div className="text-xs text-neutral-500 ml-2">Tip: Neutral/Surface/Text are locked by default so backgrounds stay readable.</div>
          </div>

          <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
            {paletteEntries.map(({key, label}) => (
              <ColorSwatch
                key={key}
                label={label}
                hex={palette[key]}
                locked={locks[key]}
                onChange={(v)=>setPalette((p)=>({ ...p, [key]: v }))}
                onRoll={()=>rollSingle(key)}
                onToggleLock={()=>toggleLock(key)}
              />
            ))}
          </div>

          <div className="flex items-center gap-2 pt-2">
            <button onClick={()=>setStep(1)} className="px-3 py-2 rounded-lg border hover:bg-neutral-50">← Back</button>
            <button onClick={()=>setStep(3)} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white">Next: Logo options →</button>
          </div>
        </section>
      )}

      {step === 3 && (
        <section className="space-y-5">
          <div className="grid md:grid-cols-3 gap-3 items-start">
            <div className="rounded-xl border bg-white p-3 space-y-3">
              <div className="text-sm font-semibold">Logo Type</div>
              <div className="flex items-center gap-3">
                <label className="flex items-center gap-2 text-sm">
                  <input type="radio" checked={logoType==="text"} onChange={()=>setLogoType("text")} />
                  Text (wordmark)
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input type="radio" checked={logoType==="icon"} onChange={()=>setLogoType("icon")} />
                  Icon / Mark
                </label>
              </div>

              {logoType === "icon" && (
                <div className="space-y-2">
                  <div className="text-xs text-neutral-500">Describe the icon you want (I’ll use this as a prompt):</div>
                  <textarea className="w-full min-h-[100px] px-3 py-2 rounded-md border text-sm" value={iconPrompt} onChange={(e)=>setIconPrompt(e.target.value)} />
                </div>
              )}

              <div className="flex items-center gap-2 pt-1">
                <button onClick={()=>setStep(2)} className="px-3 py-2 rounded-lg border hover:bg-neutral-50">← Back</button>
                <button onClick={generate} className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white">Generate Brand Kit</button>
              </div>
            </div>

            {/* Palette preview card */}
            <div className="rounded-xl border bg-white p-3">
              <div className="text-sm font-semibold mb-2">Palette</div>
              <div className="grid grid-cols-3 gap-2">
                {Object.entries(palette).map(([k, v])=>(
                  <div key={k} className="rounded-lg border overflow-hidden">
                    <div className="h-12" style={{ background: v }} />
                    <div className="p-2 text-xs flex items-center justify-between">
                      <span className="capitalize">{k}</span>
                      <span className="font-mono">{v}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Brand summary */}
            <div className="rounded-xl border bg-white p-3">
              <div className="text-sm font-semibold mb-2">Summary</div>
              <dl className="text-sm space-y-1">
                <div className="flex justify-between"><dt className="text-neutral-500">Name</dt><dd>{name}</dd></div>
                <div className="flex justify-between"><dt className="text-neutral-500">Industry</dt><dd>{industry}</dd></div>
                <div className="flex justify-between"><dt className="text-neutral-500">Tone</dt><dd>{tone}</dd></div>
                <div className="flex justify-between"><dt className="text-neutral-500">Style Pack</dt><dd className="capitalize">{stylePack}</dd></div>
                <div className="flex justify-between"><dt className="text-neutral-500">Mark Mode</dt><dd className="capitalize">{markMode}</dd></div>
                <div className="flex justify-between"><dt className="text-neutral-500">Logo Type</dt><dd className="capitalize">{logoType}</dd></div>
              </dl>
            </div>
          </div>

          {/* Logos grid */}
          <div className="pt-2">
            <h2 className="text-lg font-semibold mb-3">Logos</h2>
            {logos.length === 0 ? (
              <div className="text-sm text-neutral-500 border rounded-xl p-6 bg-white">No logos yet. Click <strong>Generate Brand Kit</strong> to create previews.</div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {logos.map((logo) => (
                  <LogoCard
                    key={logo.id}
                    title={logo.filename}
                    source={logo.svg ?? logo.url ?? ""}
                    onPrimary={() => console.log("Set primary", logo.id)}
                    onFavorite={() => console.log("Favorite", logo.id)}
                    onDownload={() => {
                      const blob = new Blob(
                        [logo.svg ?? ""],
                        { type: "image/svg+xml;charset=utf-8" }
                      );
                      const a = document.createElement("a");
                      a.href = URL.createObjectURL(blob);
                      a.download = logo.filename || "logo.svg";
                      a.click();
                      URL.revokeObjectURL(a.href);
                    }}
                  />
                ))}
              </div>
            )}
          </div>
        </section>
      )}
    </div>
  );
}
