// admin-crm.jsx

const CRM_STATUS_CONFIG = {
  new:             { label: 'New',             bg: 'oklch(95% 0.13 80)',  color: 'oklch(36% 0.15 75)'  },
  contacted:       { label: 'Contacted',       bg: 'oklch(92% 0.08 265)', color: 'oklch(28% 0.1 265)'  },
  trial_scheduled: { label: 'Trial Scheduled', bg: 'oklch(92% 0.09 295)', color: 'oklch(28% 0.12 295)' },
  trial_done:      { label: 'Trial Done',      bg: 'oklch(92% 0.09 200)', color: 'oklch(28% 0.1 200)'  },
  enrolled:        { label: 'Enrolled',        bg: 'oklch(91% 0.11 150)', color: 'oklch(26% 0.13 150)' },
  lost:            { label: 'Lost',            bg: 'oklch(94% 0.05 20)',  color: 'oklch(38% 0.09 20)'  },
};
const CRM_STATUS_ORDER = ['new','contacted','trial_scheduled','trial_done','enrolled','lost'];
const CRM_TODAY = new Date().toISOString().slice(0, 10);

const crmDaysSince = d => Math.floor((new Date(CRM_TODAY) - new Date(d)) / 86400000);

// ── Small helpers ─────────────────────────────────────────────────────────────
const CRMStatusBadge = ({ status }) => {
  const cfg = CRM_STATUS_CONFIG[status] || { label: status, bg: '#eee', color: '#888' };
  return <span style={{ background:cfg.bg, color:cfg.color, fontSize:11, fontWeight:700, padding:'3px 9px', borderRadius:20, whiteSpace:'nowrap', letterSpacing:'0.02em' }}>{cfg.label}</span>;
};

const AgeBadge = ({ lastUpdated, status }) => {
  if (['enrolled','lost'].includes(status)) return null;
  const d = crmDaysSince(lastUpdated);
  const [bg, color] = d >= 5 ? ['oklch(95% 0.08 25)','oklch(34% 0.1 25)']
                    : d >= 3 ? ['oklch(95% 0.1 80)', 'oklch(36% 0.13 75)']
                    :          ['oklch(95% 0.01 265)','oklch(52% 0.04 265)'];
  return <span style={{ fontSize:10, fontWeight:700, padding:'2px 7px', borderRadius:20, background:bg, color, whiteSpace:'nowrap' }}>{d === 0 ? 'today' : d+'d ago'}</span>;
};

const AdminCRM = () => {
  const data = window.useAdminData();
  const profiles = data.profiles || [];
  const leads    = data.leads || [];
  const [statusFilter,setFilter]      = React.useState('all');
  const [selectedId,  setSelectedId]  = React.useState(null);
  const [showAdd,     setShowAdd]     = React.useState(false);
  const [search,      setSearch]      = React.useState('');

  const profileById = Object.fromEntries(profiles.map(p=>[p.id,p]));
  const counts = { all: leads.length };
  CRM_STATUS_ORDER.forEach(s => { counts[s] = leads.filter(l=>l.status===s).length; });

  // Overdue follow-ups
  const followUpDates = data.followUpDates || {};
  const overdueCount  = leads.filter(l => followUpDates[l.id] && followUpDates[l.id] <= CRM_TODAY && !['enrolled','lost'].includes(l.status)).length;

  const filtered = leads.filter(l => {
    const matchStatus = statusFilter === 'all' || l.status === statusFilter;
    const q = search.toLowerCase();
    const matchSearch = !q || l.name.toLowerCase().includes(q) || l.phone.includes(q) || l.subject.toLowerCase().includes(q);
    return matchStatus && matchSearch;
  });

  const handleUpdate = async (id, status, notes, nextFollowUp) => {
    try {
      const prev = leads.find(l => l.id === id);
      await data.updateLead(id, { status, notes });
      if ((nextFollowUp || '') !== (followUpDates[id] || '')) {
        await data.setLeadFollowUp(id, nextFollowUp || null);
      }
      if (prev && prev.status !== status) {
        const label = CRM_STATUS_CONFIG[status]?.label || status;
        await data.addLeadActivity(id, status === 'enrolled' ? 'enrolled' : 'note', `Moved to ${label}`);
      }
    } catch (e) { alert(e.message); }
    setSelectedId(null);
  };

  const handleAdd = async (form) => {
    try { await data.addLead(form); } catch (e) { alert(e.message); }
  };

  const enrolledRevenue = leads.filter(l=>l.status==='enrolled').reduce((s,l) => {
    const p = profileById[l.profileId];
    return s + (p?.avgStudentLTV || 0);
  }, 0);

  return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:18 }}>
        <div>
          <div style={{ fontWeight:700, fontSize:15, color:'oklch(22% 0.06 265)' }}>{leads.length} leads tracked</div>
          <div style={{ fontSize:12, color:'oklch(60% 0.03 265)', marginTop:2 }}>
            {counts.enrolled} enrolled · ${enrolledRevenue.toLocaleString()} revenue · {counts.new} new · {counts.lost} lost
            {overdueCount > 0 && <span style={{ marginLeft:10, fontSize:11, fontWeight:700, color:'oklch(36% 0.1 25)', background:'oklch(96% 0.07 25)', padding:'2px 8px', borderRadius:20 }}>{overdueCount} follow-up{overdueCount>1?'s':''} overdue</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Search name, phone…"
            style={{ padding:'8px 13px', borderRadius:9, border:'1.5px solid oklch(87% 0.02 265)', fontSize:13, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(28% 0.04 265)', outline:'none', width:210 }}
          />
          <button onClick={() => setShowAdd(true)} style={{ background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:10, padding:'9px 18px', fontWeight:600, fontSize:13, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", whiteSpace:'nowrap' }}>
            + Add Lead
          </button>
        </div>
      </div>

      {/* Status filter tabs */}
      <div style={{ display:'flex', gap:6, marginBottom:18, flexWrap:'wrap' }}>
        {[['all','All'], ...CRM_STATUS_ORDER.map(s=>[s, CRM_STATUS_CONFIG[s].label])].map(([key,label]) => {
          const active = statusFilter === key;
          const cfg = CRM_STATUS_CONFIG[key];
          return (
            <button key={key} onClick={() => setFilter(key)} style={{
              padding:'6px 13px', borderRadius:20,
              border: active && cfg ? `2px solid ${cfg.color}` : active ? '2px solid oklch(22% 0.06 265)' : '1.5px solid oklch(87% 0.02 265)',
              background: active && cfg ? cfg.bg : active ? 'oklch(22% 0.06 265)' : '#fff',
              color: active && cfg ? cfg.color : active ? '#fff' : 'oklch(46% 0.04 265)',
              fontSize:12, fontWeight:600, cursor:'pointer',
              fontFamily:"'Plus Jakarta Sans', sans-serif",
              display:'flex', alignItems:'center', gap:6, transition:'all 0.12s',
            }}>
              {label}
              <span style={{ background: active && cfg ? cfg.color : 'oklch(91% 0.01 265)', color: active && cfg ? cfg.bg : 'oklch(50% 0.03 265)', borderRadius:10, fontSize:10, padding:'1px 6px', fontWeight:700 }}>{counts[key]||0}</span>
            </button>
          );
        })}
      </div>

      {/* Table */}
      <div style={{ background:'#fff', borderRadius:14, border:'1px solid oklch(90% 0.01 265)', overflow:'hidden', boxShadow:'0 2px 10px oklch(18% 0.06 265 / 0.05)' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:13 }}>
          <thead>
            <tr style={{ background:'oklch(97.5% 0.006 60)', borderBottom:'2px solid oklch(91% 0.01 265)' }}>
              {['Name','Phone','Source','Subject','Status','Age','Follow-up','Notes'].map(h => (
                <th key={h} style={{ padding:'11px 14px', textAlign:'left', fontWeight:700, fontSize:10, color:'oklch(50% 0.04 265)', letterSpacing:'0.06em', textTransform:'uppercase', whiteSpace:'nowrap' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map(lead => {
              const p          = profileById[lead.profileId];
              const isSelected = selectedId === lead.id;
              const fu         = followUpDates[lead.id];
              const fuOverdue  = fu && fu <= CRM_TODAY && !['enrolled','lost'].includes(lead.status);
              return (
                <React.Fragment key={lead.id}>
                  <tr onClick={() => setSelectedId(isSelected ? null : lead.id)}
                    style={{ borderBottom:'1px solid oklch(94.5% 0.005 60)', cursor:'pointer', background:isSelected ? 'oklch(96.5% 0.01 265)' : 'transparent', transition:'background 0.1s' }}>
                    <td style={{ padding:'11px 14px' }}>
                      <div style={{ fontWeight:600, color:'oklch(22% 0.06 265)' }}>{lead.name}</div>
                      {lead.email && <div style={{ fontSize:11, color:'oklch(60% 0.03 265)' }}>{lead.email}</div>}
                    </td>
                    <td style={{ padding:'11px 14px', color:'oklch(38% 0.04 265)', whiteSpace:'nowrap' }}>{lead.phone}</td>
                    <td style={{ padding:'11px 14px' }}>
                      <div style={{ fontSize:12, fontWeight:600, color:`oklch(38% 0.1 ${p?.platformHue||265})` }}>{p?.platform}</div>
                      <div style={{ fontSize:11, color:'oklch(60% 0.03 265)' }}>{p?.instructor}</div>
                    </td>
                    <td style={{ padding:'11px 14px', color:'oklch(44% 0.04 265)' }}>{lead.subject}</td>
                    <td style={{ padding:'11px 14px' }}><CRMStatusBadge status={lead.status} /></td>
                    <td style={{ padding:'11px 14px' }}><AgeBadge lastUpdated={lead.lastUpdated} status={lead.status} /></td>
                    <td style={{ padding:'11px 14px', fontSize:12, whiteSpace:'nowrap' }}>
                      {fu ? <span style={{ fontWeight:600, color: fuOverdue ? 'oklch(36% 0.1 25)' : 'oklch(36% 0.08 265)' }}>{fu}</span> : <span style={{ color:'oklch(72% 0.02 265)' }}>—</span>}
                    </td>
                    <td style={{ padding:'11px 14px', fontSize:12, color:'oklch(55% 0.03 265)', maxWidth:180 }}>
                      <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{lead.notes||'—'}</div>
                    </td>
                  </tr>
                  {isSelected && (
                    <window.CRMLeadDetail lead={lead} profile={p} onClose={() => setSelectedId(null)} onUpdate={handleUpdate} />
                  )}
                </React.Fragment>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan={8} style={{ padding:'44px', textAlign:'center', color:'oklch(65% 0.03 265)', fontSize:14 }}>No leads match this filter.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {showAdd && <window.CRMAddModal profiles={profiles} onAdd={handleAdd} onClose={() => setShowAdd(false)} />}
    </div>
  );
};

Object.assign(window, {
  AdminCRM,
  // Tiny badges shared with admin-crm-modals.jsx (destructured off window there).
  CRMStatusBadge, AgeBadge,
});