"use client";

import { useRef, useState, type FormEvent } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth/client";

export function PasswordForm() {
  const formRef = useRef<HTMLFormElement>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  async function changePassword(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy) return;
    const form = new FormData(event.currentTarget);
    const currentPassword = String(form.get("currentPassword") ?? "");
    const newPassword = String(form.get("newPassword") ?? "");
    const confirmPassword = String(form.get("confirmPassword") ?? "");
    setError("");
    setSuccess(false);
    if (newPassword !== confirmPassword) {
      setError("รหัสผ่านใหม่ไม่ตรงกัน");
      return;
    }
    setBusy(true);
    try {
      const result = await authClient.changePassword({ currentPassword, newPassword });
      if (result.error) {
        setError(result.error.code === "INVALID_PASSWORD"
          ? "รหัสผ่านปัจจุบันไม่ถูกต้อง"
          : "เปลี่ยนรหัสผ่านไม่สำเร็จ กรุณาลองอีกครั้ง");
        return;
      }
      formRef.current?.reset();
      setSuccess(true);
    } catch {
      setError("เปลี่ยนรหัสผ่านไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      setBusy(false);
    }
  }

  return <Card>
    <CardHeader>
      <CardTitle>เปลี่ยนรหัสผ่าน</CardTitle>
      <CardDescription>กรอกรหัสผ่านปัจจุบันและรหัสผ่านใหม่</CardDescription>
    </CardHeader>
    <CardContent>
      <form id="password-form" ref={formRef} onSubmit={changePassword}>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="current-password">รหัสผ่านปัจจุบัน</FieldLabel>
            <Input id="current-password" name="currentPassword" type="password"
              autoComplete="current-password" required disabled={busy} />
          </Field>
          <Field>
            <FieldLabel htmlFor="new-password">รหัสผ่านใหม่</FieldLabel>
            <Input id="new-password" name="newPassword" type="password"
              autoComplete="new-password" minLength={6} maxLength={128} required disabled={busy} />
          </Field>
          <Field>
            <FieldLabel htmlFor="confirm-password">ยืนยันรหัสผ่านใหม่</FieldLabel>
            <Input id="confirm-password" name="confirmPassword" type="password"
              autoComplete="new-password" minLength={6} maxLength={128} required disabled={busy} />
          </Field>
          {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
          {success && <Alert><AlertDescription>เปลี่ยนรหัสผ่านเรียบร้อยแล้ว</AlertDescription></Alert>}
        </FieldGroup>
      </form>
    </CardContent>
    <CardFooter>
      <Button type="submit" form="password-form" disabled={busy}>
        {busy ? "กำลังเปลี่ยนรหัสผ่าน..." : "เปลี่ยนรหัสผ่าน"}
      </Button>
    </CardFooter>
  </Card>;
}