// mLTO2 — Posmatrač home (Vigilo Mobile · LTO)
// Mirror LTO9 observer prikaza: zadaci od deska, važni rokovi, moji izveštaji, instrukcije.
const V2 = {
  paper: 'oklch(0.985 0.003 60)', ink50: '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)', ink900: 'oklch(0.160 0.015 60)', ink950: 'oklch(0.110 0.015 60)',
  red: 'oklch(0.590 0.215 25)', redBg: 'oklch(0.972 0.012 25)',
  succ: 'oklch(0.620 0.155 152)', succBg: 'oklch(0.960 0.030 152)', succFg: 'oklch(0.36 0.15 152)',
  warn: 'oklch(0.745 0.150 70)', warnBg: 'oklch(0.970 0.035 80)', warnFg: 'oklch(0.40 0.15 70)',
  info: 'oklch(0.580 0.155 245)', infoBg: 'oklch(0.965 0.025 245)', infoFg: 'oklch(0.40 0.155 245)',
  lok: 'oklch(0.4 0.13 152)', lokBg: 'oklch(0.95 0.025 152)', fen: 'oklch(0.42 0.16 70)', fenBg: 'oklch(0.97 0.04 80)',
  font: 'Geist, system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, Menlo, monospace',
};
const I2 = ({ d, s = 18, sw = 1.6, fill = 'none' }) => <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: d }} />;
const IcCheck = (p) => <I2 {...p} d='<path d="M20 6 9 17l-5-5"/>'/>;
const IcPin = (p) => <I2 {...p} d='<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"/>'/>;
const IcSpark = (p) => <I2 {...p} d='<path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z"/>'/>;
const IcUser = (p) => <I2 {...p} d='<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>'/>;
const IcFile = (p) => <I2 {...p} d='<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>'/>;
const IcChat = (p) => <I2 {...p} d='<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>'/>;
const IcPlus = (p) => <I2 {...p} d='<path d="M12 5v14M5 12h14"/>'/>;
const IcBell = (p) => <I2 {...p} d='<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/>'/>;
const IcChev = (p) => <I2 {...p} d='<path d="m9 18 6-6-6-6"/>'/>;

const HTASKS = [
  { id: 1, t: 'Pojačaj monitoring Vlaškog Dola — dokumentuj podelu paketa', sc: 'ter', tg: 'Vlaški Do', by: 'Marija Ivić', d: '30. maj', left: 'za 3 dana', cls: V2.warnFg, done: false },
  { id: 2, t: 'Nedeljni izveštaj o aktivnostima — Voždovac', sc: 'obs', tg: 'tebi', by: 'Marija Ivić', d: '29. maj', left: 'sutra', cls: V2.red, done: false },
  { id: 3, t: 'Prati pritiske na zaposlene (javni sektor)', sc: 'fen', tg: 'Pritisci', by: 'R. Drobac', d: '02. jun', left: 'za 6 dana', cls: V2.ink500, done: false },
];
const HDATES = [
  { dd: '29', mm: 'MAJ', t: 'Nedeljni LTO izveštaj', hot: true },
  { dd: '14', mm: 'JUN', t: 'Izborni dan − 1', hot: true },
  { dd: '20', mm: 'JUN', t: 'Rok za post-izborne nalaze', hot: false },
];
const SC = { ter: { Ic: IcPin, c: V2.lok, bg: V2.lokBg }, fen: { Ic: IcSpark, c: V2.fen, bg: V2.fenBg }, obs: { Ic: IcUser, c: V2.infoFg, bg: V2.infoBg } };

function Card2({ title, n, icon, children }) {
  return (
    <div style={{ background: 'white', border: '1px solid ' + V2.ink200, borderRadius: 14, overflow: 'hidden', marginBottom: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', borderBottom: '1px solid ' + V2.ink150 }}>
        <span style={{ width: 24, height: 24, borderRadius: 7, background: V2.ink100, color: V2.ink700, display: 'grid', placeItems: 'center' }}>{icon}</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: V2.ink900 }}>{title}</span>
        {n && <span style={{ marginLeft: 'auto', fontFamily: V2.mono, fontSize: 10.5, color: V2.ink500 }}>{n}</span>}
      </div>
      <div style={{ padding: '4px 14px 10px' }}>{children}</div>
    </div>
  );
}

function LTOHome() {
  const [tasks, setTasks] = React.useState(HTASKS);
  const toggle = (id) => setTasks(ts => ts.map(t => t.id === id ? { ...t, done: !t.done } : t));
  return (
    <div style={{ background: V2.paper, height: '100%', overflowY: 'auto', fontFamily: V2.font, color: V2.ink900 }}>
      <div style={{ paddingTop: 52 }} />
      {/* header */}
      <div style={{ padding: '8px 16px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: V2.mono, fontSize: 10.5, color: V2.red, textTransform: 'uppercase', letterSpacing: 0.08 }}>LTO posmatrač</div>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.5, marginTop: 2 }}>Zdravo, Dragane</div>
          <div style={{ fontSize: 12.5, color: V2.ink500, marginTop: 2 }}>Voždovac · 21 dan do izbornog dana</div>
        </div>
        <div style={{ position: 'relative', width: 38, height: 38, borderRadius: 11, background: 'white', border: '1px solid ' + V2.ink200, display: 'grid', placeItems: 'center', color: V2.ink700 }}>
          <IcBell s={17}/><span style={{ position: 'absolute', top: 8, right: 9, width: 7, height: 7, borderRadius: '50%', background: V2.red }}/>
        </div>
      </div>

      <div style={{ padding: '0 16px 32px' }}>
        <Card2 title="Zadaci za mene" n={tasks.filter(t => !t.done).length + ' otvorenih'} icon={<IcCheck s={13}/>}>
          {tasks.map(t => {
            const s = SC[t.sc];
            return (
              <div key={t.id} style={{ display: 'grid', gridTemplateColumns: '24px 1fr auto', gap: 10, padding: '11px 0', borderTop: '1px solid ' + V2.ink150, alignItems: 'start' }}>
                <div onClick={() => toggle(t.id)} style={{ width: 20, height: 20, borderRadius: 6, marginTop: 1, border: '1.5px solid ' + (t.done ? V2.succ : V2.ink300), background: t.done ? V2.succ : 'white', color: 'white', display: 'grid', placeItems: 'center', cursor: 'pointer' }}>{t.done && <IcCheck s={12} sw={2.6}/>}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.35, color: t.done ? V2.ink400 : V2.ink900, textDecoration: t.done ? 'line-through' : 'none' }}>{t.t}</div>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 6, flexWrap: 'wrap' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 7px', borderRadius: 5, fontSize: 10, fontWeight: 600, fontFamily: V2.mono, background: s.bg, color: s.c }}><s.Ic s={9}/>{t.tg}</span>
                    <span style={{ fontSize: 10, color: V2.ink500, fontFamily: V2.mono }}>od {t.by}</span>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}><div style={{ fontFamily: V2.mono, fontSize: 11.5, fontWeight: 700 }}>{t.d}</div><div style={{ fontFamily: V2.mono, fontSize: 9.5, color: t.cls, marginTop: 2 }}>{t.left}</div></div>
              </div>
            );
          })}
        </Card2>

        <Card2 title="Važni rokovi" icon={<I2 d='<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>' s={13}/>}>
          {HDATES.map((d, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '46px 1fr', gap: 11, padding: '9px 0', borderTop: '1px solid ' + V2.ink150, alignItems: 'center' }}>
              <div style={{ textAlign: 'center', background: d.hot ? V2.redBg : V2.ink50, borderRadius: 8, padding: '4px 2px' }}><div style={{ fontFamily: V2.mono, fontSize: 16, fontWeight: 700, color: d.hot ? V2.red : V2.ink950, lineHeight: 1 }}>{d.dd}</div><div style={{ fontFamily: V2.mono, fontSize: 8.5, color: V2.ink500, marginTop: 1 }}>{d.mm}</div></div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{d.t}</div>
            </div>
          ))}
        </Card2>

        <Card2 title="Brze akcije" icon={<IcPlus s={13}/>}>
          <div style={{ display: 'flex', gap: 8, padding: '8px 0 4px' }}>
            <div style={{ flex: 1, background: V2.ink950, color: 'white', borderRadius: 11, padding: '12px 10px', display: 'flex', flexDirection: 'column', gap: 6, cursor: 'pointer' }}><IcPlus s={17}/><span style={{ fontSize: 12.5, fontWeight: 600 }}>Novi unos</span><span style={{ fontSize: 10.5, opacity: 0.6 }}>AI / ručno</span></div>
            <div style={{ flex: 1, background: 'white', border: '1px solid ' + V2.ink200, borderRadius: 11, padding: '12px 10px', display: 'flex', flexDirection: 'column', gap: 6, cursor: 'pointer' }}><span style={{ color: V2.infoFg }}><IcChat s={17}/></span><span style={{ fontSize: 12.5, fontWeight: 600 }}>Poruke</span><span style={{ fontSize: 10.5, color: V2.ink500 }}>3 nove od deska</span></div>
          </div>
        </Card2>

        <Card2 title="Instrukcije od analitičara" n="3 nove" icon={<IcChat s={13}/>}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: '1px solid ' + V2.ink150 }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: V2.infoBg, color: V2.infoFg, display: 'grid', placeItems: 'center', flexShrink: 0 }}><IcChat s={14}/></span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 500 }}>Marija Ivić · analitičar</div><div style={{ fontSize: 11, color: V2.ink500, fontFamily: V2.mono }}>„Prati Vlaški Do i slikaj pakete…"</div></div>
            <span style={{ color: V2.ink300 }}><IcChev s={16}/></span>
          </div>
        </Card2>

        <Card2 title="Moji izveštaji" n="14 ukupno" icon={<IcFile s={13}/>}>
          {[['D2D kampanja · Mladenovac', '#LTO-1441 · nov', V2.infoBg, V2.infoFg], ['Pritisak · JKP', '#LTO-1442 · u pregledu', V2.warnBg, V2.warnFg]].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: i ? '1px solid ' + V2.ink150 : 'none' }}>
              <span style={{ width: 30, height: 30, borderRadius: 8, background: r[2], color: r[3], display: 'grid', placeItems: 'center', flexShrink: 0 }}><IcFile s={14}/></span>
              <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 500 }}>{r[0]}</div><div style={{ fontSize: 11, color: V2.ink500, fontFamily: V2.mono }}>{r[1]}</div></div>
              <span style={{ color: V2.ink300 }}><IcChev s={16}/></span>
            </div>
          ))}
        </Card2>
      </div>
    </div>
  );
}
Object.assign(window, { LTOHome });