"use client";
import { useToken } from "@/hooks/use-token";
import axios from "axios";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { useLanguage } from "@/store/language-context";
import { useToast } from "@/hooks/use-toast";

import { BadgeCheck, Bomb, Loader } from "lucide-react";
import { Button } from "@/components/ui/button";

import ServiceRegisterNoAuth from "@/ui/service-no-auth";
import { useMutation } from "@tanstack/react-query";
import { cn } from "@/lib/utils";

const ServiceRegisterAuth = ({ serviceId, serviceName, className, label }:
    { serviceId: number, serviceName: string, className?: string, label?: string }
) => {
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { toast } = useToast();
    const token = useToken();

    const [open, setOpen] = useState(false);

    const registerInService = useMutation({
        mutationKey: ['resgitser-in-service', serviceId, serviceName],
        mutationFn: async () => {
            if (!token) {
                setOpen(true);
                return;
            }
            const response = await axios.post(`${URL}/service-register-auth`, { service_id: serviceId }, {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });
            if (response.status !== 200) throw new Error(response.statusText);
            return response;
        },
        onSuccess: (response) => {
            if (response) {
                toast({
                    variant: 'success',
                    title: (
                        <div className="flex items-center gap-2">
                            <span>
                                <BadgeCheck />
                            </span>
                            <p>
                                {t('custom.done-check')}
                            </p>
                        </div>
                    ),
                    description: t('custom.done-desc')
                });
            }
        },
        onError: (err) => {
            if (err) {
                toast({
                    variant: "destructive",
                    title: (
                        <div className="flex items-center gap-2">
                            <span>
                                <Bomb />
                            </span>
                            <p>
                                {t('custom.failed')}
                            </p>
                        </div>
                    ),
                    description: t('custom.err')
                });
            }
            return;
        }
    });

    return (
        <>
            <div className="flex justify-center items-center w-full my-8">
                <Button
                    variant="outline"
                    disabled={registerInService.isPending}
                    onClick={() => registerInService.mutate()}
                    className={cn("bg-primary-tw text-white", className)}>
                    <span>
                        {label ?? t('leadership.order-now')}
                    </span>
                    {registerInService.isPending && <Loader className="animate-spin" />}
                </Button>
            </div>

            <ServiceRegisterNoAuth
                setOpen={setOpen}
                open={open}
                isService={true}
                serviceName={serviceName}
                serviceId={serviceId}
                packageName={''}
            />
        </>
    );
};

export default ServiceRegisterAuth;