import { FormEvent, useState } from "react";

import { login, setToken } from "@/api";
import { Alert, AlertDescription } 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";

export function LoginPage({ onDone }: { onDone: () => void }) {
  const [email, setEmail] = useState("admin@example.com");
  const [password, setPassword] = useState("ChangeMe123!");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = async (event: FormEvent) => {
    event.preventDefault();
    setLoading(true);
    setError("");
    try {
      const result = await login(email, password);
      setToken(result.token);
      onDone();
    } catch (err) {
      setError(err instanceof Error ? err.message : "登录失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="login-shell">
      <Card className="login-panel">
        <CardHeader className="p-0">
          <CardTitle>万趣小程序管理端</CardTitle>
          <CardDescription>按前台页面结构维护内容、商品和线索。</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          <form className="login-form-stack" onSubmit={submit}>
            <label>
              账号
              <Input value={email} onChange={(event) => setEmail(event.target.value)} autoComplete="username" />
            </label>
            <label>
              密码
              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="current-password" />
            </label>
            {error ? (
              <Alert variant="warning">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            ) : null}
            <Button disabled={loading}>{loading ? "登录中" : "登录"}</Button>
          </form>
        </CardContent>
      </Card>
    </main>
  );
}