// M7 — Komunikacija (Vigilo Mobile)
// Zamena za Viber/Signal grupe. 3 tipa razgovora:
//   - DM sa koordinatorom (1:1)
//   - BM grupa (par STO posmatrača na istom BM)
//   - HQ broadcast (read-mostly, targetirano po BM/regionu/roli)
// Plus compose-broadcast view za koordinatore.

const V7 = {
  paper:   'oklch(0.985 0.003 60)',
  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)',
  red50:   'oklch(0.972 0.012 25)',
  success: 'oklch(0.620 0.155 152)',
  warning: 'oklch(0.745 0.150 70)',
  warningBg:'oklch(0.970 0.035 80)',
  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 I7 = ({ 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 Back7   = (p) => <I7 {...p}><path d="m15 18-6-6 6-6"/></I7>;
const Pencil7 = (p) => <I7 {...p}><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></I7>;
const Send7   = (p) => <I7 {...p}><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></I7>;
const Megaph  = (p) => <I7 {...p}><path d="M3 11l18-8v18l-18-8z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></I7>;
const Users7  = (p) => <I7 {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></I7>;
const Phone7  = (p) => <I7 {...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"/></I7>;
const Plus7   = (p) => <I7 {...p}><path d="M5 12h14M12 5v14"/></I7>;
const Check7  = (p) => <I7 {...p}><path d="M20 6 9 17l-5-5"/></I7>;
const DoubleChk = (p) => <I7 {...p}><path d="M2 12 7 17M11 6 7 17M22 6 13 17"/></I7>;
const Filter7 = (p) => <I7 {...p}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></I7>;
const Search7 = (p) => <I7 {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></I7>;
const Tag7    = (p) => <I7 {...p}><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1.5" fill="currentColor"/></I7>;

const Tap7 = ({ 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>
);

// Avatar component
function Av7({ kind, label, size = 44 }) {
  const styles = {
    person:    { bg: 'oklch(0.93 0.05 245)', fg: 'oklch(0.4 0.13 245)' },
    partner:   { bg: 'oklch(0.93 0.05 285)', fg: 'oklch(0.4 0.13 285)' },
    coord:     { bg: 'oklch(0.93 0.05 80)',  fg: 'oklch(0.42 0.13 80)' },
    group:     { bg: V7.ink100,              fg: V7.ink700 },
    broadcast: { bg: V7.red500,              fg: 'white' },
  }[kind] || { bg: V7.ink100, fg: V7.ink700 };
  return (
    <div style={{
      width: size, height: size, borderRadius: kind === 'broadcast' ? 12 : '50%',
      background: styles.bg, color: styles.fg,
      display: 'grid', placeItems: 'center',
      fontFamily: V7.font, fontWeight: 600, fontSize: size * 0.3, letterSpacing: -0.5,
      flexShrink: 0,
    }}>
      {kind === 'broadcast' ? <Megaph size={size * 0.42} sw={2}/>
       : kind === 'group'   ? <Users7 size={size * 0.42}/>
       : label}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Sample data
// ─────────────────────────────────────────────────────────────
const ROOMS = [
  {
    id: 'coord',
    kind: 'coord', label: 'MS',
    name: 'Maja Stojanović',
    subtitle: 'koordinator · region BG',
    last: 'Javi mi čim BO počne sa zatvaranjem.',
    time: '21:42',
    unread: 0,
    typing: false,
  },
  {
    id: 'partner',
    kind: 'partner', label: 'MP',
    name: 'Marko Petrović',
    subtitle: 'STO IN · BM 0341/A',
    last: 'Mogu ja 12:00 izveštaj, ti sledeći.',
    time: '11:48',
    unread: 0,
    typing: false,
  },
  {
    id: 'group',
    kind: 'group',
    name: 'BM 0341/A · BO grupa',
    subtitle: 'ti + Marko + obs. dveri',
    last: '🔵 Igor: Otvoreno je. Glasanje krenulo 07:02.',
    time: '07:03',
    unread: 0,
    typing: false,
  },
  {
    id: 'hq',
    kind: 'broadcast',
    name: 'HQ Vigilo · obaveštenja',
    subtitle: 'analitika · publikuje 1–4× dnevno',
    last: 'Stranke deluju agresivno oko BM u zoni Vračar — pojačaj pažnju.',
    time: '14:30',
    unread: 1,
    pri: 'warn',
  },
];

const COORD_MESSAGES = [
  { from: 'coord', text: 'Zdravo Jovana. Smena ti počinje u 06:00, BO ulazi 30 min ranije.', time: '05:14' },
  { from: 'me',    text: 'Hvala Maja. Vidim, već sam ovde, kafa stiže ☕', time: '05:32', read: true },
  { from: 'coord', text: 'Super. Marko stiže oko 13:30, predaje smenu posle. Javi ako bude trebalo nešto.', time: '05:33' },
  { from: 'sys',   text: '— 12 sati kasnije —' },
  { from: 'me',    text: 'Imali smo manji incident — birač sa pratiocem, nije bilo na listi pratilaca. Prijavila sam kao lakši.', time: '17:48', read: true },
  { from: 'coord', text: 'Videla. Hvala. Ako se opet desi, isto uraditi.', time: '17:51' },
  { from: 'coord', text: 'Javi mi čim BO počne sa zatvaranjem.', time: '21:42' },
];

const HQ_MESSAGES = [
  {
    from: 'broadcast',
    sender: 'HQ Analitika',
    title: 'Pojačana aktivnost oko BM Vračar',
    text: 'Analiza prvih izveštaja pokazuje da stranke deluju agresivno oko biračkih mesta u zoni Vračar (BM 0177, 0178, 0181). Ako si u toj zoni — pojačaj pažnju oko prilaza, beleži pratioce i prilazi sa kandidatima.',
    pri: 'warn',
    time: '14:30',
    targeted: 'BG-VRAČAR · STO IN/OUT',
  },
  {
    from: 'broadcast',
    sender: 'HQ Operativa',
    title: 'Podsetnik: 16:00 izveštaj',
    text: 'U narednih 20 min stiže period 16:00 izveštaja. Sad je dobar momenat da javiš BO da ćeš ga sastavljati i tražiš pregled brojeva za period.',
    time: '15:38',
    targeted: 'svi STO',
  },
  {
    from: 'broadcast',
    sender: 'HQ Komunikacija',
    title: 'Saopštenje za javnost — 12:00',
    text: 'Sažetak prvih 5h: izlaznost 28%, 73 prijave (61 lakših, 12 težih). Detalji: vigilo.rs/saopstenja/12-00',
    time: '12:04',
    targeted: 'svi',
  },
];

// ─────────────────────────────────────────────────────────────
// Inbox list view
// ─────────────────────────────────────────────────────────────
function InboxList({ onOpen }) {
  return (
    <div style={{ background: V7.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V7.font, color: V7.ink900 }}>
      <div style={{ paddingTop: 56 }} />

      {/* Header */}
      <div style={{ padding: '6px 16px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6, color: V7.ink900 }}>Poruke</div>
          <Tap7 style={{ width: 40, height: 40, borderRadius: '50%', background: V7.ink100, display: 'grid', placeItems: 'center', color: V7.ink900 }}>
            <Pencil7 size={17}/>
          </Tap7>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: 'white', border: '1px solid ' + V7.ink200,
          borderRadius: 12, padding: '0 12px', height: 40,
        }}>
          <Search7 size={16} style={{ color: V7.ink400 }}/>
          <input placeholder="Pretraga ljudi i poruka…" style={{
            flex: 1, border: 0, outline: 0, background: 'transparent',
            font: 'inherit', fontSize: 13.5, color: V7.ink900,
          }}/>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ padding: '0 14px 10px', display: 'flex', gap: 6, overflowX: 'auto' }}>
        {['Sve', 'DM', 'BM grupa', 'HQ', 'Nepročitano'].map((c, i) => (
          <span key={i} style={{
            flexShrink: 0, padding: '6px 12px',
            background: i === 0 ? V7.ink950 : 'white',
            color: i === 0 ? 'white' : V7.ink700,
            border: i === 0 ? 'none' : '1px solid ' + V7.ink200,
            borderRadius: 999, fontSize: 12, fontWeight: 500, cursor: 'pointer',
          }}>{c}</span>
        ))}
      </div>

      {/* Rooms */}
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 36 }}>
        {ROOMS.map((r, i) => (
          <Tap7 key={r.id} onClick={() => onOpen(r.id)} style={{
            display: 'flex', gap: 12, padding: '12px 16px', alignItems: 'center', width: '100%',
            background: r.unread > 0 ? V7.red50 : 'transparent',
            borderBottom: i === ROOMS.length - 1 ? 'none' : '1px solid ' + V7.ink150,
            textAlign: 'left',
          }}>
            <Av7 kind={r.kind} label={r.label}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 2 }}>
                <div style={{ fontSize: 14.5, fontWeight: r.unread > 0 ? 600 : 500, color: V7.ink900, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name}</div>
                <div style={{ fontSize: 11, fontFamily: V7.mono, color: r.unread > 0 ? V7.red500 : V7.ink400, marginLeft: 8, flexShrink: 0, fontWeight: r.unread > 0 ? 600 : 400 }}>{r.time}</div>
              </div>
              <div style={{ fontSize: 11, color: V7.ink500, fontFamily: V7.mono, marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.subtitle}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                <div style={{ fontSize: 12.5, color: r.unread > 0 ? V7.ink800 : V7.ink500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1, fontWeight: r.unread > 0 ? 500 : 400 }}>{r.last}</div>
                {r.unread > 0 && (
                  <div style={{
                    background: V7.red500, color: 'white',
                    fontSize: 11, fontWeight: 700, fontFamily: V7.mono,
                    padding: '2px 7px', borderRadius: 10, minWidth: 18, textAlign: 'center',
                  }}>{r.unread}</div>
                )}
              </div>
            </div>
          </Tap7>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Room view — DM / Partner
// ─────────────────────────────────────────────────────────────
function RoomView({ roomId, onBack }) {
  const room = ROOMS.find(r => r.id === roomId) || ROOMS[0];
  const isCoord = roomId === 'coord';
  const messages = isCoord ? COORD_MESSAGES : [
    { from: 'partner', text: 'Stigao sam, predaju je obavila Jovana iz prve smene. Sve OK?', time: '13:38' },
    { from: 'me', text: 'Sve OK, nema iznenađenja. 14:00 izveštaj kasni 8 min ali sam već popunila.', time: '13:40', read: true },
    { from: 'partner', text: 'Dobro. Možeš ti 12:00 izveštaj?', time: '11:46' },
    { from: 'partner', text: 'Mogu ja 12:00 izveštaj, ti sledeći.', time: '11:48' },
  ];
  const [input, setInput] = React.useState('');
  const [localMessages, setLocalMessages] = React.useState(messages);
  const scrollRef = React.useRef(null);

  React.useEffect(() => { setLocalMessages(messages); }, [roomId]);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [localMessages]);

  const send = () => {
    if (!input.trim()) return;
    setLocalMessages(m => [...m, { from: 'me', text: input, time: '21:48', read: false }]);
    setInput('');
  };

  return (
    <div style={{ background: V7.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V7.font, color: V7.ink900 }}>
      <div style={{ paddingTop: 56 }} />

      {/* Header */}
      <div style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid ' + V7.ink150 }}>
        <Tap7 onClick={onBack} style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', color: V7.ink700 }}><Back7 size={20}/></Tap7>
        <Av7 kind={room.kind} label={room.label} size={36}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: V7.ink900, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{room.name}</div>
          <div style={{ fontSize: 11, color: V7.ink500, fontFamily: V7.mono }}>{room.subtitle}</div>
        </div>
        <Tap7 style={{ width: 40, height: 40, borderRadius: '50%', background: V7.ink100, display: 'grid', placeItems: 'center', color: V7.ink700 }}><Phone7 size={17} sw={2}/></Tap7>
      </div>

      {/* Messages */}
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: '14px 12px 8px' }}>
        {localMessages.map((m, i) => {
          if (m.from === 'sys') {
            return (
              <div key={i} style={{ textAlign: 'center', margin: '12px 0', fontSize: 11, color: V7.ink400, fontFamily: V7.mono, textTransform: 'uppercase', letterSpacing: 0.08 }}>{m.text}</div>
            );
          }
          const isMe = m.from === 'me';
          const isBcast = m.from === 'broadcast';
          if (isBcast) {
            return (
              <div key={i} style={{
                margin: '12px 0', padding: 14,
                background: m.pri === 'warn' ? V7.warningBg : 'white',
                border: '1px solid ' + (m.pri === 'warn' ? 'oklch(0.85 0.1 70)' : V7.ink200),
                borderLeft: '3px solid ' + (m.pri === 'warn' ? V7.warning : V7.red500),
                borderRadius: 12,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <Av7 kind="broadcast" label="" size={22}/>
                  <span style={{ fontSize: 11, fontFamily: V7.mono, fontWeight: 600, color: V7.red500, textTransform: 'uppercase', letterSpacing: 0.06 }}>{m.sender}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 10.5, fontFamily: V7.mono, color: V7.ink500 }}>{m.time}</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, color: V7.ink900, marginBottom: 4 }}>{m.title}</div>
                <div style={{ fontSize: 13, color: V7.ink700, lineHeight: 1.5 }}>{m.text}</div>
                {m.targeted && (
                  <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid ' + V7.ink150, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Filter7 size={11} style={{ color: V7.ink500 }}/>
                    <span style={{ fontSize: 10.5, fontFamily: V7.mono, color: V7.ink500, textTransform: 'uppercase', letterSpacing: 0.06 }}>poslato: {m.targeted}</span>
                  </div>
                )}
              </div>
            );
          }
          return (
            <div key={i} style={{ display: 'flex', justifyContent: isMe ? 'flex-end' : 'flex-start', marginBottom: 10 }}>
              <div style={{ maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start' }}>
                <div style={{
                  background: isMe ? V7.ink950 : 'white',
                  color: isMe ? 'white' : V7.ink900,
                  padding: '10px 13px',
                  borderRadius: isMe ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                  border: isMe ? 'none' : '1px solid ' + V7.ink200,
                  fontSize: 14, lineHeight: 1.5,
                }}>{m.text}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3, paddingLeft: 4, paddingRight: 4 }}>
                  <span style={{ fontSize: 10, fontFamily: V7.mono, color: V7.ink400 }}>{m.time}</span>
                  {isMe && (m.read ? <DoubleChk size={12} sw={2.4} style={{ color: V7.info }}/> : <Check7 size={11} sw={2.4} style={{ color: V7.ink400 }}/>)}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Composer */}
      <div style={{ padding: '8px 12px 36px', borderTop: '1px solid ' + V7.ink150, background: V7.paper, display: 'flex', alignItems: 'flex-end', gap: 8 }}>
        <Tap7 style={{ width: 36, height: 36, borderRadius: '50%', background: V7.ink100, color: V7.ink700, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Plus7 size={17} sw={2}/></Tap7>
        <div style={{
          flex: 1, background: 'white',
          border: '1px solid ' + V7.ink200, borderRadius: 18,
          padding: '8px 14px', minHeight: 38,
          display: 'flex', alignItems: 'flex-end',
        }}>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
            placeholder={isCoord ? 'Poruka za Maju…' : 'Poruka za Marka…'}
            rows={1}
            style={{
              flex: 1, border: 0, outline: 0, background: 'transparent', resize: 'none',
              font: 'inherit', fontSize: 14, color: V7.ink900, lineHeight: 1.4,
              fontFamily: V7.font, padding: 0, maxHeight: 80,
            }}/>
        </div>
        <Tap7 onClick={send} disabled={!input.trim()} style={{
          width: 38, height: 38, borderRadius: '50%',
          background: input.trim() ? V7.ink950 : V7.ink200,
          color: input.trim() ? 'white' : V7.ink400,
          display: 'grid', placeItems: 'center', flexShrink: 0,
        }}><Send7 size={15} sw={2.4}/></Tap7>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Room view — HQ broadcast
// ─────────────────────────────────────────────────────────────
function HQRoomView({ onBack }) {
  return (
    <div style={{ background: V7.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V7.font, color: V7.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      <div style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid ' + V7.ink150 }}>
        <Tap7 onClick={onBack} style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', color: V7.ink700 }}><Back7 size={20}/></Tap7>
        <Av7 kind="broadcast" size={36}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: V7.ink900 }}>HQ Vigilo · obaveštenja</div>
          <div style={{ fontSize: 11, color: V7.ink500, fontFamily: V7.mono }}>read-only · 1–4× dnevno</div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 14px 36px' }}>
        {HQ_MESSAGES.map((m, i) => (
          <div key={i} style={{
            marginBottom: 12, padding: 14,
            background: m.pri === 'warn' ? V7.warningBg : 'white',
            border: '1px solid ' + (m.pri === 'warn' ? 'oklch(0.85 0.1 70)' : V7.ink200),
            borderLeft: '3px solid ' + (m.pri === 'warn' ? V7.warning : V7.red500),
            borderRadius: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <span style={{ fontSize: 11, fontFamily: V7.mono, fontWeight: 600, color: V7.red500, textTransform: 'uppercase', letterSpacing: 0.06 }}>{m.sender}</span>
              <span style={{ marginLeft: 'auto', fontSize: 10.5, fontFamily: V7.mono, color: V7.ink500 }}>{m.time}</span>
            </div>
            <div style={{ fontSize: 14.5, fontWeight: 600, color: V7.ink900, marginBottom: 6, letterSpacing: -0.1 }}>{m.title}</div>
            <div style={{ fontSize: 13, color: V7.ink700, lineHeight: 1.5 }}>{m.text}</div>
            {m.targeted && (
              <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid ' + V7.ink150, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Filter7 size={11} style={{ color: V7.ink500 }}/>
                <span style={{ fontSize: 10.5, fontFamily: V7.mono, color: V7.ink500, textTransform: 'uppercase', letterSpacing: 0.06 }}>targetirano: {m.targeted}</span>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Compose broadcast — koordinator/HQ kreira targetiranu poruku
// ─────────────────────────────────────────────────────────────
function ComposeBroadcast({ onBack }) {
  const [title, setTitle] = React.useState('');
  const [body, setBody] = React.useState('Zdravo {ime}, podsetnik da je 16:00 izveštaj za BM {bm}. Hvala.');
  const [audience, setAudience] = React.useState('region');
  return (
    <div style={{ background: V7.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V7.font, color: V7.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      <div style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid ' + V7.ink150 }}>
        <Tap7 onClick={onBack} style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', color: V7.ink700 }}><Back7 size={20}/></Tap7>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 14.5, fontWeight: 600 }}>Nova grupna poruka</div>
        <div style={{ width: 40 }} />
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px' }}>
        {/* Audience */}
        <div style={{ fontSize: 11, fontFamily: V7.mono, color: V7.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 8 }}>Kome ide</div>
        <div style={{ background: 'white', border: '1px solid ' + V7.ink200, borderRadius: 12, padding: 4, marginBottom: 16 }}>
          {[
            { k: 'all',    t: 'Svi posmatrači',         s: '4 287 ljudi',  pri: false },
            { k: 'region', t: 'Region · Beograd',       s: '1 144 ljudi',  pri: false },
            { k: 'bm',     t: 'BM 0341/A · BO grupa',   s: '4 ljudi',       pri: false },
            { k: 'role',   t: 'Po roli · samo STO IN',  s: '892 ljudi',    pri: false },
          ].map((o, i, arr) => (
            <Tap7 key={o.k} onClick={() => setAudience(o.k)} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', width: '100%',
              borderBottom: i === arr.length - 1 ? 'none' : '1px solid ' + V7.ink150,
              textAlign: 'left', borderRadius: 8,
              background: audience === o.k ? V7.infoBg : 'transparent',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                border: '2px solid ' + (audience === o.k ? V7.info : V7.ink300),
                background: audience === o.k ? V7.info : 'transparent',
                display: 'grid', placeItems: 'center',
              }}>{audience === o.k && <span style={{ width: 7, height: 7, background: 'white', borderRadius: '50%' }}/>}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: V7.ink900 }}>{o.t}</div>
                <div style={{ fontSize: 11.5, color: V7.ink500, fontFamily: V7.mono }}>{o.s}</div>
              </div>
            </Tap7>
          ))}
        </div>

        {/* Title */}
        <div style={{ fontSize: 11, fontFamily: V7.mono, color: V7.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 8 }}>Naslov</div>
        <input
          value={title} onChange={(e) => setTitle(e.target.value)}
          placeholder="Npr. Pojačana aktivnost u zoni Vračar"
          style={{
            width: '100%', height: 44, padding: '0 14px', marginBottom: 16,
            background: 'white', border: '1px solid ' + V7.ink200, borderRadius: 10,
            fontFamily: V7.font, fontSize: 14, color: V7.ink900,
            outline: 'none', boxSizing: 'border-box',
          }}/>

        {/* Body sa merge fields */}
        <div style={{ fontSize: 11, fontFamily: V7.mono, color: V7.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
          <span>Tekst</span>
          <span>{body.length} znakova</span>
        </div>
        <textarea
          value={body} onChange={(e) => setBody(e.target.value)}
          style={{
            width: '100%', minHeight: 100, padding: 14,
            background: 'white', border: '1px solid ' + V7.ink200, borderRadius: 10,
            fontFamily: V7.font, fontSize: 14, color: V7.ink900, lineHeight: 1.5,
            outline: 'none', boxSizing: 'border-box', resize: 'vertical',
          }}/>
        {/* Merge field chips */}
        <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {[
            { k: '{ime}', l: 'Ime primaoca' },
            { k: '{bm}',  l: 'Njihovo BM' },
            { k: '{smena}', l: 'Smena' },
            { k: '{koord}', l: 'Njihov koordinator' },
          ].map(f => (
            <Tap7 key={f.k} onClick={() => setBody(b => b + ' ' + f.k)} style={{
              padding: '4px 8px', background: V7.infoBg, color: 'oklch(0.4 0.155 245)',
              border: '1px solid oklch(0.88 0.07 245)', borderRadius: 6,
              fontSize: 11, fontFamily: V7.mono, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <Tag7 size={11} sw={2}/>{f.k}
            </Tap7>
          ))}
        </div>

        {/* Preview */}
        <div style={{ marginTop: 20, padding: 14, background: 'white', border: '1px solid ' + V7.ink200, borderRadius: 12 }}>
          <div style={{ fontSize: 10.5, fontFamily: V7.mono, color: V7.ink400, textTransform: 'uppercase', letterSpacing: 0.06, marginBottom: 8 }}>Pregled · kako Jovana to vidi</div>
          <div style={{ padding: 12, background: V7.warningBg, borderLeft: '3px solid ' + V7.warning, borderRadius: 8 }}>
            <div style={{ fontSize: 11, fontFamily: V7.mono, fontWeight: 600, color: V7.red500, marginBottom: 4 }}>HQ OPERATIVA · 16:00</div>
            {title && <div style={{ fontSize: 13.5, fontWeight: 600, color: V7.ink900, marginBottom: 4 }}>{title}</div>}
            <div style={{ fontSize: 12.5, color: V7.ink700, lineHeight: 1.5 }}>
              {body.replace('{ime}', 'Jovana').replace('{bm}', '0341/A').replace('{smena}', 'cela').replace('{koord}', 'Maja Stojanović')}
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 16px 36px', borderTop: '1px solid ' + V7.ink150 }}>
        <Tap7 style={{
          width: '100%', height: 52, background: V7.ink950, color: 'white',
          borderRadius: 14, fontFamily: V7.font, fontSize: 15, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Send7 size={17} sw={2.2}/> Pošalji · {audience === 'all' ? '4 287' : audience === 'region' ? '1 144' : audience === 'bm' ? '4' : '892'} primalaca
        </Tap7>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Flow
// ─────────────────────────────────────────────────────────────
function CommFlow({ tweaks }) {
  const [view, setView] = React.useState(tweaks.view || 'list');
  const [roomId, setRoomId] = React.useState(tweaks.room || 'coord');

  React.useEffect(() => { setView(tweaks.view || 'list'); setRoomId(tweaks.room || 'coord'); }, [tweaks.view, tweaks.room]);

  if (view === 'list')    return <InboxList onOpen={(id) => { setRoomId(id); setView(id === 'hq' ? 'hq' : 'room'); }}/>;
  if (view === 'hq')      return <HQRoomView onBack={() => setView('list')}/>;
  if (view === 'compose') return <ComposeBroadcast onBack={() => setView('list')}/>;
  return <RoomView roomId={roomId} onBack={() => setView('list')}/>;
}

Object.assign(window, { CommFlow });