import * as React from 'react'
import { AlertCircle, CheckCircle2, LockKeyhole, Sparkles, UserRound, Workflow } from 'lucide-react'

import { AppField } from '@/components/app/AppField'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

import { useAuth } from './AuthProvider'

export function LoginPage() {
  const { login } = useAuth()
  const [username, setUsername] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [error, setError] = React.useState('')
  const [submitting, setSubmitting] = React.useState(false)

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError('')
    setSubmitting(true)
    try { await login(username, password) }
    catch { setError('登录失败，请检查账号、密码或后端服务状态。') }
    finally { setSubmitting(false) }
  }

  return (
    <main className="min-h-screen bg-background text-foreground">
      <div className="grid min-h-screen lg:grid-cols-[minmax(0,1fr)_480px]">
        <section className="relative hidden overflow-hidden bg-primary px-12 py-10 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
          <div className="absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_20%_20%,white_0,transparent_34%),linear-gradient(120deg,transparent_45%,white_46%,transparent_47%)]" />
          <div className="relative flex items-center gap-3"><span className="flex size-10 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25"><Workflow /></span><div><p className="font-semibold">智服台</p><p className="text-xs text-white/70">AI 技术支持工作台</p></div></div>
          <div className="relative max-w-2xl"><span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20"><Sparkles className="size-3.5" />知识与工单协同</span><h1 className="mt-5 text-4xl font-semibold leading-tight tracking-[-0.035em]">让每一次技术支持<br />都有清晰依据与下一步</h1><p className="mt-5 max-w-xl text-base leading-7 text-white/72">统一管理工单、解决方案和知识资产，通过结构化 Agent 工作区辅助排查与沟通。</p></div>
          <div className="relative grid max-w-2xl grid-cols-3 gap-3">{['集中处理待办', '复用解决方案', '追踪审计记录'].map((item) => <div key={item} className="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-3 text-sm ring-1 ring-white/15"><CheckCircle2 className="size-4" />{item}</div>)}</div>
        </section>

        <section className="flex min-h-screen items-center justify-center px-5 py-8 sm:px-10">
          <div className="w-full max-w-[400px]">
            <div className="mb-7 flex items-center gap-3 lg:hidden"><span className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"><Workflow /></span><div><p className="font-semibold">智服台</p><p className="text-xs text-muted-foreground">AI 技术支持工作台</p></div></div>
            <Card className="gap-5 py-6 app-panel-shadow">
              <CardHeader className="px-6"><CardTitle className="text-xl">登录工作台</CardTitle><CardDescription>使用企业账号进入技术支持工作区</CardDescription></CardHeader>
              <CardContent className="px-6">
                <form className="grid gap-4" onSubmit={handleSubmit}>
                  {error ? <Alert variant="destructive"><AlertCircle className="size-4" /><AlertTitle>无法登录</AlertTitle><AlertDescription>{error}</AlertDescription></Alert> : null}
                  <AppField label="账号" htmlFor="username" invalid={Boolean(error)} required><div className="relative"><UserRound className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" /><Input id="username" autoComplete="username" aria-invalid={Boolean(error)} className="pl-9" value={username} onChange={(event) => setUsername(event.target.value)} placeholder="请输入账号" /></div></AppField>
                  <AppField label="密码" htmlFor="password" invalid={Boolean(error)} required><div className="relative"><LockKeyhole className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" /><Input id="password" type="password" autoComplete="current-password" aria-invalid={Boolean(error)} className="pl-9" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="请输入密码" /></div></AppField>
                  <Button type="submit" size="lg" className="mt-1 w-full" disabled={submitting || !username || !password}>{submitting ? '登录中...' : '登录'}</Button>
                  {import.meta.env.DEV ? <div className="rounded-lg bg-muted px-3 py-2 text-xs leading-5 text-muted-foreground"><strong className="text-foreground">本地开发演示：</strong> admin / admin12345</div> : null}
                </form>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </main>
  )
}