/* ──────────────────────────────────────────────────────────────────────
   Tom AI — shared skill page React component.

   Renders a complete skill page from a `skill` data shape. Handles three
   states: landing (sub-task tiles) → flow (one question at a time) → recap.

   Skill data shape:
     {
       id: 'phones',
       name: 'Phones & IT',
       sub: 'Calls, voicemail, lines, devices, accounts.',
       greeting: 'What would you like Tom AI to do?',
       tiles: [
         { id, title, sub, primary?: boolean }   // primary tile drives the default flow
       ],
       flow: [
         { id, q: 'Question text?', sub?: '', kind: 'text'|'textarea'|'radio'|'multi'|'daterange'|'select',
           placeholder, options?: [{k,t,d,sel?}], chips?: [], helper?: '' }
       ],
       recap: {
         template: [
           { k: 'What', from: 'q-id', fallback: '…' },
           ...
         ],
         eta: 'Expect a reply by this evening.',
       },
       activity: [
         { when: '10:14', pin: '/screened', what: 'Screened nine calls…', status: 'done' }
       ],
     }
   ────────────────────────────────────────────────────────────────────── */

function SkillPage({ skill }) {
  const [view, setView] = React.useState('landing');  // 'landing' | 'flow' | 'recap'
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});

  React.useEffect(() => {
    document.title = `Tom AI — ${skill.name}`;
  }, [skill.name]);

  const startFlow = () => { setView('flow'); setStep(0); };
  const back = () => {
    if (view === 'recap') { setView('flow'); setStep(skill.flow.length - 1); return; }
    if (view === 'flow' && step > 0) { setStep(step - 1); return; }
    setView('landing');
  };
  const next = () => {
    if (step < skill.flow.length - 1) setStep(step + 1);
    else setView('recap');
  };

  return (
    <>
      <div className="crop tl"></div>
      <div className="crop tr"></div>
      <div className="crop bl"></div>
      <div className="crop br"></div>

      <header className="page">
        <div className="tom-top">
          <div className="left">
            <a className="mark" href="Tom.html">Tom AI</a>
            <span className="breadcrumb">
              <a href="Tom.html" style={{color:'var(--muted)', textDecoration:'none'}}>Front Desk</a>
              <span className="sep">/</span>
              <span>{skill.name}</span>
            </span>
          </div>
          <div className="right">
            <a className="contact" href="#contact">Contact</a>
            <a className="cancel" href="Tom.html">Cancel</a>
          </div>
        </div>
      </header>

      <main className="page" style={{ paddingTop: 36, paddingBottom: 24 }}>
        {view === 'landing' && <SkillLanding skill={skill} onStart={startFlow} />}
        {view === 'flow' && (
          <SkillFlow
            skill={skill}
            step={step}
            answers={answers}
            setAnswers={setAnswers}
            onBack={back}
            onNext={next}
          />
        )}
        {view === 'recap' && (
          <SkillRecap
            skill={skill}
            answers={answers}
            onEdit={back}
            onSend={() => { /* stub */ }}
          />
        )}
      </main>

      <footer className="page">
        <div className="tom-foot">
          <div>© Anthony Intelligence</div>
          <a className="status" href="#status">
            <span className="status-dot"></span>
            <span>Tom AI · on</span>
          </a>
        </div>
      </footer>
    </>
  );
}

/* ──────────────── Landing view ──────────────── */
function SkillLanding({ skill, onStart }) {
  return (
    <>
      <div className="eyebrow">
        <span className="accent">{skill.name}</span> · with Tom AI
      </div>
      <h1 className="headline">{skill.greeting}</h1>
      {skill.lede && <p className="lede">{skill.lede}</p>}

      <div className="tiles">
        {skill.tiles.map(t => (
          <button
            key={t.id}
            className={'tile' + (t.soft ? ' soft' : '')}
            onClick={t.primary ? onStart : undefined}
            disabled={t.soft}
          >
            <span className="tile-icon" aria-hidden="true">
              <SkillIcon kind={t.icon || skill.id} />
            </span>
            <span className="tile-body">
              <span className="tile-title">{t.title}</span>
              <span className="tile-sub">{t.sub}</span>
              {t.soft && <span className="tile-tag phase2">Beta — soon</span>}
            </span>
            <span className="tile-arrow">→</span>
          </button>
        ))}
      </div>

      <div className="divider">
        <span className="line"></span>
        <span className="word">or</span>
        <span className="line"></span>
      </div>

      <button className="dictate">
        <span className="icon">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <rect x="9" y="3" width="6" height="12" rx="3"/>
            <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/>
          </svg>
        </span>
        <span className="dictate-text">
          <span className="dictate-title">Dictate a note</span>
          <span className="dictate-sub">Speak — Tom AI will figure it out.</span>
        </span>
        <span className="dictate-arrow">→</span>
      </button>

      <div className="at-desk">
        <span className="dot"></span>
        <span>Tom AI · on</span>
        <a href="#log">See what Tom AI has done lately →</a>
      </div>

      {skill.activity && skill.activity.length > 0 && (
        <section className="activity" id="log">
          <div className="activity-head">
            <span className="label">Recent — {skill.name}</span>
            <a className="more" href="#full-log">Full log →</a>
          </div>
          {skill.activity.map((a, i) => (
            <div key={i} className="activity-row">
              <span className="when">{a.when}</span>
              <span className="what">
                {a.pin && <span className="pin">{a.pin}</span>}
                {a.what}
              </span>
              <span className={'status ' + (a.status === 'done' ? 'live' : '')}>{a.status}</span>
            </div>
          ))}
        </section>
      )}
    </>
  );
}

/* ──────────────── Flow view ──────────────── */
function SkillFlow({ skill, step, answers, setAnswers, onBack, onNext }) {
  const q = skill.flow[step];
  const total = skill.flow.length;
  const set = (val) => setAnswers({ ...answers, [q.id]: val });
  const value = answers[q.id];

  return (
    <>
      <div className="flow-crumb">
        <button className="back" onClick={onBack}>← Back</button>
        <span className="here">{skill.name} · with Tom AI</span>
        <span className="count">{step + 1} of {total}</span>
      </div>

      <div className="progress">
        {Array.from({ length: total }).map((_, i) => (
          <span key={i} className={'seg' + (i <= step ? ' on' : '')}></span>
        ))}
      </div>

      <h1 className="question">{q.q}</h1>
      {q.sub && <p className="lede" style={{ marginTop: -16, marginBottom: 22 }}>{q.sub}</p>}

      <div className="field-area">
        <Field q={q} value={value} onChange={set} />
        {q.helper && (
          <div className="helper-row">
            <span className="label">{q.helper.label || 'Try'}</span>
            {q.helper.chips.map(c => (
              <button key={c} type="button" className="chip" onClick={() => {
                const cur = typeof value === 'string' ? value : '';
                set(cur ? (cur + (cur.endsWith(' ') ? '' : ' ') + c) : c);
              }}>{c}</button>
            ))}
          </div>
        )}
      </div>

      <div className="flow-foot">
        <button className="btn-secondary" onClick={onNext}>{q.skipLabel || "I'll tell you later"}</button>
        <button className="btn-primary" onClick={onNext}>
          <span>{step === total - 1 ? 'Review' : 'Continue'}</span>
          <span className="arrow">→</span>
        </button>
      </div>

      <div className="assurance">
        Stop here and pick up later — Tom AI won't start until you send.
      </div>
    </>
  );
}

function Field({ q, value, onChange }) {
  if (q.kind === 'text') {
    return <input className="input" placeholder={q.placeholder || ''}
                  value={value || ''} onChange={e => onChange(e.target.value)} />;
  }
  if (q.kind === 'textarea') {
    return <textarea className="textarea" rows={q.rows || 5} placeholder={q.placeholder || ''}
                     value={value || ''} onChange={e => onChange(e.target.value)} />;
  }
  if (q.kind === 'radio') {
    const sel = value || q.options.find(o => o.sel)?.k;
    return (
      <div className="radios">
        {q.options.map(o => (
          <label key={o.k} className={'radio' + (sel === o.k ? ' sel' : '')}
                 onClick={() => onChange(o.k)}>
            <span className="radio-dot"></span>
            <span className="radio-body">
              <span className="radio-t">{o.t}</span>
              {o.d && <span className="radio-d">{o.d}</span>}
            </span>
          </label>
        ))}
      </div>
    );
  }
  if (q.kind === 'multi') {
    const sel = new Set(value || q.options.filter(o => o.sel).map(o => o.k));
    const toggle = (k) => {
      const next = new Set(sel);
      if (next.has(k)) next.delete(k); else next.add(k);
      onChange(Array.from(next));
    };
    return (
      <div className="multi">
        {q.options.map(o => (
          <button key={o.k} type="button"
                  className={'multi-tile' + (sel.has(o.k) ? ' on' : '')}
                  onClick={() => toggle(o.k)}>
            <span className="check"></span>
            <span className="t">{o.t}</span>
            {o.d && <span className="d">{o.d}</span>}
          </button>
        ))}
      </div>
    );
  }
  if (q.kind === 'daterange') {
    const v = value || {};
    return (
      <div className="date-row">
        <div className="date-field">
          <label>From</label>
          <input type="date" className="select"
                 value={v.from || ''} onChange={e => onChange({ ...v, from: e.target.value })} />
        </div>
        <div className="date-field">
          <label>To</label>
          <input type="date" className="select"
                 value={v.to || ''} onChange={e => onChange({ ...v, to: e.target.value })} />
        </div>
      </div>
    );
  }
  if (q.kind === 'select') {
    return (
      <select className="select" value={value || ''} onChange={e => onChange(e.target.value)}>
        <option value="">{q.placeholder || 'Choose…'}</option>
        {q.options.map(o => <option key={o.k} value={o.k}>{o.t}</option>)}
      </select>
    );
  }
  return null;
}

/* ──────────────── Recap view ──────────────── */
function SkillRecap({ skill, answers, onEdit, onSend }) {
  const today = new Date();
  const dateStr = today.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
                + ' · '
                + today.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });

  return (
    <>
      <div className="flow-crumb">
        <button className="back" onClick={onEdit}>← Edit</button>
        <span className="here">{skill.name} · last step</span>
        <span className="count">Review</span>
      </div>

      <h1 className="question">Here's what I'll have Tom AI do.</h1>

      <div className="recap">
        <div className="recap-head">
          <span className="to">To</span>
          <span className="agent">Tom AI · {skill.name}</span>
          <span className="date">{dateStr}</span>
        </div>

        {skill.recap.template.map((row, i) => {
          const val = renderAnswer(answers[row.from], skill.flow.find(f => f.id === row.from), row.fallback);
          if (!val) return null;
          return (
            <div key={i} className="recap-row">
              <span className="recap-k">{row.k}</span>
              <span className="recap-v">{val}</span>
            </div>
          );
        })}

        <div className="recap-eta">
          <span className="dot"></span>
          <span>{skill.recap.eta}</span>
        </div>
      </div>

      <div className="flow-foot">
        <button className="btn-secondary" onClick={onEdit}>Edit</button>
        <button className="btn-primary" onClick={onSend}>
          <span>Send to Tom AI</span>
          <span className="arrow">↦</span>
        </button>
      </div>

      <div className="assurance">
        Tom AI will reply at <b>{userEmailHint()}</b> and surface the result here in the log.
      </div>
    </>
  );
}

function userEmailHint() {
  return 'your member email';
}

function renderAnswer(val, qDef, fallback) {
  if (val === undefined || val === null || val === '') return fallback || null;
  if (Array.isArray(val)) {
    // multi-select: render option titles
    const ts = val.map(k => qDef?.options?.find(o => o.k === k)?.t || k).join(', ');
    return ts || fallback || null;
  }
  if (typeof val === 'object' && (val.from || val.to)) {
    return [val.from, val.to].filter(Boolean).join(' → ') || fallback;
  }
  if (qDef && qDef.kind === 'radio' && qDef.options) {
    const opt = qDef.options.find(o => o.k === val);
    return opt ? opt.t : val;
  }
  if (qDef && qDef.kind === 'select' && qDef.options) {
    const opt = qDef.options.find(o => o.k === val);
    return opt ? opt.t : val;
  }
  return val;
}

/* ──────────────── Skill icons ──────────────── */
function SkillIcon({ kind }) {
  const p = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'phones':
      return <svg viewBox="0 0 24 24" {...p}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>;
    case 'travel':
      return <svg viewBox="0 0 24 24" {...p}><path d="M2 14l20-8-7 16-3-7-10-1Z"/></svg>;
    case 'reports':
      return <svg viewBox="0 0 24 24" {...p}><path d="M6 3h9l4 4v14H6ZM15 3v4h4M9 12h7M9 16h7M9 8h3"/></svg>;
    case 'acquisitions':
      return <svg viewBox="0 0 24 24" {...p}><path d="M4 11 12 4l8 7v9h-5v-6h-6v6H4Z"/></svg>;
    case 'maintenance':
      return <svg viewBox="0 0 24 24" {...p}><path d="M14 4a4 4 0 0 1 5 5l-2.5 1L20 13l-3 3-3-3 1-2.5A4 4 0 0 1 10 5l3 3 1-4ZM10 14l-6 6"/></svg>;
    case 'hr':
      return <svg viewBox="0 0 24 24" {...p}><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.5"/><path d="M15 20a5 5 0 0 1 7 0"/></svg>;
    case 'marketing':
      return <svg viewBox="0 0 24 24" {...p}><path d="M3 11v2l11 5V6l-11 5ZM3 11h3v2H3M14 9a3 3 0 0 1 0 6"/></svg>;
    default:
      return <svg viewBox="0 0 24 24" {...p}><circle cx="12" cy="12" r="8"/></svg>;
  }
}

window.SkillPage = SkillPage;
window.SkillIcon = SkillIcon;