// T2 Falcon — App shell: orchestrates screens, state picker, tweaks, language

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

const SCREEN_OPTIONS = [
  { group: 'Login',            items: [
    { id: 'login',            label: 'Login — default' },
    { id: 'login-required',   label: 'Login — required fields' },
    { id: 'login-incorrect',  label: 'Login — incorrect credentials' },
    { id: 'login-usernameWrong', label: 'Login — username incorrect' },
    { id: 'login-attempts2',  label: 'Login — 1 attempt left (warn)' },
    { id: 'login-attempts1',  label: 'Login — last attempt (warn)' },
    { id: 'login-lockedAttempts', label: 'Login — locked after 3 attempts' },
    { id: 'login-locked',     label: 'Login — user locked' },
    { id: 'login-suspended',  label: 'Login — suspended (v1)' },
    { id: 'login-suspendedAlt', label: 'Login — suspended (v2)' },
    { id: 'login-pending',    label: 'Login — pending status' },
    { id: 'login-deleted',    label: 'Login — deleted account' },
    { id: 'login-ip',         label: 'Login — IP restricted' },
    { id: 'login-loading',    label: 'Login — signing in (loading)' },
  ]},
  { group: 'Forgot Password',  items: [
    { id: 'forgot',           label: 'Forgot Password — form' },
  ]},
  { group: 'OTP',              items: [
    { id: 'otp',              label: 'Enter OTP — empty' },
    { id: 'otp-invalid',      label: 'Enter OTP — invalid code' },
    { id: 'otp-success',      label: 'OTP Verified — success' },
  ]},
  { group: 'Reset Password',   items: [
    { id: 'reset',             label: 'Reset Password — empty' },
    { id: 'reset-mismatch',    label: 'Reset Password — mismatch' },
    { id: 'change',            label: 'Change Password' },
    { id: 'done',              label: 'Password Updated' },
  ]},
  { group: 'Overview',         items: [
    { id: 'flow',              label: 'Flow Map' },
  ]},
];

// Default tweaks (persisted block)
const TWEAKS = /*EDITMODE-BEGIN*/{
  "startScreen": "login",
  "primaryTeal": "#0d3f44",
  "accentCyan": "#2dd4d9"
}/*EDITMODE-END*/;

const App = () => {
  const [lang, setLang] = useS(() => localStorage.getItem('t2-lang') || 'en');
  const [screen, setScreen] = useS(() => localStorage.getItem('t2-screen') || TWEAKS.startScreen || 'login');
  const [loading, setLoading] = useS(false);
  const [editMode, setEditMode] = useS(false);
  const [pickerOpen, setPickerOpen] = useS(false);

  const t = STRINGS[lang];
  const dir = lang === 'ar' ? 'rtl' : 'ltr';

  useE(() => {
    document.body.dir = dir;
    document.documentElement.lang = lang;
    localStorage.setItem('t2-lang', lang);
  }, [lang, dir]);

  useE(() => {
    localStorage.setItem('t2-screen', screen);
  }, [screen]);

  // Edit-mode protocol
  useE(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Parse screen id → base + variant
  const [base, variant] = useM(() => {
    const parts = screen.split('-');
    if (parts[0] === 'login' && parts.length > 1) return ['login', parts.slice(1).join('-')];
    if (parts[0] === 'otp' && parts.length > 1) return ['otp', parts.slice(1).join('-')];
    if (parts[0] === 'reset' && parts.length > 1) return ['reset', parts.slice(1).join('-')];
    return [screen, null];
  }, [screen]);

  const goLogin = () => setScreen('login');
  const goForgot = () => setScreen('forgot');
  const goOtp = () => setScreen('otp');
  const goOtpInvalid = () => setScreen('otp-invalid');
  const goSuccess = () => setScreen('otp-success');
  const goReset = () => setScreen('reset');
  const goDone = () => setScreen('done');

  const jumpFromFlow = (id) => {
    const map = {
      'login-err': 'login-incorrect',
      'otp-err': 'otp-invalid',
      'success': 'otp-success',
      'portal': 'login', // no portal yet
    };
    setScreen(map[id] || id);
  };

  const handleLogin = ({ username, password }) => {
    if (!username || !password) { setScreen('login-required'); return; }
    // Demo: "admin" / "admin" (or any non-error-trigger combo) routes to Falcon Admin
    if (username.toLowerCase() === 'admin' && password === 'admin') {
      setLoading(true);
      setTimeout(() => { window.location.href = 'T2 Falcon Admin.html'; }, 700);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setScreen('login-incorrect');
    }, 900);
  };

  const renderForm = () => {
    if (screen === 'flow') {
      return <FlowMap onJump={jumpFromFlow} />;
    }

    if (base === 'login') {
      const errMap = {
        'required': 'required',
        'incorrect': 'incorrect',
        'usernameWrong': 'usernameWrong',
        'attempts2': 'attempts2',
        'attempts1': 'attempts1',
        'lockedAttempts': 'lockedAttempts',
        'locked': 'locked',
        'suspended': 'suspended',
        'suspendedAlt': 'suspendedAlt',
        'pending': 'pending',
        'deleted': 'deleted',
        'ip': 'ip',
      };
      return <LoginScreen
        t={t}
        error={errMap[variant] || null}
        loading={variant === 'loading' || loading}
        onSubmit={handleLogin}
        onForgot={goForgot}
      />;
    }
    if (screen === 'forgot') {
      return <ForgotScreen t={t} onSubmit={goOtp} onBack={goLogin} />;
    }
    if (base === 'otp') {
      if (variant === 'success') {
        return <SuccessScreen t={t} onContinue={goReset} />;
      }
      return <OtpScreen
        t={t}
        error={variant === 'invalid' ? 'invalid' : null}
        onVerify={goSuccess}
        onResend={() => {}}
        onBack={() => setScreen('forgot')}
      />;
    }
    if (base === 'reset') {
      return <ResetScreen
        t={t}
        mode="reset"
        onSubmit={goDone}
        onBack={() => setScreen('otp-success')}
      />;
    }
    if (screen === 'change') {
      return <ResetScreen t={t} mode="change" onSubmit={goDone} onBack={goLogin} />;
    }
    if (screen === 'done') {
      return <AllDoneScreen t={t} onBackToLogin={goLogin} />;
    }
    return null;
  };

  const isFlow = screen === 'flow';

  return (
    <>
      <div className="auth-shell" data-screen-label={screen}>
        {!isFlow && <Marketing t={t} />}
        {isFlow && <aside className="marketing flow-side"><div className="brand-row">
          <BrandLogo size={44} />
          <div className="brand-text">{t.brand}<small>{t.brandSub}</small></div>
        </div>
        <div className="hero">
          <div className="hero-eyebrow"><span className="dot"></span>System Overview</div>
          <h1>Authentication <span className="accent">Flow</span></h1>
          <p>Every screen, every error state, and how they connect. Click a node on the right to jump into that state.</p>
        </div>
        <div className="marketing-footer">
          <div>{t.footerCopy}</div>
        </div>
        </aside>}

        <div className={`form-panel ${isFlow ? 'form-panel--wide' : ''}`}>
          <div className="form-top">
            <div className="lang-toggle" role="tablist" aria-label="Language">
              <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
              <button className={lang === 'ar' ? 'active' : ''} onClick={() => setLang('ar')}>العربية</button>
            </div>
            <div className="support-link">
              {t.needHelp} <a href="#">{t.contactSupport}</a>
            </div>
          </div>

          <div className={`form-body ${isFlow ? 'form-body--wide' : ''}`}>
            {renderForm()}
          </div>

          <div className="bottom-nav">
            <button className="chip-nav" onClick={() => setScreen('flow')} title="Flow map">
              <Icon name="globe" size={14} /> Flow map
            </button>
            <button className="chip-nav" onClick={() => setPickerOpen(v => !v)} title="Jump to any screen">
              <Icon name="chevron-down" size={14} /> Jump to screen
            </button>
          </div>
        </div>
      </div>

      {/* Floating state picker — always available (independent of editMode) */}
      {pickerOpen && (
        <div className="picker" role="dialog" aria-label="Screen picker">
          <div className="picker-head">
            <strong>Jump to screen</strong>
            <button className="picker-close" onClick={() => setPickerOpen(false)}><Icon name="x" size={16} /></button>
          </div>
          <div className="picker-body">
            {SCREEN_OPTIONS.map(group => (
              <div key={group.group} className="picker-group">
                <div className="picker-group-title">{group.group}</div>
                {group.items.map(it => (
                  <button
                    key={it.id}
                    className={`picker-item ${screen === it.id ? 'active' : ''}`}
                    onClick={() => { setScreen(it.id); setPickerOpen(false); }}
                  >
                    <span className="picker-dot" />
                    {it.label}
                  </button>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {editMode && (
        <div className="tweaks-panel" role="complementary" aria-label="Tweaks">
          <div className="tweaks-head">
            <strong>Tweaks</strong>
            <span className="tweaks-badge">Edit mode</span>
          </div>
          <div className="tweaks-body">
            <label className="tweak-row">
              <span>Language</span>
              <div className="lang-toggle" style={{ padding: 3 }}>
                <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
                <button className={lang === 'ar' ? 'active' : ''} onClick={() => setLang('ar')}>AR</button>
              </div>
            </label>
            <label className="tweak-row col">
              <span>Screen / state</span>
              <select value={screen} onChange={(e) => setScreen(e.target.value)}>
                {SCREEN_OPTIONS.map(g => (
                  <optgroup key={g.group} label={g.group}>
                    {g.items.map(it => <option key={it.id} value={it.id}>{it.label}</option>)}
                  </optgroup>
                ))}
              </select>
            </label>
            <div className="tweak-hint">Everything is wired: OTP countdown, resend, match/mismatch, caps-lock, loading, RTL.</div>
          </div>
        </div>
      )}
    </>
  );
};

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