/* Truong So CRM — Deal Details tab content */
const { useState: useTS, useRef: useTR } = React;

function fmtMoney(n) { return (n || 0).toLocaleString("vi-VN") + " ₫"; }

/* ---------- Products / quote line items ---------- */
function ProductsTab({ initial, onApplyTotal }) {
  const [rows, setRows] = useTS(initial && initial.length ? initial : [
    { id: "li1", name: "Gói triển khai & cấu hình", unit: "gói", qty: 1, price: 35000000 },
    { id: "li2", name: "License phần mềm CRM", unit: "tài khoản/năm", qty: 25, price: 2400000 },
  ]);
  const [picking, setPicking] = useTS(false);
  const total = rows.reduce((s, r) => s + r.qty * r.price, 0);

  function addProduct(p) {
    setRows(prev => [...prev, { id: "li" + Date.now(), name: p.name, unit: p.unit, qty: 1, price: p.price }]);
    setPicking(false);
  }
  function addCustom() {
    setRows(prev => [...prev, { id: "li" + Date.now(), name: "Hạng mục mới", unit: "đơn vị", qty: 1, price: 0 }]);
    setPicking(false);
  }
  function update(id, patch) { setRows(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r)); }
  function remove(id) { setRows(prev => prev.filter(r => r.id !== id)); }

  return (
    <div className="tabPane">
      <div className="lineTable">
        <div className="lineHead">
          <span>Sản phẩm / dịch vụ</span><span className="lcQty">SL</span><span className="lcPrice">Đơn giá</span><span className="lcTotal">Thành tiền</span><span className="lcDel"></span>
        </div>
        {rows.map(r => (
          <div key={r.id} className="lineRow">
            <div className="liName">
              <input className="liInput name" value={r.name} onChange={e => update(r.id, { name: e.target.value })} />
              <input className="liInput unit" value={r.unit} onChange={e => update(r.id, { unit: e.target.value })} />
            </div>
            <input className="liInput qty" inputMode="numeric" value={r.qty}
              onChange={e => update(r.id, { qty: Number(e.target.value.replace(/\D/g, "")) || 0 })} />
            <input className="liInput price" inputMode="numeric" value={r.price.toLocaleString("vi-VN")}
              onChange={e => update(r.id, { price: Number(e.target.value.replace(/\D/g, "")) || 0 })} />
            <span className="liTotal">{fmtMoney(r.qty * r.price)}</span>
            <button className="liDel" onClick={() => remove(r.id)} aria-label="Xoá">✕</button>
          </div>
        ))}
        {rows.length === 0 && <div className="lineEmpty">Chưa có sản phẩm. Thêm hạng mục để tính giá trị cơ hội.</div>}
      </div>

      <div className="lineAddWrap">
        <button className="lineAdd" onClick={() => setPicking(v => !v)}>
          <svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>Thêm sản phẩm
        </button>
        {picking && (
          <div className="prodMenu" onMouseLeave={() => setPicking(false)}>
            {window.CRM_PRODUCTS.map(p => (
              <button key={p.id} className="prodOpt" onClick={() => addProduct(p)}>
                <span>{p.name}<span className="prodUnit">{p.unit}</span></span>
                <span className="prodPrice">{fmtMoney(p.price)}</span>
              </button>
            ))}
            <button className="prodOpt custom" onClick={addCustom}>+ Hạng mục tuỳ chỉnh</button>
          </div>
        )}
      </div>

      <div className="lineFoot">
        <div className="lineTotals">
          <div className="ltRow"><span>Tạm tính</span><b>{fmtMoney(total)}</b></div>
          <div className="ltRow"><span>VAT 10%</span><b>{fmtMoney(Math.round(total * 0.1))}</b></div>
          <div className="ltRow grand"><span>Tổng cộng</span><b>{fmtMoney(Math.round(total * 1.1))}</b></div>
        </div>
        <button className="btn primary" onClick={() => onApplyTotal(total)}>Áp dụng vào giá trị deal</button>
      </div>
    </div>
  );
}

/* ---------- Notes ---------- */
function NotesTab() {
  const [notes, setNotes] = useTS([
    { id: "n1", text: "Khách yêu cầu demo trực tiếp cho ban giám đốc trước khi quyết định. Ưu tiên highlight tính năng báo cáo realtime.", who: "u1", when: "Hôm qua" },
  ]);
  const [draft, setDraft] = useTS("");
  function add() { if (!draft.trim()) return; setNotes(prev => [{ id: "n" + Date.now(), text: draft.trim(), who: "u1", when: "Vừa xong" }, ...prev]); setDraft(""); }
  return (
    <div className="tabPane">
      <div className="noteComposer">
        <textarea className="noteInput" rows="3" placeholder="Viết ghi chú về cơ hội này…" value={draft} onChange={e => setDraft(e.target.value)}></textarea>
        <div className="noteComposerFoot"><button className="btn primary sm" onClick={add} disabled={!draft.trim()}>Lưu ghi chú</button></div>
      </div>
      <div className="notesList">
        {notes.map(n => (
          <div key={n.id} className="noteItem">
            <Avatar owner={ownerById(n.who)} size={30} />
            <div className="noteItemBody">
              <div className="noteItemMeta"><b>{ownerById(n.who).name}</b> · {n.when}</div>
              <div className="noteItemText">{n.text}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Files ---------- */
function FilesTab() {
  const [files, setFiles] = useTS([
    { id: "f1", name: "Bao-gia-so-bo-v2.pdf", size: "248 KB", who: "u1", when: "Hôm qua" },
  ]);
  const inputRef = useTR(null);
  function onPick(e) {
    const list = [...e.target.files].map((f, i) => ({ id: "f" + Date.now() + i, name: f.name, size: (f.size / 1024).toFixed(0) + " KB", who: "u1", when: "Vừa xong" }));
    if (list.length) setFiles(prev => [...list, ...prev]);
    e.target.value = "";
  }
  function ext(name) { return (name.split(".").pop() || "FILE").toUpperCase().slice(0, 4); }
  return (
    <div className="tabPane">
      <div className="dropzone" onClick={() => inputRef.current.click()}>
        <svg viewBox="0 0 24 24" width="26" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 16V4M7 9l5-5 5 5M5 20h14"/></svg>
        <div><b>Tải tài liệu lên</b><div className="dzSub">Báo giá, hợp đồng, hồ sơ… · kéo thả hoặc bấm để chọn</div></div>
        <input ref={inputRef} type="file" multiple style={{ display: "none" }} onChange={onPick} />
      </div>
      <div className="filesList">
        {files.map(f => (
          <div key={f.id} className="fileItem">
            <span className="fileExt">{ext(f.name)}</span>
            <div className="fileBody"><div className="fileName">{f.name}</div><div className="fileMeta">{f.size} · {ownerById(f.who).name} · {f.when}</div></div>
            <button className="fileDl" aria-label="Tải xuống"><svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 4v12M7 11l5 5 5-5M5 20h14"/></svg></button>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Related people (rail) ---------- */
function PeopleList({ deal }) {
  const [people, setPeople] = useTS(() => {
    const c = (window.CRM_CONTACTS || []).find(x => x.company === deal.company);
    const base = c ? [{ id: c.id, name: c.name, title: c.title, role: "Liên hệ chính" }] : [{ id: "p0", name: deal.person || "Chưa có liên hệ", title: deal.company, role: "Liên hệ chính" }];
    return base;
  });
  const [adding, setAdding] = useTS(false);
  const [nm, setNm] = useTS(""); const [rl, setRl] = useTS("Người ảnh hưởng");
  function add() { if (!nm.trim()) return; setPeople(prev => [...prev, { id: "p" + Date.now(), name: nm.trim(), title: deal.company, role: rl }]); setNm(""); setAdding(false); }
  return (
    <div className="peopleList">
      {people.map(p => (
        <div key={p.id} className="personRow">
          <div className="prAv" style={{ background: `oklch(0.62 0.13 ${(p.name.length * 29) % 360})` }}>{p.name[0]}</div>
          <div className="prInfo"><div className="prName">{p.name}</div><div className="prRole">{p.role}</div></div>
        </div>
      ))}
      {adding ? (
        <div className="personAdd">
          <input className="inp sm" placeholder="Tên người liên hệ" value={nm} autoFocus onChange={e => setNm(e.target.value)} onKeyDown={e => { if (e.key === "Enter") add(); }} />
          <select className="inp sm" value={rl} onChange={e => setRl(e.target.value)}>
            <option>Người quyết định</option><option>Người ảnh hưởng</option><option>Người dùng cuối</option><option>Đầu mối kỹ thuật</option>
          </select>
          <div className="personAddBtns"><button className="btn primary sm" onClick={add}>Thêm</button><button className="btn ghost sm" onClick={() => setAdding(false)}>Huỷ</button></div>
        </div>
      ) : (
        <button className="addPerson" onClick={() => setAdding(true)}><svg viewBox="0 0 24 24" width="14" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>Thêm người liên hệ</button>
      )}
    </div>
  );
}

Object.assign(window, { ProductsTab, NotesTab, FilesTab, PeopleList, fmtMoney });