// M3 — SOS modul (Vigilo Mobile)
// Stanja: active (default) | discreet (sakriven ekran) | cancelling
// Posle drži-pritiskaj 1.2s na home ekranu, SOS je aktivan i ne može da
// se slučajno otkaže. Lokacija + audio se šalju uživo. CC + koordinator
// + šef misije su obavešteni. SMS failover ako padne veza.

const V3 = {
  paper:   'oklch(0.985 0.003 60)',
  ink50:   'oklch(0.985 0.003 60)',
  ink100:  'oklch(0.955 0.005 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)',
  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)',
  red800:  'oklch(0.370 0.150 25)',
  red900:  'oklch(0.280 0.110 25)',
  success: 'oklch(0.620 0.155 152)',
  warning: 'oklch(0.745 0.150 70)',
  font:    'Geist, -apple-system, system-ui, sans-serif',
  mono:    '"Geist Mono", ui-monospace, SF Mono, Menlo, monospace',
};

const I3 = ({ 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 Pin3    = (p) => <I3 {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></I3>;
const Mic3    = (p) => <I3 {...p}><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8"/></I3>;
const Eye3    = (p) => <I3 {...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"/></I3>;
const EyeOff3 = (p) => <I3 {...p}><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22"/></I3>;
const Phone3  = (p) => <I3 {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></I3>;
const Wifi    = (p) => <I3 {...p}><path d="M5 13a10 10 0 0 1 14 0M8.5 16.5a5 5 0 0 1 7 0M2 8.82a15 15 0 0 1 20 0M12 20h.01"/></I3>;
const WifiOff = (p) => <I3 {...p}><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></I3>;
const Chk3    = (p) => <I3 {...p}><path d="M20 6 9 17l-5-5"/></I3>;
const Clk3    = (p) => <I3 {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></I3>;
const Siren3  = (p) => <I3 {...p}><path d="M7 12V8a5 5 0 0 1 10 0v4M5 20h14M5 20v-3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3M12 4V2M19 5l1-1M5 5l-1-1"/></I3>;
const Send3   = (p) => <I3 {...p}><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></I3>;
const X3      = (p) => <I3 {...p}><path d="M18 6 6 18M6 6l12 12"/></I3>;
const Calc    = (p) => <I3 {...p}><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M8 6h8M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01"/></I3>;

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

// ─────────────────────────────────────────────────────────────
// Simulirana mini-mapa (apstraktni grid + pin)
// ─────────────────────────────────────────────────────────────
function MiniMap({ height = 120 }) {
  return (
    <div style={{
      position: 'relative', height, borderRadius: 12, overflow: 'hidden',
      background: 'oklch(0.20 0.012 60)',
      backgroundImage:
        'linear-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px),' +
        'linear-gradient(90deg, oklch(1 0 0 / 0.06) 1px, transparent 1px),' +
        'linear-gradient(45deg, transparent 49%, oklch(1 0 0 / 0.04) 49%, oklch(1 0 0 / 0.04) 51%, transparent 51%)',
      backgroundSize: '20px 20px, 20px 20px, 80px 80px',
    }}>
      {/* "Streets" — simulated */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <path d="M0,60 Q150,40 200,80 T400,60" stroke="oklch(1 0 0 / 0.12)" strokeWidth="3" fill="none"/>
        <path d="M80,0 Q70,80 120,140 T200,200" stroke="oklch(1 0 0 / 0.1)" strokeWidth="2" fill="none"/>
        <path d="M0,100 L400,100" stroke="oklch(1 0 0 / 0.08)" strokeWidth="1.5" fill="none"/>
      </svg>
      {/* Pin */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -100%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: 0,
            width: 32, height: 32, borderRadius: '50% 50% 50% 0', transform: 'rotate(-45deg)',
            background: V3.red500,
            boxShadow: '0 4px 12px oklch(0 0 0 / 0.4)',
            animation: 'm3pin 1.4s ease-in-out infinite',
          }}/>
          <div style={{
            position: 'relative', width: 32, height: 32, borderRadius: '50% 50% 50% 0',
            transform: 'rotate(-45deg)', background: V3.red500,
            display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px oklch(0 0 0 / 0.4)',
          }}>
            <span style={{ transform: 'rotate(45deg)', color: 'white', fontSize: 14, fontWeight: 700 }}>V</span>
          </div>
        </div>
      </div>
      {/* Coordinate readout */}
      <div style={{
        position: 'absolute', bottom: 8, left: 10,
        fontFamily: V3.mono, fontSize: 10, color: 'oklch(1 0 0 / 0.7)',
        background: 'oklch(0 0 0 / 0.45)', padding: '3px 7px', borderRadius: 4,
        backdropFilter: 'blur(8px)',
      }}>
        44.8125°N · 20.4612°E · ±3m
      </div>
      <div style={{
        position: 'absolute', top: 8, right: 10,
        fontFamily: V3.mono, fontSize: 10, color: 'oklch(1 0 0 / 0.7)',
        background: 'oklch(0 0 0 / 0.45)', padding: '3px 7px', borderRadius: 4,
        backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', gap: 5,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: V3.success, animation: 'm3dot 1.4s ease-in-out infinite' }}/>
        UŽIVO
      </div>
    </div>
  );
}

// Audio wave indicator
function AudioWave({ active }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'flex-end', gap: 2, height: 16 }}>
      {[0, 1, 2, 3, 4].map(i => (
        <div key={i} style={{
          width: 2, background: 'currentColor', borderRadius: 1,
          height: active ? (4 + (i % 3) * 4) + 'px' : 4,
          animation: active ? `m3wave 1.${i * 2}s ease-in-out infinite ${i * 0.1}s` : 'none',
        }}/>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Active SOS screen
// ─────────────────────────────────────────────────────────────
function SOSActive({ connection, onCancel, elapsedStart = 23 }) {
  const [elapsed, setElapsed] = React.useState(elapsedStart);
  React.useEffect(() => {
    const t = setTimeout(() => setElapsed(e => e + 1), 1000);
    return () => clearTimeout(t);
  }, [elapsed]);
  const mm = String(Math.floor(elapsed / 60)).padStart(2, '0');
  const ss = String(elapsed % 60).padStart(2, '0');
  const sms = connection === 'sms';

  return (
    <div style={{
      background: V3.red900, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: V3.font, color: 'white',
      backgroundImage: 'radial-gradient(circle at 30% 0%, oklch(0.45 0.19 25), oklch(0.22 0.09 25))',
      overflow: 'auto',
    }}>
      <div style={{ paddingTop: 56 }} />

      {/* Top status */}
      <div style={{ padding: '16px 20px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{
              width: 10, height: 10, borderRadius: '50%', background: V3.red500,
              boxShadow: '0 0 0 4px oklch(from oklch(0.59 0.215 25) l c h / 0.4)',
              animation: 'm3pulse 1.2s ease-in-out infinite',
            }}/>
            <span style={{ fontSize: 10.5, fontFamily: V3.mono, textTransform: 'uppercase', letterSpacing: 0.12, opacity: 0.85, fontWeight: 600 }}>SOS aktivan</span>
          </div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1, fontFamily: V3.mono, fontVariantNumeric: 'tabular-nums' }}>{mm}:{ss}</div>
          <div style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>BM 0341/A · Jovana Đurović</div>
        </div>
        <div style={{
          padding: '6px 10px', background: sms ? 'oklch(0.8 0.16 70 / 0.18)' : 'oklch(1 0 0 / 0.1)',
          border: '1px solid ' + (sms ? 'oklch(0.85 0.16 70 / 0.4)' : 'oklch(1 0 0 / 0.15)'),
          borderRadius: 8, display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11, fontFamily: V3.mono, color: sms ? 'oklch(0.92 0.13 70)' : 'oklch(1 0 0 / 0.85)',
        }}>
          {sms ? <WifiOff size={13}/> : <Wifi size={13}/>}
          {sms ? 'SMS FAILOVER' : '4G · UŽIVO'}
        </div>
      </div>

      {/* SMS failover banner */}
      {sms && (
        <div style={{
          margin: '12px 16px 0', padding: '10px 12px',
          background: 'oklch(0.45 0.16 70 / 0.25)',
          border: '1px solid oklch(0.85 0.16 70 / 0.35)',
          borderRadius: 12, display: 'flex', alignItems: 'flex-start', gap: 10,
        }}>
          <div style={{ marginTop: 1, color: 'oklch(0.92 0.13 70)' }}><Siren3 size={16}/></div>
          <div style={{ fontSize: 12, lineHeight: 1.45, color: 'oklch(0.95 0.06 70)' }}>
            <strong style={{ fontWeight: 600 }}>Slabija veza — koristi SMS</strong>
            <div style={{ opacity: 0.85, marginTop: 2 }}>Tvoja lokacija i poruka su poslate SMS-om CC operateru. Audio će biti uplodovan kada se veza vrati.</div>
          </div>
        </div>
      )}

      {/* Map */}
      <div style={{ padding: '16px 16px 0' }}>
        <MiniMap />
      </div>

      {/* Live channels */}
      <div style={{ padding: '14px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <div style={{
          padding: 12, background: 'oklch(1 0 0 / 0.08)', borderRadius: 12,
          border: '1px solid oklch(1 0 0 / 0.1)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
            <Pin3 size={14} sw={2}/>
            <span style={{ fontSize: 10.5, fontFamily: V3.mono, textTransform: 'uppercase', letterSpacing: 0.06, opacity: 0.65 }}>Lokacija</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>Deli se uživo</div>
          <div style={{ fontSize: 10.5, fontFamily: V3.mono, opacity: 0.55, marginTop: 2 }}>{sms ? 'SMS · svake 60s' : 'svake 5s'}</div>
        </div>
        <div style={{
          padding: 12, background: 'oklch(1 0 0 / 0.08)', borderRadius: 12,
          border: '1px solid oklch(1 0 0 / 0.1)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Mic3 size={14} sw={2}/>
              <span style={{ fontSize: 10.5, fontFamily: V3.mono, textTransform: 'uppercase', letterSpacing: 0.06, opacity: 0.65 }}>Audio</span>
            </div>
            <span style={{ color: V3.red500 }}><AudioWave active={!sms}/></span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{sms ? 'Lokalno · čeka vezu' : 'Snima se'}</div>
          <div style={{ fontSize: 10.5, fontFamily: V3.mono, opacity: 0.55, marginTop: 2 }}>{mm}:{ss}</div>
        </div>
      </div>

      {/* Notification chain */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ fontSize: 10.5, fontFamily: V3.mono, textTransform: 'uppercase', letterSpacing: 0.08, opacity: 0.55, marginBottom: 10 }}>Obavešteni</div>
        <div style={{ background: 'oklch(0 0 0 / 0.25)', borderRadius: 12, padding: '4px 0' }}>
          {[
            { ic: <Phone3 size={14} sw={2}/>, name: 'CC operater Branko Janković', sub: 'priklicano · 2. u redu · čeka poziv', state: 'active' },
            { ic: <Chk3 size={14} sw={2.6}/>, name: 'M. Stojanović · koordinator',  sub: 'obaveštena · 14:48', state: 'done' },
            { ic: <Chk3 size={14} sw={2.6}/>, name: 'R. Drobac · šef misije',       sub: 'obavešten · 14:48', state: 'done' },
            { ic: <Chk3 size={14} sw={2.6}/>, name: 'Pravni tim',                    sub: 'obaveštena · 14:48', state: 'done' },
          ].map((r, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px',
              borderBottom: i === arr.length - 1 ? 'none' : '1px solid oklch(1 0 0 / 0.06)',
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: '50%',
                background: r.state === 'active' ? V3.red500 : 'oklch(0.62 0.155 152 / 0.3)',
                color: r.state === 'active' ? 'white' : V3.success,
                display: 'grid', placeItems: 'center',
                animation: r.state === 'active' ? 'm3pulse 1.4s ease-in-out infinite' : 'none',
              }}>{r.ic}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'white' }}>{r.name}</div>
                <div style={{ fontSize: 11, opacity: 0.55, marginTop: 1 }}>{r.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ flex: 1 }} />

      {/* Actions */}
      <div style={{ padding: '16px 16px 36px' }}>
        <Tap3 onClick={onCancel} style={{
          width: '100%', height: 44, background: 'oklch(1 0 0 / 0.1)',
          border: '1px solid oklch(1 0 0 / 0.15)', borderRadius: 12,
          color: 'white', fontSize: 13, fontWeight: 500, marginBottom: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <X3 size={16}/> Otkaži SOS
        </Tap3>
        <div style={{
          width: '100%', height: 52, background: 'white', color: V3.red700,
          borderRadius: 14, fontFamily: V3.font, fontSize: 15, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Phone3 size={18} sw={2.4}/> Čekam poziv operatera
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Discreet mode — fake Calculator app sa skrivenim SOS indikatorom
// ─────────────────────────────────────────────────────────────
function SOSDiscreet({ onExit, elapsedStart = 47 }) {
  const [elapsed, setElapsed] = React.useState(elapsedStart);
  React.useEffect(() => {
    const t = setTimeout(() => setElapsed(e => e + 1), 1000);
    return () => clearTimeout(t);
  }, [elapsed]);
  const keys = [
    ['AC', '±', '%', '÷'],
    ['7', '8', '9', '×'],
    ['4', '5', '6', '−'],
    ['1', '2', '3', '+'],
    ['0', '.', '='],
  ];

  return (
    <div style={{
      background: '#000', height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: V3.font, color: 'white', position: 'relative',
    }}>
      {/* Hidden SOS indicator — only person who knows looks here */}
      <Tap3 onClick={onExit} style={{
        position: 'absolute', top: 18, right: 18, zIndex: 100,
        width: 8, height: 8, borderRadius: '50%', background: V3.red500,
        animation: 'm3pulse 1.4s ease-in-out infinite',
        cursor: 'pointer',
      }} title="Tajni SOS indikator — tap za izlaz"/>
      <div style={{ paddingTop: 56 }} />

      <div style={{ flex: 1, padding: '0 24px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
        <div style={{ fontSize: 14, color: 'oklch(0.6 0 0)', marginBottom: 4 }}>{elapsed % 60 === 0 ? '128 × 7' : Math.floor(elapsed / 7) + ' × 8'}</div>
        <div style={{ fontSize: 76, fontWeight: 300, letterSpacing: -2, lineHeight: 1, marginBottom: 16 }}>{(elapsed * 17 + 1024).toLocaleString('fr-FR').replace(/\u202f/g, ' ').replace(/\u00a0/g, ' ')}</div>
      </div>

      <div style={{ padding: '0 14px 36px' }}>
        {keys.map((row, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
            {row.map((k, j) => {
              const wide = k === '0';
              const isOp = ['÷', '×', '−', '+', '='].includes(k);
              const isTop = ['AC', '±', '%'].includes(k);
              return (
                <div key={j} style={{
                  flex: wide ? 2.1 : 1,
                  height: 72,
                  borderRadius: 999,
                  background: isOp ? '#ff9500' : isTop ? '#a5a5a5' : '#333',
                  color: isTop ? '#000' : 'white',
                  display: 'flex', alignItems: 'center', justifyContent: wide ? 'flex-start' : 'center',
                  paddingLeft: wide ? 30 : 0,
                  fontSize: 32, fontWeight: 400,
                }}>{k}</div>
              );
            })}
          </div>
        ))}
      </div>

      {/* Hint at the very bottom */}
      <div style={{
        position: 'absolute', bottom: 6, left: 0, right: 0,
        textAlign: 'center', fontSize: 10, color: 'oklch(0.4 0 0)',
      }}>SOS aktivan u pozadini · tap crveni indikator gore desno za izlaz</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Cancel confirmation sheet
// ─────────────────────────────────────────────────────────────
function SOSCancelSheet({ onConfirm, onAbort }) {
  const [pressed, setPressed] = React.useState(0);
  const timer = React.useRef(null);
  const start = () => {
    if (timer.current) return;
    const t0 = Date.now();
    timer.current = setInterval(() => {
      const p = Math.min(1, (Date.now() - t0) / 2000);
      setPressed(p);
      if (p >= 1) { clearInterval(timer.current); timer.current = null; onConfirm(); }
    }, 30);
  };
  const stop = () => { clearInterval(timer.current); timer.current = null; setPressed(0); };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'oklch(0 0 0 / 0.6)',
      backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-end',
      zIndex: 100,
    }}>
      <div style={{
        background: V3.ink950, color: 'white',
        borderRadius: '20px 20px 0 0', padding: '24px 20px 36px',
        width: '100%', boxSizing: 'border-box',
      }}>
        <div style={{ width: 36, height: 4, background: 'oklch(1 0 0 / 0.2)', borderRadius: 2, margin: '0 auto 20px' }}/>
        <div style={{ fontSize: 19, fontWeight: 600, marginBottom: 6, letterSpacing: -0.3 }}>Sigurna si da je u redu?</div>
        <div style={{ fontSize: 13.5, color: 'oklch(0.7 0 0)', lineHeight: 1.55, marginBottom: 20 }}>
          Otkazivanje SOS-a će zaustaviti uživo deljenje lokacije i audio snimanja.
          CC operater će dobiti poruku da si u redu, ali poziv može i dalje stići.
        </div>

        <Tap3
          onMouseDown={start} onMouseUp={stop} onMouseLeave={stop}
          onTouchStart={start} onTouchEnd={stop}
          style={{
            position: 'relative', width: '100%', height: 52, background: V3.red500,
            borderRadius: 14, overflow: 'hidden', color: 'white',
            fontSize: 15, fontWeight: 600, marginBottom: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
          <div style={{
            position: 'absolute', inset: 0, background: 'oklch(0.32 0.13 25)',
            transform: `scaleX(${pressed})`, transformOrigin: 'left',
            transition: timer.current ? 'none' : 'transform 200ms ease-out',
          }}/>
          <span style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
            <X3 size={18} sw={2.4}/>
            {pressed > 0 ? `Drži još ${Math.ceil((1 - pressed) * 2 * 10) / 10}s…` : 'Drži za otkazivanje'}
          </span>
        </Tap3>
        <Tap3 onClick={onAbort} style={{
          width: '100%', height: 48, background: 'oklch(1 0 0 / 0.1)',
          borderRadius: 14, color: 'white', fontSize: 14, fontWeight: 500,
        }}>Ne, ostavi SOS aktivnim</Tap3>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Flow
// ─────────────────────────────────────────────────────────────
function SOSFlow({ tweaks }) {
  const [view, setView] = React.useState(tweaks.view || 'active'); // active | discreet | cancelling | cancelled

  React.useEffect(() => { setView(tweaks.view || 'active'); }, [tweaks.view, tweaks.connection]);

  if (view === 'cancelled') {
    return (
      <div style={{ background: V3.paper, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: V3.font, padding: 32, gap: 16 }}>
        <div style={{ width: 64, height: 64, borderRadius: 18, background: 'oklch(0.96 0.03 152)', color: V3.success, display: 'grid', placeItems: 'center' }}><Chk3 size={28} sw={2.6}/></div>
        <div style={{ fontSize: 22, fontWeight: 600, color: V3.ink900, textAlign: 'center' }}>SOS otkazan</div>
        <div style={{ fontSize: 13.5, color: V3.ink500, textAlign: 'center', maxWidth: 260, lineHeight: 1.5 }}>
          CC operater je obavešten da si u redu. Audio snimak je zadržan u tvojoj istoriji.
        </div>
        <Tap3 onClick={() => setView('active')} style={{
          marginTop: 12, padding: '10px 18px', background: V3.ink950, color: 'white',
          borderRadius: 10, fontSize: 13, fontWeight: 500,
        }}>Reset</Tap3>
      </div>
    );
  }

  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <SOSActive
        connection={tweaks.connection}
        onCancel={() => setView('cancelling')}
        elapsedStart={tweaks.elapsedStart || 23}
      />
      {view === 'cancelling' && (
        <SOSCancelSheet
          onConfirm={() => setView('cancelled')}
          onAbort={() => setView('active')}
        />
      )}
    </div>
  );
}

const m3styles = document.createElement('style');
m3styles.textContent = `
  @keyframes m3pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } }
  @keyframes m3dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes m3pin { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0; } }
  @keyframes m3wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.2); } }
`;
document.head.appendChild(m3styles);

Object.assign(window, { SOSFlow });
