// A4 — ChatView with mode switcher (green/blue/amber). Fully interactive.
const A4ChatView = () => {
  const [mode, setMode] = React.useState('green'); // green | blue | amber
  const [messages, setMessages] = React.useState([
    { role: 'user', text: 'Hvad gør jeg ved klor-udslip?' },
    { role: 'assistant', text: 'Ved klor-udslip følger du fire trin: (1) Isolér området og markér en 100 m evakuerings-radius vinduespil retning. (2) Påfør SCBA og klor-kemikaliedragt før du nærmer dig. (3) Neutralisér med natriumthiosulfat-opløsning hvis kilde er tilgængelig. (4) Kontakt vagthavende ved enhver eskalering eller hvis radius overskrides.',
      citations: [
        { n: 1, doc: 'Brandprocedure-2024', sec: '§ 4.2', page: 12 },
        { n: 2, doc: 'Kemi-datablad-klor', sec: 'Afsnit 6', page: 3 },
        { n: 3, doc: 'ATEX-vejledning', sec: '§ 2.1', page: 8 },
      ]
    },
  ]);
  const [input, setInput] = React.useState('');
  const [streaming, setStreaming] = React.useState(false);
  const [streamText, setStreamText] = React.useState('');
  const [showPdf, setShowPdf] = React.useState(false);

  const modeInfo = {
    green: { label: 'Foreslåede svar', desc: 'Forslag fra godkendte dokumenter', color: 'var(--mode-green)', soft: 'var(--mode-green-soft)' },
    blue: { label: 'Fri chat', desc: 'AI svarer frit med kilder', color: 'var(--mode-blue)', soft: 'var(--mode-blue-soft)' },
    amber: { label: 'Kun kilder', desc: 'Direkte citater — ingen AI-fortolkning', color: 'var(--mode-amber)', soft: 'var(--mode-amber-soft)' },
  };

  const curated = [
    { q: 'Hvad gør jeg ved klor-udslip?', cat: 'Kemi' },
    { q: 'ATEX-alarm procedure', cat: 'Sikkerhed' },
    { q: 'Hvor finder jeg kemi-datablade?', cat: 'Ressourcer' },
    { q: 'Evakueringsprocedure for etageejendom', cat: 'Brand' },
    { q: 'Værnemiddelkrav ved olie-spild', cat: 'Miljø' },
    { q: 'Vagtskifte-protokol (weekend)', cat: 'Drift' },
  ];

  const send = (text) => {
    const q = text || input;
    if (!q) return;
    setMessages(m => [...m, { role: 'user', text: q }]);
    setInput('');
    setStreaming(true);
    setStreamText('');
    const reply = 'Følg ATEX-alarmproceduren: evakuér zone, afbryd strøm via nødstop ved hoved-tavlen, ventilér minimum 15 minutter før nogen genindtræder. Brug ikke-gnistdannende værktøj ved inspektion.';
    let i = 0;
    const t = setInterval(() => {
      i++;
      setStreamText(reply.slice(0, i));
      if (i >= reply.length) {
        clearInterval(t);
        setStreaming(false);
        setMessages(m => [...m, { role: 'assistant', text: reply, citations: [{ n: 1, doc: 'ATEX-vejledning', sec: '§ 2.1', page: 8 }, { n: 2, doc: 'Nødstop-manual', sec: 'Kap. 3', page: 14 }] }]);
        setStreamText('');
      }
    }, 18);
  };

  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-0)', position: 'relative' }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', borderBottom: '1px solid var(--line-soft)', background: 'var(--bg-0)' }}>
        <ShieldMark size={26}/>
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-0)' }}>Demo Beredskab</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>Beredskabsassistent</div>
        </div>
        <span className="chip" style={{ marginLeft: 8, color: modeInfo[mode].color, background: `color-mix(in oklch, ${modeInfo[mode].color} 12%, transparent)`, borderColor: `color-mix(in oklch, ${modeInfo[mode].color} 30%, transparent)` }}>
          <I name="dot" className="icon-sm"/> {modeInfo[mode].label}
        </span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <button className="btn btn-ghost btn-sm"><I name="refresh" className="icon-sm"/> Ny session</button>
          <button className="btn btn-ghost btn-sm" style={{ padding: '0 8px' }}><I name="more" className="icon-sm"/></button>
        </div>
      </div>

      {/* Mode switcher */}
      <div style={{ padding: '12px 20px 0' }}>
        <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 10, padding: 4, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, position: 'relative' }}>
          {Object.entries(modeInfo).map(([k, v]) => (
            <button
              key={k}
              role="tab"
              aria-selected={mode === k}
              onClick={() => setMode(k)}
              style={{
                padding: '10px 12px', borderRadius: 7, fontSize: 12, fontWeight: 500,
                background: mode === k ? v.color : 'transparent',
                color: mode === k ? 'oklch(0.15 0.02 80)' : 'var(--fg-2)',
                display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center',
                transition: 'all 0.25s cubic-bezier(.5,1.6,.4,1)',
              }}
            >
              <I name={k === 'green' ? 'sparkle' : k === 'blue' ? 'chat' : 'lock'} className="icon-sm"/>
              <span>{v.label}</span>
            </button>
          ))}
        </div>
        <p style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
          <I name="info" className="icon-sm"/> {modeInfo[mode].desc}
        </p>
      </div>

      {/* Chat area */}
      <div style={{ flex: 1, overflow: 'auto', padding: '16px 20px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Curated cards (only in green mode, at top if no chat) */}
        {mode === 'green' && messages.length === 0 && (
          <div>
            <div className="label" style={{ marginBottom: 10 }}>Foreslåede spørgsmål</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {curated.map(c => (
                <button key={c.q} onClick={() => send(c.q)} className="card" style={{ padding: 14, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6, cursor: 'pointer' }}>
                  <span style={{ fontSize: 10, color: 'var(--mode-green)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c.cat}</span>
                  <span style={{ fontSize: 13, color: 'var(--fg-0)', lineHeight: 1.4 }}>{c.q}</span>
                </button>
              ))}
            </div>
          </div>
        )}

        {messages.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start' }}>
            {m.role === 'user' ? (
              <div style={{ background: 'var(--primary)', color: 'var(--primary-fg)', padding: '10px 14px', borderRadius: '14px 14px 4px 14px', fontSize: 13, maxWidth: '75%', fontWeight: 500 }}>{m.text}</div>
            ) : (
              <div style={{ maxWidth: '80%' }}>
                <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', color: 'var(--fg-0)', padding: '12px 14px', borderRadius: '14px 14px 14px 4px', fontSize: 13, lineHeight: 1.55 }}>
                  {m.text}
                </div>
                {m.citations && (
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
                    {m.citations.map(c => (
                      <button key={c.n} onClick={() => setShowPdf(c)} className="chip" style={{ cursor: 'pointer', height: 24 }}>
                        <span className="mono" style={{ color: 'var(--primary-strong)', fontWeight: 600 }}>[{c.n}]</span>
                        <I name="filePdf" className="icon-sm"/>
                        {c.doc} {c.sec} · s. {c.page}
                      </button>
                    ))}
                  </div>
                )}
                <div style={{ display: 'flex', gap: 8, marginTop: 6, fontSize: 11, color: 'var(--fg-3)' }}>
                  <button style={{ color: 'var(--fg-3)' }}><I name="copy" className="icon-sm"/></button>
                  <span style={{ marginLeft: 4 }}>2,1 s</span>
                </div>
              </div>
            )}
          </div>
        ))}

        {streaming && (
          <div style={{ alignSelf: 'flex-start', maxWidth: '80%' }}>
            <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', padding: '12px 14px', borderRadius: '14px 14px 14px 4px', fontSize: 13, lineHeight: 1.55 }}>
              {streamText}<span style={{ display: 'inline-block', width: 6, height: 14, background: 'var(--primary)', marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1s infinite' }}/>
            </div>
          </div>
        )}

        {/* Low-confidence example (amber mode shows it pinned) */}
        {mode === 'amber' && (
          <div style={{ border: '1px solid color-mix(in oklch, var(--mode-amber) 40%, transparent)', background: 'color-mix(in oklch, var(--mode-amber) 8%, transparent)', padding: 14, borderRadius: 10, fontSize: 13 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, color: 'var(--mode-amber)', fontWeight: 500 }}>
              <I name="warn" className="icon-sm"/> Sikkerheds-mode aktiv
            </div>
            <p style={{ color: 'var(--fg-1)' }}>Du modtager kun direkte citater fra godkendte kilder. AI tolker ikke og sammenfatter ikke. Ideel til regel-verifikation.</p>
          </div>
        )}
      </div>

      {/* Input */}
      <div style={{ padding: '12px 20px 16px', borderTop: '1px solid var(--line-soft)', background: 'var(--bg-0)' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 8 }}>
          <textarea
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
            placeholder="Spørg om procedurer, regler, dokumenter..."
            style={{ flex: 1, background: 'none', border: 'none', outline: 'none', resize: 'none', color: 'var(--fg-0)', fontSize: 13, fontFamily: 'inherit', minHeight: 22, maxHeight: 120, padding: '6px 8px' }}
            rows={1}
          />
          <button className="btn btn-primary btn-sm" onClick={() => send()} style={{ width: 32, height: 32, padding: 0, borderRadius: 7 }}>
            <I name="send" className="icon-sm"/>
          </button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--fg-4)', marginTop: 6 }}>
          <span><span className="kbd">↵</span> Send · <span className="kbd">⇧↵</span> Linjeskift</span>
          <span>Svar genereres på baggrund af <span style={{ color: 'var(--fg-2)' }}>2.841</span> godkendte chunks</span>
        </div>
      </div>

      {/* PDF modal overlay (A5) */}
      {showPdf && <A5PdfModal citation={showPdf} onClose={() => setShowPdf(null)}/>}

      <style>{`@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} } @keyframes spin { to { transform: rotate(360deg) } }`}</style>
    </div>
  );
};

// A5 — Citation PDF Modal (used by ChatView, also standalone artboard)
const A5PdfModal = ({ citation, onClose, standalone }) => {
  const c = citation || { n: 1, doc: 'Brandprocedure-2024', sec: '§ 4.2', page: 12 };
  return (
    <div style={{ position: standalone ? 'relative' : 'absolute', inset: 0, background: standalone ? 'var(--bg-0)' : 'color-mix(in oklch, var(--bg-0) 80%, transparent)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: standalone ? 0 : 24, zIndex: 20 }} onClick={standalone ? undefined : onClose}>
      <div className="card" style={{ width: '100%', height: '100%', maxWidth: standalone ? 'none' : 960, maxHeight: standalone ? 'none' : '92%', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-3)' }} onClick={e => e.stopPropagation()}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderBottom: '1px solid var(--line-soft)' }}>
          <I name="filePdf" className="icon"/>
          <div style={{ fontSize: 13, color: 'var(--fg-2)', display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden' }}>
            <span style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{c.doc}</span>
            <I name="chevronRight" className="icon-sm" style={{ opacity: 0.5 }}/>
            <span>{c.sec}</span>
            <I name="chevronRight" className="icon-sm" style={{ opacity: 0.5 }}/>
            <span className="mono">side {c.page}</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <button className="btn btn-ghost btn-sm"><I name="download" className="icon-sm"/></button>
            <button className="btn btn-ghost btn-sm"><I name="external" className="icon-sm"/></button>
            {!standalone && <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: '0 8px' }}><I name="close" className="icon-sm"/></button>}
          </div>
        </div>

        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 280px', overflow: 'hidden' }}>
          {/* PDF viewer mock */}
          <div style={{ background: 'oklch(0.12 0.01 80)', overflow: 'auto', padding: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
            <div style={{ width: '100%', maxWidth: 480, aspectRatio: '1 / 1.414', background: '#f5f3ee', color: '#1a1a1a', padding: '40px 44px', fontFamily: 'Georgia, serif', fontSize: 11, lineHeight: 1.55, boxShadow: '0 8px 32px rgba(0,0,0,0.4)', position: 'relative' }}>
              <div style={{ borderBottom: '2px solid #1a1a1a', paddingBottom: 8, marginBottom: 16, display: 'flex', justifyContent: 'space-between', fontSize: 9, color: '#555' }}>
                <span>BRANDPROCEDURE-2024</span>
                <span>HORSENS BEREDSKAB · s. {c.page}</span>
              </div>
              <h3 style={{ fontSize: 13, color: '#1a1a1a', marginBottom: 8 }}>§ 4.2 Klor-udslip og giftige gasser</h3>
              <p style={{ marginBottom: 10 }}>Ved mistanke om klor-udslip skal førstemand på stedet uden undtagelse følge 4-trins-protokollen beskrevet i dette afsnit. Klor er tungere end luft og vil samle sig i lavere terræn; evakueringen skal derfor altid gå <em>opad</em> og vinduespil retning.</p>
              {/* Highlighted chunk */}
              <div style={{ background: 'color-mix(in oklch, var(--primary) 40%, #f5f3ee)', padding: '6px 8px', margin: '0 -8px 10px', borderLeft: '3px solid var(--primary)' }}>
                <p style={{ color: '#1a1a1a' }}><strong>4.2.1 Isolering.</strong> Isolér området umiddelbart. Markér en evakuerings-radius på minimum 100 m vinduespil retning. Tilgå kun området iført SCBA og klor-kemikaliedragt. Neutralisér med natriumthiosulfat-opløsning hvis kilde er tilgængelig.</p>
              </div>
              <p style={{ marginBottom: 10 }}>Efter isolering: etabler kommandostation mindst 200 m fra kilde, orientér politi og brandvæsen, og aktivér SINE-netværk på gruppekanal BRANDCHEF-2.</p>
              <p style={{ marginBottom: 10 }}>Se også: § 4.3 (Evakuering af civile), Kemi-datablad-klor (CAS 7782-50-5), ATEX-vejledning § 2.1.</p>
              <div style={{ position: 'absolute', left: 44, top: 200, background: 'var(--primary)', color: 'white', padding: '3px 8px', borderRadius: 4, fontSize: 9, fontWeight: 600, transform: 'translateX(-100%) translateX(-8px)' }}>[{c.n}] Citeret</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', display: 'flex', gap: 8, alignItems: 'center' }}>
              <button className="btn btn-soft btn-sm"><I name="chevronLeft" className="icon-sm"/></button>
              <span className="mono">{c.page} / 48</span>
              <button className="btn btn-soft btn-sm"><I name="chevronRight" className="icon-sm"/></button>
              <span style={{ marginLeft: 16 }}>Zoom</span>
              <button className="btn btn-soft btn-sm"><I name="minus" className="icon-sm"/></button>
              <span className="mono">100 %</span>
              <button className="btn btn-soft btn-sm"><I name="plus" className="icon-sm"/></button>
            </div>
          </div>

          {/* Metadata sidebar */}
          <div style={{ background: 'var(--bg-1)', borderLeft: '1px solid var(--line-soft)', padding: 18, overflow: 'auto' }}>
            <span className="chip green" style={{ marginBottom: 14 }}><I name="check" className="icon-sm"/> Godkendt</span>
            <h3 style={{ fontSize: 18, marginBottom: 4, lineHeight: 1.25, color: 'var(--fg-0)', fontWeight: 600, letterSpacing: '-0.01em' }}>{c.doc}</h3>
            <p style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 18 }}>Citeret i dit spørgsmål</p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                ['Version', 'v2.4 (aktuel)'],
                ['Uploaded', '14. jan 2026'],
                ['Godkendt af', 'Morten Højgaard'],
                ['Godkendt', '19. jan 2026'],
                ['Kategori', 'Brandsikring'],
                ['Adgang', 'Alle medarbejdere'],
                ['Chunks', '184 (3 matchede)'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, gap: 12 }}>
                  <span style={{ color: 'var(--fg-3)' }}>{k}</span>
                  <span className={k === 'Chunks' || k === 'Uploaded' || k === 'Godkendt' ? 'mono' : ''} style={{ color: 'var(--fg-0)', textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ height: 1, background: 'var(--line-soft)', margin: '16px 0' }}/>

            <div className="label" style={{ marginBottom: 8 }}>Andre citerede steder</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['§ 4.3 — s. 13', '§ 7.1 — s. 27'].map(x => (
                <button key={x} style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', padding: '8px 10px', borderRadius: 6, fontSize: 12, color: 'var(--fg-1)', textAlign: 'left', cursor: 'pointer' }}>{x}</button>
              ))}
            </div>

            <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn btn-soft btn-sm" style={{ width: '100%' }}><I name="download" className="icon-sm"/> Download PDF</button>
              <button className="btn btn-ghost btn-sm" style={{ width: '100%' }}><I name="external" className="icon-sm"/> Åbn i ny fane</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.A4ChatView = A4ChatView;
window.A5PdfModal = A5PdfModal;