// main.jsx
const { useMemo } = React;

const TODAY = new Date().toISOString().slice(0, 10);
function dateKind(d) {
  if (!d) return "normal";
  if (d < TODAY) return "overdue";
  if (d === TODAY) return "today";
  return "normal";
}

function MainPanel({ onOpenLead, activeStatus, onNewLead, leads = [], loading = false, user }) {
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [productFilter, setProductFilter] = React.useState("");
  const [countryFilter, setCountryFilter] = React.useState("");
  const [search, setSearch] = React.useState("");
  const [selected, setSelected] = React.useState(new Set());
  const [menuOpen, setMenuOpen] = React.useState(null);

  const filtered = useMemo(() => {
    return leads.filter((l) => {
      if (statusFilter !== "all" && l.status !== statusFilter) return false;
      if (productFilter && l.product !== productFilter) return false;
      if (countryFilter && l.countryName !== countryFilter) return false;
      if (search && !(l.name + l.company + l.email).toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  }, [leads, statusFilter, productFilter, countryFilter, search]);

  const toggleSel = (id) => setSelected((prev) => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; });
  const toggleAll = () => { if (selected.size === filtered.length) setSelected(new Set()); else setSelected(new Set(filtered.map((l) => l.id))); };
  const allChecked = filtered.length > 0 && selected.size === filtered.length;
  const someChecked = selected.size > 0 && !allChecked;

  const stats = useMemo(() => ({
    total: leads.length,
    fresh: leads.filter((l) => l.status === "new").length,
    following: leads.filter((l) => ["contacted", "qualified", "following", "proposal"].includes(l.status)).length,
    won: leads.filter((l) => l.status === "won").length,
  }), [leads]);

  return (
    <main className="main">
      <header className="main-header">
        <div className="crumbs">
          <span className="crumb-soft">销售</span>
          <span className="crumb-sep">/</span>
          <span className="crumb-soft">线索</span>
          <span className="crumb-sep">/</span>
          <span className="crumb-cur">{activeStatus === "all" ? "全部线索" : (window.STATUS_META[activeStatus]?.label || activeStatus)}</span>
        </div>
        <div className="header-actions">
          <button className="btn-ghost"><IconSm name="export" /> 导出</button>
          <button className="btn-primary" onClick={onNewLead}><IconSm name="plus" /> 新建线索</button>
        </div>
      </header>

      <div className="page-body">
        <div className="page-title-row">
          <div>
            <h1 className="page-title">线索收件箱</h1>
            <div className="page-sub">跟踪所有进入渠道的销售线索</div>
          </div>
        </div>

        <div className="stat-row">
          <StatCard label="线索总数" value={stats.total} sub="全部线索" accent="violet" />
          <StatCard label="新线索" value={stats.fresh} sub="待处理" accent="blue" />
          <StatCard label="跟进中" value={stats.following} sub="含已联系 / 已确认 / 报价中" accent="amber" />
          <StatCard label="已成交" value={stats.won} sub="本月" accent="green" />
        </div>

        <div className="toolbar">
          <div className="filters">
            <select className="dropdown" value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
              <option value="all">全部状态</option>
              {window.STATUS_ORDER.map((s) => (
                <option key={s} value={s}>{window.STATUS_META[s].label}</option>
              ))}
            </select>
            <select className="dropdown" value={productFilter} onChange={(e) => setProductFilter(e.target.value)}>
              <option value="">全部产品</option>
              <option value="iGaming 直播">iGaming 直播</option>
              <option value="iGaming 点播">iGaming 点播</option>
              <option value="云服务">云服务</option>
            </select>
            <select className="dropdown" value={countryFilter} onChange={(e) => setCountryFilter(e.target.value)}>
              <option value="">全部国家</option>
              {Object.entries(window.COUNTRY_NAME).map(([code, name]) => (
                <option key={code} value={name}>{name}</option>
              ))}
            </select>
          </div>
          <div className="search-wrap">
            <span className="s-icon">⌕</span>
            <input className="search-input" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="搜索姓名、公司或邮箱" />
          </div>
        </div>

        <div className="table-wrap">
          {loading ? (
            <div className="empty">加载中…</div>
          ) : (
            <table className="leads-table">
              <thead>
                <tr>
                  <th className="th-check">
                    <input type="checkbox" checked={allChecked} ref={(el) => { if (el) el.indeterminate = someChecked; }} onChange={toggleAll} />
                  </th>
                  <th>姓名 / 公司</th>
                  <th className="col-country">国家</th>
                  <th className="col-product">产品意向</th>
                  <th>评分</th>
                  <th>状态</th>
                  <th className="col-owner">负责人</th>
                  <th className="col-date">跟进日期</th>
                  <th className="th-act"></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((l) => (
                  <LeadRow key={l.id} lead={l} onClick={() => onOpenLead(l)}
                    checked={selected.has(l.id)} onCheck={() => toggleSel(l.id)}
                    menuOpen={menuOpen === l.id}
                    onMenuToggle={() => setMenuOpen(menuOpen === l.id ? null : l.id)}
                    onMenuClose={() => setMenuOpen(null)} />
                ))}
              </tbody>
            </table>
          )}
          {!loading && filtered.length === 0 && <div className="empty">没有匹配的线索</div>}
          <div className="table-foot"><span>共 {filtered.length} 条线索</span></div>
        </div>
      </div>
    </main>
  );
}

function StatCard({ label, value, sub, accent }) {
  return (
    <div className={`stat-card stat-${accent}`}>
      <div className="stat-top"><span className="stat-label">{label}</span></div>
      <div className="stat-value">{value}</div>
      <div className="stat-sub">{sub}</div>
    </div>
  );
}

function LeadRow({ lead, onClick, checked, onCheck, menuOpen, onMenuToggle, onMenuClose }) {
  const meta = window.STATUS_META[lead.status] || window.STATUS_META['new'];
  const scoreColor = lead.score >= 70 ? "#EF4444" : lead.score >= 40 ? "#EAB308" : "#94A3B8";
  const scoreBg = lead.score >= 70 ? "#FEE2E2" : lead.score >= 40 ? "#FEF3C7" : "#E2E8F0";
  const initials = (lead.name || '?').slice(0, 1);
  const avatarColors = ["#7C5CFF", "#10B981", "#F97316", "#3B82F6", "#EC4899"];
  const avatarBg = avatarColors[(lead.id || '').charCodeAt((lead.id || '').length - 1) % avatarColors.length];
  const dk = dateKind(lead.followUp);

  React.useEffect(() => {
    if (!menuOpen) return;
    const h = () => onMenuClose();
    document.addEventListener("click", h);
    return () => document.removeEventListener("click", h);
  }, [menuOpen]);

  return (
    <tr onClick={onClick} className={`lead-row ${checked ? "is-checked" : ""}`}>
      <td className="td-check" onClick={(e) => e.stopPropagation()}>
        <input type="checkbox" checked={checked} onChange={onCheck} />
      </td>
      <td>
        <div className="cell-name">
          <div className="avatar-sm" style={{ background: avatarBg }}>{initials}</div>
          <div>
            <div className="n-primary">{lead.name}</div>
            <div className="n-secondary">{lead.company}{lead.title ? ` · ${lead.title}` : ''}</div>
          </div>
        </div>
      </td>
      <td className="col-country">
        <span className="country-chip">
          <span className="flag">{window.COUNTRY_FLAG[lead.country] || ''}</span>
          <span>{lead.country}</span>
        </span>
      </td>
      <td className="col-product"><span className="product-tag">{lead.product}</span></td>
      <td>
        <div className="score-cell">
          <span className="score-num">{lead.score}</span>
          <div className="score-bar" style={{ background: scoreBg }}>
            <div className="score-bar-fill" style={{ width: `${lead.score}%`, background: scoreColor }}></div>
          </div>
        </div>
      </td>
      <td>
        <span className="status-pill" style={{ background: meta.bg, color: meta.fg }}>
          <span className="pill-dot" style={{ background: meta.dot }}></span>
          {meta.label}
        </span>
      </td>
      <td className="col-owner">
        <div className="owner-cell">
          <div className="avatar-xs">{lead.ownerName.split(" ").filter(Boolean).map(p => p[0]).join("").slice(0, 2)}</div>
          <span>{lead.ownerName}</span>
        </div>
      </td>
      <td className="col-date">
        {lead.followUp ? (
          <span className={`date-cell date-${dk}`}>
            {dk === "overdue" && <span className="date-icon">⚠️</span>}
            {lead.followUp.slice(5)}
          </span>
        ) : <span className="date-cell">–</span>}
      </td>
      <td className="td-act" onClick={(e) => e.stopPropagation()}>
        <div className="menu-wrap">
          <button className="row-act" onClick={(e) => { e.stopPropagation(); onMenuToggle(); }}>⋯</button>
          {menuOpen && (
            <div className="row-menu" onClick={(e) => e.stopPropagation()}>
              <button className="row-menu-item" onClick={onMenuClose}>复制链接</button>
            </div>
          )}
        </div>
      </td>
    </tr>
  );
}

function IconSm({ name }) {
  const s = { width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    plus: <><path d="M6 2v8" /><path d="M2 6h8" /></>,
    export: <><path d="M6 8V2" /><path d="M3 5l3-3 3 3" /><path d="M2 10h8" /></>,
  };
  return <svg viewBox="0 0 12 12" {...s}>{paths[name]}</svg>;
}

window.MainPanel = MainPanel;