pangolin/src/components/SidebarSupportButton.tsx

"use client";

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { MessageCircle, CheckCircle2 } from "lucide-react";
import { useUserContext } from "@app/hooks/useUserContext";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { cn } from "@app/lib/cn";
import { useToast } from "@app/hooks/useToast";
import {
    Popover,
    PopoverContent,
    PopoverTrigger
} from "@app/components/ui/popover";
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
} from "@app/components/ui/tooltip";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import { Textarea } from "@app/components/ui/textarea";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
} from "@app/components/ui/form";
import { useTranslations } from "next-intl";

type SupportFormValues = {
    subject: string;
    body: string;
};

type SidebarSupportButtonProps = {
    isCollapsed: boolean;
};

export function SidebarSupportButton({
    isCollapsed
}: SidebarSupportButtonProps) {
    const [isOpen, setIsOpen] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSuccess, setIsSuccess] = useState(false);
    const { user } = useUserContext();
    const { env } = useEnvContext();
    const api = createApiClient({ env });
    const { toast } = useToast();
    const t = useTranslations();

    const form = useForm<SupportFormValues>({
        resolver: zodResolver(z.object({
            subject: z
                .string()
                .min(1, t("supportSubjectRequired"))
                .max(255, t("supportSubjectMaxLength")),
            body: z.string().min(1, t("supportMessageRequired"))
        })),
        defaultValues: {
            subject: "",
            body: ""
        }
    });

    const onSubmit = async (data: SupportFormValues) => {
        if (!user?.email) {
            toast({
                variant: "destructive",
                title: t("supportNotAvailableTitle"),
                description: t("supportNotAvailableDescription")
            });
            return;
        }

        setIsSubmitting(true);
        try {
            await api.post("/send-support-request", {
                subject: data.subject,
                body: data.body
            });

            setIsSuccess(true);

            toast({
                title: t("supportRequestSentTitle"),
                description: t("supportRequestSentDescription")
            });

            form.reset();
        } catch (error) {
            toast({
                variant: "destructive",
                title: t("supportRequestFailedTitle"),
                description: formatAxiosError(
                    error,
                    t("supportRequestFailedDescription")
                )
            });
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!user?.email) {
        // Show message that support is not available
        return (
            <Popover open={isOpen} onOpenChange={setIsOpen}>
                {isCollapsed ? (
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <PopoverTrigger asChild>
                                    <Button
                                        size="icon"
                                        className="w-8 h-8"
                                        variant="ghost"
                                    >
                                        <MessageCircle className="h-4 w-4" />
                                    </Button>
                                </PopoverTrigger>
                            </TooltipTrigger>
                            <TooltipContent side="right" sideOffset={8}>
                                <p>{t("support", { defaultValue: "Support" })}</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                ) : (
                    <PopoverTrigger asChild>
                        <Button
                            variant="ghost"
                            className="w-full justify-center gap-2"
                        >
                            <MessageCircle className="h-4 w-4" />
                            {t("support", { defaultValue: "Support" })}
                        </Button>
                    </PopoverTrigger>
                )}
                <PopoverContent className="w-80" align="start">
                    <p className="text-sm text-muted-foreground">
                        {t("supportNotAvailableDescription")}
                    </p>
                </PopoverContent>
            </Popover>
        );
    }

    return (
        <Popover
            open={isOpen}
            onOpenChange={(open) => {
                setIsOpen(open);
                if (!open) {
                    setIsSuccess(false);
                }
            }}
        >
            {isCollapsed ? (
                <TooltipProvider>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <PopoverTrigger asChild>
                                <Button
                                    size="icon"
                                    className="w-8 h-8"
                                    variant="outline"
                                >
                                    <MessageCircle className="h-4 w-4" />
                                </Button>
                            </PopoverTrigger>
                        </TooltipTrigger>
                        <TooltipContent side="right" sideOffset={8}>
                            <p>{t("messageSupport")}</p>
                        </TooltipContent>
                    </Tooltip>
                </TooltipProvider>
            ) : (
                <PopoverTrigger asChild>
                    <Button
                        variant="outline"
                        className="w-full justify-center gap-2"
                    >
                        <MessageCircle className="h-4 w-4" />
                        {t("messageSupport")}
                    </Button>
                </PopoverTrigger>
            )}
            <PopoverContent className="w-96" align="start">
                {isSuccess ? (
                    <div className="flex flex-col items-center justify-center py-8 space-y-4">
                        <CheckCircle2 className="h-16 w-16 text-green-500" />
                        <h3 className="text-lg font-semibold">{t("supportMessageSent")}</h3>
                        <p className="text-sm text-muted-foreground text-center">
                            {t("supportWillContact")}
                        </p>
                    </div>
                ) : (
                    <Form {...form}>
                        <form
                            onSubmit={form.handleSubmit(onSubmit)}
                            className="space-y-4"
                        >
                        <FormItem>
                            <FormLabel>{t("supportReplyTo")}</FormLabel>
                            <FormControl>
                                <Input
                                    value={user?.email || ""}
                                    disabled
                                />
                            </FormControl>
                        </FormItem>

                        <FormField
                            control={form.control}
                            name="subject"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{t("supportSubject")}</FormLabel>
                                    <FormControl>
                                        <Input
                                            placeholder={t("supportSubjectPlaceholder")}
                                            disabled={isSubmitting}
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        <FormField
                            control={form.control}
                            name="body"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{t("supportMessage")}</FormLabel>
                                    <FormControl>
                                        <Textarea
                                            placeholder={t("supportMessagePlaceholder")}
                                            rows={5}
                                            disabled={isSubmitting}
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        <div className="flex justify-end gap-2">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setIsOpen(false)}
                                disabled={isSubmitting}
                            >
                                {t("cancel")}
                            </Button>
                            <Button type="submit" disabled={isSubmitting} loading={isSubmitting}>
                                {t("supportSend")}
                            </Button>
                        </div>
                    </form>
                </Form>
                )}
            </PopoverContent>
        </Popover>
    );
}