/* global React */
const { useState, useEffect, useMemo, useRef, useCallback, Fragment } = React;

// ── Icons (inline SVG) ────────────────────────────────────
function Icon({ name, size = 16 }) {
  const s = { width: size, height: size, strokeWidth: 1.6 };
  const common = { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", ...s };
  switch (name) {
    case "home": return <svg {...common}><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"/></svg>;
    case "calendar": return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "settings": return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case "help": return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4M12 17h.01"/></svg>;
    case "search": return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "upload": return <svg {...common}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case "download": return <svg {...common}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>;
    case "play": return <svg {...common}><polygon points="6 4 20 12 6 20 6 4"/></svg>;
    case "edit": return <svg {...common}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.1 2.1 0 1 1 3 3L12 15l-4 1 1-4z"/></svg>;
    case "check": return <svg {...common}><polyline points="20 6 9 17 4 12"/></svg>;
    case "x": return <svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case "alert": return <svg {...common}><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg>;
    case "chevron-right": return <svg {...common}><polyline points="9 18 15 12 9 6"/></svg>;
    case "chevron-down": return <svg {...common}><polyline points="6 9 12 15 18 9"/></svg>;
    case "plus": return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "filter": return <svg {...common}><polygon points="22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3"/></svg>;
    case "grid": return <svg {...common}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>;
    case "list": return <svg {...common}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case "bell": return <svg {...common}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>;
    case "sparkle": return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></svg>;
    case "book": return <svg {...common}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>;
    case "clock": return <svg {...common}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
    case "users": return <svg {...common}><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.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>;
    case "door": return <svg {...common}><path d="M3 21h18M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16M14 12h.01"/></svg>;
    case "arrow-right": return <svg {...common}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case "menu": return <svg {...common}><path d="M3 12h18M3 6h18M3 18h18"/></svg>;
    default: return null;
  }
}

// ── Lesson type pill ────────────────────────────────────
function LessonType({ type, short }) {
  const key = window.SCHED_DATA.TYPE_KEYS[type] || "other";
  const label = short ? { lec: "ЛЕК", prac: "ПР", lab: "ЛАБ", sem: "СЕМ" }[key] : type;
  return <span className={`ltype ltype--${key}`}>{label}</span>;
}

// ── Header / App shell ──────────────────────────────────
function Header({ tab, onTab, user, onLogout, conflicts }) {
  const tabs = [
    { id: "dashboard", label: "Обзор", icon: "home" },
    { id: "schedule", label: "Расписание", icon: "calendar" },
    { id: "settings", label: "Настройки", icon: "settings" },
    { id: "help", label: "Справка", icon: "help" },
  ];
  return (
    <header className="appHeader">
      <div className="brand">
        <span className="brand__mark">S</span>
        <span className="brand__name">Schedule A</span>
        <span className="brand__meta">v2026.04</span>
      </div>
      <nav className="tabNav">
        {tabs.map(t => (
          <button key={t.id}
            className={`tabNav__item ${tab === t.id ? "is-active" : ""}`}
            onClick={() => onTab(t.id)}>
            <span className="tabNav__dot"></span>
            {t.label}
            {t.id === "schedule" && conflicts > 0 && (
              <span className="tabNav__count">{conflicts}</span>
            )}
          </button>
        ))}
      </nav>
      <div className="headerRight">
        <button className="iconBtn" title="Уведомления"><Icon name="bell" /></button>
        <div className="user">
          <div className="user__avatar">{user[0].toUpperCase()}</div>
          <div>
            <div className="user__name">{user}</div>
            <div className="user__role">administrator</div>
          </div>
        </div>
        <button className="iconBtn" onClick={onLogout} title="Выйти"><Icon name="x" /></button>
      </div>
    </header>
  );
}

function StatusBar({ stats, hasPending }) {
  const ts = window.SCHED_DATA.lastUpdated;
  const updatedStr = ts ? ts.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" }) + " · " + ts.toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit", year: "2-digit" }) : "";
  return (
    <div className="statusBar">
      <div className="statusBar__item">
        <span className={`statusBar__dot ${hasPending ? "warn" : ""}`}></span>
        <span>{hasPending ? "Есть черновик" : "В эфире"}</span>
      </div>
      <div className="statusBar__sep"/>
      <div className="statusBar__item">
        <span className="statusBar__label">GROUPS</span>
        <span className="statusBar__value">{stats.groups}</span>
      </div>
      <div className="statusBar__item">
        <span className="statusBar__label">TEACHERS</span>
        <span className="statusBar__value">{stats.teachers}</span>
      </div>
      <div className="statusBar__item">
        <span className="statusBar__label">ROOMS</span>
        <span className="statusBar__value">{stats.rooms}</span>
      </div>
      <div className="statusBar__item">
        <span className="statusBar__label">SLOTS</span>
        <span className="statusBar__value">{stats.scheduled}/{stats.totalSlots || stats.lessons}</span>
      </div>
      {updatedStr && <>
        <div className="statusBar__sep"/>
        <div className="statusBar__item" style={{ marginLeft: "auto" }}>
          <span className="statusBar__label">ОБНОВЛЕНО</span>
          <span className="statusBar__value">{updatedStr}</span>
        </div>
      </>}
    </div>
  );
}

// ── Tweaks panel ────────────────────────────────────────
function TweaksPanel({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(true);
  return (
    <div className="tweaksPanel" style={open ? null : { width: 100 }}>
      <div className="tweaksPanel__header">
        <div className="tweaksPanel__title">Tweaks</div>
        <button className="iconBtn" onClick={() => setOpen(!open)}>
          <Icon name={open ? "chevron-down" : "chevron-right"} size={14} />
        </button>
      </div>
      {open && (
        <div className="tweaksPanel__body">
          <div className="tweakRow">
            <div className="tweakRow__label">Тема</div>
            <div className="tweakChips">
              {["light", "dark"].map(v => (
                <button key={v}
                  className={`tweakChip ${tweaks.theme === v ? "is-active" : ""}`}
                  onClick={() => setTweaks({ ...tweaks, theme: v })}>
                  {v === "light" ? "Светлая" : "Тёмная"}
                </button>
              ))}
            </div>
          </div>
          <div className="tweakRow">
            <div className="tweakRow__label">Акцент</div>
            <div className="tweakChips">
              {[
                { v: "plum", c: "#6b2d5c" },
                { v: "ink", c: "#1a1815" },
                { v: "forest", c: "#2f6a4a" },
                { v: "ochre", c: "#b88729" },
              ].map(a => (
                <button key={a.v}
                  className={`tweakChip ${tweaks.accent === a.v ? "is-active" : ""}`}
                  onClick={() => setTweaks({ ...tweaks, accent: a.v })}
                  style={{ background: tweaks.accent === a.v ? a.c : undefined, borderColor: a.c, color: tweaks.accent === a.v ? "#fff" : a.c }}>
                  {a.v}
                </button>
              ))}
            </div>
          </div>
          <div className="tweakRow">
            <div className="tweakRow__label">Плотность</div>
            <div className="tweakChips">
              {["compact", "cozy"].map(v => (
                <button key={v}
                  className={`tweakChip ${tweaks.density === v ? "is-active" : ""}`}
                  onClick={() => setTweaks({ ...tweaks, density: v })}>
                  {v === "compact" ? "Плотно" : "Свободно"}
                </button>
              ))}
            </div>
          </div>
          <div className="tweakRow">
            <div className="tweakRow__label">Сетка расписания</div>
            <div className="tweakChips">
              {[
                { v: "days-cols", l: "Дни — колонки" },
                { v: "days-rows", l: "Дни — строки" },
              ].map(v => (
                <button key={v.v}
                  className={`tweakChip ${tweaks.gridLayout === v.v ? "is-active" : ""}`}
                  onClick={() => setTweaks({ ...tweaks, gridLayout: v.v })}>
                  {v.l}
                </button>
              ))}
            </div>
          </div>
          <div className="tweakRow">
            <div className="tweakRow__label">Показывать</div>
            <div className="tweakChips">
              {[
                { k: "showTeacher", l: "Преподаватель" },
                { k: "showRoom", l: "Аудитория" },
                { k: "showType", l: "Тип" },
              ].map(o => (
                <button key={o.k}
                  className={`tweakChip ${tweaks[o.k] ? "is-active" : ""}`}
                  onClick={() => setTweaks({ ...tweaks, [o.k]: !tweaks[o.k] })}>
                  {o.l}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, LessonType, Header, StatusBar, TweaksPanel });