loot-tracker.jsx

import { useState, useEffect, useCallback } from "react";

// ── Persistent storage helpers ──────────────────────────────────────────────
const KEYS = {
  loot: "pf_loot_items",
  unidentified: "pf_unidentified_items",
  party: "pf_party_members",
  sessions: "pf_sessions",
  attunement: "pf_attunement",
};

async function load(key) {
  try {
    const r = await window.storage.get(key);
    return r ? JSON.parse(r.value) : null;
  } catch { return null; }
}
async function save(key, val) {
  try { await window.storage.set(key, JSON.stringify(val)); } catch {}
}

// ── Helpers ──────────────────────────────────────────────────────────────────
const uid = () => Math.random().toString(36).slice(2, 10);
const now = () => new Date().toISOString().slice(0, 10);

const ITEM_TYPES = ["Weapon", "Armor", "Wonderous", "Ring", "Staff", "Wand", "Scroll", "Potion", "Gem", "Art", "Ammunition", "Misc"];
const TABS = ["Loot", "Unidentified", "Split", "Attunement", "Sessions"];

// ── Styling constants ─────────────────────────────────────────────────────────
const S = {
  root: {
    minHeight: "100vh",
    background: "linear-gradient(160deg, #0d0a07 0%, #1a1108 50%, #0a0d0a 100%)",
    color: "#e8d5a3",
    fontFamily: "'Crimson Pro', 'Georgia', serif",
    padding: "0",
    position: "relative",
  },
  parchmentNoise: {
    position: "fixed", inset: 0, opacity: 0.03, pointerEvents: "none", zIndex: 0,
    backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
  },
  header: {
    borderBottom: "1px solid #5a3e1b",
    padding: "20px 28px 0",
    background: "linear-gradient(180deg, #1c1205 0%, transparent 100%)",
    position: "relative", zIndex: 1,
  },
  title: {
    fontFamily: "'Cinzel Decorative', 'Palatino Linotype', serif",
    fontSize: "clamp(18px, 4vw, 30px)",
    color: "#c8952a",
    textShadow: "0 0 30px rgba(200,149,42,0.4), 0 2px 4px rgba(0,0,0,0.8)",
    margin: 0, letterSpacing: "0.05em",
  },
  subtitle: { color: "#8a7050", fontSize: "13px", marginTop: 4, fontStyle: "italic" },
  tabs: { display: "flex", gap: 2, marginTop: 16, flexWrap: "wrap" },
  tab: (active) => ({
    padding: "8px 18px", border: "1px solid", borderBottom: "none", cursor: "pointer",
    fontSize: "13px", fontFamily: "'Cinzel', serif", letterSpacing: "0.05em",
    borderRadius: "4px 4px 0 0", transition: "all .15s",
    background: active ? "linear-gradient(180deg, #2a1c08 0%, #1c1205 100%)" : "transparent",
    borderColor: active ? "#5a3e1b" : "transparent",
    color: active ? "#c8952a" : "#6a5535",
  }),
  body: { padding: "24px 28px", position: "relative", zIndex: 1 },
  card: {
    background: "linear-gradient(135deg, rgba(30,20,8,0.95) 0%, rgba(20,14,6,0.95) 100%)",
    border: "1px solid #3a2810",
    borderRadius: 6, padding: "16px 20px", marginBottom: 12,
    boxShadow: "0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,149,42,0.05)",
  },
  input: {
    background: "rgba(10,8,4,0.8)", border: "1px solid #3a2810", borderRadius: 4,
    color: "#e8d5a3", padding: "8px 12px", fontSize: "14px",
    fontFamily: "'Crimson Pro', Georgia, serif", outline: "none",
    transition: "border-color .15s",
  },
  btnGold: {
    background: "linear-gradient(135deg, #c8952a 0%, #8a6018 100%)",
    border: "1px solid #c8952a", color: "#0d0a07", fontWeight: "bold",
    padding: "8px 18px", borderRadius: 4, cursor: "pointer",
    fontFamily: "'Cinzel', serif", fontSize: "12px", letterSpacing: "0.05em",
    transition: "all .15s", whiteSpace: "nowrap",
  },
  btnGhost: {
    background: "transparent", border: "1px solid #3a2810", color: "#8a7050",
    padding: "6px 14px", borderRadius: 4, cursor: "pointer",
    fontSize: "12px", transition: "all .15s", fontFamily: "'Crimson Pro', serif",
  },
  btnDanger: {
    background: "transparent", border: "1px solid #5a1a1a", color: "#8a4040",
    padding: "4px 10px", borderRadius: 4, cursor: "pointer", fontSize: "11px",
  },
  badge: (type) => {
    const colors = {
      Weapon:"#8a3030", Armor:"#304a8a", Wonderous:"#5a3080", Ring:"#806030",
      Staff:"#305a40", Wand:"#5a5020", Scroll:"#406050", Potion:"#604020",
      Gem:"#303a6a", Art:"#5a4020", Ammunition:"#504030", Misc:"#3a3a3a",
    };
    return {
      background: colors[type] || "#3a3a3a", color: "#e8d5a3",
      padding: "2px 8px", borderRadius: 10, fontSize: "11px",
      fontFamily: "'Cinzel', serif", letterSpacing: "0.03em",
    };
  },
  divider: { border: "none", borderTop: "1px solid #2a1c08", margin: "16px 0" },
  label: { color: "#8a7050", fontSize: "12px", fontFamily: "'Cinzel', serif", letterSpacing: "0.05em" },
  totalBar: {
    background: "linear-gradient(90deg, rgba(200,149,42,0.1) 0%, transparent 100%)",
    border: "1px solid #5a3e1b", borderRadius: 6, padding: "12px 20px",
    display: "flex", justifyContent: "space-between", alignItems: "center",
    marginBottom: 16,
  },
  goldText: { color: "#c8952a", fontFamily: "'Cinzel', serif", fontWeight: "bold" },
  row: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" },
  col: (flex) => ({ flex: flex || 1, minWidth: 0 }),
  textarea: {
    background: "rgba(10,8,4,0.8)", border: "1px solid #3a2810", borderRadius: 4,
    color: "#e8d5a3", padding: "8px 12px", fontSize: "13px",
    fontFamily: "'Crimson Pro', Georgia, serif", outline: "none",
    width: "100%", resize: "vertical", minHeight: 60,
  },
  aiBox: {
    background: "rgba(90,60,20,0.15)", border: "1px solid #5a3e1b",
    borderRadius: 4, padding: "12px", marginTop: 8, fontSize: "13px",
    lineHeight: 1.6, whiteSpace: "pre-wrap",
  },
  spinner: {
    display: "inline-block", width: 14, height: 14,
    border: "2px solid #5a3e1b", borderTopColor: "#c8952a",
    borderRadius: "50%", animation: "spin 0.7s linear infinite",
    verticalAlign: "middle", marginRight: 6,
  },
};

// ── AI Lookup ────────────────────────────────────────────────────────────────
async function aiLookup(itemName, system, onChunk) {
  const prompt = `You are a ${system} tabletop RPG expert and treasure appraiser. 
The player wants to identify: "${itemName}"

Respond with a JSON object only (no markdown, no extra text):
{
  "name": "official item name",
  "type": "one of: Weapon/Armor/Wonderous/Ring/Staff/Wand/Scroll/Potion/Gem/Art/Ammunition/Misc",
  "value_gp": <number, base price in gold pieces>,
  "description": "2-3 sentence item description including properties and school of magic if applicable",
  "source": "book/source name e.g. Core Rulebook p.XXX or Archives of Nethys",
  "attunement_required": <true or false>,
  "notes": "any relevant notes about usage, weight, slot etc."
}`;

  const resp = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: 1000,
      messages: [{ role: "user", content: prompt }],
    }),
  });
  const data = await resp.json();
  const text = data.content?.map(b => b.text || "").join("") || "";
  try {
    const clean = text.replace(/```json|```/g, "").trim();
    return JSON.parse(clean);
  } catch { return null; }
}

// ── Main App ──────────────────────────────────────────────────────────────────
export default function LootTracker() {
  const [tab, setTab] = useState("Loot");
  const [loot, setLoot] = useState([]);
  const [unidentified, setUnidentified] = useState([]);
  const [party, setParty] = useState([]);
  const [sessions, setSessions] = useState([]);
  const [attunement, setAttunement] = useState({});
  const [system, setSystem] = useState("Pathfinder 1e");
  const [loaded, setLoaded] = useState(false);

  // Load from storage
  useEffect(() => {
    (async () => {
      const [l, u, p, s, a] = await Promise.all([
        load(KEYS.loot), load(KEYS.unidentified),
        load(KEYS.party), load(KEYS.sessions), load(KEYS.attunement),
      ]);
      if (l) setLoot(l);
      if (u) setUnidentified(u);
      if (p) setParty(p); else setParty([]);
      if (s) setSessions(s); else setSessions([]);
      if (a) setAttunement(a); else setAttunement({});
      setLoaded(true);
    })();
  }, []);

  useEffect(() => { if (loaded) save(KEYS.loot, loot); }, [loot, loaded]);
  useEffect(() => { if (loaded) save(KEYS.unidentified, unidentified); }, [unidentified, loaded]);
  useEffect(() => { if (loaded) save(KEYS.party, party); }, [party, loaded]);
  useEffect(() => { if (loaded) save(KEYS.sessions, sessions); }, [sessions, loaded]);
  useEffect(() => { if (loaded) save(KEYS.attunement, attunement); }, [attunement, loaded]);

  const totalGp = loot.reduce((s, i) => s + (i.value_gp || 0) * (i.quantity || 1), 0);
  const sellableGp = loot.filter(i => i.forSale).reduce((s, i) => s + (i.value_gp || 0) * (i.quantity || 1), 0);

  if (!loaded) return (
    <div style={{ ...S.root, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ textAlign: "center" }}>
        <div style={S.spinner} /><span style={{ color: "#c8952a" }}>Loading treasury…</span>
      </div>
    </div>
  );

  return (
    <div style={S.root}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cinzel+Decorative:wght@400;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        * { box-sizing: border-box; }
        input:focus, select:focus, textarea:focus { border-color: #8a6018 !important; box-shadow: 0 0 0 2px rgba(200,149,42,0.15); }
        button:hover { filter: brightness(1.15); }
        select option { background: #1c1205; color: #e8d5a3; }
        ::-webkit-scrollbar { width: 6px; } 
        ::-webkit-scrollbar-track { background: #0d0a07; }
        ::-webkit-scrollbar-thumb { background: #3a2810; border-radius: 3px; }
        .item-row { animation: fadeIn 0.2s ease; }
      `}</style>
      <div style={S.parchmentNoise} />

      {/* Header */}
      <div style={S.header}>
        <div style={S.row}>
          <div style={{ flex: 1 }}>
            <h1 style={S.title}>⚔ Party Treasury</h1>
            <p style={S.subtitle}>
              {system} · {loot.length} items · Total: <span style={S.goldText}>{totalGp.toLocaleString()} gp</span>
            </p>
          </div>
          <select value={system} onChange={e => setSystem(e.target.value)}
            style={{ ...S.input, fontSize: "12px", padding: "6px 10px" }}>
            {["Pathfinder 1e","Pathfinder 2e","D&D 5e","D&D 3.5","OSR"].map(s =>
              <option key={s}>{s}</option>)}
          </select>
        </div>
        <div style={S.tabs}>
          {TABS.map(t => (
            <button key={t} onClick={() => setTab(t)} style={S.tab(tab === t)}>
              {t === "Unidentified" && unidentified.length > 0
                ? `${t} (${unidentified.length})` : t}
            </button>
          ))}
        </div>
      </div>

      <div style={S.body}>
        {tab === "Loot" && <LootTab loot={loot} setLoot={setLoot} party={party} sessions={sessions} system={system} totalGp={totalGp} sellableGp={sellableGp} />}
        {tab === "Unidentified" && <UnidentifiedTab unidentified={unidentified} setUnidentified={setUnidentified} loot={loot} setLoot={setLoot} sessions={sessions} system={system} />}
        {tab === "Split" && <SplitTab loot={loot} party={party} setParty={setParty} totalGp={totalGp} sellableGp={sellableGp} />}
        {tab === "Attunement" && <AttunementTab loot={loot} setLoot={setLoot} party={party} attunement={attunement} setAttunement={setAttunement} />}
        {tab === "Sessions" && <SessionsTab sessions={sessions} setSessions={setSessions} loot={loot} unidentified={unidentified} />}
      </div>
    </div>
  );
}

// ── LOOT TAB ──────────────────────────────────────────────────────────────────
function LootTab({ loot, setLoot, party, sessions, system, totalGp, sellableGp }) {
  const [form, setForm] = useState({ name:"", type:"Misc", quantity:1, value_gp:"", session:"", claimedBy:"", forSale:false, notes:"" });
  const [aiLoading, setAiLoading] = useState(false);
  const [aiResult, setAiResult] = useState(null);
  const [filter, setFilter] = useState({ type:"All", search:"", forSale:"All" });
  const [expandedId, setExpandedId] = useState(null);
  const [sortBy, setSortBy] = useState("date");

  const handleAI = async () => {
    if (!form.name.trim()) return;
    setAiLoading(true); setAiResult(null);
    const res = await aiLookup(form.name, system);
    if (res) {
      setAiResult(res);
      setForm(f => ({
        ...f,
        name: res.name || f.name,
        type: res.type || f.type,
        value_gp: res.value_gp ?? f.value_gp,
        notes: res.notes || f.notes,
      }));
    } else {
      setAiResult({ error: "Could not identify item. Please fill in manually." });
    }
    setAiLoading(false);
  };

  const addItem = () => {
    if (!form.name.trim()) return;
    setLoot(l => [...l, { id: uid(), ...form, quantity: Number(form.quantity) || 1, value_gp: Number(form.value_gp) || 0, addedOn: now() }]);
    setForm({ name:"", type:"Misc", quantity:1, value_gp:"", session:"", claimedBy:"", forSale:false, notes:"" });
    setAiResult(null);
  };

  const removeItem = (id) => setLoot(l => l.filter(i => i.id !== id));
  const toggleSale = (id) => setLoot(l => l.map(i => i.id === id ? { ...i, forSale: !i.forSale } : i));
  const updateItem = (id, field, val) => setLoot(l => l.map(i => i.id === id ? { ...i, [field]: val } : i));

  const filtered = loot.filter(i => {
    if (filter.type !== "All" && i.type !== filter.type) return false;
    if (filter.forSale === "Sale" && !i.forSale) return false;
    if (filter.forSale === "Keep" && i.forSale) return false;
    if (filter.search && !i.name.toLowerCase().includes(filter.search.toLowerCase())) return false;
    return true;
  }).sort((a, b) => {
    if (sortBy === "value") return (b.value_gp || 0) - (a.value_gp || 0);
    if (sortBy === "name") return a.name.localeCompare(b.name);
    return (b.addedOn || "").localeCompare(a.addedOn || "");
  });

  return (
    <div>
      {/* Totals bar */}
      <div style={S.totalBar}>
        <div>
          <span style={{ ...S.label, marginRight: 16 }}>TOTAL TREASURY</span>
          <span style={{ ...S.goldText, fontSize: "22px" }}>{totalGp.toLocaleString()} gp</span>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ color: "#8a7050", fontSize: "12px" }}>For Sale</div>
          <div style={{ ...S.goldText, fontSize: "16px" }}>{sellableGp.toLocaleString()} gp</div>
        </div>
      </div>

      {/* Add form */}
      <div style={S.card}>
        <div style={{ ...S.label, marginBottom: 10 }}>ADD ITEM</div>
        <div style={{ ...S.row, marginBottom: 8 }}>
          <input style={{ ...S.input, flex: 2, minWidth: 160 }} placeholder="Item name…"
            value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
            onKeyDown={e => e.key === "Enter" && addItem()} />
          <button onClick={handleAI} style={S.btnGhost} disabled={aiLoading || !form.name.trim()}>
            {aiLoading ? <><span style={S.spinner}/>Identifying…</> : "🔍 AI Lookup"}
          </button>
        </div>
        {aiResult && !aiResult.error && (
          <div style={S.aiBox}>
            <strong style={{ color: "#c8952a" }}>{aiResult.name}</strong>
            {aiResult.description && <div style={{ marginTop: 4, color: "#c8a86a" }}>{aiResult.description}</div>}
            {aiResult.source && <div style={{ marginTop: 4, color: "#6a5535", fontSize: "12px" }}>📖 {aiResult.source}</div>}
          </div>
        )}
        {aiResult?.error && <div style={{ ...S.aiBox, borderColor: "#5a1a1a", color: "#8a5050" }}>{aiResult.error}</div>}
        <div style={{ ...S.row, marginTop: 8 }}>
          <select style={{ ...S.input, flex: 1, minWidth: 120 }} value={form.type}
            onChange={e => setForm(f => ({ ...f, type: e.target.value }))}>
            {ITEM_TYPES.map(t => <option key={t}>{t}</option>)}
          </select>
          <input style={{ ...S.input, width: 70 }} type="number" min="1" placeholder="Qty"
            value={form.quantity} onChange={e => setForm(f => ({ ...f, quantity: e.target.value }))} />
          <input style={{ ...S.input, width: 110 }} type="number" placeholder="Value (gp)"
            value={form.value_gp} onChange={e => setForm(f => ({ ...f, value_gp: e.target.value }))} />
          <input style={{ ...S.input, flex: 1, minWidth: 100 }} placeholder="Session / found at…"
            value={form.session} onChange={e => setForm(f => ({ ...f, session: e.target.value }))} />
          <input style={{ ...S.input, flex: 1, minWidth: 100 }} placeholder="Claimed by…"
            value={form.claimedBy} onChange={e => setForm(f => ({ ...f, claimedBy: e.target.value }))} />
        </div>
        <div style={{ ...S.row, marginTop: 8 }}>
          <input style={{ ...S.input, flex: 3 }} placeholder="Notes…"
            value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} />
          <label style={{ display: "flex", alignItems: "center", gap: 6, color: "#8a7050", fontSize: "13px", cursor: "pointer" }}>
            <input type="checkbox" checked={form.forSale}
              onChange={e => setForm(f => ({ ...f, forSale: e.target.checked }))} />
            For Sale
          </label>
          <button style={S.btnGold} onClick={addItem}>+ Add Item</button>
        </div>
      </div>

      {/* Filters */}
      <div style={{ ...S.row, marginBottom: 12, gap: 8 }}>
        <input style={{ ...S.input, flex: 1, minWidth: 140 }} placeholder="🔎 Search…"
          value={filter.search} onChange={e => setFilter(f => ({ ...f, search: e.target.value }))} />
        <select style={{ ...S.input }} value={filter.type}
          onChange={e => setFilter(f => ({ ...f, type: e.target.value }))}>
          <option>All</option>
          {ITEM_TYPES.map(t => <option key={t}>{t}</option>)}
        </select>
        <select style={{ ...S.input }} value={filter.forSale}
          onChange={e => setFilter(f => ({ ...f, forSale: e.target.value }))}>
          <option value="All">All items</option>
          <option value="Sale">For Sale</option>
          <option value="Keep">Keeping</option>
        </select>
        <select style={{ ...S.input }} value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="date">Newest</option>
          <option value="value">By Value</option>
          <option value="name">By Name</option>
        </select>
      </div>

      {/* Items */}
      {filtered.length === 0 && (
        <div style={{ textAlign: "center", color: "#5a4535", padding: 40, fontStyle: "italic" }}>
          The treasury lies empty…
        </div>
      )}
      {filtered.map(item => (
        <div key={item.id} className="item-row" style={{ ...S.card, borderColor: item.forSale ? "#3a5a1a" : "#3a2810" }}>
          <div style={S.row}>
            <span style={S.badge(item.type)}>{item.type}</span>
            <span style={{ flex: 1, fontWeight: 600, fontSize: "15px", cursor: "pointer" }}
              onClick={() => setExpandedId(expandedId === item.id ? null : item.id)}>
              {item.name}
              {item.quantity > 1 && <span style={{ color: "#8a7050", fontSize: "13px" }}> ×{item.quantity}</span>}
              {item.claimedBy && <span style={{ color: "#6a5535", fontSize: "12px", fontStyle: "italic" }}> ({item.claimedBy})</span>}
            </span>
            <span style={{ ...S.goldText, fontSize: "15px", minWidth: 80, textAlign: "right" }}>
              {(item.value_gp * (item.quantity || 1)).toLocaleString()} gp
            </span>
            <button style={{ ...S.btnGhost, fontSize: "11px", padding: "4px 10px" }}
              onClick={() => toggleSale(item.id)}>
              {item.forSale ? "🟢 Sale" : "🔒 Keep"}
            </button>
            <button style={S.btnDanger} onClick={() => removeItem(item.id)}>✕</button>
          </div>

          {expandedId === item.id && (
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid #2a1c08" }}>
              <div style={{ ...S.row, marginBottom: 8 }}>
                <div style={S.col(1)}>
                  <div style={S.label}>VALUE (gp)</div>
                  <input style={{ ...S.input, width: "100%" }} type="number"
                    value={item.value_gp} onChange={e => updateItem(item.id, "value_gp", Number(e.target.value))} />
                </div>
                <div style={S.col(1)}>
                  <div style={S.label}>QTY</div>
                  <input style={{ ...S.input, width: "100%" }} type="number" min="1"
                    value={item.quantity} onChange={e => updateItem(item.id, "quantity", Number(e.target.value))} />
                </div>
                <div style={S.col(2)}>
                  <div style={S.label}>CLAIMED BY</div>
                  <input style={{ ...S.input, width: "100%" }}
                    value={item.claimedBy || ""} onChange={e => updateItem(item.id, "claimedBy", e.target.value)} />
                </div>
                <div style={S.col(2)}>
                  <div style={S.label}>SESSION / SOURCE</div>
                  <input style={{ ...S.input, width: "100%" }}
                    value={item.session || ""} onChange={e => updateItem(item.id, "session", e.target.value)} />
                </div>
              </div>
              <div>
                <div style={S.label}>NOTES</div>
                <textarea style={S.textarea} value={item.notes || ""}
                  onChange={e => updateItem(item.id, "notes", e.target.value)} />
              </div>
              {item.addedOn && <div style={{ color: "#4a3828", fontSize: "11px", marginTop: 8 }}>Added: {item.addedOn}</div>}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ── UNIDENTIFIED TAB ──────────────────────────────────────────────────────────
function UnidentifiedTab({ unidentified, setUnidentified, loot, setLoot, sessions, system }) {
  const [form, setForm] = useState({ tempName:"", description:"", foundAt:"", suspectedType:"Misc" });
  const [identifying, setIdentifying] = useState({});

  const addUnid = () => {
    if (!form.tempName.trim()) return;
    setUnidentified(u => [...u, { id: uid(), ...form, addedOn: now() }]);
    setForm({ tempName:"", description:"", foundAt:"", suspectedType:"Misc" });
  };

  const identifyWithAI = async (item) => {
    setIdentifying(s => ({ ...s, [item.id]: true }));
    const query = `${item.tempName}${item.description ? ": " + item.description : ""}`;
    const res = await aiLookup(query, system);
    if (res && !res.error) {
      // Move to loot
      setLoot(l => [...l, {
        id: uid(), name: res.name || item.tempName, type: res.type || item.suspectedType,
        quantity: 1, value_gp: res.value_gp || 0, session: item.foundAt,
        claimedBy: "", forSale: false, notes: (res.notes || "") + (res.description ? "\n" + res.description : ""),
        addedOn: now(),
      }]);
      setUnidentified(u => u.filter(i => i.id !== item.id));
    }
    setIdentifying(s => ({ ...s, [item.id]: false }));
  };

  const removeUnid = (id) => setUnidentified(u => u.filter(i => i.id !== id));
  const manualIdentify = (item) => {
    const name = prompt("Identified name:", item.tempName);
    if (!name) return;
    const gp = parseFloat(prompt("Value in gp:", "0") || "0");
    setLoot(l => [...l, {
      id: uid(), name, type: item.suspectedType, quantity: 1, value_gp: gp,
      session: item.foundAt, claimedBy: "", forSale: false,
      notes: item.description || "", addedOn: now(),
    }]);
    setUnidentified(u => u.filter(i => i.id !== item.id));
  };

  return (
    <div>
      <div style={S.card}>
        <div style={{ ...S.label, marginBottom: 10 }}>ADD UNIDENTIFIED ITEM</div>
        <div style={{ ...S.row, marginBottom: 8 }}>
          <input style={{ ...S.input, flex: 2, minWidth: 140 }} placeholder="Temp. name / description…"
            value={form.tempName} onChange={e => setForm(f => ({ ...f, tempName: e.target.value }))} />
          <select style={{ ...S.input }} value={form.suspectedType}
            onChange={e => setForm(f => ({ ...f, suspectedType: e.target.value }))}>
            {ITEM_TYPES.map(t => <option key={t}>{t}</option>)}
          </select>
          <input style={{ ...S.input, flex: 1, minWidth: 100 }} placeholder="Found at…"
            value={form.foundAt} onChange={e => setForm(f => ({ ...f, foundAt: e.target.value }))} />
        </div>
        <div style={{ ...S.row }}>
          <textarea style={{ ...S.textarea, flex: 3, minHeight: 48 }} placeholder="Description / physical appearance…"
            value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} />
          <button style={S.btnGold} onClick={addUnid}>+ Add</button>
        </div>
      </div>

      {unidentified.length === 0 && (
        <div style={{ textAlign: "center", color: "#5a4535", padding: 40, fontStyle: "italic" }}>
          No unidentified items in the party's possession.
        </div>
      )}

      {unidentified.map(item => (
        <div key={item.id} className="item-row" style={{ ...S.card, borderColor: "#5a3a10" }}>
          <div style={S.row}>
            <span style={{ ...S.badge("Misc"), background: "#4a3010" }}>❓ {item.suspectedType}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontStyle: "italic", color: "#c8952a" }}>{item.tempName}</div>
              {item.description && <div style={{ fontSize: "13px", color: "#8a7050", marginTop: 2 }}>{item.description}</div>}
              {item.foundAt && <div style={{ fontSize: "12px", color: "#5a4535", marginTop: 2 }}>📍 {item.foundAt}</div>}
            </div>
            <div style={{ ...S.row, gap: 6 }}>
              <button style={S.btnGhost} disabled={identifying[item.id]}
                onClick={() => identifyWithAI(item)}>
                {identifying[item.id] ? <><span style={S.spinner}/>Identifying…</> : "🔍 AI Identify"}
              </button>
              <button style={S.btnGhost} onClick={() => manualIdentify(item)}>✏ Manual</button>
              <button style={S.btnDanger} onClick={() => removeUnid(item.id)}>✕</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── SPLIT TAB ─────────────────────────────────────────────────────────────────
function SplitTab({ loot, party, setParty, totalGp, sellableGp }) {
  const [newMember, setNewMember] = useState("");
  const [splitMode, setSplitMode] = useState("equal");

  const addMember = () => {
    if (!newMember.trim()) return;
    setParty(p => [...p, { id: uid(), name: newMember.trim(), share: 1 }]);
    setNewMember("");
  };

  const removeMember = (id) => setParty(p => p.filter(m => m.id !== id));
  const updateShare = (id, val) => setParty(p => p.map(m => m.id === id ? { ...m, share: Number(val) } : m));

  const totalShares = party.reduce((s, m) => s + (m.share || 1), 0);
  const splitValue = splitMode === "sale" ? sellableGp : totalGp;

  return (
    <div>
      <div style={S.totalBar}>
        <div>
          <span style={S.label}>SPLITTING </span>
          <select style={{ ...S.input, marginLeft: 8, padding: "4px 8px", fontSize: "13px" }}
            value={splitMode} onChange={e => setSplitMode(e.target.value)}>
            <option value="equal">Total Treasury</option>
            <option value="sale">For Sale Only</option>
          </select>
        </div>
        <span style={{ ...S.goldText, fontSize: "20px" }}>{splitValue.toLocaleString()} gp</span>
      </div>

      {/* Party roster */}
      <div style={S.card}>
        <div style={{ ...S.label, marginBottom: 10 }}>PARTY ROSTER</div>
        <div style={{ ...S.row, marginBottom: 12 }}>
          <input style={{ ...S.input, flex: 1 }} placeholder="Character name…"
            value={newMember} onChange={e => setNewMember(e.target.value)}
            onKeyDown={e => e.key === "Enter" && addMember()} />
          <button style={S.btnGold} onClick={addMember}>+ Add Member</button>
        </div>

        {party.length === 0 && (
          <div style={{ color: "#5a4535", fontStyle: "italic", textAlign: "center", padding: 16 }}>
            Add party members to calculate splits.
          </div>
        )}

        {party.map(m => {
          const memberShare = (m.share || 1) / totalShares * splitValue;
          return (
            <div key={m.id} style={{ ...S.row, marginBottom: 8, padding: "10px 14px", background: "rgba(0,0,0,0.3)", borderRadius: 4 }}>
              <span style={{ flex: 2, fontSize: "15px" }}>{m.name}</span>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={S.label}>SHARE</span>
                <input style={{ ...S.input, width: 50, textAlign: "center" }} type="number" min="0" step="0.5"
                  value={m.share || 1} onChange={e => updateShare(m.id, e.target.value)} />
              </div>
              <span style={{ ...S.goldText, minWidth: 100, textAlign: "right", fontSize: "16px" }}>
                {memberShare.toLocaleString(undefined, { maximumFractionDigits: 1 })} gp
              </span>
              <span style={{ color: "#6a5535", fontSize: "12px", minWidth: 50, textAlign: "right" }}>
                {((m.share || 1) / totalShares * 100).toFixed(0)}%
              </span>
              <button style={S.btnDanger} onClick={() => removeMember(m.id)}>✕</button>
            </div>
          );
        })}

        {party.length > 1 && (
          <>
            <hr style={S.divider} />
            <div style={{ color: "#6a5535", fontSize: "12px", fontStyle: "italic" }}>
              💡 Adjust "Share" weights for unequal splits (e.g. 2 = double share)
            </div>
          </>
        )}
      </div>

      {/* Items per person */}
      {party.length > 0 && (
        <div style={S.card}>
          <div style={{ ...S.label, marginBottom: 10 }}>CLAIMED ITEMS PER CHARACTER</div>
          {party.map(m => {
            const claimed = loot.filter(i => i.claimedBy?.toLowerCase() === m.name.toLowerCase());
            const claimedVal = claimed.reduce((s, i) => s + (i.value_gp || 0) * (i.quantity || 1), 0);
            return (
              <div key={m.id} style={{ marginBottom: 12 }}>
                <div style={{ ...S.row, marginBottom: 4 }}>
                  <span style={{ fontWeight: 600 }}>{m.name}</span>
                  <span style={{ color: "#c8952a", fontSize: "13px" }}>{claimedVal.toLocaleString()} gp in items</span>
                </div>
                {claimed.length === 0
                  ? <div style={{ color: "#4a3828", fontSize: "12px", fontStyle: "italic" }}>No claimed items</div>
                  : claimed.map(i => (
                    <div key={i.id} style={{ fontSize: "13px", color: "#8a7050", paddingLeft: 12 }}>
                      • {i.name} — {(i.value_gp * (i.quantity || 1)).toLocaleString()} gp
                    </div>
                  ))
                }
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ── ATTUNEMENT TAB ────────────────────────────────────────────────────────────
function AttunementTab({ loot, setLoot, party, attunement, setAttunement }) {
  const attunable = loot.filter(i => ["Wonderous", "Ring", "Staff", "Weapon", "Armor"].includes(i.type));

  const setAtt = (itemId, charName) => {
    setAttunement(a => ({ ...a, [itemId]: charName || null }));
    setLoot(l => l.map(i => i.id === itemId ? { ...i, claimedBy: charName || i.claimedBy } : i));
  };

  const attunedByChar = {};
  Object.entries(attunement).forEach(([itemId, char]) => {
    if (char) {
      if (!attunedByChar[char]) attunedByChar[char] = [];
      const item = loot.find(i => i.id === itemId);
      if (item) attunedByChar[char].push(item);
    }
  });

  return (
    <div>
      <div style={{ ...S.card, borderColor: "#3a3080" }}>
        <div style={{ ...S.label, marginBottom: 4 }}>ATTUNEMENT TRACKER</div>
        <div style={{ color: "#6a5575", fontSize: "12px", marginBottom: 12 }}>
          Pathfinder 1e uses item bonding / cursed items rather than attunement slots — track bonded items and special item possession here.
        </div>

        {attunable.length === 0 && (
          <div style={{ color: "#5a4535", fontStyle: "italic" }}>No attunement-eligible items in treasury.</div>
        )}

        {attunable.map(item => (
          <div key={item.id} style={{ ...S.row, marginBottom: 8, padding: "8px 12px", background: "rgba(0,0,0,0.3)", borderRadius: 4 }}>
            <span style={S.badge(item.type)}>{item.type}</span>
            <span style={{ flex: 2 }}>{item.name}</span>
            <span style={S.label}>HELD BY</span>
            <select style={{ ...S.input, minWidth: 130 }}
              value={attunement[item.id] || ""}
              onChange={e => setAtt(item.id, e.target.value)}>
              <option value="">— Unassigned —</option>
              {party.map(m => <option key={m.id} value={m.name}>{m.name}</option>)}
            </select>
          </div>
        ))}
      </div>

      {/* Summary per character */}
      {Object.keys(attunedByChar).length > 0 && (
        <div style={S.card}>
          <div style={{ ...S.label, marginBottom: 10 }}>ITEMS PER CHARACTER</div>
          {Object.entries(attunedByChar).map(([char, items]) => (
            <div key={char} style={{ marginBottom: 10 }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>{char} <span style={{ color: "#6a5535", fontSize: "12px" }}>({items.length} item{items.length !== 1 ? "s" : ""})</span></div>
              {items.map(i => (
                <div key={i.id} style={{ fontSize: "13px", color: "#8a7050", paddingLeft: 12 }}>
                  • {i.name} <span style={{ color: "#4a3828" }}>({i.type})</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── SESSIONS TAB ──────────────────────────────────────────────────────────────
function SessionsTab({ sessions, setSessions, loot, unidentified }) {
  const [form, setForm] = useState({ name:"", date: now(), notes:"" });

  const addSession = () => {
    if (!form.name.trim()) return;
    setSessions(s => [...s, { id: uid(), ...form }]);
    setForm({ name:"", date: now(), notes:"" });
  };

  const removeSession = (id) => setSessions(s => s.filter(se => se.id !== id));

  return (
    <div>
      <div style={S.card}>
        <div style={{ ...S.label, marginBottom: 10 }}>LOG SESSION</div>
        <div style={S.row}>
          <input style={{ ...S.input, flex: 2 }} placeholder="Session name (e.g. Session 12 — The Crypt of Arazni)"
            value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
          <input style={{ ...S.input }} type="date" value={form.date}
            onChange={e => setForm(f => ({ ...f, date: e.target.value }))} />
          <button style={S.btnGold} onClick={addSession}>+ Log</button>
        </div>
        <textarea style={{ ...S.textarea, marginTop: 8 }} placeholder="Session notes…"
          value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} />
      </div>

      {sessions.length === 0 && (
        <div style={{ textAlign: "center", color: "#5a4535", padding: 40, fontStyle: "italic" }}>
          No sessions logged yet. The chronicle awaits…
        </div>
      )}

      {[...sessions].reverse().map(se => {
        const sessionLoot = loot.filter(i => i.session === se.name);
        const sessionUnid = unidentified.filter(i => i.foundAt === se.name);
        const sessionVal = sessionLoot.reduce((s, i) => s + (i.value_gp || 0) * (i.quantity || 1), 0);
        return (
          <div key={se.id} className="item-row" style={S.card}>
            <div style={S.row}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "'Cinzel', serif", fontSize: "15px", color: "#c8952a" }}>{se.name}</div>
                <div style={{ color: "#5a4535", fontSize: "12px", marginTop: 2 }}>📅 {se.date}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ ...S.goldText }}>{sessionVal.toLocaleString()} gp</div>
                <div style={{ color: "#6a5535", fontSize: "12px" }}>
                  {sessionLoot.length} items{sessionUnid.length > 0 ? ` · ${sessionUnid.length} unid` : ""}
                </div>
              </div>
              <button style={S.btnDanger} onClick={() => removeSession(se.id)}>✕</button>
            </div>
            {se.notes && <div style={{ marginTop: 8, color: "#8a7050", fontSize: "13px", fontStyle: "italic" }}>{se.notes}</div>}
            {sessionLoot.length > 0 && (
              <div style={{ marginTop: 10 }}>
                {sessionLoot.map(i => (
                  <div key={i.id} style={{ fontSize: "13px", color: "#7a6045", paddingLeft: 8 }}>
                    • {i.name} — {(i.value_gp * (i.quantity || 1)).toLocaleString()} gp
                  </div>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}