'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { prestasiSchema } from '@/lib/schemas/prestasiSchema';
import { FormField } from '@/components/common/FormField';
import { FileUpload } from '@/components/common/FileUpload';
import { submitPrestasi, saveDraftPrestasi, updatePrestasi } from '@/lib/api/prestasi';
import { toast } from '@/lib/stores/notificationStore';
import { TPrestasi } from '@/types/domain';
import { TSessionUser } from '@/types/auth';
import { Loader2, ArrowLeft, Send, Save } from 'lucide-react';
import Link from 'next/link';

type FormValues = {
  jenisKegiatan: string;
  namaKegiatan: string;
  penyelenggara: string;
  tingkat: 'Wilayah' | 'Nasional' | 'Internasional';
  capaian: string;
  tanggalKegiatan: string;
  dokumenPath: string;
  dokumenName: string;
};

interface FormPrestasiProps {
  initialData?: TPrestasi;
  user: TSessionUser;
}

export function FormPrestasi({ initialData, user }: FormPrestasiProps) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSavingDraft, setIsSavingDraft] = useState(false);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(prestasiSchema),
    defaultValues: {
      jenisKegiatan: initialData?.jenisKegiatan || '',
      namaKegiatan: initialData?.namaKegiatan || '',
      penyelenggara: initialData?.penyelenggara || '',
      tingkat: initialData?.tingkat || 'Nasional',
      capaian: initialData?.capaian || '',
      tanggalKegiatan: initialData?.tanggalKegiatan || '',
      dokumenPath: initialData?.dokumenPath || '',
      dokumenName: initialData?.dokumenName || '',
    },
  });

  const docPath = watch('dokumenPath');
  const docName = watch('dokumenName');

  const handleFileChange = (path: string, name?: string) => {
    setValue('dokumenPath', path, { shouldValidate: true });
    setValue('dokumenName', name || '', { shouldValidate: true });
  };

  const onSaveDraft = async () => {
    // Save draft doesn't require strict validation, but we parse what we have
    const values = watch();
    setIsSavingDraft(true);
    try {
      if (initialData?.id) {
        await updatePrestasi(initialData.id, {
          ...values,
          status: 'draft',
        });
        toast.success('Draft prestasi berhasil diperbarui.');
      } else {
        await saveDraftPrestasi(
          {
            jenisKegiatan: values.jenisKegiatan,
            namaKegiatan: values.namaKegiatan,
            penyelenggara: values.penyelenggara,
            tingkat: values.tingkat,
            capaian: values.capaian,
            tanggalKegiatan: values.tanggalKegiatan,
            dokumenPath: values.dokumenPath,
            dokumenName: values.dokumenName,
          },
          {
            id: user.id,
            name: user.name,
            nimOrNidn: user.nimOrNidn || '',
            perguruanTinggiName: user.perguruanTinggiName || '',
          }
        );
        toast.success('Prestasi disimpan sebagai draft.');
      }
      router.push('/dashboard/mahasiswa/prestasi');
      router.refresh();
    } catch (e) {
      toast.error('Gagal menyimpan draft.');
    } finally {
      setIsSavingDraft(false);
    }
  };

  const onSubmit = async (values: FormValues) => {
    setIsSubmitting(true);
    try {
      if (initialData?.id) {
        // Update and submit
        await updatePrestasi(initialData.id, {
          ...values,
          status: 'menunggu_verifikasi',
        });
        toast.success('Pengajuan prestasi berhasil diperbarui.');
      } else {
        // Create and submit
        await submitPrestasi(
          {
            jenisKegiatan: values.jenisKegiatan,
            namaKegiatan: values.namaKegiatan,
            penyelenggara: values.penyelenggara,
            tingkat: values.tingkat,
            capaian: values.capaian,
            tanggalKegiatan: values.tanggalKegiatan,
            dokumenPath: values.dokumenPath,
            dokumenName: values.dokumenName,
          },
          {
            id: user.id,
            name: user.name,
            nimOrNidn: user.nimOrNidn || '',
            perguruanTinggiName: user.perguruanTinggiName || '',
          }
        );
        toast.success('Prestasi berhasil diajukan untuk verifikasi.');
      }
      router.push('/dashboard/mahasiswa/prestasi');
      router.refresh();
    } catch (e) {
      toast.error('Gagal mengajukan prestasi.');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Determine if editable: drafts or rejected prestasis are editable. Verified/Pending are locked
  const isLocked = initialData && initialData.status !== 'draft' && initialData.status !== 'ditolak';

  return (
    <div className="bg-card border border-text-muted/10 rounded-3xl p-6 sm:p-8 shadow-sm space-y-6">
      <div className="flex items-center justify-between pb-4 border-b border-text-muted/10">
        <div className="space-y-0.5">
          <h2 className="text-lg font-bold text-text-primary">
            {initialData ? 'Edit Data Prestasi' : 'Form Pengajuan Prestasi Baru'}
          </h2>
          <p className="text-xs text-text-muted font-medium">
            Lengkapi formulir di bawah ini dengan dokumen fisik sertifikat/bukti valid.
          </p>
        </div>
        {initialData && (
          <span className="text-xs font-bold text-text-muted">
            Status: <span className="text-primary capitalize font-extrabold">{initialData.status.replace('_', ' ')}</span>
          </span>
        )}
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          
          <FormField label="Kategori Jenis Kegiatan" error={errors.jenisKegiatan?.message} required>
            <select
              disabled={isLocked || isSubmitting || isSavingDraft}
              {...register('jenisKegiatan')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            >
              <option value="">-- Pilih Jenis Kegiatan --</option>
              <option value="Robotika & Sains Terapan">Robotika & Sains Terapan</option>
              <option value="Karya Tulis Ilmiah">Karya Tulis Ilmiah</option>
              <option value="Debat & Pidato">Debat & Pidato</option>
              <option value="Seni & Budaya">Seni & Budaya</option>
              <option value="Olahraga & Atletik">Olahraga & Atletik</option>
              <option value="Inovasi Teknologi">Inovasi Teknologi</option>
              <option value="Seminar & Konferensi">Seminar & Konferensi</option>
              <option value="Pengabdian Masyarakat">Pengabdian Masyarakat</option>
            </select>
          </FormField>

          <FormField label="Nama Kegiatan / Lomba" error={errors.namaKegiatan?.message} required>
            <input
              type="text"
              disabled={isLocked || isSubmitting || isSavingDraft}
              placeholder="Contoh: International Robotics Cup 2025"
              {...register('namaKegiatan')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm placeholder:text-text-muted text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            />
          </FormField>

          <FormField label="Penyelenggara Kegiatan" error={errors.penyelenggara?.message} required>
            <input
              type="text"
              disabled={isLocked || isSubmitting || isSavingDraft}
              placeholder="Contoh: IEEE Robotics Society / Puspresnas"
              {...register('penyelenggara')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm placeholder:text-text-muted text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            />
          </FormField>

          <FormField label="Tingkat Kompetisi" error={errors.tingkat?.message} required>
            <select
              disabled={isLocked || isSubmitting || isSavingDraft}
              {...register('tingkat')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            >
              <option value="Wilayah">Wilayah</option>
              <option value="Nasional">Nasional</option>
              <option value="Internasional">Internasional</option>
            </select>
          </FormField>

          <FormField label="Capaian Prestasi" error={errors.capaian?.message} required helperText="Contoh: Juara 1, Juara 2, Juara 3, Harapan 1, Peserta, Pembicara">
            <input
              type="text"
              disabled={isLocked || isSubmitting || isSavingDraft}
              placeholder="Contoh: Juara 1 / Peserta Terbaik"
              {...register('capaian')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm placeholder:text-text-muted text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            />
          </FormField>

          <FormField label="Tanggal Pelaksanaan" error={errors.tanggalKegiatan?.message} required>
            <input
              type="date"
              disabled={isLocked || isSubmitting || isSavingDraft}
              {...register('tanggalKegiatan')}
              className="w-full px-4 py-3 bg-card border border-text-muted/20 rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50"
            />
          </FormField>

        </div>

        <FileUpload
          value={docPath}
          onChange={handleFileChange}
          error={errors.dokumenPath?.message}
          label="Unggah Berkas Sertifikat / Bukti Prestasi (PDF/PNG/JPG max 2MB)"
        />

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-end gap-3 pt-4 border-t border-text-muted/10">
          <Link
            href="/dashboard/mahasiswa/prestasi"
            className="w-full sm:w-auto px-5 py-2.5 border border-text-muted/20 hover:bg-surface text-text-primary text-sm font-semibold rounded-xl transition-colors text-center"
          >
            Batal
          </Link>

          {!isLocked && (
            <>
              <button
                type="button"
                onClick={onSaveDraft}
                disabled={isSubmitting || isSavingDraft}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 border border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 text-sm font-semibold rounded-xl transition-colors disabled:opacity-50"
              >
                {isSavingDraft ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Save className="h-4 w-4" />
                )}
                Simpan Draft
              </button>

              <button
                type="submit"
                disabled={isSubmitting || isSavingDraft}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm font-semibold rounded-xl shadow-md shadow-primary/20 hover:shadow-lg transition-all disabled:opacity-50"
              >
                {isSubmitting ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Send className="h-4 w-4" />
                )}
                Ajukan Verifikasi
              </button>
            </>
          )}

          {isLocked && (
            <div className="text-xs text-text-muted font-semibold bg-surface border border-text-muted/15 rounded-xl px-4 py-2 text-center w-full sm:w-auto">
              Berkas terkunci dari pengeditan karena sedang/telah diproses verifikasi.
            </div>
          )}
        </div>

      </form>
    </div>
  );
}