"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 { useSetupCampaign } from "@/modules/campaigns/hooks";
import { setupCampaignSchema, type SetupCampaignInput } from "@/modules/campaigns/schemas";
import { useToast } from "@/hooks/use-toast";
import { ArrowLeft, Calendar } from "lucide-react";

export default function SetupCampaignPage() {
    const router = useRouter();
    const { toast } = useToast();
    const setupMutation = useSetupCampaign();

    const {
        register,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<SetupCampaignInput>({
        resolver: zodResolver(setupCampaignSchema),
    });

    const onSubmit = async (data: SetupCampaignInput) => {
        try {
            const isoDate = data.date.includes('T') ? data.date + ':00.000Z' : data.date;
            await setupMutation.mutateAsync({
                ...data,
                date: isoDate,
            });
            toast({
                title: "Campaign scheduled",
                description: "Campaign has been scheduled successfully",
            });
            reset();
            router.push("/campaigns");
        } catch (error) {
            toast({
                title: "Setup failed",
                description: "Failed to schedule 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">Setup Campaign</h1>
                    <p className="text-muted-foreground">
                        Schedule a campaign to be sent at a specific time
                    </p>
                </div>
            </div>

            <Card className="max-w-2xl">
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Calendar className="h-5 w-5" />
                        Schedule Campaign
                    </CardTitle>
                    <CardDescription>
                        Create a scheduled campaign that will be sent to all users at the
                        specified date and time
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="title">Title</Label>
                            <Input
                                id="title"
                                {...register("title")}
                                placeholder="Campaign title"
                            />
                            {errors.title && (
                                <p className="text-sm text-destructive">
                                    {errors.title.message}
                                </p>
                            )}
                        </div>

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

                        <div className="space-y-2">
                            <Label htmlFor="date">Scheduled Date & Time</Label>
                            <Input
                                id="date"
                                type="datetime-local"
                                {...register("date")}
                            />
                            {errors.date && (
                                <p className="text-sm text-destructive">
                                    {errors.date.message}
                                </p>
                            )}
                            <p className="text-xs text-muted-foreground">
                                Format: ISO 8601 (e.g., 2025-11-26T08:15:00Z)
                            </p>
                        </div>

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