/* global React, ReactDOM, SMM_DATA, KPIWidget, AreaChart, BarChart, GenderDonut, AgeWidget, GeoWidget, SourcesWidget, PostsWidget, CompareWidget, StoriesWidget, KPI_META, fmt, pct, signed */

const { useState, useMemo, useRef, useEffect, useCallback } = React;

// ============================================================
// Date helpers
// ============================================================
const monthsRu = ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь'];
const monthsRuShort = ['янв','фев','мар','апр','май','июн','июл','авг','сен','окт','ноя','дек'];
const fmtRange = (s, e) => {
  if (!s) return 'Выберите период';
  if (!e) return `${s.getDate()} ${monthsRuShort[s.getMonth()]}`;
  return `${s.getDate()} ${monthsRuShort[s.getMonth()]} – ${e.getDate()} ${monthsRuShort[e.getMonth()]}`;
};

// ============================================================
// Calendar popover (custom date range)
// ============================================================
function DatePopover({ value, onChange, onClose, preset, setPreset }) {
  const [month, setMonth] = useState(() => new Date(value.end.getFullYear(), value.end.getMonth(), 1));
  const [start, setStart] = useState(value.start);
  const [end, setEnd] = useState(value.end);
  const [picking, setPicking] = useState('end');

  const ref = useRef(null);
  useEffect(() => {
    const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    setTimeout(() => document.addEventListener('mousedown', fn), 0);
    return () => document.removeEventListener('mousedown', fn);
  }, [onClose]);

  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
  const startWeekday = (firstDay.getDay() + 6) % 7; // monday = 0
  const prevMonthDays = new Date(month.getFullYear(), month.getMonth(), 0).getDate();
  const cells = [];
  for (let i = startWeekday - 1; i >= 0; i--) {
    cells.push({ d: prevMonthDays - i, muted: true, date: new Date(month.getFullYear(), month.getMonth() - 1, prevMonthDays - i) });
  }
  for (let i = 1; i <= daysInMonth; i++) {
    cells.push({ d: i, muted: false, date: new Date(month.getFullYear(), month.getMonth(), i) });
  }
  while (cells.length < 42) {
    const last = cells[cells.length - 1].date;
    const nx = new Date(last); nx.setDate(nx.getDate() + 1);
    cells.push({ d: nx.getDate(), muted: true, date: nx });
  }

  const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
  const inRange = (d) => start && end && d > start && d < end;

  const onPickDay = (date) => {
    if (picking === 'start' || !start || (start && end)) {
      setStart(date); setEnd(null); setPicking('end');
    } else {
      if (date < start) { setEnd(start); setStart(date); }
      else { setEnd(date); }
      setPicking('start');
    }
  };

  const apply = () => {
    if (start && end) {
      onChange({ start, end });
      setPreset('custom');
      onClose();
    }
  };

  const applyPreset = (p) => {
    const today = new Date(); today.setHours(0,0,0,0);
    let s, e = today;
    if (p === '7d') { s = new Date(today); s.setDate(s.getDate() - 6); }
    if (p === '30d') { s = new Date(today); s.setDate(s.getDate() - 29); }
    if (p === '90d') { s = new Date(today); s.setDate(s.getDate() - 89); }
    if (p === 'mtd') { s = new Date(today.getFullYear(), today.getMonth(), 1); }
    if (p === 'ytd') { s = new Date(today.getFullYear(), 0, 1); }
    setStart(s); setEnd(e); setMonth(new Date(e.getFullYear(), e.getMonth(), 1));
    onChange({ start: s, end: e });
    setPreset(p);
    onClose();
  };

  return (
    <div className="date-pop" ref={ref} onClick={(e) => e.stopPropagation()}>
      <div className="date-pop-presets">
        {[
          ['7d',  '7 дней'],
          ['30d', '30 дней'],
          ['90d', '90 дней'],
          ['mtd', 'Этот месяц'],
          ['ytd', 'Этот год'],
        ].map(([k, lbl]) => (
          <button key={k} className={preset === k ? 'active' : ''} onClick={() => applyPreset(k)}>{lbl}</button>
        ))}
      </div>
      <div className="date-pop-head">
        <div className="date-pop-month">{monthsRu[month.getMonth()]} {month.getFullYear()}</div>
        <div className="date-pop-nav">
          <button onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}><i className="fas fa-chevron-left"></i></button>
          <button onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}><i className="fas fa-chevron-right"></i></button>
        </div>
      </div>
      <div className="cal-grid">
        {['пн','вт','ср','чт','пт','сб','вс'].map(d => <div className="cal-wd" key={d}>{d}</div>)}
        {cells.map((c, i) => {
          const cls = [
            'cal-day',
            c.muted && 'muted',
            inRange(c.date) && 'in-range',
            sameDay(c.date, start) && 'range-start',
            sameDay(c.date, end) && 'range-end',
          ].filter(Boolean).join(' ');
          return <button key={i} className={cls} onClick={() => onPickDay(c.date)}>{c.d}</button>;
        })}
      </div>
      <div className="date-pop-foot">
        <span className="range-text">{fmtRange(start, end)}</span>
        <button className="apply" onClick={apply} disabled={!start || !end}>Применить</button>
      </div>
    </div>
  );
}

// ============================================================
// Render a single widget by type
// ============================================================
function WidgetBody({ widget, platform, data, series, compareMode }) {
  const t = widget.type;
  if (t === 'kpi')        return <KPIWidget id={widget.id} platform={platform} data={data} series={series} compareMode={compareMode} />;
  if (t === 'views')      return <AreaChart platform={platform} series={series} compareMode={compareMode} />;
  if (t === 'engagement') return <BarChart platform={platform} series={series} compareMode={compareMode} />;
  if (t === 'gender')     return <GenderDonut platform={platform} data={data} />;
  if (t === 'age')        return <AgeWidget platform={platform} data={data} />;
  if (t === 'geo')        return <GeoWidget platform={platform} data={data} />;
  if (t === 'sources')    return <SourcesWidget platform={platform} data={data} />;
  if (t === 'posts')      return <PostsWidget platform={platform} data={data} />;
  if (t === 'compare')    return <CompareWidget data={data} />;
  if (t === 'stories')    return <StoriesWidget data={data} />;
  return null;
}

function WidgetTitle({ widget, platform, data }) {
  if (widget.type === 'kpi') return null; // KPI handles its own title via icon
  const t = widget.type;
  const titles = {
    views: 'Динамика просмотров',
    engagement: 'Лайки и комментарии',
    gender: 'Пол аудитории',
    age: 'Возраст аудитории',
    geo: 'География',
    sources: 'Источники подписчиков',
    posts: 'Топ постов',
    compare: 'Сравнение по соцсетям',
    stories: 'Свежие публикации',
  };
  const subs = {
    views: platform === 'all' ? 'По всем платформам' : data.PLATFORMS[platform].name,
    engagement: 'Последние 14 дней',
    gender: 'Доля по полу',
    age: 'Распределение по возрастным группам',
    geo: 'Топ городов и стран',
    sources: 'Откуда приходят подписчики',
    posts: 'По вовлечённости',
    compare: 'Все три канала рядом',
    stories: 'Свежие посты и сторис',
  };
  return (
    <div className="widget-title-wrap">
      <div>
        <h3 className="widget-title">{titles[t]}</h3>
        <div className="widget-sub">{subs[t]}</div>
      </div>
    </div>
  );
}

function Widget({ widget, platform, data, series, compareMode, onRemove, onResize, dragHandlers }) {
  const sizes = [3, 4, 6, 8, 9, 12];
  const idx = sizes.indexOf(widget.size);
  const canShrink = idx > 0;
  const canGrow = idx < sizes.length - 1;
  return (
    <div
      className={`widget w-${widget.size} ${dragHandlers.dragging ? 'dragging' : ''} ${dragHandlers.over ? 'drag-over' : ''}`}
      draggable
      onDragStart={dragHandlers.onDragStart}
      onDragEnd={dragHandlers.onDragEnd}
      onDragOver={dragHandlers.onDragOver}
      onDragLeave={dragHandlers.onDragLeave}
      onDrop={dragHandlers.onDrop}
    >
      <div className="widget-head">
        <WidgetTitle widget={widget} platform={platform} data={data} />
        <div className="widget-actions">
          <button className="widget-handle" title="Перетащить"><i className="fas fa-grip-vertical"></i></button>
          <button title="Уменьшить" disabled={!canShrink} style={{ opacity: canShrink ? 1 : 0.3 }} onClick={() => canShrink && onResize(sizes[idx - 1])}>
            <i className="fas fa-compress"></i>
          </button>
          <button title="Увеличить" disabled={!canGrow} style={{ opacity: canGrow ? 1 : 0.3 }} onClick={() => canGrow && onResize(sizes[idx + 1])}>
            <i className="fas fa-expand"></i>
          </button>
          <button title="Удалить" onClick={onRemove}><i className="fas fa-xmark"></i></button>
        </div>
      </div>
      <WidgetBody widget={widget} platform={platform} data={data} series={series} compareMode={compareMode} />
    </div>
  );
}

// ============================================================
// Widget library drawer (drag widgets onto canvas)
// ============================================================
function LibraryDrawer({ open, onClose, allWidgets, activeIds, onAdd, onDragWidget }) {
  return (
    <div className={`lib-drawer ${open ? 'open' : ''}`} onClick={(e) => e.stopPropagation()}>
      <div className="lib-head">
        <h3>Библиотека виджетов</h3>
        <button className="icon-btn" onClick={onClose}><i className="fas fa-xmark"></i></button>
      </div>
      <div style={{ fontSize: 12, color: 'var(--text-3)' }}>
        Перетащите виджет на холст или нажмите на карточку, чтобы добавить
      </div>
      <div className="lib-grid">
        {allWidgets.map(w => {
          const used = activeIds.includes(w.id);
          return (
            <div
              key={w.id}
              className={`lib-card ${used ? 'disabled' : ''}`}
              draggable={!used}
              onDragStart={(e) => onDragWidget(e, w.id)}
              onClick={() => !used && onAdd(w.id)}
            >
              <div className="lib-icon"><i className={`fas ${w.icon}`}></i></div>
              <div className="lib-title">{w.title}</div>
              <div className="lib-sub">{w.sub}</div>
              {used && <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 4 }}>уже на холсте</div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// Right messages panel
// ============================================================
function MessagesPanel({ data }) {
  return (
    <>
      <div className="messages-search">
        <i className="fas fa-search"></i>
        <input placeholder="Поиск по сообщениям / группам" />
      </div>
      <div className="messages-section-head">Сообщения <a>Все</a></div>
      <div className="messages-list">
        {data.MESSAGES.map((m, i) => {
          const isImg = typeof m.avatar === 'string' && m.avatar.startsWith('http');
          const cls = m.avatar === 'yt' ? 'yt' : '';
          return (
            <div className="msg-row" key={i}>
              <div className={`msg-avatar ${cls}`} style={isImg ? { backgroundImage: `url(${m.avatar})` } : undefined}>
                {!isImg && (m.avatar === 'yt' ? <i className="fab fa-youtube"></i> : m.avatar.slice(0, 2))}
                {m.status === 'on' && <span className="status" />}
              </div>
              <div className="msg-meta">
                <div className="msg-name">{m.name}</div>
                <div className="msg-preview">{m.preview}</div>
              </div>
              <div className="msg-right">
                <div className="msg-time">{m.time}</div>
                {m.unread > 0 ? <div className="msg-unread">{m.unread}</div>
                              : <div className="msg-read"><i className="fas fa-check-double" style={{ fontSize: 10 }}></i></div>}
              </div>
            </div>
          );
        })}
      </div>
      <div className="messages-section-head" style={{ marginTop: 8 }}>Группы <a>Все</a></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {data.GROUPS.map((g, i) => (
          <div className="msg-row" key={i}>
            <div className="msg-avatar" style={{ background: g.color, color: g.dark ? '#0a0a0a' : 'white' }}>{g.avatar}</div>
            <div className="msg-meta">
              <div className="msg-name">{g.name}</div>
              <div className="msg-preview">12 участников</div>
            </div>
            <div className="msg-right"><div className="msg-time">›</div></div>
          </div>
        ))}
      </div>
      <button className="add-group">
        Добавить группу
        <span className="plus"><i className="fas fa-plus"></i></span>
      </button>
    </>
  );
}

// ============================================================
// App root
// ============================================================
function App() {
  const data = window.SMM_DATA;

  // tweaks
  const defaults = window.TWEAK_DEFAULTS || {};
  const initial = useMemo(() => ({
    theme: 'light',
    platformsCol: true,
    messagesCol: true,
    density: 'comfortable',
    ...defaults,
  }), []);
  const [tweaks, setTweaks] = useState(initial);
  const setTweak = (kOrObj, v) => {
    const patch = typeof kOrObj === 'string' ? { [kOrObj]: v } : kOrObj;
    setTweaks(t => ({ ...t, ...patch }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch {}
  };

  // TweaksPanel manages its own open state via host messages.

  // state
  const [platform, setPlatform] = useState('all');
  const [preset, setPreset] = useState('30d');
  const [dateRange, setDateRange] = useState(() => {
    const end = new Date(); end.setHours(0,0,0,0);
    const start = new Date(end); start.setDate(end.getDate() - 29);
    return { start, end };
  });
  const [datePop, setDatePop] = useState(false);
  const [compareMode, setCompareMode] = useState(false);
  const [libOpen, setLibOpen] = useState(false);

  // layout: list of {id, size}
  const lookupWidget = (id) => data.WIDGET_LIBRARY.find(w => w.id === id);
  const [layout, setLayout] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('smm-layout') || 'null');
      if (Array.isArray(saved)) return saved;
    } catch {}
    return data.DEFAULT_LAYOUT.map(id => ({ id, size: lookupWidget(id).size }));
  });
  useEffect(() => {
    try { localStorage.setItem('smm-layout', JSON.stringify(layout)); } catch {}
  }, [layout]);

  const widgets = useMemo(() => layout.map(l => ({ ...lookupWidget(l.id), size: l.size })).filter(Boolean), [layout]);

  // drag-drop state
  const [dragId, setDragId] = useState(null);
  const [dragFromLib, setDragFromLib] = useState(null);
  const [overId, setOverId] = useState(null);

  const onDragStart = (id) => (e) => {
    setDragId(id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', id);
  };
  const onDragEnd = () => { setDragId(null); setOverId(null); setDragFromLib(null); };
  const onDragOver = (id) => (e) => {
    if (dragId === id) return;
    e.preventDefault();
    setOverId(id);
  };
  const onDragLeave = () => {};
  const onDrop = (toId) => (e) => {
    e.preventDefault();
    if (dragFromLib) {
      // dropped lib widget on a widget — insert before
      setLayout(prev => {
        if (prev.find(p => p.id === dragFromLib)) return prev;
        const w = lookupWidget(dragFromLib);
        const idx = prev.findIndex(p => p.id === toId);
        const next = [...prev];
        next.splice(idx, 0, { id: dragFromLib, size: w.size });
        return next;
      });
      setDragFromLib(null);
      setOverId(null);
      return;
    }
    if (!dragId || dragId === toId) { setOverId(null); return; }
    setLayout(prev => {
      const from = prev.findIndex(p => p.id === dragId);
      const to = prev.findIndex(p => p.id === toId);
      if (from < 0 || to < 0) return prev;
      const next = [...prev];
      const [moved] = next.splice(from, 1);
      next.splice(to, 0, moved);
      return next;
    });
    setOverId(null);
  };

  const removeWidget = (id) => setLayout(prev => prev.filter(p => p.id !== id));
  const resizeWidget = (id, size) => setLayout(prev => prev.map(p => p.id === id ? { ...p, size } : p));
  const addFromLib = (id) => {
    const w = lookupWidget(id);
    setLayout(prev => prev.find(p => p.id === id) ? prev : [...prev, { id, size: w.size }]);
  };
  const onDragLib = (e, id) => {
    setDragFromLib(id);
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('text/plain', id);
  };

  // canvas-level drop (when no widget hit) — append
  const canvasDrop = (e) => {
    if (dragFromLib) {
      e.preventDefault();
      addFromLib(dragFromLib);
      setDragFromLib(null);
    }
  };

  const resetLayout = () => {
    setLayout(data.DEFAULT_LAYOUT.map(id => ({ id, size: lookupWidget(id).size })));
  };

  const platformInfo = data.PLATFORMS[platform];

  return (
    <div className={`app-shell theme-${tweaks.theme} ${!tweaks.platformsCol ? 'platforms-hidden' : ''} ${!tweaks.messagesCol ? 'messages-hidden' : ''}`}>
      <div className="win-dots">
        <span className="d-1" /><span className="d-2" /><span className="d-3" />
      </div>

      {/* ===== Left rail ===== */}
      <aside className="rail">
        <div className="rail-logo">H</div>
        <button className="rail-btn" title="Главная"><i className="fas fa-home"></i></button>
        <button className="rail-btn active" title="Аналитика"><i className="fas fa-chart-line"></i></button>
        <button className="rail-btn" title="Контент"><i className="fas fa-photo-film"></i></button>
        <button className="rail-btn" title="Календарь"><i className="far fa-calendar"></i></button>
        <button className="rail-btn" title="Команда"><i className="fas fa-users"></i></button>
        <button className="rail-btn" title="Настройки"><i className="fas fa-gear"></i></button>
        <div className="rail-spacer" />
        <div className="rail-mode">
          <button className={tweaks.theme === 'light' ? 'active' : ''} onClick={() => setTweak('theme', 'light')} title="Светлая"><i className="fas fa-sun"></i></button>
          <button className={tweaks.theme === 'dark' ? 'active' : ''} onClick={() => setTweak('theme', 'dark')} title="Тёмная"><i className="fas fa-moon"></i></button>
        </div>
        <button className="rail-btn" title="Выход"><i className="fas fa-arrow-right-from-bracket"></i></button>
      </aside>

      {/* ===== Platforms col ===== */}
      <aside className="platforms">
        <div className="platforms-header">
          <h2 className="platforms-title">Каналы</h2>
          <button className="platforms-add" title="Подключить"><i className="fas fa-plus"></i></button>
        </div>
        {Object.values(data.PLATFORMS).map(p => (
          <button key={p.id} className={`platform-item ${platform === p.id ? 'active' : ''}`} onClick={() => setPlatform(p.id)}>
            <div className={`platform-icon ${p.id}`}><i className={p.icon}></i></div>
            <div className="platform-meta">
              <div className="platform-name">{p.name}</div>
              <div className="platform-sub">{p.sub}</div>
            </div>
          </button>
        ))}
        <div style={{ marginTop: 'auto', padding: '12px 8px', fontSize: 11, color: 'var(--text-3)', borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>Каналов:</span><strong style={{ color: 'var(--text-1)' }}>3</strong>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>Аудитория:</span><strong style={{ color: 'var(--text-1)' }}>{fmt(data.KPI.all.followers.v)}</strong>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>Синхр.:</span><strong style={{ color: 'var(--pos)' }}><i className="fas fa-circle" style={{ fontSize: 6, marginRight: 4 }}></i>сейчас</strong>
          </div>
        </div>
      </aside>

      {/* ===== Top bar ===== */}
      <header className="topbar">
        <div className="search-wrap">
          <i className="fas fa-search search-icon"></i>
          <input className="search-input" placeholder="Поиск по постам, метрикам, кейсам..." />
        </div>
        <div style={{ flex: 1 }} />
        <div className="period-switch">
          {[['7d','7д'], ['30d','30д'], ['90d','90д']].map(([k, lbl]) => (
            <button key={k} className={preset === k ? 'active' : ''} onClick={() => {
              setPreset(k);
              const today = new Date(); today.setHours(0,0,0,0);
              const end = today;
              const start = new Date(today);
              start.setDate(today.getDate() - (k === '7d' ? 6 : k === '30d' ? 29 : 89));
              setDateRange({ start, end });
            }}>{lbl}</button>
          ))}
        </div>
        <button className="compare-btn" onClick={(e) => { e.stopPropagation(); setDatePop(v => !v); }}>
          <i className="far fa-calendar"></i>
          {fmtRange(dateRange.start, dateRange.end)}
          <i className="fas fa-chevron-down" style={{ fontSize: 9, opacity: 0.6 }}></i>
        </button>
        <button className={`compare-btn ${compareMode ? 'active' : ''}`} onClick={() => setCompareMode(v => !v)} title="Сравнить с предыдущим периодом">
          <i className="fas fa-code-compare"></i>
          Сравнить
        </button>
        <button className="icon-btn" title="Команда"><i className="fas fa-user-group"></i></button>
        <button className="icon-btn" title="Сообщения"><i className="far fa-comment"></i></button>
        <button className="icon-btn" title="Уведомления">
          <i className="far fa-bell"></i>
          <span className="badge">3</span>
        </button>
        <button className="user-chip" title="Профиль">
          <div className="user-avatar">АМ</div>
          <i className="fas fa-chevron-down" style={{ fontSize: 10, color: 'var(--text-3)' }}></i>
        </button>
      </header>

      {/* ===== Canvas ===== */}
      <main className="canvas" onDragOver={(e) => { if (dragFromLib) e.preventDefault(); }} onDrop={canvasDrop}>
        <div className="canvas-header">
          <div>
            <h1 className="canvas-title">
              {platform === 'all' ? 'Аналитика всех каналов' : `Аналитика · ${platformInfo.name}`}
            </h1>
            <p className="canvas-sub">
              {fmtRange(dateRange.start, dateRange.end)} · {platformInfo.handle}
              {compareMode && ' · сравнение с предыдущим периодом'}
            </p>
          </div>
          <div className="canvas-actions">
            <div className="network-tabs">
              {[
                { id: 'all',       label: 'Все',        dot: 'all',      icon: 'fas fa-layer-group' },
                { id: 'vk',        label: 'ВКонтакте',   dot: '#0077FF', icon: 'fab fa-vk' },
                { id: 'youtube',   label: 'YouTube',     dot: '#FF0033', icon: 'fab fa-youtube' },
                { id: 'instagram', label: 'Instagram',   dot: '#E1306C', icon: 'fab fa-instagram' },
              ].map(t => (
                <button key={t.id} className={`network-tab ${platform === t.id ? 'active' : ''}`} onClick={() => setPlatform(t.id)}>
                  <i className={t.icon}></i>
                  {t.label}
                </button>
              ))}
            </div>
            <button className="icon-btn" title="Сбросить раскладку" onClick={resetLayout}><i className="fas fa-rotate-left"></i></button>
          </div>
        </div>

        <div className="grid">
          {widgets.map(w => (
            <Widget
              key={w.id}
              widget={w}
              platform={platform}
              data={data}
              series={data.SERIES}
              compareMode={compareMode}
              onRemove={() => removeWidget(w.id)}
              onResize={(s) => resizeWidget(w.id, s)}
              dragHandlers={{
                dragging: dragId === w.id,
                over: overId === w.id,
                onDragStart: onDragStart(w.id),
                onDragEnd,
                onDragOver: onDragOver(w.id),
                onDragLeave,
                onDrop: onDrop(w.id),
              }}
            />
          ))}
        </div>

        {/* Floating add-widget button */}
        <button className="lib-fab" onClick={() => setLibOpen(v => !v)}>
          <i className="fas fa-plus"></i>
          Добавить виджет
        </button>

        {datePop && (
          <DatePopover
            value={dateRange}
            onChange={setDateRange}
            onClose={() => setDatePop(false)}
            preset={preset}
            setPreset={setPreset}
          />
        )}

        <LibraryDrawer
          open={libOpen}
          onClose={() => setLibOpen(false)}
          allWidgets={data.WIDGET_LIBRARY}
          activeIds={layout.map(l => l.id)}
          onAdd={addFromLib}
          onDragWidget={onDragLib}
        />
      </main>

      {/* ===== Messages ===== */}
      <aside className="messages">
        <MessagesPanel data={data} />
      </aside>

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Внешний вид">
            <window.TweakRadio
              label="Тема"
              value={tweaks.theme}
              onChange={(v) => setTweak('theme', v)}
              options={[
                { value: 'light', label: 'Светлая' },
                { value: 'dark',  label: 'Тёмная' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection label="Боковые панели">
            <window.TweakToggle label="Список каналов слева" value={tweaks.platformsCol} onChange={(v) => setTweak('platformsCol', v)} />
            <window.TweakToggle label="Сообщения справа" value={tweaks.messagesCol} onChange={(v) => setTweak('messagesCol', v)} />
          </window.TweakSection>
          <window.TweakSection label="Раскладка">
            <window.TweakButton label="Открыть библиотеку виджетов" onClick={() => setLibOpen(true)} />
            <window.TweakButton label="Сбросить расположение" onClick={resetLayout} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);