"use client";
import React, { useCallback } from "react";
import { useRouter } from "next/navigation";
import { CheckIcon, Loader2, XIcon } from "lucide-react";
import { toast } from "sonner";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { InvitationSkeleton } from "@/components/invitation/blocks/invitation-skeleton";
import { InvitationError } from "@/components/invitation/blocks/invitation-error";
import { api } from "@/lib/trpc/client";
import { InvitationStatus } from "@/server/modules/organization/types/invitation-status.enum";

type Props = {
    invitationId: string;
};

// TODO: Find proper component name
export const Invitation: React.FC<Props> = (props) => {
    const {
        invitationId
    } = props;

    const router = useRouter();

    const {
        isLoading,
        data: invitation,
    } = api.organization.invitation.get.useQuery({
        with: ["organization", "inviter"],
        id: invitationId
    });

    const acceptInvitationMutation = api.organization.invitation.accept.useMutation({
        onSuccess() {
            router.push(`/profile`);
        },
        onError(error) {
            if(error.message) {
                toast.error(error.message);
            }
            else {
                toast.error("An error occurred while accepting the invitation");
            }
        }
    });

    const rejectInvitationMutation = api.organization.invitation.reject.useMutation({
        onSuccess() {
            router.push(`/profile`);
        },
        onError(error) {
            if(error.message) {
                toast.error(error.message);
            }
            else {
                toast.error("An error occurred");
            }
        }
    });

    const handleAccept = useCallback(async () => {
        await acceptInvitationMutation.mutateAsync({
            id: invitationId
        });
    }, [acceptInvitationMutation, invitationId]);

    const handleReject = useCallback(async () => {
        await rejectInvitationMutation.mutateAsync({
            id: invitationId
        });
    }, [rejectInvitationMutation, invitationId]);

    if(isLoading) {
        return (
            <InvitationSkeleton />
        );
    }

    if(!invitation) {
        return (
            <InvitationError />
        );
    }

    return (
        <Card className="w-full max-w-md">
            <CardHeader>
                <CardTitle>Organisationsinvitation</CardTitle>

                <CardDescription>
                    Du er blevet inviteret til at deltage i en organisation
                </CardDescription>
            </CardHeader>

            <CardContent>
                {invitation.status === InvitationStatus.PENDING && (
                    <div className="space-y-4">
                        <p>
                            <strong>{invitation.email}</strong>{" "}
                            {"har inviteret dig til at deltage i"}{" "}
                            <strong>{invitation.organization?.name}</strong>.
                        </p>
                        <p>
                            Denne invitation blev sendt til <strong>{invitation.email}</strong>.
                        </p>
                    </div>
                )}

                {invitation.status === InvitationStatus.ACCEPTED && (
                    <div className="space-y-4">
                        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
                            <CheckIcon className="h-8 w-8 text-green-600" />
                        </div>

                        <h2 className="text-center text-2xl font-bold">
                            Velkommen til {invitation.organization?.name}!
                        </h2>

                        <p className="text-center">
                            Du har succesfuldt tilmeldt dig organisationen. Vi er spændte på at have dig med!
                        </p>
                    </div>
                )}

                {invitation.status === InvitationStatus.REJECTED && (
                    <div className="space-y-4">
                        <div
                            className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
                            <XIcon className="h-8 w-8 text-red-600" />
                        </div>
                        <h2 className="text-center text-2xl font-bold">Invitation afvist</h2>
                        <p className="text-center">
                            Du har afvist invitationen til at deltage i {invitation.organization?.name}.
                        </p>
                    </div>
                )}
            </CardContent>

            {invitation.status === InvitationStatus.PENDING && (
                <CardFooter className="flex justify-between">
                    <Button
                      variant="outline"
                      disabled={acceptInvitationMutation.isPending || rejectInvitationMutation.isPending}
                      onClick={handleReject}>
                        {rejectInvitationMutation.isPending && (
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        )}

                        Afvis
                    </Button>

                    <Button
                      disabled={acceptInvitationMutation.isPending || rejectInvitationMutation.isPending}
                      onClick={handleAccept}>
                        {acceptInvitationMutation.isPending && (
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        )}

                        Accepter invitation
                    </Button>
                </CardFooter>
            )}
        </Card>
    );
};