/* Truong So CRM — UI components */
const { useState, useRef, useEffect } = React;

/* ---------- helpers ---------- */
function fmtVND(n) {
  if (n >= 1e9) return (n / 1e9).toFixed(n % 1e9 === 0 ? 0 : 1).replace(".", ",") + " tỷ";
  if (n >= 1e6) return Math.round(n / 1e6) + " tr";
  return n.toLocaleString("vi-VN");
}
function fmtVNDfull(n) { return n.toLocaleString("vi-VN") + " ₫"; }

function relDay(iso) {
  const now = new Date("2026-06-06T09:00:00");
  const d = new Date(iso);
  const diff = Math.round((d.setHours(0,0,0,0) - new Date(now).setHours(0,0,0,0)) / 86400000);
  const en = window.__lang === "en";
  if (diff === 0) return { txt: en ? "Today" : "Hôm nay", tone: "today" };
  if (diff === 1) return { txt: en ? "Tomorrow" : "Ngày mai", tone: "soon" };
  if (diff < 0)  return { txt: en ? (Math.abs(diff) + "d ago") : (Math.abs(diff) + " ngày trước"), tone: "over" };
  return { txt: en ? ("in " + diff + "d") : ("Sau " + diff + " ngày"), tone: "future" };
}

function ownerById(id) { return window.CRM_OWNERS.find(o => o.id === id); }

function Avatar({ owner, size = 26 }) {
  if (!owner) return null;
  const initials = owner.name.split(" ").slice(-2).map(s => s[0]).join("");
  return (
    <div className="avatar" title={owner.name}
      style={{ width: size, height: size, fontSize: size * 0.4,
        background: `oklch(0.62 0.13 ${owner.color})` }}>
      {initials}
    </div>
  );
}

function Label({ id }) {
  const l = window.CRM_LABELS[id];
  if (!l) return null;
  return (
    <span className="dealLabel" style={{
      color: `oklch(0.45 0.13 ${l.hue})`,
      background: `oklch(0.95 0.04 ${l.hue})`,
      borderColor: `oklch(0.88 0.06 ${l.hue})`,
    }}>{l.name}</span>
  );
}

/* ---------- Deal Card ---------- */
function DealCard({ deal, density, onOpen, onDragStart, onDragEnd, dragging }) {
  const owner = ownerById(deal.owner);
  const rel = relDay(deal.next);
  const idle = deal.idleDays >= 5;
  return (
    <div
      className={"dealCard" + (dragging ? " dragging" : "") + (idle ? " idle" : "")}
      draggable
      data-density={density}
      onDragStart={(e) => onDragStart(e, deal)}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(deal)}
    >
      {idle && <div className="idleRail" title={`Không hoạt động ${deal.idleDays} ngày`}></div>}
      <div className="dealTop">
        <div className="dealTitle">{deal.title}</div>
      </div>
      <div className="dealCompany">{deal.company}</div>
      {deal.label && density !== "compact" && (
        <div className="dealLabels"><Label id={deal.label} /></div>
      )}
      <div className="dealMeta">
        <span className="dealValue">{fmtVND(deal.value)}</span>
        <Avatar owner={owner} size={22} />
      </div>
      {density !== "compact" && (
        <div className="dealFoot">
          <span className={"nextAct tone-" + rel.tone}>
            <span className="dot"></span>{rel.txt}
          </span>
          {deal.activities > 0 && <span className="actCount">{deal.activities} {window.__lang === "en" ? "activities" : "hoạt động"}</span>}
        </div>
      )}
    </div>
  );
}

/* ---------- Column ---------- */
function Column({ stage, deals, density, accent, onOpen, dnd, onQuickAdd }) {
  const [adding, setAdding] = useState(false);
  const [val, setVal] = useState("");
  const total = deals.reduce((s, d) => s + d.value, 0);
  const isOver = dnd.overStage === stage.id;
  function submit() { if (val.trim()) { onQuickAdd(stage.id, val.trim()); setVal(""); } setAdding(false); }
  return (
    <div className="column">
      <div className="colHead" style={{ "--accent": `oklch(0.62 0.15 ${stage.hue})` }}>
        <div className="colBar"></div>
        <div className="colHeadRow">
          <span className="colName">{window.tStage ? window.tStage(stage) : stage.name}</span>
          <span className="colCount">{deals.length}</span>
          <button className="colAdd" onClick={() => setAdding(a => !a)} title={window.t ? window.t("add_deal_here") : "Thêm"} aria-label="Thêm deal">
            <svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>
          </button>
        </div>
        <div className="colTotal">{fmtVND(total)} ₫</div>
      </div>
      <div
        className={"colBody" + (isOver ? " over" : "")}
        onDragOver={(e) => { e.preventDefault(); dnd.onOver(stage.id); }}
        onDragLeave={() => dnd.onLeave(stage.id)}
        onDrop={(e) => { e.preventDefault(); dnd.onDrop(stage.id); }}
      >
        {adding && (
          <div className="quickAdd">
            <input className="quickInput" autoFocus placeholder={window.t ? window.t("quick_deal_ph") : "Tên deal mới…"}
              value={val} onChange={e => setVal(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") submit(); if (e.key === "Escape") { setVal(""); setAdding(false); } }}
              onBlur={submit} />
            <div className="quickHint">↵ {window.t ? window.t("add") : "Thêm"} · Esc {window.t ? window.t("cancel") : "Huỷ"}</div>
          </div>
        )}
        {deals.length === 0 && !adding && <div className="colEmpty">{window.__lang === "en" ? "Drop deals here" : "Kéo deal vào đây"}</div>}
        {deals.map(d => (
          <DealCard key={d.id} deal={d} density={density} onOpen={onOpen}
            dragging={dnd.dragId === d.id}
            onDragStart={dnd.onDragStart} onDragEnd={dnd.onDragEnd} />
        ))}
      </div>
    </div>
  );
}

/* ---------- Detail Drawer ---------- */
function DealDrawer({ deal, stages, onClose, onWin, onLose, onMove }) {
  if (!deal) return null;
  const owner = ownerById(deal.owner);
  const rel = relDay(deal.next);
  const stage = stages.find(s => s.id === deal.stage);
  const timeline = [
    { t: "Gọi điện trao đổi nhu cầu", who: owner.name, when: "Hôm nay, 09:15", type: "call" },
    { t: "Gửi email báo giá sơ bộ", who: owner.name, when: "Hôm qua, 16:40", type: "mail" },
    { t: "Tạo deal trong pipeline", who: "Hệ thống", when: "3 ngày trước", type: "note" },
  ];
  return (
    <>
      <div className="drawerScrim" onClick={onClose}></div>
      <aside className="drawer" role="dialog">
        <div className="drawerHead">
          <div className="drawerStageTag" style={{ background: `oklch(0.95 0.04 ${stage.hue})`, color: `oklch(0.45 0.13 ${stage.hue})` }}>{stage.name}</div>
          <button className="iconBtn" onClick={onClose} aria-label="Đóng">✕</button>
        </div>
        <h2 className="drawerTitle">{deal.title}</h2>
        <div className="drawerCompany">{deal.company}</div>
        <div className="drawerValue">{fmtVNDfull(deal.value)}</div>

        <div className="drawerActions">
          <button className="btn win" onClick={() => onWin(deal)}>Thắng deal</button>
          <button className="btn lose" onClick={() => onLose(deal)}>Mất deal</button>
        </div>

        <div className="drawerGrid">
          <div className="dgItem"><span className="dgLabel">Phụ trách</span><span className="dgVal"><Avatar owner={owner} size={20} /> {owner.name}</span></div>
          <div className="dgItem"><span className="dgLabel">Hoạt động kế tiếp</span><span className={"dgVal nextAct tone-" + rel.tone}><span className="dot"></span>{rel.txt}</span></div>
          <div className="dgItem"><span className="dgLabel">Nhãn</span><span className="dgVal">{deal.label ? <Label id={deal.label} /> : "—"}</span></div>
          <div className="dgItem"><span className="dgLabel">Số hoạt động</span><span className="dgVal">{deal.activities}</span></div>
        </div>

        <div className="drawerSection">
          <div className="dsHead">Chuyển giai đoạn</div>
          <div className="stagePicker">
            {stages.map(s => (
              <button key={s.id} className={"stagePill" + (s.id === deal.stage ? " active" : "")}
                style={{ "--h": s.hue }}
                onClick={() => onMove(deal, s.id)}>{s.name}</button>
            ))}
          </div>
        </div>

        <div className="drawerSection">
          <div className="dsHead">Dòng thời gian</div>
          <ul className="timeline">
            {timeline.map((it, i) => (
              <li key={i} className={"tl tl-" + it.type}>
                <span className="tlDot"></span>
                <div><div className="tlText">{it.t}</div><div className="tlMeta">{it.who} · {it.when}</div></div>
              </li>
            ))}
          </ul>
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { fmtVND, fmtVNDfull, relDay, ownerById, Avatar, Label, DealCard, Column, DealDrawer });