// App — gates on auth session; routes to login / user dashboard / admin panel.

const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakSlider, TweakButton } = window;
const { useState, useEffect } = React;

// نسبت ابعاد قاب مرجع (طراحی اصلی) — برای حفظ تناسب روی دسکتاپ
const FRAME_W = 390;
const FRAME_H = 820;
const MOBILE_BP = 600; // زیر این عرض، یک گوشی واقعی فرض می‌شود

// اندازه پنجره را دنبال می‌کند و ابعاد مناسب دستگاه را برمی‌گرداند.
function useResponsiveDevice() {
  const read = () => ({
    w: window.innerWidth,
    h: window.innerHeight,
  });
  const [vp, setVp] = useState(read);

  useEffect(() => {
    const onResize = () => setVp(read());
    window.addEventListener('resize', onResize);
    window.addEventListener('orientationchange', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
      window.removeEventListener('orientationchange', onResize);
    };
  }, []);

  // گوشی واقعی → تمام‌صفحه؛ اندازه‌ها با صفحه نمایش گوشی تنظیم می‌شوند.
  if (vp.w <= MOBILE_BP) {
    return { fullscreen: true, width: '100%', height: '100dvh', outerPad: 0 };
  }

  // دسکتاپ → قاب گوشی با حفظ تناسب، محدود به ارتفاع و عرض پنجره.
  const pad = 24;             // فاصله بیرونی بالا/پایین
  const maxH = vp.h - pad * 2;
  const height = Math.min(FRAME_H, maxH);
  const width = Math.round(height * (FRAME_W / FRAME_H));
  return { fullscreen: false, width, height, outerPad: pad };
}

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0d6e62",
  "dark": false,
  "breakThresholdSec": 3600
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#0d6e62', '#1f4ed8', '#b8430f', '#5b3aa8'];

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const app = window.useAppStore();
  const device = useResponsiveDevice();

  const theme = t.dark
    ? {
        '--bg':       '#0e1212',
        '--surface':  '#181d1d',
        '--ink':      '#f2efe8',
        '--muted':    '#7a807d',
        '--border':   '#262c2c',
        '--icon-bg':  '#222828',
        '--accent':   t.accent,
        '--danger':   '#e0533a',
      }
    : {
        '--bg':       '#f4f1ea',
        '--surface':  '#ffffff',
        '--ink':      '#121615',
        '--muted':    '#7a807d',
        '--border':   '#e6e1d6',
        '--icon-bg':  '#f1ede3',
        '--accent':   t.accent,
        '--danger':   '#c43d28',
      };

  let content;
  if (!app.ready) {
    content = (
      <div style={{
        direction: 'rtl', height: '100%', background: 'var(--bg)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Vazirmatn, system-ui, sans-serif',
        color: 'var(--muted)', fontSize: 13,
      }}>در حال بارگذاری…</div>
    );
  } else if (!app.session) {
    content = <window.LoginScreen />;
  } else if (app.session.mustSetCredentials) {
    content = <window.SetupCredentials />;
  } else if (['admin', 'senior_manager', 'manager', 'supervisor'].includes(app.session.role)) {
    content = <window.AdminApp />;
  } else {
    content = <window.Dashboard breakThresholdSec={t.breakThresholdSec} />;
  }

  return (
    <div style={{
      minHeight: device.fullscreen ? '100dvh' : '100vh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: t.dark ? '#0a0d0d' : '#e9e4d8',
      padding: device.fullscreen ? 0 : '24px 12px',
      backgroundImage: device.fullscreen ? 'none' : (t.dark
        ? 'radial-gradient(circle at 50% 20%, #131717 0%, #0a0d0d 70%)'
        : 'radial-gradient(circle at 50% 20%, #f4f0e3 0%, #e3ddcb 70%)'),
    }}>
      <div style={{ ...theme, ...(device.fullscreen ? { width: '100%', height: '100dvh' } : {}) }}>
        <window.AndroidDevice
          width={device.width}
          height={device.height}
          fullscreen={device.fullscreen}
          dark={t.dark}
        >
          {content}
        </window.AndroidDevice>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="ظاهر">
          <TweakToggle label="حالت تیره" value={t.dark} onChange={v => setTweak('dark', v)} />
          <TweakColor label="رنگ تاکیدی" value={t.accent}
                      options={ACCENT_OPTIONS}
                      onChange={v => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection title="استراحت">
          <TweakSlider
            label="آستانه هشدار (ثانیه)"
            value={t.breakThresholdSec}
            min={5} max={3600} step={5}
            onChange={v => setTweak('breakThresholdSec', v)}
          />
          <TweakButton label="ریست استراحت امروز" onClick={() => window.__resetBreak?.()} />
        </TweakSection>
        <TweakSection title="جلسه">
          <TweakButton
            label={app.session ? 'خروج از حساب' : 'هنوز وارد نشده‌اید'}
            onClick={() => app.session && window.appActions.logout()}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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