// crm-pipeline.jsx — Kanban Pipeline Board
const { useState, useEffect, useCallback } = React;

function Pipeline({ user, showToast }) {
  const [leads, setLeads] = useState([]);
  const [selected, setSelected] = useState(null);
  const [showAdd, setShowAdd] = useState(false);
  const [addStage, setAddStage] = useState('lead');
  const [filter, setFilter] = useState('all');

  const load = useCallback(async () => {
    try {
      const all = await CRM.LeadsAPI.getAll(user.role === 'rep' && !user.isAdmin ? { repId: user.id } : {});
      setLeads(all);
    } catch (e) { showToast('Failed to load pipeline: ' + e.message, 'error'); }
  }, [user]);

  useEffect(() => { load(); }, [load]);

  const moveStage = async (leadId, newStage) => {
    try {
      await CRM.LeadsAPI.updateStage(leadId, newStage);
      await load();
      showToast('Stage updated to ' + CRM.STAGES.find(s => s.id === newStage)?.label, 'success');
    } catch (e) { showToast('Failed to move stage.', 'error'); }
  };

  const reps = CRM.UsersAPI.getAll().filter(u => u.role === 'rep');
  const filtered = filter === 'all' ? leads : leads.filter(l => l.assignedRepId === filter);
  const activeCols = CRM.STAGES.filter(s => !['won','lost'].includes(s.id));

  return (
    <div>
      {/* Toolbar */}
      <div style={{display:'flex',gap:10,marginBottom:20,alignItems:'center',flexWrap:'wrap'}}>
        <div style={{flex:1,fontSize:13,color:'var(--g600)'}}>
          <strong style={{color:'var(--navy)'}}>{filtered.filter(l => !['won','lost'].includes(l.stage)).length}</strong> active deals &nbsp;·&nbsp;
          <strong style={{color:'var(--green)'}}>{filtered.filter(l => l.stage==='won').length}</strong> won &nbsp;·&nbsp;
          <strong style={{color:'var(--g400)'}}>{filtered.filter(l => l.stage==='lost').length}</strong> lost
        </div>
        {user.isAdmin && (
          <select className="search-input" style={{maxWidth:200,flex:'unset'}} value={filter} onChange={e => setFilter(e.target.value)}>
            <option value="all">All Reps</option>
            {reps.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
          </select>
        )}
        <button className="btn btn-primary btn-sm" onClick={() => { setAddStage('lead'); setShowAdd(true); }}>+ Add Lead</button>
      </div>

      {/* Kanban Board */}
      <div className="kanban">
        {activeCols.map(stage => {
          const stageLeads = filtered.filter(l => l.stage === stage.id);
          const totalValue = stageLeads.reduce((s, l) => s + (l.estimatedValue || 0), 0);
          return (
            <div key={stage.id} className="k-col">
              <div className="k-col-accent" style={{background:stage.color}} />
              <div className="k-col-hd">
                <span className="k-col-title">{stage.label}</span>
                <span className="k-col-count">{stageLeads.length}</span>
              </div>
              {totalValue > 0 && <div className="k-col-value">${totalValue.toLocaleString()}</div>}
              <div className="k-col-body">
                {stageLeads.map(lead => (
                  <KanbanCard
                    key={lead.id}
                    lead={lead}
                    stages={CRM.STAGES}
                    currentStage={stage}
                    onClick={() => setSelected(lead)}
                    onMove={moveStage}
                    user={user}
                  />
                ))}
                {stageLeads.length === 0 && (
                  <div style={{textAlign:'center',padding:'20px 10px',color:'var(--g400)',fontSize:12}}>No leads</div>
                )}
                <button
                  style={{width:'100%',background:'none',border:'1px dashed var(--g200)',borderRadius:6,padding:'8px',fontSize:12,color:'var(--g400)',cursor:'pointer',marginTop:4}}
                  onClick={() => { setAddStage(stage.id); setShowAdd(true); }}>
                  + Add
                </button>
              </div>
            </div>
          );
        })}

        {/* Won & Lost summary columns */}
        {['won','lost'].map(sid => {
          const stage = CRM.STAGES.find(s => s.id === sid);
          const stageLeads = filtered.filter(l => l.stage === sid);
          const totalValue = stageLeads.reduce((s, l) => s + (l.estimatedValue || 0), 0);
          return (
            <div key={sid} className="k-col" style={{opacity:.85}}>
              <div className="k-col-accent" style={{background:stage.color}} />
              <div className="k-col-hd">
                <span className="k-col-title">{stage.label}</span>
                <span className="k-col-count">{stageLeads.length}</span>
              </div>
              {totalValue > 0 && <div className="k-col-value">${totalValue.toLocaleString()}</div>}
              <div className="k-col-body">
                {stageLeads.map(lead => (
                  <KanbanCard key={lead.id} lead={lead} stages={CRM.STAGES} currentStage={stage}
                    onClick={() => setSelected(lead)} onMove={moveStage} user={user} />
                ))}
              </div>
            </div>
          );
        })}
      </div>

      {/* Lead Detail Panel */}
      {selected && (
        <LeadDetailModal
          lead={selected}
          user={user}
          onClose={() => setSelected(null)}
          onUpdate={async () => { await load(); }}
          showToast={showToast}
        />
      )}

      {/* Add Lead Modal */}
      {showAdd && (
        <AddLeadModal
          user={user}
          defaultStage={addStage}
          onClose={() => setShowAdd(false)}
          onSave={async (data) => {
            try {
              await CRM.LeadsAPI.create(data);
              await load();
              setShowAdd(false);
              showToast('Lead added!', 'success');
            } catch (e) { showToast('Failed to add lead: ' + e.message, 'error'); }
          }}
        />
      )}
    </div>
  );
}

function KanbanCard({ lead, stages, currentStage, onClick, onMove, user }) {
  const today = new Date().toISOString().split('T')[0];
  const rep = CRM.UsersAPI.getById(lead.assignedRepId);

  let followupClass = '';
  if (lead.followUpDate) {
    if (lead.followUpDate < today) followupClass = 'followup-late';
    else if (lead.followUpDate <= new Date(Date.now() + 2*24*60*60*1000).toISOString().split('T')[0]) followupClass = 'followup-soon';
    else followupClass = 'followup-ok';
  }

  const nextStages = stages.filter(s => s.id !== currentStage.id).slice(0, 4);

  return (
    <div className="k-card" onClick={onClick}>
      <div className="k-card-company">{lead.companyName}</div>
      <div className="k-card-contact">{lead.contactName}{lead.contactTitle ? ` · ${lead.contactTitle}` : ''}</div>
      {lead.followUpDate && (
        <div className={`k-card-followup ${followupClass}`}>
          📅 {lead.followUpDate}
        </div>
      )}
      <div className="k-card-footer" style={{marginTop:8}}>
        <span className="k-card-value">{lead.estimatedValue ? '$'+lead.estimatedValue.toLocaleString() : '—'}</span>
        <span className="k-card-rep">{rep ? rep.name.split(' ')[0] : '—'}</span>
      </div>
      {/* Quick move buttons */}
      <div style={{display:'flex',gap:4,marginTop:8,flexWrap:'wrap'}} onClick={e => e.stopPropagation()}>
        {nextStages.slice(0,3).map(s => (
          <button key={s.id} onClick={() => onMove(lead.id, s.id)}
            style={{padding:'2px 6px',fontSize:10,fontWeight:600,background:'var(--off)',border:'1px solid var(--g200)',borderRadius:4,cursor:'pointer',color:'var(--g600)',fontFamily:'var(--font)'}}>
            → {s.label.split(' ')[0]}
          </button>
        ))}
      </div>
    </div>
  );
}

function AddLeadModal({ user, defaultStage, onClose, onSave }) {
  const reps = CRM.UsersAPI.getAll().filter(u => u.role === 'rep');
  const [form, setForm] = useState({
    companyName:'', contactName:'', contactTitle:'', contactEmail:'', contactPhone:'',
    industry:'', employeeCount:'', leadSource:'', address:'',
    assignedRepId: user.role==='rep' && !user.isAdmin ? user.id : '',
    stage: defaultStage, estimatedValue:'', followUpDate:'', notes:'',
    hardwareInterest: []
  });

  const set = (k,v) => setForm(f => ({...f,[k]:v}));
  const toggleHw = (id) => setForm(f => ({...f, hardwareInterest: f.hardwareInterest.includes(id) ? f.hardwareInterest.filter(x=>x!==id) : [...f.hardwareInterest,id]}));

  const save = () => {
    if (!form.companyName) return;
    onSave({ ...form, estimatedValue: parseFloat(form.estimatedValue)||0 });
  };

  return (
    <div className="modal-overlay" {...overlayClose(onClose)}>
      <div className="modal-panel" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <div className="modal-title">Add New Lead</div>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <div className="form-section">Company</div>
          <div className="fg fg-2">
            <div className="field"><label>Company Name *</label><input value={form.companyName} onChange={e=>set('companyName',e.target.value)} /></div>
            <div className="field"><label>Industry</label>
              <select value={form.industry} onChange={e=>set('industry',e.target.value)}>
                <option value="">— Select —</option>
                {['Retail','Healthcare','Hospitality','Manufacturing','Construction','Education','Real Estate','Professional Services','Logistics','Other'].map(i=><option key={i}>{i}</option>)}
              </select>
            </div>
          </div>
          <div className="fg fg-2">
            <div className="field"><label>Employee Count</label>
              <select value={form.employeeCount} onChange={e=>set('employeeCount',e.target.value)}>
                <option value="">— Select —</option>
                {['1-25','26-50','51-100','100+'].map(v=><option key={v}>{v}</option>)}
              </select>
            </div>
            <div className="field"><label>Lead Source</label>
              <select value={form.leadSource} onChange={e=>set('leadSource',e.target.value)}>
                <option value="">— Select —</option>
                {CRM.LEAD_SOURCES.map(s=><option key={s}>{s}</option>)}
              </select>
            </div>
          </div>
          <div className="fg fg-1">
            <div className="field"><label>Address</label><input value={form.address} onChange={e=>set('address',e.target.value)} /></div>
          </div>

          <div className="form-section">Contact</div>
          <div className="fg fg-2">
            <div className="field"><label>Contact Name</label><input value={form.contactName} onChange={e=>set('contactName',e.target.value)} /></div>
            <div className="field"><label>Title</label><input value={form.contactTitle} onChange={e=>set('contactTitle',e.target.value)} /></div>
          </div>
          <div className="fg fg-2">
            <div className="field"><label>Email</label><input type="email" value={form.contactEmail} onChange={e=>set('contactEmail',e.target.value)} /></div>
            <div className="field"><label>Phone</label><input value={form.contactPhone} onChange={e=>set('contactPhone',e.target.value)} /></div>
          </div>

          <div className="form-section">Deal</div>
          <div className="fg fg-2">
            <div className="field"><label>Stage</label>
              <select value={form.stage} onChange={e=>set('stage',e.target.value)}>
                {CRM.STAGES.map(s=><option key={s.id} value={s.id}>{s.label}</option>)}
              </select>
            </div>
            <div className="field"><label>Estimated Value ($)</label><input type="number" value={form.estimatedValue} onChange={e=>set('estimatedValue',e.target.value)} /></div>
          </div>
          <div className="fg fg-2">
            <div className="field"><label>Assigned Rep</label>
              <select value={form.assignedRepId||''} onChange={e=>set('assignedRepId',e.target.value||null)} disabled={user.role==='rep' && !user.isAdmin}>
                <option value="">— Unassigned —</option>
                {reps.map(r=><option key={r.id} value={r.id}>{r.name}</option>)}
              </select>
            </div>
            <div className="field"><label>Follow-Up Date</label><input type="date" value={form.followUpDate} onChange={e=>set('followUpDate',e.target.value)} /></div>
          </div>
          <div className="fg fg-1">
            <div className="field"><label>Notes</label><textarea value={form.notes} onChange={e=>set('notes',e.target.value)} /></div>
          </div>

          <div className="form-section">Hardware Interest</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
            {CRM.HW_OPTIONS.map(h => (
              <button key={h.id} onClick={() => toggleHw(h.id)}
                style={{padding:'6px 12px',fontSize:12,fontWeight:600,borderRadius:5,cursor:'pointer',fontFamily:'var(--font)',
                  background: form.hardwareInterest.includes(h.id) ? 'var(--navy)' : 'var(--off)',
                  color: form.hardwareInterest.includes(h.id) ? 'white' : 'var(--g600)',
                  border: form.hardwareInterest.includes(h.id) ? '1.5px solid var(--navy)' : '1.5px solid var(--g200)'}}>
                {h.name}
              </button>
            ))}
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={save}>Add Lead</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Pipeline, AddLeadModal });