/* global React, useT, LangSwitcher */
const { useState, useEffect, useRef } = React;

// ── Helpers ─────────────────────────────────────────
// currentModule z API to number (1..6) lub null gdy wszystko ukończone.
// Mapujemy na klucz tłumaczenia tytułu modułu.
function moduleLabel(n, t) {
  if (n == null) return t('mod.completed');
  return t(`mod.${n}.title`);
}

/* ──────────────────────────  HEADER  ────────────────────────── */

function Header({ screen, go, user, onLogout }) {
  const { t } = useT();
  const isAdmin = user && user.role === 'admin';
  const workerItems = [
    { id: 'welcome',       label: t('nav.start') },
    { id: 'panel',         label: t('nav.panel') },
    { id: 'announcements', label: t('nav.announcements') },
    { id: 'module',        label: t('nav.module') },
    { id: 'chat',          label: t('nav.chat') },
  ];
  const adminItems = [
    { id: 'admin', label: t('nav.workers') },
  ];
  const items = isAdmin ? adminItems : workerItems;

  return (
    <header className="header">
      <div className="header-inner">
        <div className="brand" onClick={() => user && go(isAdmin ? 'admin' : 'welcome')} style={{ cursor: user ? 'pointer' : 'default' }}>
          <span className="brand-word">DECATHLON</span>
          <div className="brand-divider"></div>
          <div className="brand-section">
            {t('brand.section')}<span className="dot"></span>{isAdmin ? t('brand.admin') : t('brand.onboarding')}
          </div>
        </div>
        {user && (
          <nav className="nav">
            {items.map(it => (
              <button
                key={it.id}
                className={screen === it.id ? 'active' : ''}
                onClick={() => go(it.id)}
              >{it.label}</button>
            ))}
          </nav>
        )}
        <div className={'header-right' + (user ? '' : ' guest')}>
          <LangSwitcher />
          {user && (
            <div className="user-chip">
              <div className="avatar">{user.initials}</div>
              <div className="name">{user.name}</div>
              <button
                onClick={onLogout}
                className="logout-btn"
                title={t('header.logout')}
              >{t('header.logout')}</button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

/* ──────────────────────────  LOGIN  ────────────────────────── */

function LoginScreen({ onLogin }) {
  const { t } = useT();
  const [code, setCode] = useState('');
  const [err, setErr] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    const c = code.trim().toUpperCase();
    if (!c) { setErr(t('login.err_empty')); return; }

    setSubmitting(true);
    setErr('');
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: c }),
      });
      if (res.status === 404) { setErr(t('login.err_unknown')); return; }
      if (!res.ok) { setErr('Błąd serwera. Spróbuj ponownie.'); return; }
      const user = await res.json();
      onLogin(user);
    } catch {
      setErr('Brak połączenia z serwerem.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="login-wrap fade-in">
      <div className="login-card">
        <span className="badge">● {t('login.badge')}</span>
        <h1>{t('login.title')}</h1>
        <p>{t('login.subtitle')}</p>

        <form className="login-form" onSubmit={submit}>
          <label htmlFor="code">{t('login.label')}</label>
          <div className="input-wrap">
            <input
              id="code"
              type="text"
              placeholder={t('login.placeholder')}
              value={code}
              onChange={e => { setCode(e.target.value); setErr(''); }}
              className={err ? 'error' : ''}
              autoFocus
              disabled={submitting}
            />
            <button type="submit" className="btn btn-primary" disabled={submitting}>
              {submitting ? '…' : t('login.submit')}
            </button>
          </div>
          {err && <div className="err">{err}</div>}
        </form>

        <div className="login-help">
          <strong>{t('login.help_title')}</strong> {t('login.help_body')}<br/>
          <span style={{ color: 'var(--muted-2)' }}>
            {t('login.demo_prefix')} <code>LDZ-7K3M-9B4P</code> {t('login.demo_or')} <code>ADM-Q7K3-9B4P</code>.
          </span>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────  ADMIN  ────────────────────────── */

function AdminScreen({ user }) {
  const { t } = useT();
  const [query, setQuery] = useState('');
  const [copied, setCopied] = useState(null);
  const [workers, setWorkers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/workers?code=${encodeURIComponent(user.code)}`)
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => { if (!cancelled) setWorkers(data); })
      .catch(() => { if (!cancelled) setWorkers([]); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [user.code]);

  const filtered = workers.filter(w =>
    !query ||
    w.name.toLowerCase().includes(query.toLowerCase()) ||
    w.code.toLowerCase().includes(query.toLowerCase())
  );

  const completed = workers.filter(w => w.done === w.total).length;
  const inProgress = workers.length - completed;

  const copy = (code) => {
    navigator.clipboard?.writeText(code);
    setCopied(code);
    setTimeout(() => setCopied(null), 1200);
  };

  return (
    <div className="container fade-in">
      <div className="admin-head">
        <div>
          <span className="eyebrow"><span className="dot"></span> {t('admin.eyebrow')}</span>
          <h2>{t('admin.h2')}</h2>
        </div>
        <button className="btn btn-secondary">{t('admin.new_code')}</button>
      </div>

      <div className="admin-stats">
        <div className="admin-stat">
          <div className="lbl">{t('admin.stat_workers')}</div>
          <div className="val">{workers.length}</div>
        </div>
        <div className="admin-stat">
          <div className="lbl">{t('admin.stat_done')}</div>
          <div className="val" style={{ color: 'var(--green)' }}>{completed}</div>
        </div>
        <div className="admin-stat">
          <div className="lbl">{t('admin.stat_inprogress')}</div>
          <div className="val" style={{ color: 'var(--orange)' }}>{inProgress}</div>
        </div>
      </div>

      <div className="admin-table-wrap">
        <div className="admin-toolbar">
          <h3>{t('admin.workers_h3', { n: filtered.length })}</h3>
          <div className="search">
            <span style={{ fontSize: 13 }}>🔍</span>
            <input
              type="text"
              placeholder={t('admin.search_placeholder')}
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
          </div>
        </div>
        <table className="admin-table">
          <thead>
            <tr>
              <th>{t('admin.th_worker')}</th>
              <th>{t('admin.th_progress')}</th>
              <th>{t('admin.th_step')}</th>
              <th>{t('admin.th_status')}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(w => {
              const pct = Math.round((w.done / w.total) * 100);
              const isDone = w.done === w.total;
              const barCls = isDone ? 'done' : '';
              return (
                <tr key={w.code}>
                  <td>
                    <div className="name-cell">
                      <div className="avx">{w.initials}</div>
                      <div>
                        <div style={{ fontWeight: 600 }}>{w.name}</div>
                        <div className="meta">{w.code}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div className="progress-cell">
                      <div className={'pbar ' + barCls}><i style={{ width: pct + '%' }}></i></div>
                      <span className="pnum">{w.done}/{w.total}</span>
                    </div>
                  </td>
                  <td style={{ color: 'var(--ink-2)' }}>{moduleLabel(w.currentModule, t)}</td>
                  <td>
                    {isDone
                      ? <span className="status-pill green">{t('admin.status_done')}</span>
                      : <span className="status-pill orange">{t('admin.status_progress')}</span>}
                  </td>
                  <td><button className="row-action">{t('admin.details')}</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="admin-codes">
        <div className="admin-codes-list">
          <h3>{t('admin.codes_h3')}</h3>
          {workers.map(w => (
            <div className="code-row" key={w.code}>
              <div>
                <div className="c">{w.code}</div>
                <div className="for">{t('admin.codes_for', { name: w.name })}</div>
              </div>
              <button
                className={'copy-btn ' + (copied === w.code ? 'copied' : '')}
                onClick={() => copy(w.code)}
              >{copied === w.code ? t('admin.copied') : t('admin.copy')}</button>
            </div>
          ))}
        </div>
        <div className="admin-codes-list">
          <h3>{t('admin.how_h3')}</h3>
          <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.6 }}>
            <div style={{ marginBottom: 10 }}><strong style={{ color: 'var(--ink)' }}>1.</strong> {t('admin.how_1')}</div>
            <div style={{ marginBottom: 10 }}><strong style={{ color: 'var(--ink)' }}>2.</strong> {t('admin.how_2')}</div>
            <div><strong style={{ color: 'var(--ink)' }}>3.</strong> {t('admin.how_3')}</div>
          </div>
        </div>
      </div>

      <AdminAnnouncementsSection adminCode={user.code} />
    </div>
  );
}

/* ──────────────────────────  WELCOME  ────────────────────────── */

function WelcomeScreen({ go, user }) {
  const { t } = useT();
  const remaining = user.total - user.done;
  return (
    <div className="container fade-in">
      <div className="welcome">
        <section className="welcome-head">
          <div>
            <span className="eyebrow">
              <span className="dot"></span> {t('welcome.eyebrow')}
            </span>
            <h1>{t('welcome.greet', { name: user.firstName })}</h1>
            <div className="ctas">
              <button className="btn btn-primary" onClick={() => go('panel')}>
                {t('welcome.cta_start')}
              </button>
              <button className="btn btn-secondary" onClick={() => go('chat')}>
                {t('welcome.cta_ask')}
              </button>
            </div>
          </div>
          <button className="next-step-card" onClick={() => go('module')}>
            <div className="ns-label">{t('welcome.next_label')}</div>
            <div className="ns-title">{moduleLabel(user.currentModule, t)}</div>
            <div className="ns-sub">{t('welcome.next_step', { n: user.currentStep })}</div>
          </button>
        </section>

        <div className="stat-row" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
          <div className="stat-card">
            <div className="stat-icon">✓</div>
            <div>
              <div className="stat-value">{user.done} / {user.total}</div>
              <div className="stat-label">{t('welcome.ctx_done_label')}</div>
            </div>
          </div>
          <div className="stat-card">
            <div className="stat-icon">📦</div>
            <div>
              <div className="stat-value">{remaining}</div>
              <div className="stat-label">{t('welcome.ctx_remaining_label')}</div>
            </div>
          </div>
        </div>

        <WelcomeAnnouncementsWidget go={go} />
      </div>
    </div>
  );
}

/* ──────────────────────────  PANEL  ────────────────────────── */

// Statyczne metadane modułów (title/desc z i18n + icon/accent/duration na stałe).
// Status (done/progress/todo) i progress% przychodzą z API w user.modules.
function getModules(t) {
  return [
    { id: 1, num: t('mod.1.num'), title: t('mod.1.title'), desc: t('mod.1.desc'),
      duration: '5:20',  icon: '👋', accent: '#0082C3', foot: t('mod.1.foot') },
    { id: 2, num: t('mod.2.num'), title: t('mod.2.title'), desc: t('mod.2.desc'),
      duration: '12:30', icon: '📱', accent: '#5B3FB7', foot: t('mod.2.foot') },
    { id: 3, num: t('mod.3.num'), title: t('mod.3.title'), desc: t('mod.3.desc'),
      duration: '7:10',  icon: '⚠', accent: '#D97706', foot: t('mod.3.foot') },
    { id: 4, num: t('mod.4.num'), title: t('mod.4.title'), desc: t('mod.4.desc'),
      duration: '6:45',  icon: '🗺', accent: '#1FAE6B', foot: t('mod.4.foot') },
    { id: 5, num: t('mod.5.num'), title: t('mod.5.title'), desc: t('mod.5.desc'),
      duration: '9:00',  icon: '📦', accent: '#0077B6', foot: t('mod.5.foot') },
    { id: 6, num: t('mod.6.num'), title: t('mod.6.title'), desc: t('mod.6.desc'),
      duration: '8:15',  icon: '🛟', accent: '#DC2626', foot: t('mod.6.foot') },
  ];
}

// Merguje statyczne metadane z postępem konkretnego użytkownika.
function mergeModules(metadata, userModules) {
  const byId = new Map((userModules || []).map((m) => [m.moduleId, m]));
  return metadata.map((m) => {
    const um = byId.get(m.id);
    if (!um) return { ...m, status: 'todo' };
    const progress = um.status === 'progress'
      ? Math.round((um.currentStep / um.totalSteps) * 100)
      : undefined;
    return { ...m, status: um.status, progress };
  });
}

function PanelScreen({ go, user }) {
  const { t } = useT();
  const modules = mergeModules(getModules(t), user.modules);
  const [filter, setFilter] = useState('all');
  const filtered = modules.filter(m => {
    if (filter === 'all') return true;
    if (filter === 'progress') return m.status === 'progress' || m.status === 'todo';
    if (filter === 'done') return m.status === 'done';
    return true;
  });

  const done = user.done;
  const total = user.total;
  const pct = Math.round((done / total) * 100);

  return (
    <div className="container fade-in">
      <div className="panel-head">
        <div>
          <span className="eyebrow"><span className="dot"></span> {t('panel.eyebrow')}</span>
          <h2>{t('panel.greet', { name: user.firstName })}</h2>
          <div className="sub">
            {t('panel.sub')}
            <strong>{t('panel.sub_done', { done })}{t('panel.sub_of', { total })}</strong>
            {t('panel.sub_next_prefix')}
            <strong>{moduleLabel(user.currentModule, t)}</strong>.
          </div>
        </div>
        <div className="progress-card">
          <ProgressRing pct={pct} />
          <div>
            <div className="ttl">{t('panel.ring_ttl')}</div>
            <div className="meta">{t('panel.ring_meta', { done, total })}</div>
            <div className="bar"><i style={{ width: pct + '%' }}></i></div>
          </div>
        </div>
      </div>

      <div className="section-title">
        <h3>{t('panel.section_h3')}</h3>
        <div className="filters">
          <button className={'chip ' + (filter==='all'?'active':'')} onClick={()=>setFilter('all')}>{t('panel.filter_all')}</button>
          <button className={'chip ' + (filter==='progress'?'active':'')} onClick={()=>setFilter('progress')}>{t('panel.filter_progress')}</button>
          <button className={'chip ' + (filter==='done'?'active':'')} onClick={()=>setFilter('done')}>{t('panel.filter_done')}</button>
        </div>
      </div>

      <div className="module-list">
        {filtered.map(m => (
          <ModuleRow key={m.id} m={m} onOpen={() => go('module')} t={t} />
        ))}
      </div>
    </div>
  );
}

function ProgressRing({ pct }) {
  const r = 18, c = 2 * Math.PI * r;
  const off = c * (1 - pct/100);
  return (
    <div className="ring">
      <svg width="44" height="44">
        <circle cx="22" cy="22" r={r} stroke="#EEF2F4" strokeWidth="4" fill="none" />
        <circle cx="22" cy="22" r={r} stroke="#0082C3" strokeWidth="4" fill="none"
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" />
      </svg>
      <div className="pct">{pct}%</div>
    </div>
  );
}

function ModuleRow({ m, onOpen, t }) {
  return (
    <button className="module-row" onClick={onOpen} style={{ '--accent': m.accent }}>
      <div className="accent"></div>
      <div className="icon">{m.icon}</div>
      <div>
        <div className="num">{m.num}</div>
        <div className="title">{m.title}</div>
      </div>
      <div className="desc">{m.desc}</div>
      <div className="stats">{m.foot}</div>
      <div>
        {m.status === 'done'     && <span className="tag green">{t('panel.tag_done')}</span>}
        {m.status === 'progress' && <span className="tag orange">{t('panel.tag_progress', { pct: m.progress })}</span>}
        {m.status === 'todo'     && <span className="tag gray">{t('panel.tag_todo')}</span>}
      </div>
      <div className="duration">{m.duration}</div>
    </button>
  );
}

/* ──────────────────────────  MODULE VIEW  ────────────────────────── */

function getSteps(t) {
  return [
    { id: 1, label: t('step.1.label'), sub: t('step.1.sub'), state: 'done' },
    { id: 2, label: t('step.2.label'), sub: t('step.2.sub'), state: 'done' },
    { id: 3, label: t('step.3.label'), sub: t('step.3.sub'), state: 'active' },
    { id: 4, label: t('step.4.label'), sub: t('step.4.sub'), state: 'todo' },
    { id: 5, label: t('step.5.label'), sub: t('step.5.sub'), state: 'todo' },
    { id: 6, label: t('step.6.label'), sub: t('step.6.sub'), state: 'locked' },
  ];
}

function getHotspots(t) {
  return [
    { n: 1, top: '60px', left: '8%',  title: t('hs.1.title'), desc: t('hs.1.desc') },
    { n: 2, top: '60px', left: '30%', title: t('hs.2.title'), desc: t('hs.2.desc') },
    { n: 3, top: '60px', left: '58%', title: t('hs.3.title'), desc: t('hs.3.desc') },
    { n: 4, top: '60px', left: '88%', title: t('hs.4.title'), desc: t('hs.4.desc') },
  ];
}

function ModuleScreen({ go }) {
  const { t } = useT();
  const STEPS = getSteps(t);
  const HOTSPOTS = getHotspots(t);
  const [activeStep, setActiveStep] = useState(3);
  const [activeHot, setActiveHot] = useState(null);
  const step = STEPS.find(s => s.id === activeStep);

  return (
    <div className="container fade-in">
      <div className="module-view">
        <aside className="sidebar">
          <button className="back-link" onClick={() => go('panel')}>{t('module.back')}</button>
          <div className="eyebrow" style={{ marginBottom: 6 }}>{t('module.eyebrow')}</div>
          <h3>{t('mod.2.title')}</h3>
          <div className="meta">{t('mod.2.desc')}</div>
          <div className="bar"><i style={{ width: '60%' }}></i></div>
          <div className="pct">{t('module.sidebar_meta')}</div>

          <ul className="steps">
            {STEPS.map(s => (
              <button
                key={s.id}
                className={'step ' + s.state + (s.id === activeStep ? ' active' : '')}
                onClick={() => s.state !== 'locked' && setActiveStep(s.id)}
                disabled={s.state === 'locked'}
              >
                <div className="stepnum">{s.state === 'done' ? '✓' : s.id}</div>
                <div>
                  <div className="label">{s.label}</div>
                  <div className="sub">{s.sub}</div>
                </div>
                <div className="icon">{s.state === 'locked' ? '🔒' : ''}</div>
              </button>
            ))}
          </ul>
        </aside>

        <section className="lesson">
          <div className="breadcrumb">{t('module.breadcrumb', { n: activeStep, sub: step.sub })}</div>
          <h2>{activeStep === 3 ? t('module.lesson_h2_anatomy') : step.label}</h2>
          <p className="lead">
            {activeStep === 3 ? t('module.lesson_lead_anatomy') : t('module.lesson_lead_other')}
          </p>

          {activeStep === 3 && (
            <div className="logipad-wrap">
              <div className="logipad">
                <div className="screen-top">
                  <span>{t('logipad.head_dev')}</span>
                  <span className="battery">{t('logipad.battery')}</span>
                </div>

                <div className="lp-orow">
                  <div className="lp-col lp-col-id">
                    <div className="lp-zone">FIT4D1</div>
                    <div className="lp-meta">20260510</div>
                    <div className="lp-meta">n°390055</div>
                  </div>

                  <div className="lp-col lp-col-counts">
                    <div className="lp-dead">15:00</div>
                    <div className="lp-count-main">73 artykuły</div>
                    <div className="lp-count-sec">40 adresy</div>
                    <div className="lp-count-sec">47 kod EAN</div>
                  </div>

                  <div className="lp-col lp-col-codes">
                    063(28), 064(7), 062(16), 006(6), 061(15), 068(1)
                  </div>

                  <div className="lp-col lp-col-cities">
                    BIELA, LUBLI
                  </div>
                </div>

                {HOTSPOTS.map(h => (
                  <button
                    key={h.n}
                    className={'hotspot ' + (activeHot === h.n ? 'active' : '')}
                    style={{ top: h.top, left: h.left }}
                    onClick={() => setActiveHot(activeHot === h.n ? null : h.n)}
                    aria-label={h.title}
                  >{h.n}</button>
                ))}
              </div>

              <div className="legend">
                <div className="ttl">{t('module.legend_ttl')}</div>
                {HOTSPOTS.map(h => (
                  <button
                    key={h.n}
                    className={'legend-item ' + (activeHot === h.n ? 'active' : (activeHot ? 'dim' : ''))}
                    onClick={() => setActiveHot(activeHot === h.n ? null : h.n)}
                  >
                    <div className="pin">{h.n}</div>
                    <div>
                      <div className="ttl-row">{h.title}</div>
                      <div className="desc">{h.desc}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="lesson-foot">
            <button
              className="btn btn-secondary"
              onClick={() => setActiveStep(Math.max(1, activeStep - 1))}
              disabled={activeStep === 1}
              style={activeStep === 1 ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
            >{t('module.prev')}</button>
            <span className="step-meta">{t('module.step_meta', { n: activeStep })}</span>
            <button
              className="btn btn-primary"
              onClick={() => {
                const next = STEPS.find(s => s.id === activeStep + 1);
                if (next && next.state !== 'locked') setActiveStep(activeStep + 1);
              }}
            >{t('module.next')}</button>
          </div>
        </section>
      </div>
    </div>
  );
}

/* ──────────────────────────  CHAT  ────────────────────────── */

function getSuggestions(t) {
  return [
    { id: 'zone_fit', text: t('chat.s_zone_fit') },
    { id: 'held',     text: t('chat.s_held') },
    { id: 'no_stock', text: t('chat.s_no_stock') },
  ];
}

function ChatScreen({ go, user }) {
  const { t, lang } = useT();
  const buildInitial = () => ([
    { role: 'bot', text: t('chat.greeting', { name: user.firstName }) },
  ]);

  const [messages, setMessages] = useState(buildInitial);
  const [input, setInput] = useState('');
  const [typing, setTyping] = useState(false);
  const scrollRef = useRef(null);

  // Po zmianie języka resetuje powitanie do wybranej wersji.
  useEffect(() => { setMessages(buildInitial()); /* eslint-disable-line */ }, [lang]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, typing]);

  const suggestions = getSuggestions(t);

  // Prototyp: każde wejście (czip lub tekst) wywołuje tę samą "stock" odpowiedź.
  const sendStockReply = (userText) => {
    if (!userText || !userText.trim()) return;
    setMessages(m => [...m, { role: 'user', text: userText }]);
    setInput('');
    setTyping(true);
    setTimeout(() => {
      setMessages(m => [...m, { role: 'bot', text: t('chat.r_default') }]);
      setTyping(false);
    }, 800);
  };

  const askSuggestion = (s) => sendStockReply(s.text);
  const askText = (q) => sendStockReply(q);

  const userInitial = (user.initials || user.name || '?').toString()[0];

  return (
    <div className="container fade-in">
      <div className="chat-page solo">
        <section className="chat-shell">
          <div className="chat-head">
            <div className="who">
              <div className="av">AI</div>
              <div>
                <h3>{t('chat.head_h3')}</h3>
                <div className="sub">{t('chat.head_sub')}</div>
              </div>
            </div>
            <span className="online">{t('chat.online')}</span>
          </div>

          <div className="messages" ref={scrollRef}>
            {messages.map((m, i) => (
              <div key={i} className={'msg-row ' + m.role}>
                <div className="av">{m.role === 'bot' ? 'AI' : userInitial}</div>
                <div>
                  <div className="bubble">{m.text}</div>
                  {m.cite && (
                    <div style={{ marginTop: 6 }}>
                      <span className="cite"><span className="dotc"></span>{t('chat.cite_label')}: {m.cite}</span>
                    </div>
                  )}
                </div>
              </div>
            ))}
            {typing && (
              <div className="msg-row bot">
                <div className="av">AI</div>
                <div className="bubble">
                  <span className="typing"><i></i><i></i><i></i></span>
                </div>
              </div>
            )}
          </div>

          <div className="suggestions">
            {suggestions.map(s => (
              <button key={s.id} className="suggestion" onClick={() => askSuggestion(s)}>{s.text}</button>
            ))}
          </div>

          <form className="composer" onSubmit={e => { e.preventDefault(); askText(input); }}>
            <div className="field">
              <input
                type="text"
                placeholder={t('chat.placeholder')}
                value={input}
                onChange={e => setInput(e.target.value)}
              />
            </div>
            <button type="submit" className="send" disabled={!input.trim()} aria-label="Send">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 2 L11 13"/>
                <path d="M22 2 L15 22 L11 13 L2 9 Z"/>
              </svg>
            </button>
          </form>
        </section>
      </div>
    </div>
  );
}

/* ──────────────────────────  ANNOUNCEMENTS  ────────────────────────── */

function formatAnnDate(unixSec, lang) {
  const locale = lang === 'uk' ? 'uk-UA' : 'pl-PL';
  const d = new Date(unixSec * 1000);
  const dateStr = d.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
  const timeStr = d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
  return `${dateStr} · ${timeStr}`;
}

function AnnouncementCard({ a }) {
  const { t, lang } = useT();
  const cls = 'ann-card ann-prio-' + a.priority;
  return (
    <article className={cls}>
      <header className="ann-card-head">
        <span className={'ann-badge ann-prio-' + a.priority}>{t('ann.priority_' + a.priority)}</span>
        <span className="ann-date">{formatAnnDate(a.created_at, lang)}</span>
      </header>
      <h4 className="ann-title">{a.title}</h4>
      <p className="ann-body">{a.body}</p>
      <footer className="ann-foot">— {a.author_name}</footer>
    </article>
  );
}

// Widget na Welcome — pokazuje 2 najnowsze. Sam się ukrywa, jeśli pusto.
function WelcomeAnnouncementsWidget({ go }) {
  const { t } = useT();
  const [items, setItems] = useState([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    let cancelled = false;
    fetch('/api/announcements?limit=2')
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => { if (!cancelled) setItems(data); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoaded(true); });
    return () => { cancelled = true; };
  }, []);

  if (!loaded || items.length === 0) return null;

  return (
    <section className="ann-widget">
      <div className="ann-widget-head">
        <h3>{t('ann.welcome_h3')}</h3>
        <button className="link-btn" onClick={() => go('announcements')}>
          {t('ann.welcome_see_all')}
        </button>
      </div>
      <div className="ann-widget-list">
        {items.map((a) => <AnnouncementCard key={a.id} a={a} />)}
      </div>
    </section>
  );
}

// Pełna strona ogłoszeń (zakładka "Ogłoszenia" w nawigacji)
function AnnouncementsScreen() {
  const { t } = useT();
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetch('/api/announcements')
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => { if (!cancelled) setItems(data); })
      .catch(() => { if (!cancelled) setItems([]); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="container fade-in">
      <div className="ann-page">
        <h2>{t('ann.page_h2')}</h2>
        {loading && <p className="ann-empty">{t('ann.loading')}</p>}
        {!loading && items.length === 0 && <p className="ann-empty">{t('ann.empty')}</p>}
        <div className="ann-list">
          {items.map((a) => <AnnouncementCard key={a.id} a={a} />)}
        </div>
      </div>
    </div>
  );
}

// Sekcja w Admin: formularz + lista istniejących z usuwaniem.
function AdminAnnouncementsSection({ adminCode }) {
  const { t } = useT();
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [priority, setPriority] = useState('normal');
  const [posting, setPosting] = useState(false);
  const [err, setErr] = useState('');

  const load = () => {
    setLoading(true);
    return fetch('/api/announcements')
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => setItems(data))
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  };

  useEffect(() => { load(); }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (!title.trim() || !body.trim()) return;
    setPosting(true);
    setErr('');
    try {
      const res = await fetch('/api/announcements', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: adminCode, title: title.trim(), body: body.trim(), priority }),
      });
      if (!res.ok) { setErr('Błąd publikacji'); return; }
      setTitle(''); setBody(''); setPriority('normal');
      await load();
    } catch {
      setErr('Brak połączenia');
    } finally {
      setPosting(false);
    }
  };

  const remove = async (id) => {
    if (!window.confirm(t('admin.ann_delete_confirm'))) return;
    try {
      const res = await fetch(`/api/announcements/${id}?code=${encodeURIComponent(adminCode)}`, {
        method: 'DELETE',
      });
      if (!res.ok) return;
      await load();
    } catch {}
  };

  return (
    <div className="admin-ann">
      <h3>{t('admin.ann_h3')}</h3>

      <form className="admin-ann-form" onSubmit={submit}>
        <h4>{t('admin.ann_new_title')}</h4>
        <input
          type="text"
          placeholder={t('admin.ann_field_title')}
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          maxLength={200}
          disabled={posting}
        />
        <textarea
          placeholder={t('admin.ann_field_body')}
          value={body}
          onChange={(e) => setBody(e.target.value)}
          rows={4}
          maxLength={5000}
          disabled={posting}
        />
        <div className="admin-ann-form-foot">
          <select value={priority} onChange={(e) => setPriority(e.target.value)} disabled={posting}>
            <option value="normal">{t('ann.priority_normal')}</option>
            <option value="important">{t('ann.priority_important')}</option>
            <option value="event">{t('ann.priority_event')}</option>
          </select>
          <button
            type="submit"
            className="btn btn-primary"
            disabled={posting || !title.trim() || !body.trim()}
          >
            {posting ? t('admin.ann_posting') : t('admin.ann_post')}
          </button>
        </div>
        {err && <div className="err" style={{ color: 'var(--red)', fontSize: 12 }}>{err}</div>}
      </form>

      <h4>{t('admin.ann_list')}</h4>
      {loading && <p className="ann-empty">{t('ann.loading')}</p>}
      {!loading && items.length === 0 && <p className="ann-empty">{t('ann.empty')}</p>}
      <div className="admin-ann-list">
        {items.map((a) => (
          <div key={a.id} className="admin-ann-item">
            <AnnouncementCard a={a} />
            <button className="btn-delete" onClick={() => remove(a.id)}>
              {t('admin.ann_delete')}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Header, LoginScreen, WelcomeScreen, PanelScreen, ModuleScreen, ChatScreen, AdminScreen, AnnouncementsScreen });