"use client";

import { useActionState, useEffect, useRef } from "react";
import { Key, CircleNotch } from '@/lib/icons';
import { toast } from "sonner";

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";
import { updatePasswordAction } from "@/lib/appwrite/profile-actions";
import { initialProfileState } from "@/lib/appwrite/profile-types";

export function PasswordForm() {
  const [state, formAction, isPending] = useActionState(
    updatePasswordAction,
    initialProfileState,
  );
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (state.ok) {
      toast.success("Şifre değiştirildi.");
      formRef.current?.reset();
    } else if (state.error) {
      toast.error(state.error);
    }
  }, [state]);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Şifre</CardTitle>
        <CardDescription>
          Şifrenizi değiştirmek için mevcut şifrenizi ve yeni şifreyi iki kez girin.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form ref={formRef} action={formAction} className="grid gap-4 md:grid-cols-3">
          <div className="grid gap-2">
            <Label htmlFor="oldPassword">Mevcut şifre</Label>
            <Input
              id="oldPassword"
              name="oldPassword"
              type="password"
              autoComplete="current-password"
              required
            />
            {state.fieldErrors?.oldPassword && (
              <p className="text-destructive text-xs">{state.fieldErrors.oldPassword}</p>
            )}
          </div>
          <div className="grid gap-2">
            <Label htmlFor="newPassword">Yeni şifre</Label>
            <Input
              id="newPassword"
              name="newPassword"
              type="password"
              autoComplete="new-password"
              minLength={8}
              required
            />
            {state.fieldErrors?.newPassword && (
              <p className="text-destructive text-xs">{state.fieldErrors.newPassword}</p>
            )}
          </div>
          <div className="grid gap-2">
            <Label htmlFor="confirmPassword">Yeni şifre (tekrar)</Label>
            <Input
              id="confirmPassword"
              name="confirmPassword"
              type="password"
              autoComplete="new-password"
              minLength={8}
              required
            />
            {state.fieldErrors?.confirmPassword && (
              <p className="text-destructive text-xs">{state.fieldErrors.confirmPassword}</p>
            )}
          </div>
          <div className="md:col-span-3 flex justify-end">
            <Button type="submit" disabled={isPending}>
              {isPending ? (
                <>
                  <CircleNotch className="size-4 animate-spin" />
                  Güncelleniyor...
                </>
              ) : (
                <>
                  <Key className="size-4" />
                  Şifreyi değiştir
                </>
              )}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
