import { useState } from "react";
import { Redirect, useLocation } from "wouter";
import { trpc } from "@/lib/trpc";
import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Login() {
  const { user, loading } = useAuth();
  const [, setLocation] = useLocation();
  const utils = trpc.useUtils();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const login = trpc.auth.login.useMutation({
    onSuccess: async (signedInUser) => {
      utils.auth.me.setData(undefined, signedInUser);
      await utils.auth.me.invalidate();
      setLocation(signedInUser.mustChangePassword === 1 ? "/change-password" : "/");
    },
  });

  if (!loading && user) return <Redirect to={user.mustChangePassword === 1 ? "/change-password" : "/"} />;

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <form
        className="w-full max-w-sm industrial-panel p-8 space-y-5"
        onSubmit={(event) => {
          event.preventDefault();
          login.mutate({ username, password });
        }}
      >
        <div>
          <h1 className="text-xl font-semibold">宏量点云处理系统</h1>
          <p className="text-sm text-muted-foreground mt-1">使用本地账号登录</p>
        </div>
        <div className="space-y-2">
          <Label htmlFor="username">用户名</Label>
          <Input id="username" autoComplete="username" autoFocus value={username} onChange={e => setUsername(e.target.value)} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">密码</Label>
          <Input id="password" type="password" autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} required />
        </div>
        {login.error && <p className="text-sm text-destructive" role="alert">{login.error.message}</p>}
        <Button className="w-full" type="submit" disabled={login.isPending || !username || !password}>
          {login.isPending ? "正在登录…" : "登录"}
        </Button>
      </form>
    </div>
  );
}