"use client";

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 { Textarea } from "@/components/ui/textarea";
import { FileUpload } from "@/components/ui/file-upload";
import { Loader2, Save } from "lucide-react";
import { useSettingSekolah, saveSettingSekolah, type CreateSettingSekolahData } from "@/hooks/use-setting-sekolah";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import { useEffect } from "react";

const SettingSekolahFormSchema = z.object({
  namaSekolah: z.string().min(1, "Nama sekolah tidak boleh kosong"),
  jenjang: z.string().min(1, "Jenjang tidak boleh kosong"),
  kementrian: z.string().min(1, "Kementrian tidak boleh kosong"),
  npsn: z.string().min(1, "NPSN tidak boleh kosong"),
  semester: z.string().min(1, "Semester tidak boleh kosong"),
  tahunPelajaran: z.string().min(1, "Tahun pelajaran tidak boleh kosong"),
  tanggalRapor: z.string().min(1, "Tanggal rapor tidak boleh kosong"),
  noWa: z.string().optional(),
  alamat: z.string().min(1, "Alamat tidak boleh kosong"),
  desa: z.string().min(1, "Desa tidak boleh kosong"),
  kecamatan: z.string().min(1, "Kecamatan tidak boleh kosong"),
  kabupaten: z.string().min(1, "Kabupaten tidak boleh kosong"),
  propinsi: z.string().min(1, "Propinsi tidak boleh kosong"),
  email: z.string().email("Format email tidak valid").optional().or(z.literal("")),
  kepalaSekolah: z.string().min(1, "Kepala sekolah tidak boleh kosong"),
  nipKepalaSekolah: z.string().min(1, "NIP kepala sekolah tidak boleh kosong"),
  logo: z.string().optional(),
  stempel: z.string().optional(),
  ttdKepsek: z.string().optional(),
  headerLaporan: z.string().optional(),
  kopSekolah: z.string().optional(),
  namaYayasan: z.string().optional(),
  ketuaYayasan: z.string().optional(),
});

type SettingSekolahFormData = z.infer<typeof SettingSekolahFormSchema>;

export function SettingSekolahManagement() {
  const { setting, isLoading, mutate } = useSettingSekolah();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    setValue,
    watch,
  } = useForm<SettingSekolahFormData>({
    resolver: zodResolver(SettingSekolahFormSchema),
  });

  useEffect(() => {
    if (setting) {
      setValue("namaSekolah", setting.namaSekolah);
      setValue("jenjang", setting.jenjang);
      setValue("kementrian", setting.kementrian);
      setValue("npsn", setting.npsn);
      setValue("semester", setting.semester);
      setValue("tahunPelajaran", setting.tahunPelajaran);
      setValue("tanggalRapor", setting.tanggalRapor.split("T")[0]); // Format untuk input date
      setValue("noWa", setting.noWa || "");
      setValue("alamat", setting.alamat);
      setValue("desa", setting.desa);
      setValue("kecamatan", setting.kecamatan);
      setValue("kabupaten", setting.kabupaten);
      setValue("propinsi", setting.propinsi);
      setValue("email", setting.email || "");
      setValue("kepalaSekolah", setting.kepalaSekolah);
      setValue("nipKepalaSekolah", setting.nipKepalaSekolah);
      setValue("logo", setting.logo || "");
      setValue("stempel", setting.stempel || "");
      setValue("ttdKepsek", setting.ttdKepsek || "");
      setValue("headerLaporan", setting.headerLaporan || "");
      setValue("kopSekolah", setting.kopSekolah || "");
      setValue("namaYayasan", setting.namaYayasan || "");
      setValue("ketuaYayasan", setting.ketuaYayasan || "");
    }
  }, [setting, setValue]);

  const onSubmit = async (data: SettingSekolahFormData) => {
    try {
      await saveSettingSekolah(data as CreateSettingSekolahData);
      toast.success("Setting sekolah berhasil disimpan");
      mutate();
    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : "Terjadi kesalahan";
      toast.error(errorMessage);
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-6">
        <Loader2 className="h-6 w-6 animate-spin" />
        <span className="ml-2">Memuat data...</span>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Informasi Sekolah</CardTitle>
          <CardDescription>Data dasar sekolah dan identitas</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="namaSekolah">Nama Sekolah</Label>
              <Input id="namaSekolah" {...register("namaSekolah")} placeholder="Masukkan nama sekolah" />
              {errors.namaSekolah && <p className="text-destructive text-sm">{errors.namaSekolah.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="jenjang">Jenjang</Label>
              <Input id="jenjang" {...register("jenjang")} placeholder="SMA, SMP, SD" />
              {errors.jenjang && <p className="text-destructive text-sm">{errors.jenjang.message}</p>}
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="kementrian">Kementrian</Label>
              <Input id="kementrian" {...register("kementrian")} placeholder="Kementerian Pendidikan dan Kebudayaan" />
              {errors.kementrian && <p className="text-destructive text-sm">{errors.kementrian.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="npsn">NPSN</Label>
              <Input id="npsn" {...register("npsn")} placeholder="Nomor Pokok Sekolah Nasional" />
              {errors.npsn && <p className="text-destructive text-sm">{errors.npsn.message}</p>}
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="semester">Semester</Label>
              <Input id="semester" {...register("semester")} placeholder="Ganjil/Genap" />
              {errors.semester && <p className="text-destructive text-sm">{errors.semester.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="tahunPelajaran">Tahun Pelajaran</Label>
              <Input id="tahunPelajaran" {...register("tahunPelajaran")} placeholder="2024/2025" />
              {errors.tahunPelajaran && <p className="text-destructive text-sm">{errors.tahunPelajaran.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="tanggalRapor">Tanggal Rapor</Label>
              <Input id="tanggalRapor" type="date" {...register("tanggalRapor")} />
              {errors.tanggalRapor && <p className="text-destructive text-sm">{errors.tanggalRapor.message}</p>}
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Alamat dan Kontak</CardTitle>
          <CardDescription>Informasi lokasi dan kontak sekolah</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="noWa">No. WhatsApp</Label>
              <Input id="noWa" {...register("noWa")} placeholder="Nomor WhatsApp sekolah (opsional)" />
            </div>

            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" {...register("email")} placeholder="Email sekolah (opsional)" />
              {errors.email && <p className="text-destructive text-sm">{errors.email.message}</p>}
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="alamat">Alamat</Label>
            <Textarea id="alamat" {...register("alamat")} placeholder="Alamat lengkap sekolah" />
            {errors.alamat && <p className="text-destructive text-sm">{errors.alamat.message}</p>}
          </div>

          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            <div className="space-y-2">
              <Label htmlFor="desa">Desa</Label>
              <Input id="desa" {...register("desa")} placeholder="Nama desa" />
              {errors.desa && <p className="text-destructive text-sm">{errors.desa.message}</p>}
            </div>

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

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

            <div className="space-y-2">
              <Label htmlFor="propinsi">Propinsi</Label>
              <Input id="propinsi" {...register("propinsi")} placeholder="Nama propinsi" />
              {errors.propinsi && <p className="text-destructive text-sm">{errors.propinsi.message}</p>}
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Pimpinan Sekolah</CardTitle>
          <CardDescription>Informasi kepala sekolah dan yayasan</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="kepalaSekolah">Kepala Sekolah</Label>
              <Input id="kepalaSekolah" {...register("kepalaSekolah")} placeholder="Nama kepala sekolah" />
              {errors.kepalaSekolah && <p className="text-destructive text-sm">{errors.kepalaSekolah.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="nipKepalaSekolah">NIP Kepala Sekolah</Label>
              <Input id="nipKepalaSekolah" {...register("nipKepalaSekolah")} placeholder="NIP kepala sekolah" />
              {errors.nipKepalaSekolah && <p className="text-destructive text-sm">{errors.nipKepalaSekolah.message}</p>}
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="namaYayasan">Nama Yayasan (Jika Swasta)</Label>
              <Input id="namaYayasan" {...register("namaYayasan")} placeholder="Nama yayasan (opsional)" />
            </div>

            <div className="space-y-2">
              <Label htmlFor="ketuaYayasan">Ketua Yayasan (Jika Swasta)</Label>
              <Input id="ketuaYayasan" {...register("ketuaYayasan")} placeholder="Nama ketua yayasan (opsional)" />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Dokumen dan Template</CardTitle>
          <CardDescription>Upload dokumen sekolah dan template</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <FileUpload
              label="Logo Sekolah"
              category="logo"
              currentFile={watch("logo")}
              onFileUploaded={(path) => setValue("logo", path)}
              onFileRemoved={() => setValue("logo", "")}
              accept="image/*"
              description="Format: JPG, PNG, GIF (Maksimal 5MB)"
            />

            <FileUpload
              label="Stempel Sekolah"
              category="stempel"
              currentFile={watch("stempel")}
              onFileUploaded={(path) => setValue("stempel", path)}
              onFileRemoved={() => setValue("stempel", "")}
              accept="image/*"
              description="Format: JPG, PNG, GIF (Maksimal 5MB)"
            />
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <FileUpload
              label="TTD Kepala Sekolah"
              category="ttd"
              currentFile={watch("ttdKepsek")}
              onFileUploaded={(path) => setValue("ttdKepsek", path)}
              onFileRemoved={() => setValue("ttdKepsek", "")}
              accept="image/*"
              description="Format: JPG, PNG, GIF (Maksimal 5MB)"
            />

            <FileUpload
              label="Header Laporan"
              category="header"
              currentFile={watch("headerLaporan")}
              onFileUploaded={(path) => setValue("headerLaporan", path)}
              onFileRemoved={() => setValue("headerLaporan", "")}
              accept="image/*,.pdf,.doc,.docx"
              description="Format: JPG, PNG, PDF, DOC (Maksimal 5MB)"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="kopSekolah">Kop Surat Sekolah</Label>
            <Textarea
              id="kopSekolah"
              {...register("kopSekolah")}
              placeholder="Template kop surat sekolah dalam format teks (opsional)"
              rows={4}
            />
            <p className="text-muted-foreground text-xs">
              Masukkan template kop surat dalam format teks. Gunakan placeholder seperti {"{nama_sekolah}"},{" "}
              {"{alamat}"} untuk data dinamis.
            </p>
          </div>
        </CardContent>
      </Card>

      <div className="flex justify-end">
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          <Save className="mr-2 h-4 w-4" />
          Simpan Setting
        </Button>
      </div>
    </form>
  );
}