"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { createPengumuman, updatePengumuman } from "../action";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";

const schema = z.object({
  judul: z.string().min(1, "Judul wajib diisi"),
  kategori: z.string().min(1, "Pilih kategori"),
  isi: z.string().min(1, "Isi pengumuman wajib diisi"),
  excerpt: z.string().optional(),
  tanggal: z.string(),
  isPublish: z.boolean(),
  image: z.string().optional(),
});

export function PengumumanForm({ initialData }: { initialData?: any }) {
  const router = useRouter();
  const { user } = useAuth();
  const [loading, setLoading] = useState(false);

  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      judul: initialData?.judul || "",
      kategori: initialData?.kategori || "Akademik",
      isi: initialData?.isi || "",
      excerpt: initialData?.excerpt || "",
      tanggal: initialData?.tanggal
        ? new Date(initialData.tanggal).toISOString().split("T")[0]
        : new Date().toISOString().split("T")[0],
      isPublish: initialData?.isPublish ?? true,
      image: initialData?.image || "",
    },
  });

  async function onSubmit(values: any) {
    if (!user) return;
    setLoading(true);

    let res;
    if (initialData) {
      res = await updatePengumuman(initialData.id, values);
    } else {
      res = await createPengumuman(values, user.id);
    }

    if (res.success) {
      toast.success(initialData ? "Pengumuman diperbarui" : "Pengumuman dibuat");
      router.push("/dashboard/pengumuman");
      router.refresh();
    } else {
      toast.error(res.error);
    }
    setLoading(false);
  }

  return (
    <div className="max-w-2xl">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="judul"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Judul</FormLabel>
                <FormControl>
                  <Input placeholder="Judul pengumuman" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <div className="grid grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="kategori"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Kategori</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih kategori" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="Akademik">Akademik</SelectItem>
                      <SelectItem value="Kegiatan">Kegiatan</SelectItem>
                      <SelectItem value="PPDB">PPDB</SelectItem>
                      <SelectItem value="Umum">Umum</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="tanggal"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Tanggal</FormLabel>
                  <FormControl>
                    <Input type="date" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <FormField
            control={form.control}
            name="isi"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Isi Pengumuman</FormLabel>
                <FormControl>
                  <Textarea placeholder="Tulis isi pengumuman..." className="min-h-[200px]" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="excerpt"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Ringkasan (Opsional)</FormLabel>
                <FormControl>
                  <Textarea placeholder="Ringkasan singkat untuk tampilan kartu" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="isPublish"
            render={({ field }) => (
              <FormItem className="flex items-center justify-between rounded-lg border p-4">
                <div className="space-y-0.5">
                  <FormLabel className="text-base">Publikasikan</FormLabel>
                  <div className="text-muted-foreground text-sm">Tampilkan pengumuman ini di halaman publik.</div>
                </div>
                <FormControl>
                  <Switch checked={field.value} onCheckedChange={field.onChange} />
                </FormControl>
              </FormItem>
            )}
          />

          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => router.back()} disabled={loading}>
              Batal
            </Button>
            <Button type="submit" disabled={loading}>
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {initialData ? "Simpan Perubahan" : "Buat Pengumuman"}
            </Button>
          </div>
        </form>
      </Form>
    </div>
  );
}