"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Loader2, UserCheck } from "lucide-react";

import { useConvertToMember } from "@/hooks/clients/use-clients-queries";
import type { Client } from "@/types/clients";

const memberConversionSchema = z.object({
  reason: z.string().optional(),
  notes: z.string().optional(),
});

type MemberConversionValues = z.infer<typeof memberConversionSchema>;

interface ConvertToMemberDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  client: Client | null;
}

export function ConvertToMemberDialog({ open, onOpenChange, client }: ConvertToMemberDialogProps) {
  const convertToMemberMutation = useConvertToMember();

  const form = useForm<MemberConversionValues>({
    resolver: zodResolver(memberConversionSchema),
    defaultValues: {
      reason: "",
      notes: "",
    },
  });

  const handleSubmit = async (values: MemberConversionValues) => {
    if (!client) return;

    try {
      await convertToMemberMutation.mutateAsync({
        id: client.id,
        data: values,
      });
      onOpenChange(false);
      form.reset();
    } catch (error) {
      console.error("Erreur lors de la conversion:", error);
    }
  };

  const handleCancel = () => {
    onOpenChange(false);
    form.reset();
  };

  if (!client) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <UserCheck className="h-5 w-5" />
            Convertir en membre
          </DialogTitle>
          <DialogDescription>
            Convertir <strong>{client.full_name}</strong> en membre de la coopérative. Cette action créera
            automatiquement un numéro de membre et mettra à jour le statut.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="reason"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Raison de la conversion</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Ex: Respect des critères d'adhésion, demande du client..." {...field} />
                  </FormControl>
                  <FormDescription>Optionnel : Précisez la raison de cette conversion</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="notes"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Notes additionnelles</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Notes internes sur cette conversion..." {...field} />
                  </FormControl>
                  <FormDescription>Optionnel : Notes internes pour l'équipe</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
              <h4 className="mb-2 text-sm font-medium text-blue-900">Après conversion, ce client :</h4>
              <ul className="space-y-1 text-sm text-blue-800">
                <li>• Recevra un numéro de membre unique</li>
                <li>• Aura accès aux services réservés aux membres</li>
                <li>• Pourra participer aux assemblées générales</li>
                <li>• Bénéficiera des avantages membres</li>
              </ul>
            </div>

            <div className="flex justify-end space-x-2">
              <Button
                type="button"
                variant="outline"
                onClick={handleCancel}
                disabled={convertToMemberMutation.isPending}
              >
                Annuler
              </Button>
              <Button type="submit" disabled={convertToMemberMutation.isPending}>
                {convertToMemberMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Confirmer la conversion
              </Button>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}