"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { 
  Card, 
  CardContent, 
  CardDescription, 
  CardFooter, 
  CardHeader, 
  CardTitle 
} from "@/components/ui/card";
import { CheckIcon, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/components/ui/use-toast";

// Form schema
const formSchema = z.object({
  title: z.string().min(5, { message: "Title must be at least 5 characters" }),
  content: z.string().min(10, { message: "Content must be at least 10 characters" }),
  targetRoles: z.array(z.string()).min(1, { message: "Select at least one target role" }),
});

interface AnnouncementFormProps {
  userRole: string[];
}

export function AnnouncementForm({ userRole }: AnnouncementFormProps) {
  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const { toast } = useToast();

  // Initialize form
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      content: "",
      targetRoles: [],
    },
  });

  // Available roles for selection
  const availableRoles = [
    { id: "all", name: "All Users" },
    { id: "admin", name: "Administrators" },
    { id: "entrepreneurship", name: "Entrepreneurship" },
    { id: "communication", name: "Communication" },
    { id: "expression", name: "Expression" },
    { id: "coding", name: "Coding" },
    { id: "dataintelligence", name: "Data Intelligence" },
    { id: "mediation", name: "Mediation" },
  ];

  // Handle role selection
  const handleRoleToggle = (roleId: string) => {
    if (roleId === "all") {
      // If "all" is selected, clear other selections
      setSelectedRoles(["all"]);
      form.setValue("targetRoles", ["all"]);
    } else {
      // Remove "all" if it was previously selected
      const newSelection = selectedRoles.filter(id => id !== "all");
      
      // Toggle the selected role
      if (newSelection.includes(roleId)) {
        const updatedSelection = newSelection.filter(id => id !== roleId);
        setSelectedRoles(updatedSelection);
        form.setValue("targetRoles", updatedSelection);
      } else {
        const updatedSelection = [...newSelection, roleId];
        setSelectedRoles(updatedSelection);
        form.setValue("targetRoles", updatedSelection);
      }
    }
  };

  // Form submission
  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    setIsSubmitting(true);
    
    try {
      // Send the data to the API
      const response = await fetch('/api/announcements', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      
      if (!response.ok) {
        throw new Error('Failed to create announcement');
      }
      
      // Reset form and show success message
      form.reset();
      setSelectedRoles([]);
      setIsSuccess(true);
      
      toast({
        title: "Announcement created",
        description: "The announcement has been created successfully.",
      });
      
      // Hide success message after a delay
      setTimeout(() => setIsSuccess(false), 3000);
    } catch (error) {
      console.error("Error submitting announcement:", error);
      toast({
        title: "Error",
        description: "Failed to create the announcement. Please try again.",
        variant: "destructive",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Create New Announcement</CardTitle>
        <CardDescription>
          Create an announcement to be displayed to specific user roles
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter announcement title" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            
            <FormField
              control={form.control}
              name="content"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea 
                      placeholder="Enter announcement content" 
                      rows={5} 
                      {...field} 
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            
            <FormField
              control={form.control}
              name="targetRoles"
              render={() => (
                <FormItem>
                  <FormLabel>Target Audience</FormLabel>
                  <FormControl>
                    <div className="flex flex-wrap gap-2">
                      {availableRoles.map(role => (
                        <Badge
                          key={role.id}
                          variant={selectedRoles.includes(role.id) ? "default" : "outline"}
                          className={`cursor-pointer ${
                            selectedRoles.includes(role.id) 
                              ? "bg-blue-600 hover:bg-blue-700" 
                              : "hover:bg-gray-100"
                          }`}
                          onClick={() => handleRoleToggle(role.id)}
                        >
                          {role.name}
                          {selectedRoles.includes(role.id) && (
                            <CheckIcon className="ml-1 h-3 w-3" />
                          )}
                        </Badge>
                      ))}
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            
            <Button type="submit" disabled={isSubmitting || isSuccess} className="w-full">
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Submitting...
                </>
              ) : isSuccess ? (
                <>
                  <CheckIcon className="mr-2 h-4 w-4" />
                  Announcement Created!
                </>
              ) : (
                "Create Announcement"
              )}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
} 