// Per-agent dashboard ("My stats")
const { useMemo: useMemoAG } = React;

function initials(name) {
  return (name || '?').split(/\s+/).map(s => s[0]).join('').slice(0,2).toUpperCase();
}

function AgentView({ clients, agent, allAgents }) {
  const data = useMemoAG(() => {
    const mine = clients.filter(c => c.agent === agent || c.partner === agent);
    const primary = mine.filter(c => c.agent === agent);
    const asPartner = mine.filter(c => c.partner === agent);
    const closed = primary.filter(c => (c.status||'').toUpperCase() === 'CLOSED');
    const active = primary.filter(c => (c.status||'').toUpperCase() === 'ACTIVE');
    const pending = primary.filter(c => (c.status||'').toUpperCase() === 'PENDING');
    const vol = closed.reduce((s,c) => s + (c.salesPrice||0), 0);

    // Commission split into agent portion vs team/partner portion
    let agentCommission = 0;
    let teamPartnerCommission = 0;
    for (const c of closed) {
      agentCommission += (c.agentSplit || 0);
      teamPartnerCommission += (c.teamSplit || 0);
    }
    for (const c of asPartner) {
      if ((c.status||'').toUpperCase() === 'CLOSED') {
        teamPartnerCommission += (c.partnerSplit || 0);
      }
    }

    // Monthly + by-type + by-source — volume AND count
    const monthlyVol = Array(12).fill(0);
    const monthlyCount = Array(12).fill(0);
    const bySource = {};
    const byType = { BUYER: {count:0, vol:0}, SELLER: {count:0, vol:0}, NEUTRAL: {count:0, vol:0} };
    for (const c of closed) {
      if (c.source) {
        if (!bySource[c.source]) bySource[c.source] = { count: 0, vol: 0 };
        bySource[c.source].count++;
        bySource[c.source].vol += (c.salesPrice || 0);
      }
      const tp = (c.type||'').toUpperCase();
      if (byType[tp]) { byType[tp].count++; byType[tp].vol += (c.salesPrice || 0); }
      if (c.closingDate) {
        const d = new Date(c.closingDate);
        if (!isNaN(d)) {
          const m = d.getUTCMonth();
          monthlyVol[m] += (c.salesPrice||0);
          monthlyCount[m] += 1;
        }
      }
    }

    // Leaderboard (closed volume per agent)
    const allVol = {};
    for (const c of clients) {
      if ((c.status||'').toUpperCase() !== 'CLOSED') continue;
      allVol[c.agent] = (allVol[c.agent]||0) + (c.salesPrice||0);
    }
    const ranking = Object.entries(allVol).sort((a,b) => b[1]-a[1]);
    const myRank = ranking.findIndex(r => r[0] === agent);

    return {
      mine, primary, asPartner, closed, active, pending, vol,
      agentCommission, teamPartnerCommission,
      bySource, byType, monthlyVol, monthlyCount, ranking, myRank,
      avgPrice: vol / (closed.length || 1),
    };
  }, [clients, agent]);

  // Prior-year data — synthesized per agent (~75% of this year shape)
  const priorSeed = useMemoAG(() => {
    const factor = 0.6 + ((agent.charCodeAt(0) + agent.length) % 30) / 100;
    const base = [0.06, 0.07, 0.09, 0.11, 0.12, 0.13, 0.11, 0.10, 0.08, 0.07, 0.04, 0.02];
    const seedVol = Math.max(data.vol, 2_000_000) * factor;
    return {
      vol: base.map(b => Math.round(seedVol * b)),
      counts: base.map(b => Math.max(0, Math.round(b * Math.max(data.closed.length, 10) * factor * 1.05))),
    };
  }, [agent, data.vol, data.closed.length]);

  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const monthlyRows = months.map((label, i) => ({
    label,
    value: data.monthlyVol[i],
    count: data.monthlyCount[i],
    sub: priorSeed.vol[i],
    subCount: priorSeed.counts[i],
    subLabel: 'PRIOR YTD',
  }));

  const topSources = Object.entries(data.bySource)
    .sort((a,b) => b[1].vol - a[1].vol)
    .slice(0, 6)
    .map(([label, v]) => ({ label, value: v.vol, count: v.count }));

  const clientTypeRows = ['BUYER','SELLER','NEUTRAL']
    .filter(k => data.byType[k].count > 0)
    .map(k => ({
      label: k.charAt(0) + k.slice(1).toLowerCase(),
      value: data.byType[k].vol,
      count: data.byType[k].count,
      color: k === 'BUYER' ? '#3557a8' : k === 'SELLER' ? '#c7823a' : '#6c7a89',
    }));

  return (
    <div>
      <div className="page-head">
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          <div className="lb-avatar" style={{width:52, height:52, fontSize:18}}>{initials(agent)}</div>
          <div>
            <h1 className="page-title">Hi, {agent}</h1>
            <p className="page-sub">
              Your 2026 stats · {data.primary.length} deals as lead · {data.asPartner.length} as partner
            </p>
          </div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--ink-3)', fontWeight:600}}>Team rank</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:36, fontWeight:600, letterSpacing:'-0.02em'}}>
            #{data.myRank >= 0 ? data.myRank + 1 : '–'}
            <span style={{fontSize:14, color:'var(--ink-3)', fontFamily:'var(--font-mono)', marginLeft:8}}>of {data.ranking.length}</span>
          </div>
        </div>
      </div>

      {/* KPI row with split commission card */}
      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-label">Closed volume</div>
          <div className="kpi-value">{fmtMoney(data.vol)}</div>
          <div className="kpi-meta">{data.closed.length} closings</div>
        </div>
        <div className="kpi kpi-split">
          <div className="kpi-label">Your commission</div>
          <div className="kpi-split-rows">
            <div className="kpi-split-row">
              <span className="kpi-split-label">Agent</span>
              <span className="kpi-split-val">{fmtMoneyFull(data.agentCommission)}</span>
            </div>
            <div className="kpi-split-row">
              <span className="kpi-split-label">Team / Partner</span>
              <span className="kpi-split-val sub">{fmtMoneyFull(data.teamPartnerCommission)}</span>
            </div>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">In pipeline</div>
          <div className="kpi-value">{data.active.length + data.pending.length}</div>
          <div className="kpi-meta">{data.active.length} active · {data.pending.length} pending</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Avg deal</div>
          <div className="kpi-value">{fmtMoney(data.avgPrice)}</div>
          <div className="kpi-meta">Per closing</div>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <h3 className="card-title">Your monthly volume · 2026 vs 2025</h3>
          <BarList rows={monthlyRows} format="money" subFormat="money" />
        </div>
        <div className="card">
          <h3 className="card-title">Client type</h3>
          {clientTypeRows.length > 0
            ? <BarList rows={clientTypeRows} format="money" />
            : <div style={{color:'var(--ink-3)', fontSize:13, padding:'8px 0'}}>No closed deals yet — keep going.</div>}
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <h3 className="card-title">Your top sources</h3>
          {topSources.length > 0
            ? <BarList rows={topSources} format="money" />
            : <div style={{color:'var(--ink-3)', fontSize:13, padding:'8px 0'}}>No closed deals yet — keep going.</div>}
        </div>
        <div className="card">
          <h3 className="card-title">Team leaderboard</h3>
          {data.ranking.map(([name, v], i) => (
            <div className="lb-row" key={name} style={name===agent?{background:'var(--rule-2)', margin:'0 -8px', padding:'10px 8px', borderRadius:6}:{}}>
              <div className={'lb-rank' + (i < 3 ? ' top' : '')}>{i+1}</div>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div className="lb-avatar" style={{background: name===agent?'var(--accent)':'var(--ink-3)'}}>{initials(name)}</div>
                <div>
                  <div className="lb-name">{name}{name===agent && <span className="chip" style={{marginLeft:8}}>you</span>}</div>
                  <div className="lb-meta">{clients.filter(c=>c.agent===name && (c.status||'').toUpperCase()==='CLOSED').length} closings</div>
                </div>
              </div>
              <div></div>
              <div className="lb-val">{fmtMoney(v)}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{marginTop:18}}>
        <h3 className="card-title">
          Your clients
          <a href="#clients" className="card-title-link">(all clients)</a>
        </h3>
        <div style={{maxHeight: 340, overflow:'auto', margin:'0 -4px'}}>
          <table className="table">
            <thead>
              <tr>
                <th>Client</th>
                <th>Type</th>
                <th>Status</th>
                <th>Source</th>
                <th>Closing</th>
                <th className="num">Price</th>
                <th className="num">Your split</th>
              </tr>
            </thead>
            <tbody>
              {data.mine.map((c, i) => (
                <tr key={i}>
                  <td>{c.client}<div className="muted" style={{fontSize:11}}>{c.address}</div></td>
                  <td><span className="chip">{c.type}</span></td>
                  <td><span className={'pill ' + (c.status||'')}><span className="dot"></span>{c.status}</span></td>
                  <td className="muted">{c.source}</td>
                  <td className="muted">{c.closingDate || '—'}</td>
                  <td className="num">{fmtMoney(c.salesPrice)}</td>
                  <td className="num">{fmtMoney(c.agent === agent ? c.agentSplit : c.partnerSplit)}</td>
                </tr>
              ))}
              {data.mine.length === 0 && <tr><td colSpan="7" style={{textAlign:'center', color:'var(--ink-3)', padding:24}}>No clients yet. Submit a form to get started.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
window.AgentView = AgentView;