// ---- Workflows page (formerly Operators) ----
// Global library of reusable workflow personas. Each workflow: name, icon, color,
// prompt, default engine, allowed engines, capabilities. Referenced by projects.
// Editing here updates every project that uses it. Built-in workflows can be
// cloned but not deleted.
//
// Visual model mirrors the Skills page — a single card grid with a filter bar.
// Clicking a card opens the workflow editor in a focused overlay.

const WorkflowsPage = ({ onNav }) => {
  const [data, setData] = React.useState(OPERATORS);
  const [filter, setFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [openId, setOpenId] = React.useState(null);

  // Open from cross-page nav (e.g. from issue detail)
  React.useEffect(() => {
    if (window.__currentOperator) {
      setOpenId(window.__currentOperator);
      window.__currentOperator = null;
    }
  }, []);

  const filtered = data.filter(r => {
    if (filter === 'builtIn' && !r.builtIn) return false;
    if (filter === 'custom' && r.builtIn) return false;
    if (search && !(r.name + ' ' + (r.desc||'')).toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const updateOperator = (patch) => {
    setData(prev => prev.map(r => r.id === openId ? { ...r, ...patch } : r));
  };
  const cloneOperator = (r) => {
    const nid = r.id + '-copy-' + Math.random().toString(36).slice(2, 6);
    const clone = { ...r, id: nid, name: r.name + ' (copy)', builtIn: false };
    setData(prev => [...prev, clone]);
    setOpenId(nid);
  };
  const deleteOperator = (r) => {
    if (r.builtIn) return;
    setData(prev => prev.filter(x => x.id !== r.id));
    setOpenId(null);
  };
  const newOperator = () => {
    const nid = 'custom-' + Math.random().toString(36).slice(2, 6);
    const r = {
      id: nid, name: 'New agent', icon: 'puzzle', color: '#7C5CFF',
      capabilities: [], defaultEngine: 'claude', allowedEngines: ['claude','codex','gemini'],
      builtIn: false, desc: '', prompt: '',
    };
    setData(prev => [...prev, r]);
    setOpenId(nid);
  };

  const usageCount = (rid) => PROJECTS.filter(p => CAPABILITIES.some(c => c.defaultOperator === rid)).length;
  const open = openId ? data.find(r => r.id === openId) : null;

  const counts = {
    all: data.length,
    builtIn: data.filter(r => r.builtIn).length,
    custom: data.filter(r => !r.builtIn).length,
  };

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-title">Agents</h1>
          <div className="page-sub">Reusable agent personas · prompt + engine binding · applied across projects</div>
        </div>
        <div className="page-actions">
          <button className="ibtn bordered"><Icon name="upload" size={13} /> Import</button>
          <button className="ibtn primary" onClick={newOperator}><Icon name="plus" size={13} /> New agent</button>
        </div>
      </div>

      <div className="filter-bar">
        <div className="search">
          <Icon name="search" size={13} className="dim" />
          <input
            placeholder="Search agents…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        {[
          { id: 'all', label: 'All' },
          { id: 'builtIn', label: 'Built-in' },
          { id: 'custom', label: 'Custom' },
        ].map(f => (
          <button
            key={f.id}
            className={`ibtn ${filter===f.id?'bordered':''}`}
            style={filter===f.id?{color:'var(--fg)'}:undefined}
            onClick={() => setFilter(f.id)}
          >{f.label} <span className="mono" style={{fontSize:10.5,opacity:0.6}}>{counts[f.id]}</span></button>
        ))}
      </div>

      <div className="skill-grid">
        {filtered.map(r => (
          <WorkflowCard key={r.id} w={r} usage={usageCount(r.id)} onOpen={() => setOpenId(r.id)} />
        ))}
        {filtered.length === 0 && (
          <div className="dim" style={{padding:40,textAlign:'center',fontSize:13,gridColumn:'1/-1'}}>
            No agents match.
          </div>
        )}
      </div>

      {open && (
        <div className="wf-overlay" onClick={() => setOpenId(null)}>
          <div className="wf-overlay-inner" onClick={(e) => e.stopPropagation()}>
            <div className="wf-overlay-bar">
              <button className="ibtn ghost" onClick={() => setOpenId(null)}>
                <Icon name="chevLeft" size={13} /> All agents
              </button>
              <span className="dim" style={{fontSize:11,marginLeft:'auto'}}>agent/{open.id}</span>
            </div>
            <OperatorEditor
              op={open}
              update={updateOperator}
              clone={() => cloneOperator(open)}
              del={() => deleteOperator(open)}
              usage={usageCount(open.id)}
              onNav={onNav}
            />
          </div>
        </div>
      )}
    </div>
  );
};

// Card mirrors SkillCard styling — same grid cell, same chrome
const WorkflowCard = ({ w, usage, onOpen }) => (
  <button type="button" className="skill-card wf-card" onClick={onOpen}>
    <div className="skill-head">
      <div className="skill-icon" style={{background: w.color, color: '#fff'}}>
        <Icon name={w.icon} size={16} />
      </div>
      <div style={{minWidth:0,flex:1,textAlign:'left'}}>
        <div className="skill-name" style={{display:'flex',alignItems:'center',gap:6}}>
          {w.name}
          {!w.builtIn && <span className="pd-op-tag-custom">custom</span>}
        </div>
        <div className="mono" style={{fontSize:10.5,color:'var(--fg-3)'}}>agent/{w.id}</div>
      </div>
      <span className="spacer"/>
      <Icon name="chevRight" size={14} className="dim" />
    </div>
    <div className="skill-desc">{w.desc || <span className="dim">No description</span>}</div>
    <div className="skill-foot">
      <span className={`eng-tag engine-${w.defaultEngine}`}>{w.defaultEngine}</span>
      <span className="dim" style={{fontSize:11}}>· {w.capabilities.length} capabilit{w.capabilities.length===1?'y':'ies'}</span>
      <span className="spacer"/>
      <Icon name="layers" size={11} className="dim" />
      <span className="dim" style={{fontSize:11}}>{usage} project{usage===1?'':'s'}</span>
    </div>
  </button>
);

const OP_COLORS = ['#7C5CFF','#22C55E','#FF7A45','#F59E0B','#06B6D4','#A855F7','#0EA5E9','#EC4899','#64748B','#DC2626','#14B8A6','#84CC16'];
const OP_ICONS = ['zap','alert','gitBranch','checkCircle','book','search','settings','person','shield','beaker','puzzle','bolt'];

const OperatorEditor = ({ op, update, clone, del, usage, onNav }) => {
  const allEngines = ['claude','codex','gemini','human'];
  const allCaps = CAPABILITIES.map(c => ({ id: c.id, label: c.label, icon: c.icon }));

  const toggleCap = (cid) => {
    const has = op.capabilities.includes(cid);
    update({ capabilities: has ? op.capabilities.filter(x=>x!==cid) : [...op.capabilities, cid] });
  };
  const toggleEng = (eid) => {
    const has = op.allowedEngines.includes(eid);
    let next = has ? op.allowedEngines.filter(x=>x!==eid) : [...op.allowedEngines, eid];
    if (next.length === 0) next = [eid];
    let def = op.defaultEngine;
    if (!next.includes(def)) def = next[0];
    update({ allowedEngines: next, defaultEngine: def });
  };

  return (
    <div className="op-editor-inner">
      {/* Header */}
      <div className="op-editor-head">
        <div className="op-head-left">
          <button className="op-swatch-pick" style={{background:op.color}}>
            <Icon name={op.icon} size={20} />
          </button>
          <div style={{flex:1,minWidth:0}}>
            <input
              className="op-name-input"
              value={op.name}
              onChange={(e) => update({ name: e.target.value })}
              placeholder="Agent name"
            />
            <input
              className="op-desc-input"
              value={op.desc}
              onChange={(e) => update({ desc: e.target.value })}
              placeholder="One-line description"
            />
          </div>
        </div>
        <div className="op-head-actions">
          {op.builtIn && <span className="op-badge-builtin">Built-in</span>}
          <button className="ibtn ghost" onClick={clone}><Icon name="copy" size={12} /> Clone</button>
          {!op.builtIn && <button className="ibtn ghost" onClick={del} style={{color:'var(--status-blocked)'}}><Icon name="trash" size={12} /> Delete</button>}
        </div>
      </div>

      {/* Meta strip: usage / capabilities / engines */}
      <div className="op-meta-strip">
        <div className="op-meta-item">
          <div className="op-meta-label">Used in</div>
          <div className="op-meta-value">{usage} project{usage===1?'':'s'}</div>
        </div>
        <div className="op-meta-item">
          <div className="op-meta-label">Default engine</div>
          <div className="op-meta-engines">
            {op.allowedEngines.map(e => (
              <button
                key={e}
                className={`op-eng-pick ${op.defaultEngine===e?'on':''} engine-${e}`}
                onClick={() => update({ defaultEngine: e })}
              >
                <span className="eng-dot" /> {e}
              </button>
            ))}
          </div>
        </div>
        <div className="op-meta-item">
          <div className="op-meta-label">Allowed engines</div>
          <div className="op-meta-engines">
            {allEngines.map(e => (
              <button
                key={e}
                className={`op-eng-toggle ${op.allowedEngines.includes(e)?'on':''}`}
                onClick={() => toggleEng(e)}
              >{e}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Capabilities row */}
      <div className="op-section">
        <div className="op-section-label">Use for capabilities</div>
        <div className="op-cap-chips">
          {allCaps.map(c => (
            <button
              key={c.id}
              className={`op-cap-chip ${op.capabilities.includes(c.id)?'on':''}`}
              onClick={() => toggleCap(c.id)}
            >
              <Icon name={c.icon} size={11} /> {c.label}
            </button>
          ))}
        </div>
      </div>

      {/* Appearance */}
      <div className="op-section">
        <div className="op-section-label">Appearance</div>
        <div className="op-appearance">
          <div className="op-pick-group">
            <span className="dim" style={{fontSize:11,marginRight:8}}>Color</span>
            {OP_COLORS.map(c => (
              <button
                key={c}
                className={`op-color-dot ${op.color===c?'on':''}`}
                style={{background:c}}
                onClick={() => update({ color: c })}
                aria-label={`Color ${c}`}
              />
            ))}
          </div>
          <div className="op-pick-group">
            <span className="dim" style={{fontSize:11,marginRight:8}}>Icon</span>
            {OP_ICONS.map(ic => (
              <button
                key={ic}
                className={`op-icon-pick ${op.icon===ic?'on':''}`}
                onClick={() => update({ icon: ic })}
              ><Icon name={ic} size={13} /></button>
            ))}
          </div>
        </div>
      </div>

      {/* Prompt */}
      <div className="op-section op-prompt-section">
        <div className="op-section-head">
          <div className="op-section-label">System prompt</div>
          <div className="op-prompt-tools">
            <span className="dim mono" style={{fontSize:10.5}}>{op.prompt.length} chars · ~{Math.ceil(op.prompt.length/4)} tokens</span>
            <button className="ibtn ghost" onClick={() => navigator.clipboard?.writeText(op.prompt)}><Icon name="copy" size={11} /> Copy</button>
          </div>
        </div>
        <textarea
          className="op-prompt"
          value={op.prompt}
          onChange={(e) => update({ prompt: e.target.value })}
          placeholder="Describe how this agent should behave. Be specific: goals, steps, constraints, output format."
          spellCheck={false}
        />
        <div className="op-prompt-hints">
          <Icon name="info" size={11} className="dim" />
          <span className="dim" style={{fontSize:11}}>
            Variables: <span className="mono">{'{{issue.title}}'}</span>, <span className="mono">{'{{issue.body}}'}</span>, <span className="mono">{'{{project.repo}}'}</span>, <span className="mono">{'{{project.workdir}}'}</span> — substituted at run time.
          </span>
        </div>
      </div>

      {/* Where used */}
      <div className="op-section">
        <div className="op-section-label">Where this workflow is used</div>
        <div className="op-usage-grid">
          {PROJECTS.slice(0, 6).map(p => {
            const caps = CAPABILITIES.filter(c => c.defaultOperator === op.id);
            if (caps.length === 0) return null;
            return (
              <div key={p.id} className="op-usage-card" onClick={() => { window.__currentProj = p.id; onNav && onNav('project-detail'); }}>
                <span className="proj-icon" style={{background:p.color,width:22,height:22,fontSize:10,borderRadius:6}}>{p.id.slice(0,2)}</span>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:12.5,fontWeight:500}}>{p.name}</div>
                  <div className="dim" style={{fontSize:10.5}}>{caps.map(c=>c.label).join(' · ')}</div>
                </div>
                <Icon name="chevron" size={11} className="dim" style={{transform:'rotate(-90deg)'}} />
              </div>
            );
          })}
          {CAPABILITIES.filter(c => c.defaultOperator === op.id).length === 0 && (
            <div className="dim" style={{fontSize:11.5,padding:'8px 10px'}}>Not yet used as a default. Pick this workflow from a project's Issue capabilities to assign it.</div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AgentsPage: WorkflowsPage, WorkflowsPage, OperatorsPage: WorkflowsPage, OperatorEditor });