"use client";

import { useActionState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { SubmitButton } from "@/components/fichas/submit-button";
import { initialState } from "@/server/actions/action-state";
import type { ActionState } from "@/server/actions/action-state";
import { toast } from "sonner";

type Props = {
  action: (state: ActionState, formData: FormData) => Promise<ActionState>;
};

export function UserPasswordForm({ action }: Props) {
  const [state, formAction] = useActionState(action, initialState);

  useEffect(() => {
    if (!state.message) return;
    if (state.success) toast.success(state.message);
    else toast.error(state.message);
  }, [state.message, state.success]);

  return (
    <Card className="border-border shadow-sm">
      <CardHeader>
        <CardTitle>Restablecer contraseña</CardTitle>
      </CardHeader>
      <CardContent>
        <form key={state.formVersion ?? "initial"} action={formAction} className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="password">Nueva contraseña</Label>
            <Input id="password" name="password" type="password" autoComplete="new-password" />
            <FieldError messages={state.errors?.password} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirmar contraseña</Label>
            <Input id="confirmPassword" name="confirmPassword" type="password" autoComplete="new-password" />
            <FieldError messages={state.errors?.confirmPassword} />
          </div>
          <div className="md:col-span-2 flex justify-end">
            <SubmitButton label="Restablecer contraseña" />
          </div>
        </form>
      </CardContent>
    </Card>
  );
}

function FieldError({ messages }: { messages?: string[] }) {
  if (!messages?.length) return null;
  return <p className="text-sm text-destructive">{messages[0]}</p>;
}