// M4 — Statistički izveštaj (Vigilo Mobile)
// Dinamička forma za periodični izveštaj o izlaznosti. Soft warnings, ne
// blokade. Princip: "ne možemo da znamo" — posmatrač uvek može poslati uprkos
// upozorenju, ali sistem to označi.
//
// Dva STO po smeni: jedna popunjava (primary), druga prati (secondary).
// Sve menjamo kroz Tweaks panel.

const V4 = {
  paper:   'oklch(0.985 0.003 60)',
  surface: 'white',
  ink75:   'oklch(0.972 0.004 60)',
  ink100:  'oklch(0.955 0.005 60)',
  ink150:  'oklch(0.930 0.006 60)',
  ink200:  'oklch(0.900 0.007 60)',
  ink300:  'oklch(0.830 0.008 60)',
  ink400:  'oklch(0.700 0.010 60)',
  ink500:  'oklch(0.580 0.011 60)',
  ink600:  'oklch(0.460 0.012 60)',
  ink700:  'oklch(0.340 0.013 60)',
  ink800:  'oklch(0.240 0.014 60)',
  ink900:  'oklch(0.160 0.015 60)',
  ink950:  'oklch(0.110 0.015 60)',
  red500:  'oklch(0.590 0.215 25)',
  red600:  'oklch(0.520 0.215 25)',
  red700:  'oklch(0.450 0.190 25)',
  success: 'oklch(0.620 0.155 152)',
  successBg:'oklch(0.960 0.030 152)',
  warning: 'oklch(0.745 0.150 70)',
  warningBg:'oklch(0.970 0.035 80)',
  warningBorder:'oklch(0.890 0.080 75)',
  warningText: 'oklch(0.40 0.15 70)',
  info:    'oklch(0.580 0.155 245)',
  infoBg:  'oklch(0.965 0.025 245)',
  font:    'Geist, -apple-system, system-ui, sans-serif',
  mono:    '"Geist Mono", ui-monospace, SF Mono, Menlo, monospace',
};

const I4 = ({ children, size = 18, sw = 1.6, fill = 'none' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>{children}</svg>
);
const Back4   = (p) => <I4 {...p}><path d="m15 18-6-6 6-6"/></I4>;
const Plus    = (p) => <I4 {...p}><path d="M5 12h14M12 5v14"/></I4>;
const Minus   = (p) => <I4 {...p}><path d="M5 12h14"/></I4>;
const Warn    = (p) => <I4 {...p}><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></I4>;
const Eye4    = (p) => <I4 {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></I4>;
const Chk4    = (p) => <I4 {...p}><path d="M20 6 9 17l-5-5"/></I4>;
const ArrowR4 = (p) => <I4 {...p}><path d="M5 12h14M12 5l7 7-7 7"/></I4>;
const Pencil  = (p) => <I4 {...p}><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></I4>;
const Up      = (p) => <I4 {...p}><path d="m18 15-6-6-6 6"/></I4>;
const Down    = (p) => <I4 {...p}><path d="m6 9 6 6 6-6"/></I4>;

const Tap4 = ({ children, onClick, disabled, style }) => (
  <button onClick={disabled ? null : onClick} disabled={disabled} style={{
    background: 'transparent', border: 0, padding: 0, cursor: disabled ? 'default' : 'pointer',
    font: 'inherit', color: 'inherit', WebkitTapHighlightColor: 'transparent', ...style,
  }}>{children}</button>
);

// ─────────────────────────────────────────────────────────────
// Big numeric input sa steperom + inline validacijom
// ─────────────────────────────────────────────────────────────
function NumberField({ label, value, onChange, prev, hint, warning, readOnly, suffix = '' }) {
  const delta = (value != null && prev != null) ? value - prev : null;
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <label style={{ fontSize: 13.5, fontWeight: 500, color: V4.ink900 }}>{label}</label>
        {prev != null && (
          <span style={{ fontSize: 11, fontFamily: V4.mono, color: V4.ink500 }}>
            12:00: <strong style={{ color: V4.ink700, fontWeight: 500 }}>{prev}</strong>
          </span>
        )}
      </div>
      <div style={{
        display: 'flex', alignItems: 'stretch', height: 56,
        background: readOnly ? V4.ink75 : V4.surface,
        border: '1px solid ' + (warning ? V4.warningBorder : V4.ink200),
        borderRadius: 12, overflow: 'hidden',
      }}>
        <Tap4 disabled={readOnly} onClick={() => onChange(Math.max(0, (value || 0) - 1))} style={{
          width: 52, display: 'grid', placeItems: 'center', color: readOnly ? V4.ink300 : V4.ink700,
          borderRight: '1px solid ' + V4.ink150,
        }}>
          <Minus size={20} sw={2}/>
        </Tap4>
        <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
          <input
            type="text" inputMode="numeric" pattern="[0-9]*"
            value={value == null ? '' : value}
            onChange={(e) => {
              const n = e.target.value.replace(/[^0-9]/g, '');
              onChange(n === '' ? null : parseInt(n, 10));
            }}
            readOnly={readOnly}
            placeholder="—"
            style={{
              width: 100, height: '100%', border: 0, outline: 0,
              background: 'transparent', textAlign: 'center',
              fontFamily: V4.mono, fontSize: 24, fontWeight: 600, fontVariantNumeric: 'tabular-nums',
              color: V4.ink900, letterSpacing: -0.5,
            }}
          />
          {suffix && <span style={{ fontSize: 13, color: V4.ink500, fontFamily: V4.mono }}>{suffix}</span>}
        </div>
        <Tap4 disabled={readOnly} onClick={() => onChange((value || 0) + 1)} style={{
          width: 52, display: 'grid', placeItems: 'center', color: readOnly ? V4.ink300 : V4.ink700,
          borderLeft: '1px solid ' + V4.ink150,
        }}>
          <Plus size={20} sw={2}/>
        </Tap4>
      </div>
      {delta != null && value != null && delta !== 0 && (
        <div style={{ marginTop: 6, fontSize: 11.5, color: V4.ink500, fontFamily: V4.mono, display: 'flex', justifyContent: 'space-between' }}>
          <span>{delta > 0 ? '+' : ''}{delta} od 12:00</span>
          {prev != null && prev > 0 && <span>{(((value / BM.upisanih) * 100) || 0).toFixed(1)}% od upisanih</span>}
        </div>
      )}
      {warning && (
        <div style={{
          marginTop: 8, padding: '10px 12px', background: V4.warningBg,
          border: '1px solid ' + V4.warningBorder, borderRadius: 10,
          display: 'flex', gap: 8, alignItems: 'flex-start',
        }}>
          <Warn size={15} style={{ color: V4.warningText, marginTop: 1 }}/>
          <div style={{ fontSize: 12, lineHeight: 1.45, color: V4.warningText }}>
            <strong style={{ fontWeight: 600 }}>{warning.title}</strong>
            <div style={{ marginTop: 2, opacity: 0.85 }}>{warning.body}</div>
          </div>
        </div>
      )}
      {hint && !warning && (
        <div style={{ marginTop: 6, fontSize: 11.5, color: V4.ink500, fontFamily: V4.mono }}>{hint}</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Collapsible section
// ─────────────────────────────────────────────────────────────
function Section4({ title, badge, count, children, defaultOpen = true }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ marginBottom: 14, background: V4.surface, border: '1px solid ' + V4.ink200, borderRadius: 14, overflow: 'hidden' }}>
      <Tap4 onClick={() => setOpen(!open)} style={{
        display: 'flex', alignItems: 'center', padding: '14px 16px', width: '100%',
      }}>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: V4.ink900, display: 'flex', alignItems: 'center', gap: 8 }}>
            {title}
            {badge && (
              <span style={{
                background: badge.bg, color: badge.fg,
                fontSize: 10.5, fontWeight: 600, padding: '2px 7px', borderRadius: 5,
                fontFamily: V4.mono, textTransform: 'uppercase', letterSpacing: 0.04,
              }}>{badge.t}</span>
            )}
          </div>
          {count != null && (
            <div style={{ fontSize: 11.5, color: V4.ink500, fontFamily: V4.mono, marginTop: 2 }}>{count}</div>
          )}
        </div>
        {open ? <Up size={18}/> : <Down size={18}/>}
      </Tap4>
      {open && <div style={{ padding: '0 16px 16px', borderTop: '1px solid ' + V4.ink150, paddingTop: 14 }}>{children}</div>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Co-observer header strip
// ─────────────────────────────────────────────────────────────
function CoObserverBar({ role, partnerName, partnerInitials, isTyping }) {
  if (role === 'primary') {
    return (
      <div style={{ margin: '8px 16px 0', padding: '10px 12px', background: V4.infoBg, border: '1px solid oklch(0.88 0.07 245)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'oklch(0.93 0.05 245)', color: 'oklch(0.4 0.13 245)',
          display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600,
        }}>{partnerInitials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, color: 'oklch(0.32 0.12 245)', fontWeight: 600 }}>{partnerName} vidi tvoj unos</div>
          <div style={{ fontSize: 10.5, color: 'oklch(0.45 0.12 245)', fontFamily: V4.mono, marginTop: 1 }}>
            STO IN · drugi smene · primary: <strong>ti</strong>
          </div>
        </div>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: V4.success, animation: 'm4dot 1.6s ease-in-out infinite' }}/>
      </div>
    );
  }
  return (
    <div style={{ margin: '8px 16px 0', padding: '10px 12px', background: 'oklch(0.95 0.025 285)', border: '1px solid oklch(0.88 0.05 285)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: 'oklch(0.93 0.05 285)', color: 'oklch(0.4 0.13 285)',
        display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600,
      }}>{partnerInitials}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, color: 'oklch(0.32 0.13 285)', fontWeight: 600 }}>
          {partnerName} popunjava {isTyping && <span style={{ fontWeight: 400, fontStyle: 'italic' }}>· piše…</span>}
        </div>
        <div style={{ fontSize: 10.5, color: 'oklch(0.45 0.13 285)', fontFamily: V4.mono, marginTop: 1 }}>
          Ti pratiš · komentar ostavljaš na polje
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Validation rules
// ─────────────────────────────────────────────────────────────
// Iz konfiguracije BM-a (zaključano, samo super admin menja iz backend-a).
// U realnoj aplikaciji ovo se vuče iz BM zapisa po loginu posmatrača.
const BM = {
  id: '0341/A',
  upisanih: 2400,
};
const PREV = { birca: 287, listici: 287, kutija: 285, van: 0 };
// Threshold za soft warning na skok izmedju dva izvestaja. Logika ostaje u
// backend-u; ovde je samo demo vrednost.
const SKOK_PRAG = 310;

function computeWarnings(d) {
  const w = {};
  if (d.birca != null) {
    if (d.birca < PREV.birca) {
      w.birca = { title: 'Broj manji od prošlog izveštaja', body: `12:00 je bilo ${PREV.birca}. Broj birača može samo da raste tokom dana — proveri unos.` };
    } else if (d.birca - PREV.birca > SKOK_PRAG) {
      w.birca = { title: 'Neobično velik skok', body: `+${d.birca - PREV.birca} birača za 2h. Proveri sa članom BO da li je broj tačan.` };
    }
  }
  if (d.listici != null && d.birca != null) {
    const diff = d.listici - d.birca;
    if (Math.abs(diff) >= 3) {
      w.listici = { title: 'Razlika izvučenih listića i broja birača', body: `${diff > 0 ? '+' : ''}${diff} listića. U normalnom slučaju isti broj — proveri sa članom BO.` };
    }
  }
  if (d.kutija != null && d.listici != null) {
    const diff = d.listici - d.kutija;
    if (diff < 0) {
      w.kutija = { title: 'Više listića u kutiji nego izvučenih', body: 'Nemoguće u normalnom toku. Proveri sa BO pre slanja.' };
    } else if (diff > 5) {
      w.kutija = { title: 'Veliki broj nevažećih', body: `${diff} listića nije ušlo u kutiju. Ako je u redu, dodaj komentar.` };
    }
  }
  return w;
}

// ─────────────────────────────────────────────────────────────
// Main form screen
// ─────────────────────────────────────────────────────────────
function ScreenForm({ data, setData, warnings, onSubmit, role, partner }) {
  const set = (k, v) => setData({ ...data, [k]: v });
  const ro = role === 'secondary';
  const wCount = Object.keys(warnings).length;

  return (
    <div style={{ background: V4.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V4.font, color: V4.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px 4px' }}>
        <Tap4 style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', color: V4.ink700 }}><Back4 size={20}/></Tap4>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: V4.ink900, letterSpacing: -0.2 }}>Izveštaj 14:00 — izlaznost</div>
          <div style={{ fontSize: 10.5, fontFamily: V4.mono, color: V4.warningText, marginTop: 2 }}>KASNI 8 MIN</div>
        </div>
        <div style={{ width: 40 }} />
      </div>

      <CoObserverBar role={role} partnerName={partner.name} partnerInitials={partner.initials} isTyping={partner.typing}/>

      {role === 'primary' && data.listici != null && partner.conflict && (
        <div style={{
          margin: '0 16px 8px', padding: '10px 12px',
          background: 'oklch(0.97 0.025 285)', border: '1.5px solid oklch(0.55 0.18 285)',
          borderRadius: 10, display: 'flex', alignItems: 'flex-start', gap: 10,
          boxShadow: '0 2px 8px oklch(0.55 0.18 285 / 0.12)',
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8, flexShrink: 0,
            background: 'oklch(0.55 0.18 285)', color: 'white',
            display: 'grid', placeItems: 'center', fontFamily: V4.mono, fontSize: 11, fontWeight: 700,
          }}>{partner.initials}</div>
          <div style={{ flex: 1, minWidth: 0, fontSize: 12, lineHeight: 1.45, color: 'oklch(0.28 0.13 285)' }}>
            <strong style={{ fontWeight: 700 }}>{partner.name}</strong> je upravo izmenio polje <strong style={{ fontWeight: 700 }}>„Listići u kutiji"</strong> sa <span style={{ fontFamily: V4.mono }}>{data.listici - 4}</span> na <span style={{ fontFamily: V4.mono }}>{data.listici}</span>
            <div style={{ marginTop: 6, display: 'flex', gap: 6 }}>
              <button style={{ flex: 1, height: 30, border: '1.5px solid oklch(0.55 0.18 285)', background: 'oklch(0.55 0.18 285)', color: 'white', borderRadius: 7, fontFamily: V4.font, fontSize: 11.5, fontWeight: 600, cursor: 'pointer' }}>Prihvati {partner.initials.toLowerCase()}</button>
              <button style={{ flex: 1, height: 30, border: '1.5px solid oklch(0.55 0.18 285)', background: 'white', color: 'oklch(0.4 0.18 285)', borderRadius: 7, fontFamily: V4.font, fontSize: 11.5, fontWeight: 600, cursor: 'pointer' }}>Zadrži moju</button>
            </div>
          </div>
        </div>
      )}

      {/* Form scroll area */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px 8px' }}>

        <Section4 title="Glasanje na BM" count={`${BM.upisanih.toLocaleString('fr-FR').replace(/\u202f/g, ' ').replace(/\u00a0/g, ' ')} upisanih · prethodno 12:00 (${PREV.birca})`}>
          <NumberField
            label="Broj birača koji su izašli"
            value={data.birca} onChange={(v) => set('birca', v)}
            prev={PREV.birca} warning={warnings.birca} readOnly={ro}
          />
          <NumberField
            label="Broj izvučenih listića"
            value={data.listici} onChange={(v) => set('listici', v)}
            prev={PREV.listici} warning={warnings.listici} readOnly={ro}
            hint="Trebalo bi da odgovara broju birača."
          />
          <NumberField
            label="Listića u kutiji"
            value={data.kutija} onChange={(v) => set('kutija', v)}
            prev={PREV.kutija} warning={warnings.kutija} readOnly={ro}
          />
        </Section4>

        <Section4 title="Glasanje van BM" count="pokretna kutija + pisma" defaultOpen={false}>
          <NumberField
            label="Glasalo putem pokretne kutije"
            value={data.van} onChange={(v) => set('van', v)}
            prev={PREV.van} readOnly={ro}
            suffix="ovog izv."
          />
        </Section4>

        <Section4 title="Komentar (opciono)" defaultOpen={false}>
          <textarea
            value={data.komentar || ''} onChange={(e) => set('komentar', e.target.value)}
            placeholder="Ako ima nešto neobično što treba da znaju — napiši."
            readOnly={ro}
            style={{
              width: '100%', minHeight: 80, padding: 12, background: ro ? V4.ink75 : V4.surface,
              border: '1px solid ' + V4.ink200, borderRadius: 10, resize: 'none',
              fontFamily: V4.font, fontSize: 13.5, color: V4.ink900, lineHeight: 1.5,
              outline: 'none', boxSizing: 'border-box',
            }}
          />
        </Section4>
      </div>

      {/* Sticky footer */}
      <div style={{ padding: '12px 16px 36px', background: V4.paper, borderTop: '1px solid ' + V4.ink150 }}>
        {wCount > 0 && (
          <div style={{ marginBottom: 10, padding: '8px 12px', background: V4.warningBg, border: '1px solid ' + V4.warningBorder, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Warn size={14} style={{ color: V4.warningText }}/>
            <div style={{ fontSize: 12, color: V4.warningText, lineHeight: 1.4 }}>
              <strong style={{ fontWeight: 600 }}>{wCount} {wCount === 1 ? 'upozorenje' : 'upozorenja'}</strong> — možeš poslati uprkos. Sistem će označiti zapis.
            </div>
          </div>
        )}
        {ro ? (
          <Tap4 style={{
            width: '100%', height: 52, background: V4.surface, color: V4.ink700,
            border: '1px solid ' + V4.ink200, borderRadius: 14,
            fontFamily: V4.font, fontSize: 14.5, fontWeight: 500,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Pencil size={16}/> Komentariši unos
          </Tap4>
        ) : (
          <Tap4 onClick={onSubmit} disabled={data.birca == null || data.listici == null || data.kutija == null} style={{
            width: '100%', height: 52,
            background: (data.birca == null || data.listici == null || data.kutija == null) ? V4.ink200 : (wCount > 0 ? V4.warning : V4.ink950),
            color: (data.birca == null || data.listici == null || data.kutija == null) ? V4.ink500 : (wCount > 0 ? V4.ink950 : 'white'),
            borderRadius: 14, fontFamily: V4.font, fontSize: 15, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            {wCount > 0 ? 'Pošalji uprkos upozorenju' : 'Pošalji izveštaj'} <ArrowR4 size={17} sw={2.4}/>
          </Tap4>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Success screen
// ─────────────────────────────────────────────────────────────
function ScreenSubmitted({ data, warnings, onReset }) {
  const wCount = Object.keys(warnings).length;
  return (
    <div style={{ background: V4.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V4.font, color: V4.ink900 }}>
      <div style={{ paddingTop: 100, padding: '80px 24px 16px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{
          width: 64, height: 64, borderRadius: 18,
          background: wCount > 0 ? V4.warningBg : V4.successBg,
          color: wCount > 0 ? V4.warning : V4.success,
          display: 'grid', placeItems: 'center', marginBottom: 20,
          boxShadow: wCount > 0 ? '0 0 0 8px oklch(from oklch(0.745 0.15 70) l c h / 0.1)' : '0 0 0 8px oklch(from oklch(0.62 0.155 152) l c h / 0.08)',
        }}>{wCount > 0 ? <Warn size={28} sw={2.4}/> : <Chk4 size={28} sw={2.6}/>}</div>

        <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.6, lineHeight: 1.15, marginBottom: 8 }}>
          {wCount > 0 ? 'Izveštaj poslat sa upozorenjem' : 'Izveštaj poslat'}
        </div>
        <div style={{ fontSize: 14.5, color: V4.ink600, lineHeight: 1.5, marginBottom: 24 }}>
          {wCount > 0
            ? <>14:00 izveštaj zaveden. Sistem je označio <strong style={{ color: V4.ink900, fontWeight: 600 }}>{wCount} {wCount === 1 ? 'upozorenje' : 'upozorenja'}</strong> i prosledio analitičaru na proveru.</>
            : 'Sve uredu. Sledeći izveštaj u 16:00.'}
        </div>

        <div style={{ background: V4.surface, border: '1px solid ' + V4.ink200, borderRadius: 14, padding: 14 }}>
          <div style={{ fontSize: 10.5, fontFamily: V4.mono, color: V4.ink400, textTransform: 'uppercase', letterSpacing: 0.06, marginBottom: 10 }}>Rezime</div>
          {[
            { l: 'Birača izašlo', v: data.birca, d: data.birca - PREV.birca },
            { l: 'Izvučeni listići', v: data.listici },
            { l: 'U kutiji', v: data.kutija },
            { l: 'Pokretna kutija', v: data.van || 0 },
          ].map((r, i, arr) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '6px 0', borderBottom: i === arr.length - 1 ? 'none' : '1px solid ' + V4.ink150 }}>
              <span style={{ fontSize: 13, color: V4.ink700 }}>{r.l}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: V4.ink900, fontFamily: V4.mono, fontVariantNumeric: 'tabular-nums' }}>
                {r.v}
                {r.d != null && r.d > 0 && <span style={{ fontSize: 11, color: V4.ink400, fontWeight: 400, marginLeft: 4 }}>+{r.d}</span>}
              </span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: '12px 16px 36px' }}>
        <Tap4 onClick={onReset} style={{
          width: '100%', height: 48, background: V4.ink950, color: 'white',
          borderRadius: 12, fontFamily: V4.font, fontSize: 15, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>Nazad na početni</Tap4>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Flow
// ─────────────────────────────────────────────────────────────
function ReportFlow({ tweaks, prefillData }) {
  const [data, setData] = React.useState(prefillData);
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    setData(prefillData);
    setSubmitted(false);
  }, [tweaks.prefill]);

  const warnings = computeWarnings(data);

  if (submitted) return <ScreenSubmitted data={data} warnings={warnings} onReset={() => setSubmitted(false)}/>;

  return (
    <ScreenForm
      data={data} setData={setData}
      warnings={warnings}
      onSubmit={() => setSubmitted(true)}
      role={tweaks.role}
      partner={{
        name: tweaks.role === 'primary' ? 'Marko Petrović' : 'Jovana Đurović',
        initials: tweaks.role === 'primary' ? 'MP' : 'JĐ',
        typing: tweaks.role === 'secondary' && (data.birca != null || data.listici != null),
        conflict: tweaks.role === 'primary' && data.listici != null,
      }}
    />
  );
}

const m4styles = document.createElement('style');
m4styles.textContent = `@keyframes m4dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }`;
document.head.appendChild(m4styles);

Object.assign(window, { ReportFlow });
