import { LockKeyhole, ShieldCheck } from 'lucide-react'
import { useState } from 'react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

export function LoginPage({
  submitting,
  localLoginEnabled,
  proxyAuthEnabled,
  onLogin,
}: {
  submitting: boolean
  localLoginEnabled: boolean
  proxyAuthEnabled: boolean
  onLogin: (payload: { username: string; password: string }) => Promise<void>
}) {
  const [username, setUsername] = useState('admin')
  const [password, setPassword] = useState('admin123')

  return (
    <div className="flex min-h-screen items-center justify-center px-4 py-10">
      <div className="grid w-full max-w-5xl gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <Card className="overflow-hidden border-primary/12 bg-gradient-to-br from-card via-card to-primary/5">
          <CardHeader className="space-y-4">
            <div className="inline-flex w-fit items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">
              <ShieldCheck className="h-3.5 w-3.5" />
              Termi 后台
            </div>
            <div className="space-y-3">
              <CardTitle className="text-4xl leading-tight">
                将后台从前台中拆分出来，同时保持迭代节奏不掉线。
              </CardTitle>
              <CardDescription className="max-w-xl text-base leading-7">
                当前管理工作统一在这个独立后台中完成，后端专注提供 API、认证与业务规则。
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="grid gap-4 sm:grid-cols-3">
            {[
              ['React 应用', '独立后台界面'],
              ['shadcn/ui', '统一的组件基础'],
              ['Loco API', '后端继续专注数据与规则'],
            ].map(([title, description]) => (
              <div
                key={title}
                className="rounded-2xl border border-border/70 bg-background/75 p-4"
              >
                <div className="text-sm font-semibold">{title}</div>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-3">
              <span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
                <LockKeyhole className="h-5 w-5" />
              </span>
              登录管理后台
            </CardTitle>
            <CardDescription>
              {localLoginEnabled
                ? '当前登录复用后端管理员账号；如果前面接了 TinyAuth / Pocket ID，也可以直接由反向代理完成 SSO。'
                : proxyAuthEnabled
                  ? '当前后台已切到代理侧 SSO 模式，请从受保护的后台域名入口进入。'
                  : '当前后台未开放本地账号密码登录，请检查部署配置。'}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {localLoginEnabled ? (
              <form
                className="space-y-5"
                onSubmit={(event) => {
                  event.preventDefault()
                  void onLogin({ username, password })
                }}
              >
                <div className="space-y-2">
                  <Label htmlFor="username">用户名</Label>
                  <Input
                    id="username"
                    value={username}
                    onChange={(event) => setUsername(event.target.value)}
                    autoComplete="username"
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="password">密码</Label>
                  <Input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    autoComplete="current-password"
                    required
                  />
                </div>

                <Button className="w-full" size="lg" disabled={submitting}>
                  {submitting ? '登录中...' : '进入后台'}
                </Button>
              </form>
            ) : (
              <div className="space-y-4 rounded-2xl border border-border/70 bg-background/70 p-4 text-sm leading-7 text-muted-foreground">
                <p>推荐通过 Caddy + TinyAuth + Pocket ID 保护整个后台入口。</p>
                <p>如果你已经从受保护的后台域名进入，刷新页面后会自动识别当前 SSO 会话。</p>
                <Button className="w-full" size="lg" onClick={() => window.location.reload()}>
                  重新检查会话
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}