/* ============================================================
   Lectual CRM — C4 · Agents console
   Manage the AI agents that run intake. Reads window.LECTUAL_AGENTS,
   LECTUAL_AGENT_REVIEW, LECTUAL_LEADS. Exports AgentsView to window.
   ============================================================ */

const AUTONOMY = {
  auto:   { label: 'Autonomous',  short: 'Auto',         icon: I.zap,    cls: 'auto',   note: 'Acts on its own' },
  review: { label: 'Review-first', short: 'Review-first', icon: I.view,   cls: 'review', note: 'Drafts, waits for you' },
  off:    { label: 'Off',          short: 'Off',          icon: I.pause,  cls: 'off',    note: 'Paused' },
};

/* tiny 7-point activity sparkline */
function Spark({ data, color }) {
  const max = Math.max(...data, 1);
  return (
    <div className="ac-spark" aria-hidden="true">
      {data.map((v, i) => (
        <i key={i} style={{ height: Math.max(12, Math.round((v / max) * 100)) + '%', background: color || 'var(--firm-primary)', opacity: 0.35 + 0.65 * (i / (data.length - 1)) }} />
      ))}
    </div>
  );
}

function Switch({ on, onToggle, title }) {
  return (
    <button className={'aswitch' + (on ? ' on' : '')} onClick={(e) => { e.stopPropagation(); onToggle(); }} title={title} aria-pressed={on} aria-label="Toggle agent">
      <span className="knob" />
    </button>
  );
}

function AutoPill({ a }) {
  const m = AUTONOMY[a];
  return <span className={'autopill ' + m.cls}>{m.icon}{m.label}</span>;
}

/* ---------------- agent card ---------------- */
function AgentCard({ ag, onOpen, onToggle }) {
  const active = ag.status === 'active';
  const auto = active ? ag.autonomy : 'off';
  return (
    <div className={'acard' + (active ? '' : ' paused')} onClick={() => onOpen(ag.id)}>
      <div className="ac-head">
        <span className="ac-ic">{I[ag.icon] || I.agent}</span>
        <div className="ac-id">
          <div className="ac-name">{ag.name}</div>
          <div className="ac-cat">{ag.cat}</div>
        </div>
        <Switch on={active} onToggle={() => onToggle(ag.id)} title={active ? 'Pause agent' : 'Activate agent'} />
      </div>
      <p className="ac-role">{ag.role}</p>
      <div className="ac-mid">
        <AutoPill a={auto} />
        {ag.review > 0 && active && <span className="ac-review">{ag.review} to review</span>}
        <Spark data={ag.spark} />
      </div>
      <div className="ac-stats">
        {ag.stats.map((s, i) => (
          <div className="ac-stat" key={i}><b>{s.v}</b><span>{s.l}</span></div>
        ))}
      </div>
      <div className="ac-foot">
        <span className="ac-meta">{active ? <><span className="livedot" />Active · saved {ag.week.saved}/wk</> : <>Paused</>}</span>
        <button className="ac-cfg" onClick={(e) => { e.stopPropagation(); onOpen(ag.id); }}>{I.sliders} Configure</button>
      </div>
    </div>
  );
}

/* ---------------- review queue ---------------- */
function ReviewQueue({ items, agentsById, onResolve, go }) {
  if (items.length === 0) {
    return (
      <div className="colcard rq-empty">
        <div className="ch"><span className="ai-ic" style={{ background: 'var(--protected-bg)', color: 'var(--protected)' }}>{I.check}</span><span className="t">Nothing waiting on you</span></div>
        <div className="rq-clear">{I.check}<div><b>You’re all caught up.</b><span>Your agents are running clean — anything that needs a lawyer’s eye will land here.</span></div></div>
      </div>
    );
  }
  return (
    <div className="colcard rq">
      <div className="ch">
        <span className="ai-ic" style={{ background: 'var(--warning-bg)', color: 'var(--warning)' }}>{I.flag}</span>
        <span className="t">Needs your review</span>
        <span className="rq-count">{items.length}</span>
        <span className="rq-sub">Your sign-off keeps every agent compliant</span>
      </div>
      {items.map((it) => {
        const ag = agentsById[it.agent];
        const lead = window.LECTUAL_LEADS.find((l) => l.id === it.leadId);
        return (
          <div className="rq-row" key={it.id}>
            <span className={'rq-sev ' + it.sev} title={it.sev + ' priority'} />
            <div className="rq-body">
              <div className="rq-top">
                <span className="rq-kind">{ag ? ag.name : 'Agent'} · {it.kind}</span>
                {lead && <span className="rq-lead" onClick={() => go && go('lead', lead.id)}>{lead.name} · {lead.company}</span>}
              </div>
              <div className="rq-title">{it.title}</div>
              <div className="rq-detail">{it.detail}</div>
              <div className="rq-actions">
                <button className="btn btn-primary btn-sm" onClick={() => onResolve(it.id, it.actions[0])}>{it.actions[0]}</button>
                <button className="btn btn-secondary btn-sm" onClick={() => onResolve(it.id, it.actions[1], true)}>{it.actions[1]}</button>
                <button className="rq-dismiss" onClick={() => onResolve(it.id, 'Dismissed')}>Dismiss</button>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------------- detail drawer ---------------- */
function AgentDrawer({ ag, onClose, onToggle, onAutonomy, pushToast }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  if (!ag) return null;
  const active = ag.status === 'active';
  const successPct = parseInt(ag.stats.find((s) => /%/.test(s.v))?.v) || 96;

  return (
    <div className="drawer-wrap" onClick={onClose}>
      <div className="drawer scrollbar-thin" onClick={(e) => e.stopPropagation()}>
        <div className="dr-head">
          <span className="dr-ic">{I[ag.icon] || I.agent}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="dr-name">{ag.name}</div>
            <div className="dr-cat">{ag.cat} agent</div>
          </div>
          <button className="dr-x" onClick={onClose} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>

        <p className="dr-role">{ag.role}</p>

        <div className="dr-power">
          <div className="dr-pstate">
            <span className={'dr-statusdot' + (active ? ' on' : '')} />
            <div><div className="dr-pl">{active ? 'Active' : 'Paused'}</div><div className="dr-ph">{active ? `Saving you ~${ag.week.saved} a week` : 'Not running right now'}</div></div>
            <Switch on={active} onToggle={() => onToggle(ag.id)} />
          </div>
          <div className="dr-auto">
            <div className="dr-lab">Autonomy</div>
            <div className="seg-toggle dr-seg">
              {['off', 'review', 'auto'].map((k) => {
                const locked = k === 'auto' && ag.lockReview;
                return (
                  <button
                    key={k}
                    className={(ag.status === 'active' && ag.autonomy === k) || (k === 'off' && !active) ? 'on' : ''}
                    disabled={locked}
                    title={locked ? 'Legal output always needs your sign-off' : AUTONOMY[k].note}
                    onClick={() => onAutonomy(ag.id, k)}
                  >{AUTONOMY[k].icon}{AUTONOMY[k].short}</button>
                );
              })}
            </div>
            <div className="dr-autonote">
              {ag.lockReview
                ? <><span className="lockic">{I.shield}</span>This agent produces legal-adjacent output, so it’s locked to <b>Review-first</b> — findings always reach you before the client.</>
                : AUTONOMY[active ? ag.autonomy : 'off'].label === 'Autonomous'
                  ? 'Running on its own. It still respects every guardrail below.'
                  : AUTONOMY[active ? ag.autonomy : 'off'].label === 'Review-first'
                    ? 'Drafts everything and waits for your approval in the review queue.'
                    : 'Paused — flip it on to put it back to work.'}
            </div>
          </div>
        </div>

        <div className="dr-week">
          <div className="dr-wstat"><b>{ag.week.actions}</b><span>Actions this week</span></div>
          <div className="dr-wstat"><b>{ag.week.saved}</b><span>Time saved</span></div>
          <div className="dr-wstat"><b style={{ color: 'var(--protected)' }}>{successPct}%</b><span>Acted correctly</span></div>
        </div>

        <div className="dr-sec">
          <div className="dr-sl">{I.route} When it runs</div>
          <ul className="dr-list trig">
            {ag.triggers.map((t, i) => <li key={i}><span className="li-dot" />{t}</li>)}
          </ul>
        </div>

        <div className="dr-sec">
          <div className="dr-sl">{I.shield} Guardrails</div>
          <ul className="dr-list guard">
            {ag.guardrails.map((g, i) => <li key={i}><span className="li-ic">{I.check}</span>{g}</li>)}
          </ul>
        </div>

        <div className="dr-sec">
          <div className="dr-sl">{I.clock} Recent runs</div>
          <div className="timeline dr-timeline">
            {ag.log.map((e, i) => {
              const m = evMeta[e.type] || evMeta.enter;
              return (
                <div className="tlrow" key={i}>
                  <span className="tdot" style={{ background: m.bg, color: m.fg }}>{m.ic}</span>
                  <div><div className="tt">{e.t}</div><div className="tm">{e.w} ago</div></div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="dr-foot">
          <button className="btn btn-secondary btn-block" onClick={() => pushToast(ag.name + ' activity log opened')}>View full activity</button>
        </div>
      </div>
    </div>
  );
}

/* ====================== C4 · AGENTS ====================== */
function AgentsView({ go, pushToast }) {
  const [agents, setAgents] = useState(() => window.LECTUAL_AGENTS.map((a) => ({ ...a })));
  const [review, setReview] = useState(() => window.LECTUAL_AGENT_REVIEW.map((r) => ({ ...r })));
  const [openId, setOpenId] = useState(null);

  const agentsById = useMemo(() => Object.fromEntries(agents.map((a) => [a.id, a])), [agents]);
  const activeCount = agents.filter((a) => a.status === 'active').length;
  const weekActions = agents.filter((a) => a.status === 'active').reduce((s, a) => s + a.week.actions, 0);
  const hoursSaved = agents.filter((a) => a.status === 'active').reduce((s, a) => s + parseFloat(a.week.saved), 0);

  const toggle = (id) => {
    setAgents((cur) => cur.map((a) => {
      if (a.id !== id) return a;
      const next = a.status === 'active' ? 'paused' : 'active';
      pushToast(`${a.name} ${next === 'active' ? 'activated' : 'paused'}`);
      return { ...a, status: next };
    }));
  };
  const setAutonomy = (id, mode) => {
    setAgents((cur) => cur.map((a) => {
      if (a.id !== id) return a;
      if (mode === 'auto' && a.lockReview) { pushToast('Legal output stays Review-first', true); return a; }
      if (mode === 'off') { pushToast(`${a.name} paused`); return { ...a, status: 'paused' }; }
      pushToast(`${a.name} → ${AUTONOMY[mode].label}`);
      return { ...a, status: 'active', autonomy: mode };
    }));
  };
  const resolve = (id, action, edit) => {
    setReview((cur) => cur.filter((r) => r.id !== id));
    pushToast(edit ? 'Opening draft to edit…' : action);
  };

  const openAgent = agents.find((a) => a.id === openId) || null;

  return (
    <div className="agents scrollarea scrollbar-thin">
      <div className="agents-inner">
        {/* KPI strip */}
        <div className="ag-kpis">
          <div className="kpi"><div className="l">Agents active</div><b>{activeCount}<span className="of">/ {agents.length}</span></b><div className="d up">running your intake</div></div>
          <div className="kpi"><div className="l">Actions this week</div><b>{weekActions}</b><div className="d up">▲ 18% vs last wk</div></div>
          <div className="kpi"><div className="l">Time saved / wk</div><b>{hoursSaved.toFixed(0)}h</b><div className="d up">≈ a day back</div></div>
          <div className="kpi"><div className="l">Awaiting review</div><b style={{ color: review.length ? 'var(--warning)' : 'var(--protected)' }}>{review.length}</b><div className={'d ' + (review.length ? 'dn' : 'up')}>{review.length ? 'your sign-off' : 'all clear'}</div></div>
        </div>

        {/* review queue */}
        <ReviewQueue items={review} agentsById={agentsById} onResolve={resolve} go={go} />

        {/* roster */}
        <div className="ag-roster-head">
          <h2>Your agents</h2>
          <span className="arh-sub">Tap any agent to set its autonomy and guardrails</span>
          <span className="sp" />
          <button className="btn btn-secondary btn-sm" onClick={() => pushToast('Agent library opening…')}>{I.plus} Add agent</button>
        </div>
        <div className="ag-grid">
          {agents.map((ag) => <AgentCard key={ag.id} ag={ag} onOpen={setOpenId} onToggle={toggle} />)}
        </div>

        <div className="ag-disclaimer">{I.shield} Agents assist your practice — they never give legal advice or file without an attorney’s sign-off. You stay in control of every client-facing action.</div>
      </div>

      {openAgent && <AgentDrawer ag={openAgent} onClose={() => setOpenId(null)} onToggle={toggle} onAutonomy={setAutonomy} pushToast={pushToast} />}
    </div>
  );
}

Object.assign(window, { AgentsView });