/* Truong So CRM — main app */
const { useState: useS, useMemo, useEffect: useE, useRef: useR } = React;

const NAV = [
  { id: "deals", label: "Giao dịch", k: "nav_deals", icon: "M3 6h18M3 12h18M3 18h12" },
  { id: "leads", label: "Khách tiềm năng", k: "nav_leads", icon: "M12 3l9 4-9 4-9-4 9-4zM3 12l9 4 9-4" },
  { id: "contacts", label: "Liên hệ", k: "nav_contacts", icon: "M12 12a4 4 0 100-8 4 4 0 000 8zM4 20a8 8 0 0116 0" },
  { id: "reports", label: "Báo cáo", k: "nav_reports", icon: "M4 20V10M10 20V4M16 20v-7M22 20H2" },
  { id: "inbox", label: "Hộp thư", k: "nav_inbox", icon: "M3 6h18v12H3zM3 7l9 6 9-6" },
];

const THEMES = [
  { id: "indigo", name: "Indigo", hue: 262 },
  { id: "emerald", name: "Emerald", hue: 150 },
  { id: "ocean", name: "Ocean", hue: 230 },
];

function SalesFilter({ value, onChange }) {
  const [open, setOpen] = useS(false);
  const sel = value === "all" ? null : ownerById(value);
  return (
    <div className="salesFilter">
      <button className={"sfBtn" + (value !== "all" ? " active" : "")} onClick={() => setOpen(o => !o)}>
        {sel ? <Avatar owner={sel} size={22} /> : (
          <svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="1.9"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>
        )}
        <span>{sel ? sel.name : window.t("all_sales")}</span>
        <svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      {open && (
        <div className="sfMenu" onMouseLeave={() => setOpen(false)}>
          <button className={"sfOpt" + (value === "all" ? " active" : "")} onClick={() => { onChange("all"); setOpen(false); }}>
            <span className="sfAllIcon"><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="1.9"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg></span>
            {window.t("all_sales")}
          </button>
          {window.CRM_OWNERS.map(o => (
            <button key={o.id} className={"sfOpt" + (value === o.id ? " active" : "")} onClick={() => { onChange(o.id); setOpen(false); }}>
              <Avatar owner={o} size={24} />{o.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Sidebar({ active, primary, onNav, collapsed, onToggle, lang, onLang, themeHue, onTheme }) {
  return (
    <nav className={"sidebar" + (collapsed ? " collapsed" : "")}>
      <div className="brand">
        <div className="brandMark" style={{ background: primary }}>TS</div>
        <div className="brandName">Truong So<span>CRM</span></div>
        <button className="navToggle" onClick={onToggle} aria-label={collapsed ? "Mở rộng menu" : "Thu gọn menu"} title={collapsed ? "Mở rộng" : "Thu gọn"}>
          <svg viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={collapsed ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}/></svg>
        </button>
      </div>
      <div className="navList">
        {NAV.map(n => (
          <button key={n.id} className={"navItem" + (n.id === active ? " active" : "")} onClick={() => onNav && onNav(n.id)} data-tip={t(n.k)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d={n.icon}/></svg>
            <span>{t(n.k)}</span>
          </button>
        ))}
      </div>
      <div className="navFoot">
        <div className="navTools">
          <div className="toolRow">
            <span className="toolLbl">{t("theme")}</span>
            <div className="swatches">
              {THEMES.map(th => (
                <button key={th.id} className={"swatch" + (themeHue === th.hue ? " on" : "")} title={th.name}
                  style={{ background: `oklch(0.55 0.16 ${th.hue})` }} onClick={() => onTheme(th.hue)} data-tip={th.name}></button>
              ))}
            </div>
          </div>
          <div className="toolRow">
            <span className="toolLbl">{t("language")}</span>
            <div className="langToggle" data-tip={lang === "vi" ? "English" : "Tiếng Việt"}>
              <button className={lang === "vi" ? "on" : ""} onClick={() => onLang("vi")}>VI</button>
              <button className={lang === "en" ? "on" : ""} onClick={() => onLang("en")}>EN</button>
            </div>
          </div>
        </div>
        <button className="navItem" data-tip={t("nav_settings")}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1l2-1.6-2-3.4-2.4 1a7 7 0 00-1.7-1L16.5 3h-4l-.3 2.6a7 7 0 00-1.7 1l-2.4-1-2 3.4 2 1.6a7 7 0 000 2l-2 1.6 2 3.4 2.4-1a7 7 0 001.7 1l.3 2.6h4l.3-2.6a7 7 0 001.7-1l2.4 1 2-3.4-2-1.6a7 7 0 00.1-1z"/></svg><span>{t("nav_settings")}</span></button>
        <div className="meRow"><Avatar owner={window.CRM_OWNERS[0]} size={30} /><div className="meName">Trương Sơn<span>{t("role_admin")}</span></div></div>
      </div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const primary = `oklch(${t.primaryL} 0.16 ${t.primaryHue})`;

  const [view, setView] = useS("deals");
  const [collapsed, setCollapsed] = useS(() => localStorage.getItem("ts_nav_collapsed") === "1");
  useE(() => { localStorage.setItem("ts_nav_collapsed", collapsed ? "1" : "0"); }, [collapsed]);
  const [lang, setLang] = useS(() => localStorage.getItem("ts_lang") || "vi");
  window.__lang = lang;
  useE(() => { localStorage.setItem("ts_lang", lang); }, [lang]);
  const [pipeId, setPipeId] = useS("sales");
  const [deals, setDeals] = useS(() => window.CRM_DEALS.map(d => ({ ...d })));
  const [contacts, setContacts] = useS(() => window.CRM_CONTACTS.map(c => ({ ...c })));
  const [openDeal, setOpenDeal] = useS(null);
  const [openContact, setOpenContact] = useS(null);
  const [wizardOpen, setWizardOpen] = useS(false);
  const [query, setQuery] = useS("");
  const [ownerFilter, setOwnerFilter] = useS("all");
  const [toast, setToast] = useS(null);
  const [pipeMenu, setPipeMenu] = useS(false);

  const stages = window.CRM_STAGES[pipeId];
  const pipeline = window.CRM_PIPELINES.find(p => p.id === pipeId);

  // drag state
  const [dragId, setDragId] = useS(null);
  const [overStage, setOverStage] = useS(null);
  const dragDeal = useR(null);

  const dnd = {
    dragId, overStage,
    onDragStart: (e, deal) => { dragDeal.current = deal; setDragId(deal.id); e.dataTransfer.effectAllowed = "move"; },
    onDragEnd: () => { setDragId(null); setOverStage(null); dragDeal.current = null; },
    onOver: (sid) => { if (overStage !== sid) setOverStage(sid); },
    onLeave: (sid) => { setOverStage(s => (s === sid ? null : s)); },
    onDrop: (sid) => {
      const d = dragDeal.current;
      if (d && d.stage !== sid) {
        setDeals(prev => prev.map(x => x.id === d.id ? { ...x, stage: sid, idleDays: 0 } : x));
        const st = stages.find(s => s.id === sid);
        showToast(`Đã chuyển “${d.title}” → ${st.name}`);
      }
      setDragId(null); setOverStage(null); dragDeal.current = null;
    },
  };

  function showToast(msg) { setToast(msg); clearTimeout(window.__tt); window.__tt = setTimeout(() => setToast(null), 2600); }

  const filtered = useMemo(() => deals.filter(d =>
    d.pipeline === pipeId &&
    (ownerFilter === "all" || d.owner === ownerFilter) &&
    (query === "" || (d.title + d.company).toLowerCase().includes(query.toLowerCase()))
  ), [deals, pipeId, ownerFilter, query]);

  const byStage = (sid) => filtered.filter(d => d.stage === sid);
  const totalAll = filtered.reduce((s, d) => s + d.value, 0);
  const openCount = filtered.length;

  function moveDeal(deal, sid) {
    setDeals(prev => prev.map(x => x.id === deal.id ? { ...x, stage: sid, idleDays: 0 } : x));
    setOpenDeal(prev => prev ? { ...prev, stage: sid } : null);
  }
  function updateDeal(id, patch) {
    setDeals(prev => prev.map(x => x.id === id ? { ...x, ...patch } : x));
    setOpenDeal(prev => (prev && prev.id === id) ? { ...prev, ...patch } : prev);
  }
  function winDeal(deal) { setDeals(prev => prev.filter(x => x.id !== deal.id)); setOpenDeal(null); showToast(`🎉 Thắng deal “${deal.title}” — ${fmtVND(deal.value)} ₫`); }
  function loseDeal(deal) { setDeals(prev => prev.filter(x => x.id !== deal.id)); setOpenDeal(null); showToast(`Đã đánh dấu mất deal “${deal.title}”`); }

  function addDeal() {
    const id = "n" + Date.now();
    const nd = { id, pipeline: pipeId, stage: stages[0].id, title: window.t("deal_new"), company: window.t("customer_unnamed"), value: 20000000, owner: "u1", label: null, next: new Date("2026-06-09").toISOString(), activities: 0, idleDays: 0 };
    setDeals(prev => [nd, ...prev]);
    setOpenDeal(nd);
  }

  function quickAddDeal(stageId, title) {
    const owner = ownerFilter === "all" ? "u1" : ownerFilter;
    const nd = { id: "q" + Date.now(), pipeline: pipeId, stage: stageId, title, company: window.t("customer_unnamed"), value: 0, owner, label: null, next: new Date("2026-06-13").toISOString(), activities: 0, idleDays: 0 };
    setDeals(prev => [nd, ...prev]);
  }

  function saveCustomer({ contact, deal }) {
    setContacts(prev => [contact, ...prev]);
    if (deal) { setDeals(prev => [deal, ...prev]); }
    setWizardOpen(false);
    showToast(deal ? `Đã thêm “${contact.name}” + cơ hội ${fmtVND(deal.value)} ₫` : `Đã thêm khách hàng “${contact.name}”`);
  }

  function setContactStatus(ids, status) {
    const set = new Set(ids);
    setContacts(prev => prev.map(c => set.has(c.id) ? { ...c, status } : c));
    const label = window.tStatus ? window.tStatus(status) : status;
    showToast(`${window.t("changed_status")} ${window.t("bulk_to")} “${label}” (${ids.length})`);
  }

  function dealFromContact(contact) {
    setOpenContact(null);
    const nd = { id: "d" + Date.now(), pipeline: pipeId, stage: stages[0].id, title: "Cơ hội mới · " + contact.name, company: contact.company, value: 20000000, owner: contact.owner, label: contact.tags[0] || null, next: new Date("2026-06-13").toISOString(), activities: 0, idleDays: 0 };
    setDeals(prev => [nd, ...prev]);
    setView("deals");
    setOpenDeal(nd);
    showToast(`Đã tạo cơ hội cho “${contact.name}”`);
  }

  function onNav(id) {
    if (id === "contacts" || id === "leads") setView("contacts");
    else if (id === "deals") setView("deals");
    else if (id === "reports") setView("reports");
    else showToast("Màn hình “" + NAV.find(n => n.id === id).label + "” đang được phát triển");
  }

  const navActive = view === "contacts" ? "contacts" : view === "reports" ? "reports" : "deals";

  return (
    <div className={"app" + (collapsed ? " navCollapsed" : "")} data-density={t.density} style={{ "--primary": primary, "--radius": t.radius + "px" }}>
      <Sidebar active={navActive} primary={primary} onNav={onNav} collapsed={collapsed} onToggle={() => setCollapsed(c => !c)}
        lang={lang} onLang={setLang} themeHue={t.primaryHue} onTheme={(h) => setTweak('primaryHue', h)} />
      <main className="main">
        {view === "deals" && (<>
        <header className="topbar">
          <div className="pipeSwitch">
            <button className="pipeBtn" onClick={() => setPipeMenu(v => !v)}>
              <h1>{pipeline.name}</h1>
              <svg viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            {pipeMenu && (
              <div className="pipeMenu" onMouseLeave={() => setPipeMenu(false)}>
                {window.CRM_PIPELINES.map(p => (
                  <button key={p.id} className={"pipeOpt" + (p.id === pipeId ? " active" : "")}
                    onClick={() => { setPipeId(p.id); setPipeMenu(false); setOpenDeal(null); }}>{p.name}</button>
                ))}
              </div>
            )}
          </div>
          <div className="topStats">
            <div className="stat"><span className="statNum">{openCount}</span><span className="statLbl">{window.t("stat_deals")}</span></div>
            <div className="statDiv"></div>
            <div className="stat"><span className="statNum">{fmtVND(totalAll)} ₫</span><span className="statLbl">{window.t("stat_value")}</span></div>
          </div>
          <div className="topRight">
            <div className="search">
              <svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
              <input placeholder={window.t("search_deals")} value={query} onChange={e => setQuery(e.target.value)} />
            </div>
            <SalesFilter value={ownerFilter} onChange={setOwnerFilter} />
            <button className="btn primary addBtn" onClick={addDeal}>
              <svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>
              {window.t("add_deal")}
            </button>
          </div>
        </header>

        <div className="board" data-cols={stages.length}>
          {stages.map(s => (
            <Column key={s.id} stage={s} deals={byStage(s.id)} density={t.density}
              onOpen={setOpenDeal} dnd={dnd} onQuickAdd={quickAddDeal} />
          ))}
        </div>
        </>)}
        {view === "contacts" && (
          <ContactsList contacts={contacts} onAdd={() => setWizardOpen(true)} onOpen={setOpenContact}
            onStatusChange={setContactStatus} onDealFromContact={dealFromContact} />
        )}
        {view === "reports" && <Reports deals={deals} />}
      </main>

      <ContactPanel contact={openContact} onClose={() => setOpenContact(null)} onAddDeal={dealFromContact} />
      {wizardOpen && <AddCustomerWizard onClose={() => setWizardOpen(false)} onSave={saveCustomer} defaultPipeline={pipeId} />}

      <DealDetail deal={openDeal} stages={stages} pipeline={pipeline} owners={window.CRM_OWNERS}
        onClose={() => setOpenDeal(null)} onUpdate={(patch) => updateDeal(openDeal.id, patch)}
        onWin={winDeal} onLose={loseDeal} />

      {toast && <div className="toast">{toast}</div>}

      <TweaksPanel>
        <TweakSection label="Thương hiệu" />
        <TweakColor label="Màu chủ đạo" value={t.primaryHue}
          options={[262, 215, 150, 25, 320]}
          onChange={(v) => setTweak('primaryHue', v)} />
        <TweakSlider label="Độ đậm màu" value={t.primaryL} min={0.42} max={0.6} step={0.02}
          onChange={(v) => setTweak('primaryL', v)} />
        <TweakSection label="Bố cục" />
        <TweakRadio label="Mật độ thẻ" value={t.density} options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak('density', v)} />
        <TweakSlider label="Bo góc" value={t.radius} min={4} max={18} unit="px"
          onChange={(v) => setTweak('radius', v)} />
      </TweaksPanel>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryHue": 262,
  "primaryL": 0.5,
  "density": "regular",
  "radius": 10
}/*EDITMODE-END*/;

ReactDOM.createRoot(document.getElementById("root")).render(<App />);