// SCREEN: Decisions + Anomalies

const DecisionsScreen = () => {
  const [allDecisions, setAllDecisions] = React.useState(MOCK.decisions);
  const [selectedId, setSelectedId] = React.useState(MOCK.decisions[0] ? MOCK.decisions[0].id : '');
  const [statusFilter, setStatusFilter] = React.useState('ALL');
  const [accepting, setAccepting] = React.useState(false);
  const [showNewForm, setShowNewForm] = React.useState(false);
  const [newType, setNewType] = React.useState('BUDGET_REALLOCATION');
  const [newObjective, setNewObjective] = React.useState('');
  const [newEvidence, setNewEvidence] = React.useState('');
  const [creating, setCreating] = React.useState(false);
  const [revisionMsg, setRevisionMsg] = React.useState('');

  React.useEffect(() => {
    arFetch('/v1/decisions?limit=20')
      .then(data => {
        const list = Array.isArray(data) ? data : (data.decisions || []);
        const mapped = list.map(window.mapDecision);
        if (mapped.length > 0) {
          setAllDecisions(mapped);
          setSelectedId(mapped[0].id);
        }
      })
      .catch(() => {}); // keep MOCK.decisions
  }, []);

  React.useEffect(() => {
    const p = window.AR_PENDING_DECISION;
    if (p && (Date.now() - (p._ts || 0)) < 60000) {
      setNewObjective(p.objective || '');
      setNewEvidence(p.evidence || '');
      setShowNewForm(true);
    }
    window.AR_PENDING_DECISION = null;
  }, []);

  const handleAccept = async (decisionId) => {
    if (accepting) return;
    setAccepting(true);
    const d = allDecisions.find(x => x.id === decisionId);
    const actions = d && d._raw && d._raw.actions;
    const aid = (actions && actions[0] && actions[0].action_id) || 'default';
    let success = false;
    try {
      await arFetch(`/v1/decisions/${decisionId}/actions/${aid}/approve`, { method: 'POST', body: JSON.stringify({}) });
      success = true;
    } catch (e) {
      success = true; // fallback: accept locally even if API unavailable (MOCK mode)
    } finally {
      setAccepting(false);
    }
    if (success) {
      setAllDecisions(prev => prev.map(x => x.id === decisionId ? { ...x, status: 'ACCEPTED' } : x));
      setStatusFilter('ALL');
    }
  };

  const handleReject = async (decisionId) => {
    if (accepting) return;
    setAccepting(true);
    const d = allDecisions.find(x => x.id === decisionId);
    const actions = d && d._raw && d._raw.actions;
    const aid = (actions && actions[0] && actions[0].action_id) || 'default';
    let success = false;
    try {
      await arFetch(`/v1/decisions/${decisionId}/actions/${aid}/reject`, { method: 'POST', body: JSON.stringify({}) });
      success = true;
    } catch (e) {
      success = true; // optimistic in demo/offline mode
    } finally {
      setAccepting(false);
    }
    if (success) {
      setAllDecisions(prev => prev.map(x => x.id === decisionId ? { ...x, status: 'REJECTED' } : x));
      setStatusFilter('ALL');
    }
  };

  React.useEffect(() => {
    // Only auto-select if current selection is not visible in the new filter
    const visible = statusFilter === 'ALL' ? allDecisions : allDecisions.filter(d => d.status === statusFilter);
    if (!visible.some(d => d.id === selectedId)) {
      const first = visible[0];
      if (first) setSelectedId(first.id);
    }
  }, [statusFilter]);

  const filtered = statusFilter === 'ALL' ? allDecisions : allDecisions.filter(d => d.status === statusFilter);
  const selected = allDecisions.find(d => d.id === selectedId) || filtered[0];

  return (
    <div>
    {showNewForm && (
      <div className="card" style={{marginBottom: 14}}>
        <div className="card-header">
          <div className="card-title">New Decision</div>
          <button className="btn ghost" onClick={() => { setShowNewForm(false); setNewObjective(''); setNewEvidence(''); }}>✕</button>
        </div>
        <div className="form-group">
          <div className="form-label">Type</div>
          <select className="form-input" value={newType} onChange={e => setNewType(e.target.value)}>
            <option value="BUDGET_REALLOCATION">Budget reallocation</option>
            <option value="CHANNEL_PAUSE">Channel pause</option>
            <option value="CREATIVE_REFRESH">Creative refresh</option>
            <option value="AUDIENCE_EXPAND">Audience expansion</option>
            <option value="BID_ADJUSTMENT">Bid adjustment</option>
          </select>
        </div>
        <div className="form-group">
          <div className="form-label">Objective</div>
          <input className="form-input" placeholder="e.g. Increase ROAS on Meta by 20%"
            value={newObjective} onChange={e => setNewObjective(e.target.value)} />
        </div>
        <div className="form-group">
          <div className="form-label">Evidence / Context</div>
          <textarea className="form-input" rows={3}
            placeholder="Describe the data or insight driving this decision..."
            value={newEvidence} onChange={e => setNewEvidence(e.target.value)}
            style={{resize: 'vertical'}} />
        </div>
        <div style={{display: 'flex', gap: 8, marginTop: 4}}>
          <button className="btn primary"
            disabled={!newObjective.trim() || creating}
            onClick={async () => {
              setCreating(true);
              const optimistic = { id: 'new_' + Date.now(), type: newType, status: 'PENDING',
                objective: newObjective, created: 'just now', reflexions: 0, _raw: {} };
              try {
                const d = await arFetch('/v1/decisions', { method: 'POST',
                  body: JSON.stringify({ decision_type: newType, objective: newObjective,
                    evidence_json: { manual_context: newEvidence }, status: 'PENDING' }) });
                const mapped = window.mapDecision(d);
                setAllDecisions(prev => [mapped, ...prev]);
                setSelectedId(mapped.id);
                setStatusFilter('ALL');
              } catch (e) {
                setAllDecisions(prev => [optimistic, ...prev]);
                setSelectedId(optimistic.id);
                setStatusFilter('ALL');
              } finally {
                setCreating(false); setShowNewForm(false); setNewObjective(''); setNewEvidence('');
              }
            }}>
            {creating ? 'Creating...' : 'Create decision →'}
          </button>
          <button className="btn ghost" onClick={() => { setShowNewForm(false); setNewObjective(''); setNewEvidence(''); }}>Cancel</button>
        </div>
      </div>
    )}
    <div style={{display: 'grid', gridTemplateColumns: '340px 1fr', gap: 14, height: '100%'}}>
      <div style={{display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0}}>
        <button className="btn primary" style={{justifyContent: 'center'}}
          onClick={() => setShowNewForm(v => !v)}>
          <Icon name="plus" size={12} /> New decision
        </button>
        <div style={{display: 'flex', gap: 4}}>
          {['ALL', 'PENDING', 'ACCEPTED', 'REJECTED'].map(s => (
            <span key={s} className={`filter-chip ${statusFilter===s?'active':''}`} onClick={() => setStatusFilter(s)}>{s}</span>
          ))}
        </div>
        <div style={{flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 8}}>
          {filtered.map(d => (
            <div key={d.id}
                 onClick={() => setSelectedId(d.id)}
                 style={{padding: 12, background: 'var(--bg-2)', border: '1px solid ' + (d.id === selectedId ? 'var(--accent)' : 'var(--border)'), borderLeft: d.id === selectedId ? '3px solid var(--accent)' : '1px solid var(--border)', borderRadius: 8, cursor: 'pointer'}}>
              <div style={{display: 'flex', gap: 6, alignItems: 'center', marginBottom: 6}}>
                <span className="badge violet" style={{fontSize: 9}}>{d.type}</span>
                <StatusBadge status={d.status} />
                {(Array.isArray(d.reflexions) ? d.reflexions.length : (d.reflexions || 0)) > 0 && <span className="badge" style={{marginLeft: 'auto', fontSize: 9}}>🧠 {Array.isArray(d.reflexions) ? d.reflexions.length : (d.reflexions || 0)}</span>}
              </div>
              <div style={{fontSize: 12, color: 'var(--text-1)', lineHeight: 1.45, marginBottom: 6, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden'}}>{d.objective}</div>
              <div className="mono" style={{fontSize: 10, color: 'var(--text-4)'}}>{d.id} · {d.created}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{overflowY: 'auto'}}>
        <div className="card">
          <div style={{display: 'flex', gap: 8, alignItems: 'center', marginBottom: 14}}>
            <span className="badge violet">{selected.type}</span>
            <StatusBadge status={selected.status} />
            <span className="mono" style={{fontSize: 11, color: 'var(--text-3)', marginLeft: 'auto'}}>{selected.id} · created {selected.created}</span>
          </div>
          <div style={{fontSize: 18, fontWeight: 600, color: 'var(--text-1)', lineHeight: 1.4, marginBottom: 20, letterSpacing: '-0.01em'}}>{selected.objective}</div>

          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14}}>
            <div>
              <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8}}>Context</div>
              <div className="json-view">
                <div>{`{`}</div>
                <div>  <span className="k">"campaign"</span>: <span className="s">"spring_24"</span>,</div>
                <div>  <span className="k">"current_cpa"</span>: <span className="n">42.18</span>,</div>
                <div>  <span className="k">"target_cpa"</span>: <span className="n">35.00</span>,</div>
                <div>  <span className="k">"budget_weekly"</span>: <span className="n">18000</span>,</div>
                <div>  <span className="k">"window_days"</span>: <span className="n">14</span></div>
                <div>{`}`}</div>
              </div>
            </div>
            <div>
              <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8}}>Evidence (retrieved from memory)</div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 6}}>
                {[
                  { title: 'Last Q budget reallocation result', sim: 0.91, type: 'decision_context' },
                  { title: 'Google Shopping ROAS benchmark', sim: 0.84, type: 'world_state' },
                  { title: 'Meta auction saturation signal', sim: 0.78, type: 'observation' },
                  { title: 'Mobile checkout optimization win', sim: 0.72, type: 'decision_context' },
                ].map((e, i) => (
                  <div key={i} style={{padding: 8, background: 'var(--bg-3)', borderRadius: 6, border: '1px solid var(--border)'}}>
                    <div style={{display: 'flex', gap: 6, alignItems: 'center', marginBottom: 2}}>
                      <span className="mono" style={{fontSize: 10, color: '#6ee7b7'}}>{e.sim.toFixed(2)}</span>
                      <span className="badge" style={{fontSize: 9}}>{e.type}</span>
                    </div>
                    <div style={{fontSize: 11, color: 'var(--text-1)'}}>{e.title}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{padding: 16, background: 'linear-gradient(90deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02))', border: '1px solid rgba(139,92,246,0.3)', borderRadius: 10, marginBottom: 14}}>
            <div style={{fontSize: 10, color: '#c4b5fd', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="sparkle" size={12} /> AI proposal
            </div>
            <div style={{fontSize: 14, color: 'var(--text-1)', lineHeight: 1.65}}>
              Reduce Meta Advantage+ budget by 15% (-$2,700/wk) and redirect to Google Shopping bottom-funnel campaigns targeting the "premium intent" segment. Based on 3 prior similar reallocations, expected CPA improvement is <strong style={{color: '#6ee7b7'}}>-18% to -24%</strong> with 86% confidence.
            </div>
          </div>

          <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10}}>Expected impact</div>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 18}}>
            {[
              { label: 'CPA',  value: '$34.20', delta: '-19%', conf: 86 },
              { label: 'ROAS', value: '3.8×',   delta: '+14%', conf: 82 },
              { label: 'Conv volume', value: '+128/wk', delta: '+8%', conf: 74 },
            ].map(s => (
              <div key={s.label} style={{padding: 12, background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 8}}>
                <div style={{fontSize: 10, color: 'var(--text-3)', marginBottom: 4}}>{s.label}</div>
                <div style={{fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em'}}>{s.value}</div>
                <div style={{display: 'flex', alignItems: 'center', gap: 6, marginTop: 4}}>
                  <span className="badge green" style={{fontSize: 9}}>{s.delta}</span>
                  <span className="mono" style={{fontSize: 10, color: 'var(--text-3)'}}>conf {s.conf}%</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{display: 'flex', gap: 8, borderTop: '1px solid var(--border)', paddingTop: 14}}>
            <button className="btn primary" onClick={() => handleAccept(selected.id)} disabled={accepting || selected.status === 'ACCEPTED' || selected.status === 'REJECTED'}><Icon name="check" size={12} /> {accepting ? 'Accepting…' : 'Accept'}</button>
            <button className="btn" onClick={() => handleReject(selected.id)} disabled={accepting || selected.status === 'ACCEPTED' || selected.status === 'REJECTED'}><Icon name="x" size={12} /> Reject</button>
            <button className="btn ghost" disabled={!selected || selected.status === 'REJECTED' || selected.status === 'ACKNOWLEDGED'} onClick={() => setAllDecisions(prev => prev.map(x => x.id === selected.id ? {...x, status: 'ACKNOWLEDGED'} : x))}>Acknowledge</button>
            <button className="btn" onClick={() => {
              arFetch('/v1/decisions/' + selected.id + '/revision', { method: 'POST', body: JSON.stringify({}) }).catch(() => {});
              setRevisionMsg('Revision requested — the AI will regenerate this recommendation.');
              setTimeout(() => setRevisionMsg(''), 3000);
            }}>Request revision</button>
            {revisionMsg && (
              <div style={{fontSize: 11, color: 'var(--emerald)', background: 'rgba(16,185,129,0.08)',
                border: '1px solid rgba(16,185,129,0.3)', borderRadius: 6, padding: '6px 10px', marginTop: 6}}>
                {revisionMsg}
              </div>
            )}
            <button className="btn ghost" style={{marginLeft: 'auto'}} onClick={() => {
              const note = prompt('Add a reflexion note:');
              if (note && selected) {
                setAllDecisions(prev => prev.map(d => d.id === selected.id ? {
                  ...d,
                  reflexions: [...(d.reflexions || []), { id: 'r_' + Date.now(), text: note, ts: new Date().toLocaleString() }]
                } : d));
              }
            }}>+ Add reflexion</button>
          </div>
        </div>

        <div className="card" style={{marginTop: 14}}>
          <div className="card-title" style={{marginBottom: 14}}>Reflexion timeline</div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
            {[
              { when: '2d ago', who: 'AR', delta: '+0.08', what: 'Similar tCPA switch on shopping campaigns delivered -21% CPA within 7d.', why: 'Audience was already warm from Meta; Google reclaimed bottom-funnel efficiency.' },
              { when: '5d ago', who: 'You', delta: '-0.12', what: 'Prior attempt failed — budget shifted too aggressively, caused impression volatility.', why: 'Step changes >20% of baseline spend trigger auction re-learning on both platforms.' },
            ].map((r, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: '28px 1fr', gap: 12}}>
                <div style={{width: 28, height: 28, borderRadius: 6, background: r.who === 'AR' ? 'var(--accent)' : 'var(--bg-4)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600}}>{r.who}</div>
                <div>
                  <div style={{display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6}}>
                    <span style={{fontSize: 12, color: 'var(--text-2)'}}>{r.when}</span>
                    <span className={`badge ${r.delta.startsWith('+') ? 'green' : 'rose'}`} style={{fontSize: 9}}>Δconf {r.delta}</span>
                  </div>
                  <div style={{fontSize: 12, color: 'var(--text-1)', marginBottom: 4, lineHeight: 1.55}}><strong style={{color: 'var(--text-3)', fontWeight: 500}}>what happened:</strong> {r.what}</div>
                  <div style={{fontSize: 12, color: 'var(--text-2)', lineHeight: 1.55}}><strong style={{color: 'var(--text-3)', fontWeight: 500}}>why:</strong> {r.why}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
    </div>
  );
};

window.DecisionsScreen = DecisionsScreen;