'use client';
import { useParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogFooter,
} from '@/components/ui/dialog';
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import useAddBalance from '../../hooks/UseAddBalance';
import { toast } from 'sonner';
import { useState } from 'react';

const formSchema = z.object({
    type_balance: z.coerce.number().refine((val) => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].includes(val), {
        message: 'Please select a valid balance type',
    }),
    amount: z.coerce.number().min(1, 'Amount must be at least 1'),
});

type FormValues = z.infer<typeof formSchema>;

export default function AddBalanceModal({userId}: {userId: number}) {
   
    const [open, setOpen] = useState(false);
    const { mutateAsync: addBalance ,isPending } = useAddBalance();
    const form = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            type_balance: undefined,
            amount: 0,
        },
    });

    const onSubmit = (values: FormValues) => {
        const payload = {
            user_id: userId,
            type_balance: values.type_balance,
            amount: values.amount,
        };
        addBalance(payload, {
            onSuccess: () => {
                toast.success('Balance added successfully');
                setOpen(false);
                form.reset();
            },
            onError: (error) => {
                toast.error(error?.message ?? 'Failed to add balance');
            }
        })
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button size="sm" variant="outline" onClick={(e) => e.stopPropagation()}>
                    Add Balance
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
                <DialogHeader>
                    <DialogTitle>Add Balance</DialogTitle>
                </DialogHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                        <FormField
                            control={form.control}
                            name="type_balance"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Balance Type</FormLabel>
                                    <Select
                                        onValueChange={field.onChange}
                                        defaultValue={field.value?.toString()}
                                    >
                                        <FormControl>
                                            <SelectTrigger>
                                                <SelectValue placeholder="Select balance type" />
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent>
                                            <SelectItem value="1">Reports Balance</SelectItem>
                                            <SelectItem value="2">Search Balance</SelectItem>
                                            <SelectItem value="3">Social Listening Balance</SelectItem>
                                            <SelectItem value="4">Lookalike Balance</SelectItem>
                                            <SelectItem value="5">Network Balance</SelectItem>
                                            <SelectItem value="6">Campaign Management Balance</SelectItem>
                                            <SelectItem value="7">Competitor Analysis Balance</SelectItem>
                                            <SelectItem value="8">Phone Number Balance</SelectItem>
                                            <SelectItem value="9">Media Plan Balance</SelectItem>
                                            <SelectItem value="10">Media Plan Creators Balance</SelectItem>
                                            <SelectItem value="11">WhatsApp Messages Balance</SelectItem>
                                            <SelectItem value="12">Collaboration Requests Balance</SelectItem>
                                            <SelectItem value="13">Relationship Lists Limit</SelectItem>
                                            <SelectItem value="14">Influencers per List Limit</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="amount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Amount</FormLabel>
                                    <FormControl>
                                        <Input type="number" placeholder="Enter amount" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <DialogFooter>
                            <Button type="submit" >{isPending ? 'Adding...' : 'Add'}</Button>
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}