// Admin Panel — client registry viewer + report data editor (admin sessions only)

const { useState: useAdminState, useMemo: useAdminMemo } = React;

// ── Local icons (avoid polluting window namespace) ───────────────────────────
const AI = ({ d, size = 14, stroke = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
    {d}
  </svg>
);
const AiTrash  = p => <AI {...p} d={<><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6M9 6V4h6v2"/></>} />;
const AiPlus   = p => <AI {...p} d={<><path d="M12 5v14M5 12h14"/></>} />;
const AiUp     = p => <AI {...p} d={<><path d="M18 15l-6-6-6 6"/></>} />;
const AiDown   = p => <AI {...p} d={<><path d="M6 9l6 6 6-6"/></>} />;

// ── Lookup tables ────────────────────────────────────────────────────────────
const TIER_OPTS       = ['Ready Now', 'Needs Prep', 'Longer-Term'];
const DS_STRUCT_OPTS  = ['Structured', 'Semi-structured', 'Unstructured'];
const DS_GOV_OPTS     = ['Approved', 'Needs setup', 'In progress', 'Not assessed'];
const WF_STATUS_OPTS  = ['Fully manual', 'Partially automated', 'Already handled'];
const RM_PRIO_OPTS    = [{ value:'P0', label:'Phase 1' }, { value:'P1', label:'Phase 2' }, { value:'P2', label:'Phase 3' }];
const RM_MODEL_OPTS   = ['One-time build','Managed service','Team enablement','One-time build + 90-day managed run'];

const TIER_COLOR = { 'Ready Now':'#1a8f59', 'Needs Prep':'#b07a18', 'Longer-Term':'#7a7d85' };
const PRIO_COLOR = { P0:'#2e5dff', P1:'#7a7d85', P2:'#b07a18' };

const blankDS  = () => ({ name:'', purpose:'', recordOf:'', owner:'', category:'', format:'', location:'', tier:'Needs Prep', dataStructure:'Structured', governance:'Needs setup', finding:'', action:'' });
const blankWF  = () => ({ id:'wf'+Date.now(), name:'', dept:'', value:5, effort:5, hours:0, status:'Fully manual', processDoc:50, outputAmbiguity:50, dependsOn:[], current:'', proposed:'', impact:'' });
const blankRM  = () => ({ id:'r'+Date.now(), title:'', priority:'P2', rationale:'', effort:'TBD', impact:'', model:'One-time build', department:'', workflowRef:'' });

// ── Toggle switch ────────────────────────────────────────────────────────────

function AToggle({ value, onChange }) {
  return (
    <label className="adm-switch">
      <input type="checkbox" checked={!!value} onChange={e => onChange(e.target.checked)} />
      <span className="adm-switch-track"></span>
    </label>
  );
}

// ── Shared form primitives ───────────────────────────────────────────────────

function AdminSection({ title, subtitle, children, defaultOpen = true }) {
  const [open, setOpen] = useAdminState(defaultOpen);
  return (
    <div className="adm-section">
      <button className="adm-section-head" onClick={() => setOpen(v => !v)}>
        <div>
          <div className="adm-section-title">{title}</div>
          {subtitle && <div className="adm-section-sub">{subtitle}</div>}
        </div>
        <IconChevronDown size={13} style={{ flexShrink:0, transition:'transform 0.2s', transform: open ? 'rotate(180deg)' : 'none' }} />
      </button>
      {open && <div className="adm-section-body">{children}</div>}
    </div>
  );
}

function Field({ label, hint, span, children }) {
  return (
    <div className={"adm-field" + (span ? ' adm-field--span' : '')}>
      <label className="adm-label">{label}</label>
      {hint && <div className="adm-hint">{hint}</div>}
      {children}
    </div>
  );
}

function AInput({ value, onChange, placeholder, type='text', step, min, max }) {
  return (
    <input className="adm-input" type={type} value={value ?? ''} step={step} min={min} max={max}
      onChange={e => onChange(type === 'number' ? Number(e.target.value) : e.target.value)}
      placeholder={placeholder} />
  );
}

function ATextarea({ value, onChange, rows=3, placeholder, mono }) {
  return (
    <textarea className={"adm-input adm-textarea" + (mono ? ' adm-mono' : '')}
      value={value ?? ''} onChange={e => onChange(e.target.value)}
      rows={rows} placeholder={placeholder} spellCheck={!mono} />
  );
}

function ASelect({ value, onChange, options }) {
  // options: array of strings OR {value, label}
  return (
    <select className="adm-input adm-select" value={value} onChange={e => onChange(e.target.value)}>
      {options.map(o => {
        const v = typeof o === 'string' ? o : o.value;
        const l = typeof o === 'string' ? o : o.label;
        return <option key={v} value={v}>{l}</option>;
      })}
    </select>
  );
}

// ── Array editor: Cards / JSON toggle ────────────────────────────────────────

function ArrayEditor({ items, onChange, renderCard, createBlank, itemLabel }) {
  const [mode, setMode] = useAdminState('cards');
  const [jsonDraft, setJsonDraft] = useAdminState(null);
  const [jsonErr, setJsonErr] = useAdminState(null);

  const toJson = () => {
    setJsonDraft(JSON.stringify(items, null, 2));
    setJsonErr(null);
    setMode('json');
  };

  const toCards = () => {
    try {
      const parsed = JSON.parse(jsonDraft);
      onChange(parsed);
      setJsonDraft(null);
      setJsonErr(null);
      setMode('cards');
    } catch (e) {
      setJsonErr('Invalid JSON — fix errors before switching: ' + e.message);
    }
  };

  const move = (i, dir) => {
    const arr = [...items];
    const j = i + dir;
    [arr[i], arr[j]] = [arr[j], arr[i]];
    onChange(arr);
  };

  return (
    <div>
      <div className="adm-array-toolbar">
        <span className="adm-array-count">{items.length} {itemLabel}{items.length !== 1 ? 's' : ''}</span>
        <div className="adm-mode-toggle">
          <button className={'adm-mode-btn' + (mode === 'cards' ? ' is-active' : '')}
            onClick={mode === 'json' ? toCards : undefined}>Cards</button>
          <button className={'adm-mode-btn' + (mode === 'json'  ? ' is-active' : '')}
            onClick={mode === 'cards' ? toJson : undefined}>JSON</button>
        </div>
      </div>

      {jsonErr && <div className="adm-json-err adm-json-err--bar"><IconX size={11}/>{jsonErr}</div>}

      {mode === 'cards' ? (
        <div className="adm-cards-list">
          {items.map((item, i) => renderCard({
            item, index: i, total: items.length,
            onChange:    updated => onChange(items.map((x, idx) => idx === i ? updated : x)),
            onMoveUp:    i > 0               ? () => move(i, -1) : null,
            onMoveDown:  i < items.length-1  ? () => move(i, +1) : null,
            onDelete:    () => onChange(items.filter((_, idx) => idx !== i)),
          }))}
          <button className="adm-add-item-btn" onClick={() => onChange([...items, createBlank()])}>
            <AiPlus size={13} />Add {itemLabel}
          </button>
        </div>
      ) : (
        <ATextarea value={jsonDraft} onChange={setJsonDraft} rows={14} mono />
      )}
    </div>
  );
}

// ── Item card shell (reusable collapsible row) ───────────────────────────────

function ItemCard({ index, total, onMoveUp, onMoveDown, onDelete, summary, children }) {
  const [open, setOpen] = useAdminState(false);
  return (
    <div className={'adm-item-card' + (open ? ' is-open' : '')}>
      <div className="adm-item-head">
        <span className="adm-item-idx">{String(index + 1).padStart(2, '0')}</span>
        <div className="adm-item-summary" onClick={() => setOpen(v => !v)}>{summary}</div>
        <div className="adm-item-acts">
          <button className="adm-act-btn" onClick={onMoveUp}   disabled={!onMoveUp}   title="Move up">  <AiUp   size={12}/></button>
          <button className="adm-act-btn" onClick={onMoveDown} disabled={!onMoveDown} title="Move down"><AiDown size={12}/></button>
          <button className="adm-act-btn adm-act-btn--del" onClick={onDelete} title="Delete"><AiTrash size={12}/></button>
          <button className="adm-act-btn adm-act-btn--chev" onClick={() => setOpen(v => !v)}>
            <IconChevronDown size={12} style={{ transition:'transform 0.15s', transform: open ? 'rotate(180deg)' : 'none' }}/>
          </button>
        </div>
      </div>
      {open && <div className="adm-item-body">{children}</div>}
    </div>
  );
}

// ── Data Sources card ────────────────────────────────────────────────────────

function DataSourceCard({ item, index, total, onChange, onMoveUp, onMoveDown, onDelete }) {
  const set = k => v => onChange({ ...item, [k]: v });
  const tierColor = TIER_COLOR[item.tier] || '#7a7d85';

  const summary = (
    <div className="adm-ds-summary">
      <span className="adm-ds-name">{item.name || <em>Untitled</em>}</span>
      <span className="adm-ds-purpose">{item.purpose}</span>
      <div className="adm-ds-meta">
        {item.category && <span className="adm-tag">{item.category}</span>}
        <span className="adm-tier-dot" style={{ background: tierColor }} title={item.tier}/>
        <span className="adm-tier-label" style={{ color: tierColor }}>{item.tier}</span>
      </div>
    </div>
  );

  return (
    <ItemCard index={index} total={total} onMoveUp={onMoveUp} onMoveDown={onMoveDown} onDelete={onDelete} summary={summary}>
      <div className="adm-grid">
        <Field label="Name"><AInput value={item.name} onChange={set('name')} /></Field>
        <Field label="Purpose"><AInput value={item.purpose} onChange={set('purpose')} /></Field>
        <Field label="Record of" span><AInput value={item.recordOf} onChange={set('recordOf')} placeholder="What this system is the system of record for" /></Field>
        <Field label="Owner"><AInput value={item.owner} onChange={set('owner')} /></Field>
        <Field label="Category"><AInput value={item.category} onChange={set('category')} placeholder="CRM, ERP, Document Store…" /></Field>
        <Field label="Format"><AInput value={item.format} onChange={set('format')} placeholder="API, CSV, PDF…" /></Field>
        <Field label="Location"><AInput value={item.location} onChange={set('location')} placeholder="Cloud / On-prem" /></Field>
        <Field label="Tier"><ASelect value={item.tier} onChange={set('tier')} options={TIER_OPTS} /></Field>
        <Field label="Data structure"><ASelect value={item.dataStructure} onChange={set('dataStructure')} options={DS_STRUCT_OPTS} /></Field>
        <Field label="Governance"><ASelect value={item.governance} onChange={set('governance')} options={DS_GOV_OPTS} /></Field>
        <Field label="Finding" span><ATextarea value={item.finding} onChange={set('finding')} rows={2} placeholder="What we found during the audit" /></Field>
        <Field label="Recommended action" span><ATextarea value={item.action} onChange={set('action')} rows={2} placeholder="Next step to make this source usable" /></Field>
      </div>
    </ItemCard>
  );
}

// ── Rubric editor (process documentation scoring) ────────────────────────────

function RubricEditor({ item, onChange }) {
  const def = window.PROCESS_RUBRIC_DEF || [];
  const hasRubric = Array.isArray(item.processRubric) && item.processRubric.length > 0;
  const rubric = hasRubric ? item.processRubric : def.map(d => ({ id: d.id, score: 0 }));

  const computedScore = hasRubric
    ? Math.round(rubric.reduce((s, r) => s + (r.score || 0), 0) / (rubric.length * 3) * 100)
    : (item.processDoc || 0);

  const setScore = (id, val) => {
    const updated = rubric.map(r => r.id === id ? { ...r, score: val } : r);
    onChange({ ...item, processRubric: updated });
  };
  const enableRubric  = () => onChange({ ...item, processRubric: def.map(d => ({ id: d.id, score: 0 })) });
  const disableRubric = () => onChange({ ...item, processRubric: null, processDoc: computedScore });

  const scoreColor = computedScore >= 80 ? '#1a8f59' : computedScore >= 60 ? '#b07a18' : '#a73a3a';

  return (
    <div className="adm-rubric-editor">
      <div className="adm-rubric-head">
        <div className="adm-rubric-title">Process documentation</div>
        <div className="adm-rubric-head-right">
          <span className="adm-rubric-score" style={{ color: scoreColor }}>{computedScore}<span>/100</span></span>
          {hasRubric
            ? <button className="adm-mode-btn" onClick={disableRubric} title="Switch back to a single manual score">Manual</button>
            : <button className="adm-mode-btn adm-mode-btn--primary" onClick={enableRubric} title="Score across 8 criteria">Rubric</button>
          }
        </div>
      </div>

      {!hasRubric ? (
        <div className="adm-score-row" style={{ marginTop: 8 }}>
          <input type="range" min={0} max={100} value={item.processDoc || 0}
            className="adm-slider"
            onChange={e => onChange({ ...item, processDoc: Number(e.target.value) })} />
          <AInput value={item.processDoc || 0} onChange={v => onChange({ ...item, processDoc: Number(v) })} type="number" min={0} max={100} />
        </div>
      ) : (
        <>
          <div className="adm-rubric-criteria">
            {def.map(d => {
              const score = (rubric.find(r => r.id === d.id) || {}).score || 0;
              return (
                <div key={d.id} className="adm-crit-row">
                  <div className="adm-crit-label">{d.label}</div>
                  <div className="adm-crit-control">
                    <div className="adm-crit-seg">
                      {[0, 1, 2, 3].map(v => (
                        <button key={v}
                          className={'adm-crit-btn' + (v === score ? ' is-active' : '')}
                          onClick={() => setScore(d.id, v)}
                        >{v}</button>
                      ))}
                    </div>
                    <div className="adm-crit-tier">{d.tiers[score]}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
}

// ── Workflows card ───────────────────────────────────────────────────────────

function WorkflowCard({ item, index, total, onChange, onMoveUp, onMoveDown, onDelete }) {
  const set = k => v => onChange({ ...item, [k]: v });
  const setNum = k => v => onChange({ ...item, [k]: Number(v) });
  // dependsOn stored as array; edit as comma-separated string
  const depsStr = (item.dependsOn || []).join(', ');
  const setDeps = v => onChange({ ...item, dependsOn: v.split(',').map(s => s.trim()).filter(Boolean) });

  const statusColor = { 'Fully manual':'#7a7d85', 'Partially automated':'#b07a18', 'Already handled':'#1a8f59' };

  const summary = (
    <div className="adm-wf-summary">
      <span className="adm-wf-name">{item.name || <em>Untitled</em>}</span>
      <span className="adm-wf-dept">{item.dept}</span>
      <div className="adm-wf-meta">
        {item.hours > 0 && <span className="adm-tag">{item.hours.toLocaleString()} hrs/yr</span>}
        <span className="adm-status-dot" style={{ background: statusColor[item.status] || '#7a7d85' }} title={item.status}/>
        <span className="adm-tag adm-tag--muted">{item.status}</span>
      </div>
    </div>
  );

  return (
    <ItemCard index={index} total={total} onMoveUp={onMoveUp} onMoveDown={onMoveDown} onDelete={onDelete} summary={summary}>
      <div className="adm-grid">
        <Field label="ID"><AInput value={item.id} onChange={set('id')} placeholder="wf1" /></Field>
        <Field label="Name"><AInput value={item.name} onChange={set('name')} /></Field>
        <Field label="Department"><AInput value={item.dept} onChange={set('dept')} /></Field>
        <Field label="Status"><ASelect value={item.status} onChange={set('status')} options={WF_STATUS_OPTS} /></Field>
        <Field label="Business value (1–10)" hint="How valuable is this workflow to automate?">
          <div className="adm-score-row">
            <input type="range" min={1} max={10} value={item.value} className="adm-slider" onChange={e => setNum('value')(e.target.value)} />
            <AInput value={item.value} onChange={setNum('value')} type="number" min={1} max={10} />
          </div>
        </Field>
        <Field label="Build effort (1–10)" hint="How complex is this to build? Higher = harder.">
          <div className="adm-score-row">
            <input type="range" min={1} max={10} value={item.effort} className="adm-slider" onChange={e => setNum('effort')(e.target.value)} />
            <AInput value={item.effort} onChange={setNum('effort')} type="number" min={1} max={10} />
          </div>
        </Field>
        <Field label="Hours / year"><AInput value={item.hours} onChange={setNum('hours')} type="number" /></Field>
        <div className="adm-field adm-field--span">
          <RubricEditor item={item} onChange={onChange} />
        </div>
        <Field label="Output ambiguity (0–100)" hint="0 = crystal clear output; 100 = completely undefined.">
          <div className="adm-score-row">
            <input type="range" min={0} max={100} value={item.outputAmbiguity} className="adm-slider" onChange={e => setNum('outputAmbiguity')(e.target.value)} />
            <AInput value={item.outputAmbiguity} onChange={setNum('outputAmbiguity')} type="number" min={0} max={100} />
          </div>
        </Field>
        <Field label="Depends on (data sources)" hint="Comma-separated names matching Data Sources exactly." span>
          <AInput value={depsStr} onChange={setDeps} placeholder="Salesforce, ARGUS Enterprise" />
        </Field>
        <Field label="Current state" span><ATextarea value={item.current} onChange={set('current')} rows={2} /></Field>
        <Field label="Proposed workflow" span><ATextarea value={item.proposed} onChange={set('proposed')} rows={2} /></Field>
        <Field label="Expected impact" span><ATextarea value={item.impact} onChange={set('impact')} rows={2} /></Field>
      </div>
    </ItemCard>
  );
}

// ── Roadmap card ─────────────────────────────────────────────────────────────

function RoadmapCard({ item, index, total, onChange, onMoveUp, onMoveDown, onDelete }) {
  const set = k => v => onChange({ ...item, [k]: v });
  const prioColor = PRIO_COLOR[item.priority] || '#7a7d85';
  const prioLabel = { P0:'Phase 1', P1:'Phase 2', P2:'Phase 3' }[item.priority] || item.priority;

  const summary = (
    <div className="adm-rm-summary">
      <span className="adm-prio-badge" style={{ background: prioColor + '18', color: prioColor, borderColor: prioColor + '30' }}>{prioLabel}</span>
      <span className="adm-rm-title">{item.title || <em>Untitled</em>}</span>
      <div className="adm-rm-meta">
        {item.effort && <span className="adm-tag">{item.effort}</span>}
        {item.department && <span className="adm-tag adm-tag--muted">{item.department}</span>}
      </div>
    </div>
  );

  return (
    <ItemCard index={index} total={total} onMoveUp={onMoveUp} onMoveDown={onMoveDown} onDelete={onDelete} summary={summary}>
      <div className="adm-grid">
        <Field label="ID"><AInput value={item.id} onChange={set('id')} placeholder="r1" /></Field>
        <Field label="Title" span><AInput value={item.title} onChange={set('title')} /></Field>
        <Field label="Priority"><ASelect value={item.priority} onChange={set('priority')} options={RM_PRIO_OPTS} /></Field>
        <Field label="Department"><AInput value={item.department} onChange={set('department')} /></Field>
        <Field label="Effort estimate"><AInput value={item.effort} onChange={set('effort')} placeholder="3–4 wk" /></Field>
        <Field label="Delivery model"><ASelect value={item.model} onChange={set('model')} options={RM_MODEL_OPTS} /></Field>
        <Field label="Workflow ref" hint="ID of the workflow this roadmap item corresponds to.">
          <AInput value={item.workflowRef || ''} onChange={set('workflowRef')} placeholder="wf1" />
        </Field>
        <Field label="Rationale" span><ATextarea value={item.rationale} onChange={set('rationale')} rows={2} /></Field>
        <Field label="Expected impact" span><ATextarea value={item.impact} onChange={set('impact')} rows={2} /></Field>
      </div>
    </ItemCard>
  );
}

// ── Clients tab ──────────────────────────────────────────────────────────────

function ClientsTab() {
  const [shown, setShown] = useAdminState({});
  const clients = window.CLIENTS || [];
  const currentId = window.__currentClientId || sessionStorage.getItem('linea_session');

  return (
    <div className="adm-clients">
      <p className="adm-lede">
        {clients.length} registered client{clients.length !== 1 ? 's' : ''}.
        {currentId && <> Currently loaded: <strong>{(clients.find(c => c.id === currentId) || {}).name || currentId}</strong>.</>}
      </p>
      <table className="adm-table">
        <thead><tr><th>Client</th><th>ID</th><th>Password</th><th>Data file</th></tr></thead>
        <tbody>
          {clients.map(c => (
            <tr key={c.id} className={c.id === currentId ? 'adm-row--current' : ''}>
              <td>{c.id === currentId && <span className="adm-badge">loaded</span>}{c.name}</td>
              <td className="adm-mono">{c.id}</td>
              <td className="adm-mono">
                {shown[c.id] ? c.password : '••••••••'}
                <button className="adm-reveal" onClick={() => setShown(s => ({ ...s, [c.id]: !s[c.id] }))}>
                  {shown[c.id] ? 'hide' : 'show'}
                </button>
              </td>
              <td className="adm-mono">{c.dataFile}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <p className="adm-table-foot">To add a client, create <code>data/[id].js</code> and add an entry to <code>clients.js</code>.</p>
    </div>
  );
}

// ── Editor tab ───────────────────────────────────────────────────────────────

function EditorTab({ state, setState, onApply, applyMsg, applyError }) {
  const setC  = k => v => setState(s => ({ ...s, client: { ...s.client, [k]: v } }));
  const setR  = k => v => setState(s => ({ ...s, readiness: { ...s.readiness, [k]: v } }));
  const setN  = k => v => setState(s => ({ ...s, recommendedNext: { ...s.recommendedNext, [k]: v } }));

  const setSubscore = (i, k) => v => setState(s => {
    const subs = s.readiness.subscores.map((sc, idx) =>
      idx === i ? { ...sc, [k]: k === 'value' ? Math.min(100, Math.max(0, Number(v))) : v } : sc
    );
    return { ...s, readiness: { ...s.readiness, subscores: subs } };
  });

  const setFinding = (i, k) => v => setState(s => {
    const findings = s.findings.map((f, idx) => idx === i ? { ...f, [k]: v } : f);
    return { ...s, findings };
  });

  const PHASES = [
    { value:'Full deployment',      label:'Full deployment (85–100)' },
    { value:'Broad deployment',     label:'Broad deployment (70–84)' },
    { value:'Targeted deployment',  label:'Targeted deployment (55–69)' },
    { value:'Selective deployment', label:'Selective deployment (40–54)' },
    { value:'Foundation first',     label:'Foundation first (<40)' },
  ];

  const computedComposite = Math.round(
    state.readiness.subscores.reduce((s, x) => s + x.value, 0) / state.readiness.subscores.length
  );

  const setRC  = (group, k) => v => setState(s => ({
    ...s,
    reportConfig: {
      ...s.reportConfig,
      [group]: { ...s.reportConfig[group], [k]: v },
    },
  }));

  return (
    <div className="adm-editor">

      <div className="adm-apply-bar">
        <div>
          <div className="adm-apply-title">Apply changes to preview</div>
          <div className="adm-apply-sub">Saves edits to the live report and persists them across reloads. Navigate to any section to preview.</div>
        </div>
        <div className="adm-apply-right">
          {applyMsg && <span className={"adm-apply-msg" + (applyError ? ' is-error' : '')}>{applyMsg}</span>}
          <button className="btn-primary" onClick={onApply}><IconCheck size={13}/>Apply</button>
        </div>
      </div>

      <AdminSection title="Report settings" subtitle="Control which sections appear and how data is displayed.">
        <div>
          <div className="adm-label" style={{marginBottom:8}}>Section visibility</div>
          <div className="adm-toggle-row">
            <div><div className="adm-toggle-label">Executive Summary</div></div>
            <AToggle value={state.reportConfig.sections.summary} onChange={setRC('sections','summary')} />
          </div>
          <div className="adm-toggle-row">
            <div><div className="adm-toggle-label">Data & Systems Readiness</div></div>
            <AToggle value={state.reportConfig.sections.data} onChange={setRC('sections','data')} />
          </div>
          <div className="adm-toggle-row">
            <div><div className="adm-toggle-label">Workflow Inventory</div></div>
            <AToggle value={state.reportConfig.sections.workflows} onChange={setRC('sections','workflows')} />
          </div>
          <div className="adm-toggle-row">
            <div><div className="adm-toggle-label">Execution Roadmap</div></div>
            <AToggle value={state.reportConfig.sections.roadmap} onChange={setRC('sections','roadmap')} />
          </div>
        </div>
        <div style={{marginTop:16, paddingTop:16, borderTop:'1px solid var(--rule-soft)'}}>
          <div className="adm-label" style={{marginBottom:8}}>Data Readiness options</div>
          <div className="adm-toggle-row">
            <div>
              <div className="adm-toggle-label">Enhanced data readiness</div>
              <div className="adm-toggle-sub">Clicking a data source opens a richer side drawer with workflow connections.</div>
            </div>
            <AToggle value={state.reportConfig.dataReadiness.enhanced} onChange={setRC('dataReadiness','enhanced')} />
          </div>
          <div className="adm-toggle-row">
            <div>
              <div className="adm-toggle-label">Show system logos</div>
              <div className="adm-toggle-sub">Display software logos in the data table logo column.</div>
            </div>
            <AToggle value={state.reportConfig.dataReadiness.showLogos} onChange={setRC('dataReadiness','showLogos')} />
          </div>
        </div>
      </AdminSection>

      <AdminSection title="Client info">
        <div className="adm-grid">
          <Field label="Client name"><AInput value={state.client.name} onChange={setC('name')} /></Field>
          <Field label="Short name"><AInput value={state.client.shortName} onChange={setC('shortName')} /></Field>
          <Field label="Industry"><AInput value={state.client.industry} onChange={setC('industry')} /></Field>
          <Field label="Headcount"><AInput value={state.client.headcount} onChange={setC('headcount')} type="number" /></Field>
          <Field label="Locations"><AInput value={state.client.locations} onChange={setC('locations')} placeholder="Boston · Providence · Hartford" /></Field>
          <Field label="Delivered on"><AInput value={state.client.deliveredOn} onChange={setC('deliveredOn')} /></Field>
          <Field label="Engagement lead"><AInput value={state.client.engagementLead} onChange={setC('engagementLead')} /></Field>
          <Field label="Logo" hint="Path or URL. If blank, client name renders as text in the topbar.">
            <AInput value={state.client.logo || ''} onChange={setC('logo')} placeholder="assets/logo.svg" />
          </Field>
        </div>
      </AdminSection>

      <AdminSection title="Readiness scores" subtitle={`Composite: ${computedComposite}/100 — computed from subscores.`}>
        <div className="adm-subscores">
          {state.readiness.subscores.map((sc, i) => (
            <div key={sc.key} className="adm-subscore-row">
              <div className="adm-subscore-left">
                <AInput value={sc.label} onChange={setSubscore(i, 'label')} placeholder="Label" />
                <AInput value={sc.note}  onChange={setSubscore(i, 'note')}  placeholder="Note shown on summary" />
              </div>
              <div className="adm-subscore-right">
                <input type="range" min={0} max={100} value={sc.value} className="adm-slider"
                  onChange={e => setSubscore(i, 'value')(e.target.value)} />
                <AInput value={sc.value} onChange={setSubscore(i, 'value')} type="number" min={0} max={100} />
              </div>
            </div>
          ))}
        </div>
        <div className="adm-grid adm-grid--3 adm-mt">
          <Field label="Recommended phase">
            <ASelect value={state.readiness.recommendedPhase} onChange={setR('recommendedPhase')} options={PHASES} />
          </Field>
          <Field label="Timeline (months)">
            <AInput value={state.readiness.timelineMonths} onChange={setR('timelineMonths')} type="number" />
          </Field>
          <Field label="Annual wage placeholder" hint="Drives recoverable labour value.">
            <AInput value={state.readiness.annualWagePlaceholder} onChange={setR('annualWagePlaceholder')} type="number" step={1000} />
          </Field>
          <Field label="FTE hours / year">
            <AInput value={state.readiness.fteHoursPerYear} onChange={setR('fteHoursPerYear')} type="number" />
          </Field>
          <Field label="Hero label" span>
            <ATextarea value={state.readiness.heroLabel} onChange={setR('heroLabel')} rows={2} />
          </Field>
        </div>
      </AdminSection>

      <AdminSection title="Headline findings" subtitle="Four findings shown on the Executive Summary.">
        <div className="adm-findings">
          {state.findings.map((f, i) => (
            <div key={i} className="adm-finding">
              <div className="adm-finding-n">{f.n}</div>
              <div className="adm-finding-fields">
                <AInput value={f.headline} onChange={setFinding(i, 'headline')} placeholder="Headline" />
                <ATextarea value={f.detail} onChange={setFinding(i, 'detail')} placeholder="Detail" rows={2} />
              </div>
            </div>
          ))}
        </div>
      </AdminSection>

      <AdminSection title="Recommended next step" subtitle="Stat callout and CTA at the bottom of the Execution Roadmap.">
        <div className="adm-grid">
          <Field label="Title" span><AInput value={state.recommendedNext.title} onChange={setN('title')} /></Field>
          <Field label="Body" span><ATextarea value={state.recommendedNext.body} onChange={setN('body')} rows={3} /></Field>
          <Field label="Return hours"><AInput value={state.recommendedNext.returnHours} onChange={setN('returnHours')} type="number" /></Field>
          <Field label="Return label"><AInput value={state.recommendedNext.returnLabel} onChange={setN('returnLabel')} /></Field>
          <Field label="Time to value"><AInput value={state.recommendedNext.timeToValue} onChange={setN('timeToValue')} type="number" /></Field>
          <Field label="Time to value unit"><AInput value={state.recommendedNext.timeToValueUnit} onChange={setN('timeToValueUnit')} /></Field>
          <Field label="Time to value label" span><AInput value={state.recommendedNext.timeToValueLabel} onChange={setN('timeToValueLabel')} /></Field>
          <Field label="Primary CTA"><AInput value={state.recommendedNext.ctaPrimary} onChange={setN('ctaPrimary')} /></Field>
          <Field label="Secondary CTA"><AInput value={state.recommendedNext.ctaSecondary} onChange={setN('ctaSecondary')} /></Field>
        </div>
      </AdminSection>

      <AdminSection title="Data sources" subtitle="Audited systems and their readiness status." defaultOpen={false}>
        <ArrayEditor
          items={state.dataSources}
          onChange={v => setState(s => ({ ...s, dataSources: v }))}
          renderCard={p => <DataSourceCard key={p.item.name + p.index} {...p} />}
          createBlank={blankDS}
          itemLabel="data source"
        />
      </AdminSection>

      <AdminSection title="Workflows" subtitle="All mapped workflows with readiness scores." defaultOpen={false}>
        <ArrayEditor
          items={state.workflows}
          onChange={v => setState(s => ({ ...s, workflows: v }))}
          renderCard={p => <WorkflowCard key={p.item.id || p.index} {...p} />}
          createBlank={blankWF}
          itemLabel="workflow"
        />
      </AdminSection>

      <AdminSection title="Roadmap" subtitle="Prioritized backlog of recommended workflow builds." defaultOpen={false}>
        <ArrayEditor
          items={state.roadmap}
          onChange={v => setState(s => ({ ...s, roadmap: v }))}
          renderCard={p => <RoadmapCard key={p.item.id || p.index} {...p} />}
          createBlank={blankRM}
          itemLabel="roadmap item"
        />
      </AdminSection>

    </div>
  );
}

// ── Export tab ───────────────────────────────────────────────────────────────

function buildDataFile(state) {
  const j = v => JSON.stringify(v, null, 2);
  const date = new Date().toLocaleDateString('en-US', { year:'numeric', month:'long', day:'numeric' });
  const { composite, hoursRecoverable, totalInventoryHours, ...readinessData } = state.readiness;

  return `// Linea AI Readiness Assessment — ${state.client.name}
// Generated ${date} via Admin Panel

window.CLIENT = ${j(state.client)};

window.READINESS = ${j(readinessData)};

window.FINDINGS = ${j(state.findings)};

window.RECOMMENDED_NEXT = ${j(state.recommendedNext)};

window.REPORT_CONFIG = ${j(state.reportConfig)};

window.DATA_SOURCES = ${j(state.dataSources)};

window.TIER_SCORE = { 'Ready Now': 100, 'Needs Prep': 55, 'Longer-Term': 25 };

window.TIER_SCORE = { 'Ready Now': 100, 'Needs Prep': 55, 'Longer-Term': 25 };
window.computeReadiness = function (wf) {
  var ds = window.DATA_SOURCES;
  var deps = (wf.dependsOn || []).map(function (n) {
    var src = ds.find(function (d) { return d.name === n; });
    return src ? (window.TIER_SCORE[src.tier] || 0) : 0;
  });
  var dataScore = deps.length ? deps.reduce(function (a, b) { return a + b; }, 0) / deps.length : 80;
  var processDoc;
  if (wf.processRubric && wf.processRubric.length > 0) {
    var total = wf.processRubric.reduce(function (s, r) { return s + (r.score || 0); }, 0);
    processDoc = Math.round(total / (wf.processRubric.length * 3) * 100);
  } else { processDoc = wf.processDoc || 0; }
  var outputAmbiguity = wf.outputAmbiguity != null ? wf.outputAmbiguity : 70;
  var composite = Math.round(processDoc * 0.35 + dataScore * 0.35 + outputAmbiguity * 0.30);
  var band = composite >= 80 ? 'Ready to build' : composite >= 60 ? 'Near-ready' : 'Discovery needed';
  return { composite: composite, dataScore: Math.round(dataScore), processDoc: processDoc, outputAmbiguity: outputAmbiguity, deps: deps, band: band, rubric: wf.processRubric || null };
};

window.WORKFLOWS = ${j(state.workflows)};

window.ROADMAP = ${j(state.roadmap)};

// Computed fields — do not edit below this line
window.READINESS.composite = Math.round(
  window.READINESS.subscores.reduce(function (s, x) { return s + x.value; }, 0) / window.READINESS.subscores.length
);
(function () {
  var rmIds = new Set(window.ROADMAP.map(function (r) { return r.workflowRef; }).filter(Boolean));
  window.READINESS.hoursRecoverable = window.WORKFLOWS
    .filter(function (w) { return rmIds.has(w.id); })
    .reduce(function (s, w) { return s + w.hours; }, 0);
  window.READINESS.totalInventoryHours = window.WORKFLOWS
    .reduce(function (s, w) { return s + w.hours; }, 0);
})();
`;
}

function ExportTab({ state }) {
  const [copied, setCopied] = useAdminState(false);

  const generated = useAdminMemo(() => {
    try { return buildDataFile(state); }
    catch (e) { return null; }
  }, [state]);

  const download = () => {
    if (!generated) return;
    const slug = (state.client.name || 'client').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
    const blob = new Blob([generated], { type:'application/javascript' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = slug + '.js';
    a.click();
    URL.revokeObjectURL(a.href);
  };

  const copy = () => {
    if (!generated) return;
    navigator.clipboard.writeText(generated).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  if (!generated) {
    return (
      <div className="adm-export-error-state">
        <IconX size={15}/>Fix JSON errors in the Editor tab before exporting.
      </div>
    );
  }

  return (
    <div>
      <div className="adm-export-head">
        <div>
          <div className="adm-export-title">Data file for <strong>{state.client.name}</strong></div>
          <div className="adm-export-sub">Download and place in <code>data/</code> to deploy.</div>
        </div>
        <div className="adm-export-btns">
          <button className="btn-ghost" onClick={copy}>
            {copied ? <><IconCheck size={13}/>Copied</> : <><IconClipboard size={13}/>Copy</>}
          </button>
          <button className="btn-primary" onClick={download}>
            <IconDownload size={13}/>Download .js
          </button>
        </div>
      </div>
      <pre className="adm-export-pre">{generated}</pre>
    </div>
  );
}

// ── AdminView ────────────────────────────────────────────────────────────────

function AdminView() {
  const [tab, setTab]           = useAdminState('editor');
  const [applyMsg, setApplyMsg] = useAdminState(null);
  const [applyError, setApplyError] = useAdminState(false);

  const [state, setState] = useAdminState(() => {
    const { composite, hoursRecoverable, totalInventoryHours, ...readinessRest } = window.READINESS;
    return {
      client:          { ...window.CLIENT },
      readiness:       { ...readinessRest, subscores: JSON.parse(JSON.stringify(window.READINESS.subscores || [])) },
      findings:        JSON.parse(JSON.stringify(window.FINDINGS || [])),
      recommendedNext: { ...window.RECOMMENDED_NEXT },
      dataSources:     JSON.parse(JSON.stringify(window.DATA_SOURCES || [])),
      workflows:       JSON.parse(JSON.stringify(window.WORKFLOWS || [])),
      roadmap:         JSON.parse(JSON.stringify(window.ROADMAP || [])),
      reportConfig:    JSON.parse(JSON.stringify(window.REPORT_CONFIG || {
        sections: { summary: true, data: true, workflows: true, roadmap: true },
        dataReadiness: { enhanced: false, showLogos: true },
      })),
    };
  });

  const applyChanges = () => {
    window.CLIENT           = { ...window.CLIENT,           ...state.client };
    window.READINESS        = { ...window.READINESS,        ...state.readiness };
    window.FINDINGS         = state.findings;
    window.RECOMMENDED_NEXT = { ...window.RECOMMENDED_NEXT, ...state.recommendedNext };
    window.DATA_SOURCES     = state.dataSources;
    window.WORKFLOWS        = state.workflows;
    window.ROADMAP          = state.roadmap;
    window.REPORT_CONFIG    = state.reportConfig;

    window.READINESS.composite = Math.round(
      window.READINESS.subscores.reduce((s, x) => s + x.value, 0) / window.READINESS.subscores.length
    );
    const rmIds = new Set(window.ROADMAP.map(r => r.workflowRef).filter(Boolean));
    window.READINESS.hoursRecoverable    = window.WORKFLOWS.filter(w => rmIds.has(w.id)).reduce((s, w) => s + w.hours, 0);
    window.READINESS.totalInventoryHours = window.WORKFLOWS.reduce((s, w) => s + w.hours, 0);

    const payload = {
      client:          state.client,
      readiness:       state.readiness,
      findings:        state.findings,
      recommendedNext: state.recommendedNext,
      dataSources:     state.dataSources,
      workflows:       state.workflows,
      roadmap:         state.roadmap,
      reportConfig:    state.reportConfig,
    };

    if (window.__refreshApp) window.__refreshApp();

    // Persist to the backend as a new immutable revision (set up by AdminConsole).
    if (typeof window.__persistAssessment === 'function') {
      setApplyError(false);
      setApplyMsg('Saving…');
      window.__persistAssessment(payload)
        .then((r) => { setApplyError(false); setApplyMsg('Saved as revision v' + (r && r.version ? r.version : '?') + '.'); setTimeout(() => setApplyMsg(null), 3500); })
        .catch((e) => { setApplyError(true); setApplyMsg('Save failed: ' + (e.message || 'error')); });
      return;
    }

    setApplyError(false);
    setApplyMsg('Saved (live preview only — not persisted).');
    setTimeout(() => setApplyMsg(null), 3000);
  };

  const TABS = [
    { key:'editor',  label:'Report editor' },
    { key:'clients', label:'Client registry' },
    { key:'export',  label:'Export' },
  ];

  return (
    <div className="view admin-view">
      <div className="page-head">
        <div>
          <div className="kicker">Admin</div>
          <h1 className="page-title">Client Data</h1>
          <p className="page-lede">Edit the loaded report, view all registered clients, and download updated data files.</p>
        </div>
        <div className="adm-session-pill">
          <span className="adm-session-dot"/>Admin session
        </div>
      </div>

      <div className="adm-tab-bar">
        {TABS.map(t => (
          <button key={t.key} className={"adm-tab" + (tab === t.key ? ' is-active' : '')} onClick={() => setTab(t.key)}>
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'editor'  && <EditorTab state={state} setState={setState} onApply={applyChanges} applyMsg={applyMsg} applyError={applyError} />}
      {tab === 'clients' && <ClientsTab />}
      {tab === 'export'  && <ExportTab state={state} />}
    </div>
  );
}

window.AdminView = AdminView;