// crm-sales.jsx — Sales Summary & AoD Usage Summary views

// ── SALES VIEW ────────────────────────────────────────────
function SalesView({ user, showToast, setView }) {
  const [sales, setSales]     = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);
  const [search, setSearch]   = useState('');

  useEffect(() => {
    (async () => {
      try {
        const data = await CRM.AccountSalesAPI.getAll();
        setSales(data);
      } catch (e) {
        setError(e.message);
        showToast('Failed to load sales', 'error');
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const fmt = n => '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const filtered = sales.filter(s =>
    !search ||
    (s.accountName || '').toLowerCase().includes(search.toLowerCase()) ||
    (s.description || '').toLowerCase().includes(search.toLowerCase()) ||
    (s.recordedByName || '').toLowerCase().includes(search.toLowerCase())
  );

  const totalRevenue     = filtered.reduce((sum, s) => sum + (s.amount || 0), 0);
  const recurringRevenue = filtered.filter(s => !s.isSinglePurchase).reduce((sum, s) => sum + (s.amount || 0), 0);
  const singleRevenue    = filtered.filter(s =>  s.isSinglePurchase).reduce((sum, s) => sum + (s.amount || 0), 0);

  if (loading) return (
    <div className="empty">
      <div className="empty-icon">⏳</div>
      <div className="empty-text">Loading sales…</div>
    </div>
  );
  if (error) return (
    <div className="empty">
      <div className="empty-icon">⚠️</div>
      <div className="empty-text">{error}</div>
    </div>
  );

  return (
    <div>
      {/* Summary stats */}
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginBottom: 24 }}>
        <div className="stat-card">
          <div className="stat-icon">💰</div>
          <div className="stat-label">Total Revenue</div>
          <div className="stat-val">{fmt(totalRevenue)}</div>
          <div className="stat-sub">{filtered.length} transaction{filtered.length !== 1 ? 's' : ''}</div>
        </div>
        <div className="stat-card">
          <div className="stat-icon">🔄</div>
          <div className="stat-label">Recurring Revenue</div>
          <div className="stat-val">{fmt(recurringRevenue)}</div>
          <div className="stat-sub">{filtered.filter(s => !s.isSinglePurchase).length} transactions</div>
        </div>
        <div className="stat-card">
          <div className="stat-icon">🛒</div>
          <div className="stat-label">Single Purchases</div>
          <div className="stat-val">{fmt(singleRevenue)}</div>
          <div className="stat-sub">{filtered.filter(s => s.isSinglePurchase).length} transactions</div>
        </div>
      </div>

      {/* Search */}
      <div className="search-bar">
        <input
          className="search-input"
          placeholder="Search by account, description or rep…"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>

      {/* Table */}
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th>Account</th>
              <th>Amount</th>
              <th>Type</th>
              <th>Description</th>
              <th>Sale Date</th>
              <th>Recorded By</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 ? (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center', color: 'var(--g400)', padding: 32 }}>
                  No sales found.
                </td>
              </tr>
            ) : filtered.map(s => (
              <tr key={s.id}
                onClick={() => setView('accounts')}
                style={{ cursor: 'pointer' }}>
                <td>{s.accountName || '—'}</td>
                <td style={{ color: 'var(--green)', fontWeight: 700 }}>{fmt(s.amount)}</td>
                <td>
                  <span className={s.isSinglePurchase ? 'badge badge-amber' : 'badge badge-blue'}>
                    {s.isSinglePurchase ? 'One-time' : 'Recurring'}
                  </span>
                </td>
                <td style={{ color: 'var(--g400)' }}>{s.description || '—'}</td>
                <td style={{ color: 'var(--g600)' }}>{s.saleDate ? String(s.saleDate).split('T')[0] : '—'}</td>
                <td style={{ color: 'var(--g400)' }}>{s.recordedByName || '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── AOD USAGE VIEW ────────────────────────────────────────
function AodView({ user, showToast }) {
  const [rows, setRows]               = useState([]);
  const [loading, setLoading]         = useState(true);
  const [error, setError]             = useState(null);
  const [search, setSearch]           = useState('');
  const [acctCap, setAcctCap]         = useState(100);   // bound rendered account rows
  const [expandedAccts, setExpandedAccts]   = useState({});
  const [expandedInvs,  setExpandedInvs]    = useState({});
  const [showImport, setShowImport]         = useState(false);

  const load = async () => {
    try {
      const data = await CRM.AodAPI.getAll();
      setRows(data);
      setError(null);
    } catch (e) {
      setError(e.message);
      showToast('Failed to load AoD usage', 'error');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => { load(); }, []);

  const fmt  = n => '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const fmtN = n => Number(n).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 4 });

  const q = search.toLowerCase();
  const filtered = rows.filter(r =>
    !q ||
    (r.accountName || '').toLowerCase().includes(q) ||
    (r.clientName  || '').toLowerCase().includes(q) ||
    (r.description || '').toLowerCase().includes(q) ||
    (r.uri         || '').toLowerCase().includes(q)
  );

  // ── Build 3-level tree: account → invoiceDate → lines ──
  const acctMap = {};
  filtered.forEach(r => {
    const acctKey = r.accountId || r.uri;
    if (!acctMap[acctKey]) acctMap[acctKey] = {
      key:         acctKey,
      accountName: r.accountName || r.clientName || r.uri,
      accountId:   r.accountId,
      uri:         r.uri,
      total:       0,
      invoices:    {},
    };
    const acct = acctMap[acctKey];
    acct.total += r.total || 0;

    const invKey = r.invoiceDate;
    if (!acct.invoices[invKey]) acct.invoices[invKey] = {
      invoiceDate: r.invoiceDate,
      periodFrom:  r.periodFrom,
      periodTo:    r.periodTo,
      total:       0,
      lines:       [],
    };
    acct.invoices[invKey].total += r.total || 0;
    acct.invoices[invKey].lines.push(r);
  });

  // Sort accounts A→Z; invoices newest first within each account
  const accounts = Object.values(acctMap)
    .sort((a, b) => a.accountName.localeCompare(b.accountName))
    .map(a => ({
      ...a,
      sortedInvoices: Object.values(a.invoices)
        .sort((x, y) => y.invoiceDate.localeCompare(x.invoiceDate)),
    }));

  const grandTotal    = accounts.reduce((s, a) => s + a.total, 0);
  const uniquePeriods = new Set(rows.map(r => r.invoiceDate)).size;

  const toggleAcct = key => setExpandedAccts(e => ({ ...e, [key]: !e[key] }));
  const toggleInv  = key => setExpandedInvs(e  => ({ ...e, [key]: !e[key] }));

  if (loading) return (
    <div className="empty">
      <div className="empty-icon">⏳</div>
      <div className="empty-text">Loading AoD usage…</div>
    </div>
  );
  if (error) return (
    <div className="empty">
      <div className="empty-icon">⚠️</div>
      <div className="empty-text">{error}</div>
    </div>
  );

  return (
    <div>
      {/* Stats */}
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginBottom: 24 }}>
        <div className="stat-card">
          <div className="stat-icon">📊</div>
          <div className="stat-label">Grand Total</div>
          <div className="stat-val">{fmt(grandTotal)}</div>
          <div className="stat-sub">{rows.length} line items</div>
        </div>
        <div className="stat-card">
          <div className="stat-icon">🏢</div>
          <div className="stat-label">Accounts</div>
          <div className="stat-val">{accounts.length}</div>
          <div className="stat-sub">unique accounts</div>
        </div>
        <div className="stat-card">
          <div className="stat-icon">📅</div>
          <div className="stat-label">Invoice Periods</div>
          <div className="stat-val">{uniquePeriods}</div>
          <div className="stat-sub">billing periods</div>
        </div>
      </div>

      {/* Search + import */}
      <div className="search-bar" style={{display:'flex',gap:8,alignItems:'center'}}>
        <input
          className="search-input"
          placeholder="Search by account, URI or description…"
          value={search}
          onChange={e => setSearch(e.target.value)}
          style={{flex:1}}
        />
        {user.isAdmin && (
          <button className="btn btn-primary btn-sm" onClick={() => setShowImport(true)}>📥 Import billing data</button>
        )}
      </div>

      {showImport && (
        <div className="modal-overlay" onClick={() => { setShowImport(false); load(); }}>
          <div className="modal-panel" style={{width:'min(620px,100%)'}} onClick={e => e.stopPropagation()}>
            <div className="modal-hd">
              <div className="modal-title">AoD Usage Import</div>
              <button className="modal-close" onClick={() => { setShowImport(false); load(); }}>×</button>
            </div>
            <div className="modal-body">
              <AodImportTab showToast={showToast} />
            </div>
          </div>
        </div>
      )}

      {/* 3-level tree table */}
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 14 }}></th>
              <th>Account / Invoice / Line Item</th>
              <th>Period</th>
              <th style={{ textAlign: 'right' }}>Qty</th>
              <th style={{ textAlign: 'right' }}>Rate</th>
              <th style={{ textAlign: 'right' }}>Total</th>
            </tr>
          </thead>
          <tbody>
            {accounts.length === 0 ? (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center', color: 'var(--g400)', padding: 32 }}>
                  No AoD usage data found.
                </td>
              </tr>
            ) : (<React.Fragment>
              {accounts.length > acctCap && (
                <tr><td colSpan={6} style={{textAlign:'center',padding:10}}>
                  <button className="btn btn-ghost btn-sm" onClick={() => setAcctCap(c => c + 200)}>
                    Showing {acctCap} of {accounts.length} — Show more
                  </button>
                </td></tr>
              )}
              {accounts.slice(0, acctCap).map(acct => (
              <React.Fragment key={acct.key}>

                {/* ── Level 1: Account row ── */}
                <tr
                  onClick={() => toggleAcct(acct.key)}
                  onMouseEnter={e => { for (const td of e.currentTarget.cells) td.style.backgroundColor = '#1e2d4a'; }}
                  onMouseLeave={e => { for (const td of e.currentTarget.cells) td.style.backgroundColor = ''; }}
                  style={{ cursor: 'pointer', background: 'var(--navy)' }}>
                  <td style={{ color: 'rgba(255,255,255,.5)', fontSize: 10, textAlign: 'center' }}>
                    {expandedAccts[acct.key] ? '▼' : '▶'}
                  </td>
                  <td style={{ color: 'white', fontWeight: 700, fontSize: 13 }}>
                    {acct.accountName}
                    <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 400, opacity: .5 }}>
                      {acct.sortedInvoices.length} invoice{acct.sortedInvoices.length !== 1 ? 's' : ''}
                    </span>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td style={{ color: '#6EE7B7', fontWeight: 700, textAlign: 'right' }}>{fmt(acct.total)}</td>
                </tr>

                {/* ── Level 2: Invoice rows ── */}
                {expandedAccts[acct.key] && acct.sortedInvoices.map(inv => {
                  const invKey = `${acct.key}|${inv.invoiceDate}`;
                  return (
                    <React.Fragment key={invKey}>
                      <tr
                        onClick={() => toggleInv(invKey)}
                        style={{ cursor: 'pointer', background: expandedInvs[invKey] ? '#EDF2FB' : 'var(--g100)' }}>
                        <td style={{ color: 'var(--g400)', fontSize: 10, textAlign: 'center' }}>
                          {expandedInvs[invKey] ? '▼' : '▶'}
                        </td>
                        <td style={{ color: 'var(--navy)', fontWeight: 600, fontSize: 13, paddingLeft: 22 }}>
                          {inv.invoiceDate}
                          <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 400, color: 'var(--g400)' }}>
                            {inv.lines.length} item{inv.lines.length !== 1 ? 's' : ''}
                          </span>
                        </td>
                        <td style={{ color: 'var(--g400)', fontSize: 12 }}>
                          {inv.periodFrom} → {inv.periodTo}
                        </td>
                        <td></td>
                        <td></td>
                        <td style={{ color: 'var(--navy)', fontWeight: 600, textAlign: 'right' }}>
                          {fmt(inv.total)}
                        </td>
                      </tr>

                      {/* ── Level 3: Line items ── */}
                      {expandedInvs[invKey] && inv.lines.map(line => (
                        <tr key={line.id} style={{ background: 'white' }}>
                          <td></td>
                          <td style={{ color: 'var(--g600)', fontSize: 12, paddingLeft: 40 }}>
                            {line.description}
                          </td>
                          <td></td>
                          <td style={{ color: 'var(--g500)', fontSize: 12, textAlign: 'right' }}>
                            {fmtN(line.count)}
                          </td>
                          <td style={{ color: 'var(--g500)', fontSize: 12, textAlign: 'right' }}>
                            {fmt(line.unitValue)}
                          </td>
                          <td style={{ color: 'var(--navy)', fontSize: 12, fontWeight: 600, textAlign: 'right' }}>
                            {fmt(line.total)}
                          </td>
                        </tr>
                      ))}
                    </React.Fragment>
                  );
                })}

              </React.Fragment>
            ))}
            </React.Fragment>)}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { SalesView, AodView });