// AI Отдел — главный файл

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "stateMode": "idle",
  "showActivity": true,
  "accent": "#3B82F6"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#6E5CF4', '#3B82F6', '#22A06B', '#E15B58'];

// ──────────────────────────────────────────────────────────────
// #4 — Live sprint store. Заполняется поллером в PhoneApp, читается
// buildTeam/getTask (departments.jsx) для живых карточек сотрудников.
// ──────────────────────────────────────────────────────────────
window.AI_LIVE = window.AI_LIVE || { sprintId: null, status: null, progress: 0, employees: {}, startedAt: null, department: null };
window.AI_LIVE_START = function(sprintId, department) {
  if (!sprintId) return;
  window.AI_LIVE.sprintId = sprintId;
  window.AI_LIVE.status = 'running';
  window.AI_LIVE.progress = 0;
  window.AI_LIVE.employees = {};
  window.AI_LIVE.startedAt = Date.now();
  window.AI_LIVE.department = department || 'marketing';  // #4 — отдел, в котором запущен спринт
  try {
    localStorage.setItem('ai_active_sprint', sprintId);
    localStorage.setItem('ai_active_sprint_start', String(window.AI_LIVE.startedAt));
    localStorage.setItem('ai_active_sprint_dept', window.AI_LIVE.department);
  } catch (e) {}
};

// ──────────────────────────────────────────────────────────────
// Navigation state per phone
// ──────────────────────────────────────────────────────────────
function usePhoneNav() {
  const [tab, setTab] = React.useState('home');
  const [stack, setStack] = React.useState([]);
  const [toast, setToast] = React.useState(null);
  const [dept, setDept] = React.useState('marketing');
  const [hub, setHub] = React.useState(true);
  const toastTimer = React.useRef(null);

  const api = React.useMemo(() => ({
    get tab() { return tab; },
    get stack() { return stack; },
    get dept() { return dept; },
    get hub() { return hub; },
    push: (screen) => setStack(s => [...s, screen]),
    pop: () => setStack(s => s.slice(0, -1)),
    popToHome: () => { setStack([]); setTab('home'); },
    setTab: (t) => { setStack([]); setTab(t); },
    enterDept: (d) => { setDept(d); setHub(false); setStack([]); setTab('home'); },
    openHub: () => { setHub(true); setStack([]); setTab('home'); },
    toast: (text) => {
      setToast(text);
      if (toastTimer.current) clearTimeout(toastTimer.current);
      toastTimer.current = setTimeout(() => setToast(null), 1800);
    },
  }), [tab, stack, dept, hub]);

  return { nav: api, tab, stack, toast };
}

// ──────────────────────────────────────────────────────────────
// Render the right screen based on nav state
// ──────────────────────────────────────────────────────────────
function CurrentScreen({ T, nav, tab, stack, stateMode, showActivity, onToggleTheme, apiUser, activeProject, setActiveProject, activeProjectName, setActiveProjectName, onUnreadUpdate }) {
  const top = stack[stack.length - 1];
  if (top) {
    if (top.kind === 'task' || top.kind === 'employee') {
      return <TaskScreen T={T} nav={nav} employeeId={top.employeeId} />;
    }
    if (top.kind === 'new-task') {
      return <NewTaskScreen T={T} nav={nav} employeeId={top.employeeId} mode={top.mode} />;
    }
    if (top.kind === 'notifications') {
      return <NotificationsScreen T={T} nav={nav} />;
    }
    if (top.kind === 'chat-thread') {
      return <ChatThreadScreen T={T} nav={nav} employeeId={top.employeeId} />;
    }
  }
  if (tab === 'home')    return nav.hub
    ? <HubScreen T={T} nav={nav} stateMode={stateMode} onToggleTheme={onToggleTheme} activeProject={activeProject} setActiveProject={setActiveProject} activeProjectName={activeProjectName} setActiveProjectName={setActiveProjectName} />
    : <HomeScreen T={T} nav={nav} stateMode={stateMode} showActivity={showActivity} onToggleTheme={onToggleTheme} activeProject={activeProject} setActiveProject={setActiveProject} activeProjectName={activeProjectName} setActiveProjectName={setActiveProjectName} />;
  if (tab === 'tasks')   return <TasksTab T={T} nav={nav} stateMode={stateMode} />;
  if (tab === 'chat')    return <ChatTab T={T} nav={nav} stateMode={stateMode} onUnreadUpdate={onUnreadUpdate} />;
  if (tab === 'team')    return <TeamTab T={T} nav={nav} stateMode={stateMode} />;
  if (tab === 'profile') return <ProfileTab T={T} nav={nav} onToggleTheme={onToggleTheme} apiUser={apiUser} activeProject={activeProject} setActiveProject={setActiveProject} activeProjectName={activeProjectName} setActiveProjectName={setActiveProjectName} />;
  return null;
}

// Toast overlay
function Toast({ text, T }) {
  if (!text) return null;
  return (
    <div className="toast-pop" style={{
      position: 'absolute', left: '50%', bottom: 110, transform: 'translateX(-50%)',
      padding: '10px 16px', background: T.ink, color: T.bg,
      borderRadius: 99, fontSize: 12.5, fontWeight: 600,
      boxShadow: '0 12px 32px -8px rgba(0,0,0,0.4)', zIndex: 100,
      whiteSpace: 'nowrap', pointerEvents: 'none',
    }}>{text}</div>
  );
}

// ──────────────────────────────────────────────────────────────
// One full phone — shell + screen + tab bar
// ──────────────────────────────────────────────────────────────
function PhoneApp({ T, stateMode, showActivity, onToggleTheme, apiUser, activeProject, setActiveProject, activeProjectName, setActiveProjectName }) {
  const { nav, tab, stack, toast } = usePhoneNav();
  var [unreadTotal, setUnreadTotal] = React.useState(0);
  var [liveTick, setLiveTick] = React.useState(0);  // #4 — bump для ре-рендера живых карточек

  // #4 — Global live-sprint polling. Тянет /api/sprints/{id}, кладёт в window.AI_LIVE,
  // ре-рендерит дерево (setLiveTick). Возобновляется из localStorage после перезагрузки.
  React.useEffect(function() {
    function pollSprint() {
      if (!window.AI_API || !window.AI_API.getToken()) return;
      var sid = window.AI_LIVE.sprintId || localStorage.getItem('ai_active_sprint');
      if (!sid) return;
      if (!window.AI_LIVE.department) {  // #4 — восстановить отдел после перезагрузки
        window.AI_LIVE.department = localStorage.getItem('ai_active_sprint_dept') || 'marketing';
      }
      window.AI_API.getSprintStatus(sid).then(function(s) {
        if (!s) return;
        var emp = {};
        (s.employees || []).forEach(function(e) { emp[e.employee_id] = e; });
        window.AI_LIVE.status = s.status;
        window.AI_LIVE.progress = s.progress || 0;
        window.AI_LIVE.employees = emp;
        window.AI_LIVE.sprintId = sid;
        if (s.status === 'done' || s.status === 'error') {
          try { localStorage.removeItem('ai_active_sprint'); localStorage.removeItem('ai_active_sprint_dept'); } catch (e) {}
          window.AI_LIVE.sprintId = null;  // остановить дальнейший поллинг
          window.AI_LIVE.department = null;
        }
        setLiveTick(function(x) { return x + 1; });
      }).catch(function() {});
    }
    pollSprint();
    var iv = setInterval(pollSprint, 6000);
    return function() { clearInterval(iv); };
  }, []);

  // Global unread polling - runs regardless of active tab
  React.useEffect(function() {
    function pollUnread() {
      if (!window.AI_API || !window.AI_API.getToken()) return;
      var team = ['elena','mark','lyudmila','dmitry','igor','kostya','alina','oleg','all'];
      var sinceMap = {};
      team.forEach(function(id) {
        var ts = localStorage.getItem('ai_last_read_' + id);
        if (ts) sinceMap[id] = ts;
      });
      window.AI_API.getUnreadCounts(sinceMap).then(function(counts) {
        if (!counts) return;
        var total = Object.values(counts).reduce(function(s, n) { return s + n; }, 0);
        setUnreadTotal(total);
      }).catch(function() {});
    }
    pollUnread();
    var interval = setInterval(pollUnread, 30000);
    return function() { clearInterval(interval); };
  }, []);
  return (
    <Phone T={T}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden', minHeight: 0 }}>
        <CurrentScreen T={T} nav={nav} tab={tab} stack={stack} stateMode={stateMode} showActivity={showActivity} onToggleTheme={onToggleTheme} apiUser={apiUser} activeProject={activeProject} setActiveProject={setActiveProject} activeProjectName={activeProjectName} setActiveProjectName={setActiveProjectName} onUnreadUpdate={setUnreadTotal} />
        <Toast text={toast} T={T} />
      </div>
      <TabBar T={T} activeTab={tab} onChange={(t) => { nav.setTab(t); if (t === 'chat') setUnreadTotal(0); }} unreadChat={unreadTotal} />
    </Phone>
  );
}

// ──────────────────────────────────────────────────────────────
// App — top level. Handles Telegram auth on mount.
// ──────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, setTheme] = React.useState(window.AI_INITIAL_THEME || 'light');
  const [apiUser, setApiUser] = React.useState(null);
  // Стартуем с последнего проекта из localStorage — чтобы апп сразу открывался на нём,
  // не мелькая «Волной», пока грузится /api/me.
  const [activeProject, setActiveProject] = React.useState(function() { try { return localStorage.getItem('ai_active_project') || 'волна'; } catch (e) { return 'волна'; } });
  const [activeProjectName, setActiveProjectName] = React.useState(function() { try { return localStorage.getItem('ai_active_project_name') || 'Волна'; } catch (e) { return 'Волна'; } });

  React.useEffect(() => {
    // sync theme with Telegram colorScheme changes
    function onThemeChange() {
      const scheme = window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.colorScheme;
      if (scheme) setTheme(scheme);
    }
    const tg = window.Telegram && window.Telegram.WebApp;
    if (tg) tg.onEvent('themeChanged', onThemeChange);

    // Telegram auth + load project name
    if (window.AI_API) {
      window.AI_API.login().then(function(u) {
        if (u) setApiUser(u);
        // Load project info if token exists (works on desktop too)
        if (window.AI_API.getToken()) {
          window.AI_API.me().then(function(meData) {
            if (!meData || !meData.active_project_slug) return;
            setActiveProject(meData.active_project_slug);
            try { localStorage.setItem('ai_active_project', meData.active_project_slug); } catch (e) {}
            window.AI_API.getProjects().then(function(ps) {
              var found = (ps || []).find(function(p) { return p.slug === meData.active_project_slug; });
              if (found && found.name) { setActiveProjectName(found.name); try { localStorage.setItem('ai_active_project_name', found.name); } catch (e) {} }
            }).catch(function(){});
          }).catch(function(){});
        }
      });
    }
  }, []);

  const T = React.useMemo(() => ({ ...THEMES[theme], accent: t.accent }), [theme, t.accent]);

  // In Telegram: full-screen, no wrapper padding, no TweaksPanel
  const inTelegram = !!(window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initData);

  if (inTelegram) {
    return (
      <div style={{ width: '100vw', minHeight: '100dvh', background: T.bg }}>
        <PhoneApp
          T={T}
          stateMode={t.stateMode}
          showActivity={t.showActivity}
          onToggleTheme={() => setTheme(x => x === 'light' ? 'dark' : 'light')}
          apiUser={apiUser}
          activeProject={activeProject}
          setActiveProject={setActiveProject}
          activeProjectName={activeProjectName}
          setActiveProjectName={setActiveProjectName}
        />
      </div>
    );
  }

  // Browser preview: keep the phone-wrapper + TweaksPanel
  return (
    <React.Fragment>
      <div style={{
        width: '100vw', minHeight: '100vh',
        padding: '40px 16px', boxSizing: 'border-box',
        background: theme === 'light' ? '#DCD7EE' : '#0B0918',
        transition: 'background .4s ease',
        display: 'flex',
        justifyContent: 'center', alignItems: 'flex-start',
      }}>
        <PhoneApp
          T={T}
          stateMode={t.stateMode}
          showActivity={t.showActivity}
          onToggleTheme={() => setTheme(x => x === 'light' ? 'dark' : 'light')}
          apiUser={apiUser}
          activeProject={activeProject}
          setActiveProject={setActiveProject}
          activeProjectName={activeProjectName}
          setActiveProjectName={setActiveProjectName}
        />
      </div>
      <TweaksPanel>
        <TweakSection label="Состояние команды" />
        <TweakRadio
          label="Кто работает"
          value={t.stateMode}
          options={[
            { value: 'idle',  label: 'Никто' },
            { value: 'mixed', label: '4 из 8' },
            { value: 'busy',  label: 'Все' },
          ]}
          onChange={(v) => setTweak('stateMode', v)}
        />
        <TweakToggle
          label="Лента активности"
          value={t.showActivity}
          onChange={(v) => setTweak('showActivity', v)}
        />
        <TweakSection label="Стиль" />
        <TweakColor
          label="Акцентный цвет"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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