// Main app shell: role-aware routing + Tweaks integration

const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "mint",
  "dark": false,
  "fontSize": 15,
  "dashboardLayout": "overview",
  "matrixView": "table"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute]     = useS('login');
  const [role, setRole]       = useS('supervisor');
  const [user, setUser]       = useS('n01');
  const [tweaksOpen, setTweaksOpen] = useS(false);
  const [dbReady, setDbReady] = useS(false);

  // Init Supabase data + check existing session on mount
  useE(() => {
    async function boot() {
      await window.DB.init(); // fetch live data (no-op in demo mode)
      setDbReady(true);

      if (!window.DB.isLive()) return; // demo mode: stay on login

      const session = await window.DB.auth.getSession();
      if (session) {
        const profile = await window.DB.auth.getProfile(session.user.id);
        const r = profile?.role    || 'supervisee';
        const u = profile?.staff_id || (r === 'supervisor' ? 'n01' : 'n11');
        setRole(r); setUser(u);
        setRoute(isSupervisorRole(r) ? 'dashboard' : 'mydashboard');
      }
    }
    boot();

    // Listen for auth state changes (token refresh, sign-out from another tab)
    const unsub = window.DB.auth.onAuthChange((event, session) => {
      if (event === 'SIGNED_OUT' || !session) {
        setRoute('login');
      }
    });
    return unsub;
  }, []);

  // Apply theme to root
  useE(() => {
    document.documentElement.setAttribute('data-theme', t.theme || 'mint');
    document.documentElement.setAttribute('data-mode', t.dark ? 'dark' : 'light');
    document.documentElement.style.setProperty('--fs-scale', (t.fontSize / 15).toFixed(3));
  }, [t.theme, t.dark, t.fontSize]);

  // External signal to open tweaks panel
  useE(() => {
    function onMsg(ev) {
      if (ev.data && ev.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (ev.data && ev.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    }
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  async function handleSignOut() {
    await window.DB.auth.signOut();
    setRoute('login');
  }

  function handleEnter(r, uid) {
    setRole(r);
    setUser(uid);
    setRoute(isSupervisorRole(r) ? 'dashboard' : 'mydashboard');
  }

  function handleRoleChange(r) {
    setRole(r);
    if (isSupervisorRole(r)) {
      setUser('n01');
      setRoute('dashboard');
    } else {
      setUser('n11');
      setRoute('mydashboard');
    }
  }

  // Map route → screen
  function renderScreen() {
    if (route === 'login') return <LoginScreen onEnter={handleEnter} />;
    if (isSupervisorRole(role)) {
      if (route === 'dashboard') return <Dashboard layout={t.dashboardLayout} />;
      if (route === 'matrix') return <SkillMatrix initialView={t.matrixView} />;
      if (route === 'planning') return <Planning />;
      if (route === 'evaluation') return <SupervisionTopicsAdmin />;
      if (route === 'logbook') return <Logbook role={role} />;
      if (route === 'records') return <SupervisionRecords role={role} />;
      if (route === 'cases') return <CaseReview />;
      if (route === 'analytics') return <Analytics />;
      if (route === 'staff') return <StaffManagement />;
      if (route === 'knowledge') return <KnowledgeBase role={role} />;
      if (route === 'users') return <UserManagement />;
      if (route === 'settings') return <Settings />;
    } else {
      if (route === 'mydashboard') return <SuperviseeDashboard user={user} />;
      if (route === 'myplan') return <SuperviseeDashboard user={user} />;
      if (route === 'records') return <SupervisionRecords role={role} user={user} />;
      if (route === 'feedback') return <Evaluation readOnly />;
      if (route === 'logbook') return <Logbook role={role} />;
      if (route === 'knowledge') return <KnowledgeBase role={role} />;
    }
    return <Dashboard layout={t.dashboardLayout} />;
  }

  function getTitle() {
    if (route === 'login') return '';
    const titles = {
      dashboard: ['ภาพรวมการนิเทศ', 'งานห้องคลอด · พฤษภาคม 2569'],
      matrix: ['Competency & Skill Matrix', 'สมรรถนะ → ติดตามรายบุคคล'],
      planning: ['แผนการนิเทศ', 'Clinical Supervision Calendar'],
      evaluation: ['หัวข้อนิเทศ', 'จัดการหัวข้อและกลุ่มที่ใช้ในการนิเทศ'],
      records: ['บันทึกการนิเทศ', 'รายงานตามคู่มือ — Formal Supervision Records'],
      cases: ['Case Review', 'M&M · RCA · Near Miss'],
      analytics: ['Analytics & KPI', 'รายงานและตัวชี้วัด'],
      staff: ['จัดการบุคลากร', 'รายชื่อ · เพิ่ม · แก้ไข'],
      knowledge: ['คลังความรู้', 'คู่มือ · Protocol · Workshop'],
      users: ['บริหารจัดการผู้ใช้งาน', 'บทบาทและสิทธิ์การเข้าถึงระบบ'],
      settings: ['ตั้งค่า', 'การจัดการระบบ'],
      mydashboard: ['หน้าหลักของฉัน', 'แผนพัฒนาส่วนบุคคล'],
      myplan: ['แผนพัฒนาของฉัน', 'IDP · Individual Development Plan'],
      feedback: ['ผลประเมินที่ได้รับ', 'จากผู้นิเทศ'],
    };
    return titles[route] || ['', ''];
  }

  if (route === 'login') {
    return (
      <>
        {renderScreen()}
        {tweaksOpen && <TweaksUI t={t} setTweak={setTweak} />}
      </>
    );
  }

  const [title, crumbs] = getTitle();
  return (
    <div className="app">
      <Sidebar current={route} onNav={(id) => {
        if (id === 'login') { handleSignOut(); return; }
        setRoute(id);
      }} role={role} />
      <div className="main">
        <Topbar
          title={title}
          crumbs={crumbs}
          role={role}
          onRoleChange={handleRoleChange}
          user={user}
          onTweaksToggle={() => setTweaksOpen(v => !v)}
        />
        {renderScreen()}
      </div>
      {tweaksOpen && <TweaksUI t={t} setTweak={setTweak} onClose={() => setTweaksOpen(false)} />}
    </div>
  );
}

function TweaksUI({ t, setTweak, onClose }) {
  return (
    <TweaksPanel title="Tweaks" onClose={onClose}>
      <TweakSection label="Theme" />
      <TweakRadio
        label="โทนสี"
        value={t.theme}
        options={[
          { value: 'mint', label: 'Mint' },
          { value: 'blue', label: 'Clinical' },
          { value: 'warm', label: 'Warm' },
        ]}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakToggle
        label="Dark mode"
        value={t.dark}
        onChange={(v) => setTweak('dark', v)}
      />
      <TweakSection label="Typography" />
      <TweakSlider
        label="ขนาดฟอนต์ (สำหรับเปิดบนแท็บเล็ตขณะเดิน)"
        value={t.fontSize} min={13} max={20} step={1} unit="px"
        onChange={(v) => setTweak('fontSize', v)}
      />
      <TweakSection label="Layout" />
      <TweakSelect
        label="รูปแบบ Dashboard"
        value={t.dashboardLayout}
        options={[
          { value: 'overview', label: 'Overview (ละเอียด)' },
          { value: 'compact', label: 'Compact (สรุปย่อ)' },
          { value: 'focus', label: 'Focus (โฟกัสวันนี้)' },
        ]}
        onChange={(v) => setTweak('dashboardLayout', v)}
      />
      <TweakSelect
        label="มุมมอง Skill Matrix"
        value={t.matrixView}
        options={[
          { value: 'table', label: 'Heatmap (ตาราง)' },
          { value: 'cards', label: 'Skill Cards' },
          { value: 'radar', label: 'Radar (รายคน)' },
        ]}
        onChange={(v) => setTweak('matrixView', v)}
      />
    </TweaksPanel>
  );
}

// Patch SkillMatrix already accepts initialView prop directly.

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