import type { FormEvent } from 'react';
import { LocalLoginForm } from '../components/AuthPanel';
import { Card, CardContent, CardDescription, CardHeader } from '../components/ui';
import type { LoadState, LoginForm } from '../types';

export function EmergencyLoginPage(props: {
  loginForm: LoginForm;
  state: LoadState;
  onLoginChange: (value: LoginForm) => void;
  onSubmitLogin: (event: FormEvent<HTMLFormElement>) => void;
}) {
  return (
    <div className="loginRequiredPage">
      <div className="loginRequiredCopy">
        <p className="eyebrow">Emergency Access</p>
        <h1>本地应急登录</h1>
        <p>仅在统一认证中心不可用时使用此入口，登录后可检查并恢复统一认证配置。</p>
      </div>
      <section className="authShell" aria-label="本地应急登录">
        <Card className="authCard">
          <CardHeader>
            <div>
              <p className="eyebrow">Gateway Identity</p>
              <h2 className="shCardTitle">使用本地管理员账号</h2>
              <CardDescription>统一认证启用时，仅本地 Manager 或 Admin 应急账号可以登录。</CardDescription>
            </div>
          </CardHeader>
          <CardContent className="authContent">
            <LocalLoginForm {...props} />
          </CardContent>
        </Card>
      </section>
    </div>
  );
}
