// ============================================================
// MOORE AI v13 — ACTION ITEMS TAB
// Requires: shared/utils.js, shared/components.jsx loaded first
// ============================================================

const ActionItemsView = ({ actionItems, setActionItems, crmData, setActiveTab, handleSendMessage, activeCalls }) => {
  const { useState } = React;
  const [newItemText, setNewItemText] = useState('');
  const [filterDone, setFilterDone] = useState(false);

  const addManual = () => {
    if (!newItemText.trim()) return;
    setActionItems(prev => [{
      id: Date.now(), title: newItemText, priority: 'medium',
      done: false, createdAt: new Date().toISOString(), contact: '', source: 'manual'
    }, ...prev]);
    setNewItemText('');
  };

  const toggle = (id) => setActionItems(prev => prev.map(a => a.id === id ? { ...a, done: !a.done } : a));
  const remove = (id) => setActionItems(prev => prev.filter(a => a.id !== id));

  const displayed = filterDone ? actionItems.filter(a => !a.done) : actionItems;
  const pendingCount = actionItems.filter(a => !a.done).length;

  const priorityColor = {
    high: 'text-red-400 border-red-700/40 bg-red-950/30',
    medium: 'text-amber-400 border-amber-700/40 bg-amber-950/30',
    low: 'text-slate-400 border-slate-700/40 bg-slate-900/30'
  };

  return (
    <div className="h-full overflow-y-auto p-6 space-y-6">
      <div className="flex items-start justify-between">
        <div>
          <div className="text-xs mono text-slate-500 uppercase tracking-widest mb-1">Intelligence Layer</div>
          <h2 className="font-black text-white text-2xl italic tracking-tight">Action Items</h2>
          <div className="text-xs text-slate-500 mt-1">{pendingCount} outstanding · Jake extracts these from calls, AI analysis, and pipeline review</div>
        </div>
        <button onClick={() => handleSendMessage(null, "Analyze my pipeline and tell me the top 5 action items I should take this week.")}
          className="px-4 py-2.5 bg-blue-600/10 border border-blue-500/20 rounded-xl text-sm font-bold text-blue-400 hover:bg-blue-600/20 transition-all flex items-center gap-2">
          <Icon name="cpu" size={14} /> Ask Jake
        </button>
      </div>

      {activeCalls && activeCalls.length > 0 && (
        <div className="space-y-2">
          {activeCalls.map((c, i) => (
            <div key={i} className="flex items-center gap-3 px-4 py-3 bg-emerald-950/30 border border-emerald-700/40 rounded-xl">
              <span className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse shrink-0" />
              <span className="text-sm text-emerald-300 font-bold">Live Call: {c.contactName}</span>
              <span className="text-xs text-emerald-500 mono ml-auto">{c.status || 'ringing'} · transcript will auto-save</span>
            </div>
          ))}
        </div>
      )}

      <div className="flex gap-2">
        <input value={newItemText} onChange={e => setNewItemText(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addManual()}
          placeholder="Add action item manually..."
          className="flex-1 bg-slate-900/60 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white outline-none focus:border-blue-500/50 placeholder:text-slate-600" />
        <button onClick={addManual} className="px-4 py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl text-sm font-bold text-white transition-all">Add</button>
        <button onClick={() => setFilterDone(v => !v)}
          className={`px-4 py-2.5 rounded-xl text-sm font-bold transition-all border ${filterDone ? 'bg-blue-600/20 border-blue-500/40 text-blue-300' : 'bg-slate-900/60 border-slate-800 text-slate-400'}`}>
          {filterDone ? 'Show All' : 'Active Only'}
        </button>
      </div>

      {crmData.opportunities && crmData.opportunities.length > 0 && displayed.length === 0 && (
        <div className="bg-slate-900/40 border border-slate-800/60 rounded-2xl p-6 text-center space-y-3">
          <div className="text-slate-400 text-sm">No action items yet.</div>
          <div className="text-xs text-slate-600">Jake auto-generates these from call transcripts and AI analysis.</div>
          <button onClick={() => { setActiveTab('ai-command'); handleSendMessage(null, "Review my pipeline and create action items for my top 5 leads."); }}
            className="mx-auto px-4 py-2 bg-blue-600/20 border border-blue-500/30 rounded-xl text-xs text-blue-400 hover:bg-blue-600/30 transition-all flex items-center gap-2">
            <Icon name="cpu" size={12} /> Let Jake generate action items
          </button>
        </div>
      )}

      <div className="space-y-2">
        {displayed.map(item => (
          <div key={item.id} className={`flex items-start gap-3 px-4 py-3.5 rounded-2xl border transition-all ${item.done ? 'opacity-40 bg-slate-900/20 border-slate-800/30' : 'bg-slate-900/40 border-slate-800/60 hover:border-slate-700'}`}>
            <button onClick={() => toggle(item.id)}
              className={`w-5 h-5 rounded-lg border-2 shrink-0 mt-0.5 transition-all flex items-center justify-center ${item.done ? 'bg-emerald-600 border-emerald-600' : 'border-slate-600 hover:border-blue-500'}`}>
              {item.done && <Icon name="check" size={10} className="text-white" />}
            </button>
            <div className="flex-1 min-w-0">
              <div className={`text-sm font-semibold ${item.done ? 'line-through text-slate-600' : 'text-white'}`}>{item.title}</div>
              <div className="flex items-center gap-2 mt-1 flex-wrap">
                {item.contact && <span className="text-[10px] mono text-slate-500">{item.contact}</span>}
                {item.priority && (
                  <span className={`text-[10px] mono px-2 py-0.5 rounded-md border font-bold uppercase ${priorityColor[item.priority] || priorityColor.medium}`}>
                    {item.priority}
                  </span>
                )}
                {item.source === 'call' && <span className="text-[10px] mono text-teal-500">From call</span>}
                <span className="text-[10px] text-slate-700">{item.createdAt ? new Date(item.createdAt).toLocaleDateString() : ''}</span>
              </div>
            </div>
            <button onClick={() => remove(item.id)} className="text-slate-700 hover:text-red-500 transition-colors shrink-0 mt-0.5">
              <Icon name="x" size={14} />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};