"use client";

import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { useSendCampaign } from "@/modules/campaigns/hooks";
import { sendCampaignSchema, type SendCampaignInput } from "@/modules/campaigns/schemas";
import { useToast } from "@/hooks/use-toast";
import { ArrowLeft, Send } from "lucide-react";

export default function SendCampaignPage() {
    const router = useRouter();
    const { toast } = useToast();
    const sendMutation = useSendCampaign();

    const {
        register,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<SendCampaignInput>({
        resolver: zodResolver(sendCampaignSchema),
        defaultValues: {
            data: {},
        },
    });

    const onSubmit = async (data: SendCampaignInput) => {
        try {
            await sendMutation.mutateAsync(data);
            toast({
                title: "Campaign sent",
                description: "Campaign has been sent successfully to the user",
            });
            reset();
            router.push("/campaigns");
        } catch (error) {
            toast({
                title: "Send failed",
                description: "Failed to send campaign",
                variant: "destructive",
            });
        }
    };

    return (
        <div className="space-y-6">
            <div className="flex items-center gap-4">
                <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => router.push("/campaigns")}
                >
                    <ArrowLeft className="h-4 w-4" />
                </Button>
                <div>
                    <h1 className="text-3xl font-bold">Send Single Campaign</h1>
                    <p className="text-muted-foreground">
                        Send an immediate campaign to a specific user
                    </p>
                </div>
            </div>

            <Card className="max-w-2xl">
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Send className="h-5 w-5" />
                        Send Campaign
                    </CardTitle>
                    <CardDescription>
                        Send a notification campaign immediately to a specific user
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="userID">User ID</Label>
                            <Input
                                id="userID"
                                {...register("userID")}
                                placeholder="CH9QX5WB"
                            />
                            {errors.userID && (
                                <p className="text-sm text-destructive">
                                    {errors.userID.message}
                                </p>
                            )}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="title">Title</Label>
                            <Input
                                id="title"
                                {...register("title")}
                                placeholder="Notification title"
                            />
                            {errors.title && (
                                <p className="text-sm text-destructive">
                                    {errors.title.message}
                                </p>
                            )}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="body">Body</Label>
                            <Input
                                id="body"
                                {...register("body")}
                                placeholder="Notification message"
                            />
                            {errors.body && (
                                <p className="text-sm text-destructive">
                                    {errors.body.message}
                                </p>
                            )}
                        </div>

                        <div className="flex gap-2">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => router.push("/campaigns")}
                            >
                                Cancel
                            </Button>
                            <Button type="submit" disabled={sendMutation.isPending}>
                                {sendMutation.isPending ? "Sending..." : "Send Campaign"}
                            </Button>
                        </div>
                    </form>
                </CardContent>
            </Card>
        </div>
    );
}