import React, { useEffect, useMemo, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select";
import {
  Shuffle,
  Copy,
  Link as LinkIcon,
  Lock,
  Unlock,
  Trash2,
  Filter,
  Plus,
  RefreshCw,
} from "lucide-react";

// --- Minimal data model (you can extend easily) ---
const ELEMENTS = ["Glacio", "Fusion", "Electro", "Aero", "Havoc", "Spectro"] as const;
const ROLES = ["主C", "副C/拐", "治疗"] as const;

/**
 * A very small starter roster. You can add more characters anytime.
 * id must be stable; name is display; element+role drive filters.
 */
const STARTER_ROSTER = [
  { id: "rover-s", name: "旅者·光(男)", element: "Spectro", role: "主C", rarity: 5 },
  { id: "rover-h", name: "旅者·冥(女)", element: "Havoc", role: "主C", rarity: 5 },
  { id: "jiyan", name: "忌炎", element: "Aero", role: "主C", rarity: 5 },
  { id: "lingyang", name: "凌阳", element: "Glacio", role: "主C", rarity: 5 },
  { id: "verina", name: "维里奈", element: "Spectro", role: "治疗", rarity: 5 },
  { id: "yinlin", name: "吟霖", element: "Electro", role: "副C/拐", rarity: 5 },
  { id: "calcharo", name: "卡卡罗", element: "Electro", role: "主C", rarity: 5 },
  { id: "jianxin", name: "鉴心", element: "Aero", role: "副C/拐", rarity: 4 },
  { id: "baizhi", name: "白芷", element: "Glacio", role: "治疗", rarity: 4 },
  { id: "danjin", name: "丹瑾", element: "Fusion", role: "副C/拐", rarity: 4 },
  { id: "taoqi", name: "桃祈", element: "Glacio", role: "治疗", rarity: 4 },
  { id: "chixia", name: "炽霞", element: "Fusion", role: "主C", rarity: 4 },
  { id: "mortefi", name: "莫特菲", element: "Fusion", role: "副C/拐", rarity: 4 },
  { id: "yangyang", name: "杨瑶", element: "Aero", role: "副C/拐", rarity: 4 },
] as const;

// --- Utilities ---
function mulberry32(seed: number) {
  return function () {
    let t = (seed += 0x6d2b79f5);
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function pickRandom<T>(rng: () => number, arr: T[]): T | undefined {
  if (!arr.length) return undefined;
  const idx = Math.floor(rng() * arr.length);
  return arr[idx];
}

function parseOwned(): Record<string, boolean> {
  try {
    const raw = localStorage.getItem("wuwa_owned");
    return raw ? JSON.parse(raw) : {};
  } catch {
    return {};
  }
}

function saveOwned(obj: Record<string, boolean>) {
  localStorage.setItem("wuwa_owned", JSON.stringify(obj));
}

function encodeTeam(ids: string[]): string {
  return encodeURIComponent(ids.join(","));
}
function decodeTeam(s: string | null): string[] {
  if (!s) return [];
  return decodeURIComponent(s).split(",").filter(Boolean);
}

// --- Component ---
export default function App() {
  const [roster, setRoster] = useState([...STARTER_ROSTER]);
  const [owned, setOwned] = useState<Record<string, boolean>>(() => parseOwned());
  const [teamSize, setTeamSize] = useState(3);
  const [allowSameElement, setAllowSameElement] = useState(false);
  const [rarity, setRarity] = useState<"all" | 4 | 5>("all");
  const [elementFilter, setElementFilter] = useState<"all" | (typeof ELEMENTS)[number]>("all");
  const [roleWeights, setRoleWeights] = useState<Record<(typeof ROLES)[number], number>>({
    主C: 2,
    "副C/拐": 2,
    治疗: 2,
  });
  const [seedStr, setSeedStr] = useState("");
  const [lockedSlots, setLockedSlots] = useState<(string | null)[]>([null, null, null, null]);
  const [result, setResult] = useState<string[]>([]);
  const [search, setSearch] = useState("");

  // Load from URL if present
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const team = decodeTeam(params.get("team"));
    if (team.length) setResult(team);
    const seedQ = params.get("seed");
    if (seedQ) setSeedStr(seedQ);
  }, []);

  // Derived lists
  const filteredPool = useMemo(() => {
    const base = roster.filter((c) => (rarity === "all" ? true : c.rarity === rarity));
    const byEl = base.filter((c) => (elementFilter === "all" ? true : c.element === elementFilter));
    const bySearch = byEl.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()));
    const byOwned = bySearch.filter((c) => ownedOnly ? owned[c.id] : true);
    return byOwned;
  }, [roster, rarity, elementFilter, search, owned]);

  const ownedOnly = false; // you can expose a toggle later if you like

  function toggleOwned(id: string) {
    setOwned((prev) => {
      const next = { ...prev, [id]: !prev[id] };
      saveOwned(next);
      return next;
    });
  }

  function addCustomCharacter() {
    const name = prompt("自定义角色名称");
    if (!name) return;
    const element = prompt(`元素 (${ELEMENTS.join("/")})`, "Spectro") as any;
    const role = prompt(`定位 (${ROLES.join("/")})`, "副C/拐") as any;
    const rarityStr = prompt("稀有度 4 或 5", "4");
    const rarityNum = rarityStr === "5" ? 5 : 4;
    const id = name.trim().toLowerCase().replace(/\s+/g, "-") + "-custom";
    setRoster((r) => [...r, { id, name, element, role, rarity: rarityNum }]);
  }

  function shareURL(ids: string[]) {
    const params = new URLSearchParams();
    if (ids.length) params.set("team", encodeTeam(ids));
    if (seedStr) params.set("seed", seedStr);
    const url = `${location.origin}${location.pathname}?${params.toString()}`;
    navigator.clipboard.writeText(url);
    alert("已复制分享链接到剪贴板！");
  }

  function lockSlot(i: number, id?: string) {
    setLockedSlots((prev) => {
      const next = [...prev];
      next[i] = id ?? (prev[i] ? null : result[i] ?? null);
      return next;
    });
  }

  function removeFromTeam(i: number) {
    setResult((prev) => prev.filter((_, idx) => idx !== i));
    setLockedSlots((prev) => prev.map((v, idx) => (idx === i ? null : v)));
  }

  function randomize() {
    const seed = seedStr ? hash(seedStr) : Date.now();
    const rng = mulberry32(seed);

    // Start with locked picks
    const team: string[] = [];
    const usedElements = new Set<string>();

    for (let i = 0; i < teamSize; i++) {
      const lockedId = lockedSlots[i];
      if (lockedId) {
        team[i] = lockedId;
        const el = roster.find((c) => c.id === lockedId)?.element;
        if (el) usedElements.add(el);
      }
    }

    // Build candidate pools by role preference
    const rolePool: { role: typeof ROLES[number]; weight: number }[] = [];
    ROLES.forEach((r) => rolePool.push({ role: r, weight: roleWeights[r] }));

    const pool = filteredPool.slice();
    const chosen = new Set(team.filter(Boolean));

    for (let i = 0; i < teamSize; i++) {
      if (team[i]) continue; // slot already locked

      // Spin a role by weight
      const targetRole = spinWeighted(rng, rolePool);
      const candidates = pool.filter((c) => !chosen.has(c.id) && c.role === targetRole);

      const viable = candidates.filter((c) => allowSameElement || !usedElements.has(c.element));
      const pickFrom = viable.length ? viable : pool.filter((c) => !chosen.has(c.id));
      const pick = pickRandom(rng, pickFrom);
      if (!pick) break;

      team[i] = pick.id;
      chosen.add(pick.id);
      if (!allowSameElement) usedElements.add(pick.element);
    }

    setResult(team);
  }

  function clearTeam() {
    setResult([]);
    setLockedSlots([null, null, null, null]);
  }

  const displayTeam = useMemo(() => result.map((id) => roster.find((c) => c.id === id)).filter(Boolean), [result, roster]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white p-4 md:p-8">
      <div className="mx-auto max-w-6xl grid gap-6">
        <header className="flex items-center justify-between">
          <h1 className="text-2xl md:text-3xl font-bold tracking-tight">鳴潮 | 队伍随机生成器</h1>
          <div className="flex items-center gap-2">
            <Button variant="secondary" onClick={addCustomCharacter}>
              <Plus className="size-4 mr-1" /> 自定义角色
            </Button>
            <Button variant="ghost" onClick={() => location.reload()}>
              <RefreshCw className="size-4 mr-1" /> 重载
            </Button>
          </div>
        </header>

        <Tabs defaultValue="build">
          <TabsList className="grid grid-cols-2 w-full md:w-auto">
            <TabsTrigger value="build">随机队伍</TabsTrigger>
            <TabsTrigger value="roster">角色库</TabsTrigger>
          </TabsList>

          {/* --- Build Tab --- */}
          <TabsContent value="build" className="mt-4">
            <Card className="shadow-sm">
              <CardContent className="p-4 md:p-6">
                <div className="grid md:grid-cols-3 gap-6">
                  <div className="space-y-4">
                    <div>
                      <div className="flex items-center justify-between mb-2">
                        <label className="font-semibold">队伍人数</label>
                        <Badge variant="outline">{teamSize}</Badge>
                      </div>
                      <Slider value={[teamSize]} onValueChange={(v) => setTeamSize(v[0])} min={1} max={4} step={1} />
                    </div>

                    <div className="space-y-2">
                      <label className="font-semibold">元素限制</label>
                      <Select value={elementFilter} onValueChange={(v) => setElementFilter(v as any)}>
                        <SelectTrigger>
                          <SelectValue placeholder="全部" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">全部元素</SelectItem>
                          {ELEMENTS.map((e) => (
                            <SelectItem key={e} value={e}>{e}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <div className="flex items-center justify-between pt-1">
                        <div className="flex items-center gap-2">
                          <Switch checked={allowSameElement} onCheckedChange={setAllowSameElement} />
                          <span className="text-sm text-slate-600">允许重复元素</span>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="font-semibold">稀有度</label>
                      <Select value={String(rarity)} onValueChange={(v) => setRarity(v === "all" ? "all" : (Number(v) as any))}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">4★ + 5★</SelectItem>
                          <SelectItem value="4">仅 4★</SelectItem>
                          <SelectItem value="5">仅 5★</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <label className="font-semibold flex items-center gap-2"><Filter className="size-4"/>定位权重</label>
                      {ROLES.map((r) => (
                        <div key={r} className="flex items-center gap-3">
                          <span className="w-16 text-sm text-slate-600">{r}</span>
                          <Slider value={[roleWeights[r]]} onValueChange={(v) => setRoleWeights((s) => ({ ...s, [r]: v[0] }))} min={0} max={5} step={1} />
                          <Badge variant="outline" className="w-8 text-center">{roleWeights[r]}</Badge>
                        </div>
                      ))}
                    </div>

                    <div className="space-y-2">
                      <label className="font-semibold">随机种子（可复现）</label>
                      <Input value={seedStr} onChange={(e) => setSeedStr(e.target.value)} placeholder="留空=随机" />
                    </div>

                    <div className="flex gap-2 pt-2">
                      <Button className="grow" onClick={randomize}>
                        <Shuffle className="size-4 mr-2" /> 随机生成
                      </Button>
                      <Button variant="secondary" onClick={() => shareURL(result)}>
                        <LinkIcon className="size-4 mr-2" /> 分享链接
                      </Button>
                      <Button variant="ghost" onClick={clearTeam}>
                        <Trash2 className="size-4 mr-2" /> 清空
                      </Button>
                    </div>
                  </div>

                  <div className="md:col-span-2">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      {Array.from({ length: teamSize }).map((_, i) => {
                        const char = displayTeam[i];
                        const locked = lockedSlots[i];
                        return (
                          <Card key={i} className={`relative overflow-hidden ${locked ? "ring-2 ring-indigo-300" : ""}`}>
                            <CardContent className="p-4 flex flex-col items-center justify-center gap-2">
                              {char ? (
                                <AvatarGlyph name={char.name} element={char.element} rarity={char.rarity} />
                              ) : (
                                <div className="size-20 rounded-2xl bg-slate-100 grid place-items-center text-slate-400 text-4xl">?</div>
                              )}
                              <div className="text-center">
                                <div className="font-semibold leading-tight">{char ? char.name : "空位"}</div>
                                <div className="text-xs text-slate-500">{char ? `${char.element} · ${char.role} · ${char.rarity}★` : ""}</div>
                              </div>
                              <div className="flex gap-2">
                                <Button size="sm" variant="secondary" onClick={() => lockSlot(i)}>
                                  {locked ? <Unlock className="size-4 mr-1" /> : <Lock className="size-4 mr-1" />} {locked ? "解锁" : "锁定"}
                                </Button>
                                <Button size="sm" variant="ghost" onClick={() => removeFromTeam(i)}>
                                  移除
                                </Button>
                              </div>
                            </CardContent>
                          </Card>
                        );
                      })}
                    </div>

                    <div className="mt-6">
                      <div className="text-sm text-slate-500 mb-2">在角色库里点选一个角色可快速锁定某个槽位：选择一个槽位后点击角色卡片。</div>
                      <QuickPickGrid roster={filteredPool} onPick={(id) => lockNextEmptySlot(id, lockedSlots, setLockedSlots, setResult)} />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* --- Roster Tab --- */}
          <TabsContent value="roster" className="mt-4">
            <Card className="shadow-sm">
              <CardContent className="p-4 md:p-6 grid gap-4">
                <div className="flex flex-col md:flex-row gap-3 md:items-center">
                  <div className="flex-1">
                    <Input placeholder="搜索角色名…" value={search} onChange={(e) => setSearch(e.target.value)} />
                  </div>
                  <div className="flex gap-2">
                    <Select value={elementFilter} onValueChange={(v) => setElementFilter(v as any)}>
                      <SelectTrigger className="w-40"><SelectValue placeholder="元素" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">全部元素</SelectItem>
                        {ELEMENTS.map((e) => (
                          <SelectItem key={e} value={e}>{e}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Select value={String(rarity)} onValueChange={(v) => setRarity(v === "all" ? "all" : (Number(v) as any))}>
                      <SelectTrigger className="w-32"><SelectValue placeholder="稀有度" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">4★ + 5★</SelectItem>
                        <SelectItem value="4">仅 4★</SelectItem>
                        <SelectItem value="5">仅 5★</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
                  {filteredPool.map((c) => (
                    <div key={c.id} className="group rounded-2xl border p-3 hover:shadow-sm transition bg-white">
                      <div className="flex items-start justify-between gap-2">
                        <AvatarGlyph name={c.name} element={c.element} rarity={c.rarity} small />
                        <Badge variant="secondary">{c.rarity}★</Badge>
                      </div>
                      <div className="mt-2 font-medium leading-tight">{c.name}</div>
                      <div className="text-xs text-slate-500">{c.element} · {c.role}</div>

                      <div className="mt-2 flex items-center gap-2">
                        <Button size="sm" variant="secondary" onClick={() => toggleOwned(c.id)}>
                          {owned[c.id] ? "已拥有" : "标记拥有"}
                        </Button>
                        <Button size="sm" variant="ghost" onClick={() => copyText(`${c.name} | ${c.element} · ${c.role} · ${c.rarity}★`)}>
                          <Copy className="size-4 mr-1"/>复制
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="text-xs text-slate-500">提示：角色库仅内置少量示例，可随时用“自定义角色”添加，你也可以在代码中扩充 STARTER_ROSTER。</div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        <footer className="text-center text-xs text-slate-400 py-8">
          <p>
            © {new Date().getFullYear()} Wuwa Team Randomizer (Lite). 非官方粉丝作品 | 支持分享链接、种子复现与自定义角色。
          </p>
        </footer>
      </div>
    </div>
  );
}

// --- Subcomponents & helpers ---
function AvatarGlyph({ name, element, rarity, small = false }: { name: string; element: string; rarity: number; small?: boolean }) {
  const initials = name.slice(0, 2);
  return (
    <div className={`rounded-2xl grid place-items-center text-center ${small ? "size-14" : "size-20"}`} style={{
      background: gradientForElement(element),
      color: "#0f172a",
    }}>
      <div className={`font-bold ${small ? "text-sm" : "text-lg"}`}>{initials}</div>
      <div className="text-[10px] opacity-70 -mt-0.5">{rarity}★</div>
    </div>
  );
}

function gradientForElement(el: string) {
  const map: Record<string, string> = {
    Glacio: "linear-gradient(135deg,#e0f2fe,#bae6fd)",
    Fusion: "linear-gradient(135deg,#fee2e2,#fecaca)",
    Electro: "linear-gradient(135deg,#ede9fe,#ddd6fe)",
    Aero: "linear-gradient(135deg,#dcfce7,#bbf7d0)",
    Havoc: "linear-gradient(135deg,#fef9c3,#fde68a)",
    Spectro: "linear-gradient(135deg,#fae8ff,#f5d0fe)",
  };
  return map[el] ?? "linear-gradient(135deg,#f1f5f9,#e2e8f0)";
}

function copyText(t: string) {
  navigator.clipboard.writeText(t);
}

function hash(s: string): number {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
  }
  return h >>> 0;
}

function spinWeighted<T extends { weight: number }>(rng: () => number, arr: T[]): T["weight"] extends number ? T : T {
  const total = arr.reduce((a, b) => a + Math.max(0, b.weight), 0);
  let r = rng() * (total || 1);
  for (const item of arr) {
    r -= Math.max(0, item.weight);
    if (r <= 0) return item as any;
  }
  return arr[arr.length - 1] as any;
}

function QuickPickGrid({ roster, onPick }: { roster: readonly any[]; onPick: (id: string) => void }) {
  const [slot, setSlot] = useState(0);
  return (
    <div className="grid gap-3">
      <div className="flex items-center gap-2">
        <span className="text-sm text-slate-600">把角色快速放入槽位：</span>
        <Select value={String(slot)} onValueChange={(v) => setSlot(Number(v))}>
          <SelectTrigger className="w-32"><SelectValue/></SelectTrigger>
          <SelectContent>
            {[0,1,2,3].map(i => <SelectItem key={i} value={String(i)}>{`槽位 ${i+1}`}</SelectItem>)}
          </SelectContent>
        </Select>
      </div>
      <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
        {roster.map((c) => (
          <button key={c.id} onClick={() => onPickAtSlot(c.id, slot, onPick)} className="rounded-xl border bg-white p-2 hover:shadow-sm text-left">
            <div className="flex items-center gap-2">
              <AvatarGlyph name={c.name} element={c.element} rarity={c.rarity} small />
              <div>
                <div className="text-sm font-medium leading-tight">{c.name}</div>
                <div className="text-[10px] text-slate-500">{c.element} · {c.role}</div>
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function onPickAtSlot(id: string, slot: number, onPick: (id: string) => void) {
  // Delegate: parent manages where to put it
  onPick(id);
}

function lockNextEmptySlot(id: string, lockedSlots: (string | null)[], setLockedSlots: any, setResult: any) {
  // Lock into the first empty slot; if none empty, replace last
  const idx = lockedSlots.findIndex((s) => s == null);
  if (idx >= 0) {
    setLockedSlots((prev: (string | null)[]) => {
      const next = [...prev];
      next[idx] = id;
      return next;
    });
    setResult((prev: string[]) => {
      const next = [...prev];
      next[idx] = id;
      return next;
    });
  } else {
    setLockedSlots((prev: (string | null)[]) => {
      const next = [...prev];
      next[next.length - 1] = id;
      return next;
    });
    setResult((prev: string[]) => {
      const next = [...prev];
      next[next.length - 1] = id;
      return next;
    });
  }
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>