'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { FormField } from '@/components/common/FormField';
import { submitVerificationDecision } from '@/lib/api/verifikasi';
import { toast } from '@/lib/stores/notificationStore';
import { TSessionUser } from '@/types/auth';
import { Loader2, CheckSquare, XCircle, ChevronLeft } from 'lucide-react';
import Link from 'next/link';

interface VerifikasiFormProps {
  prestasiId: string;
  user: TSessionUser;
}

export function VerifikasiForm({ prestasiId, user }: VerifikasiFormProps) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [action, setAction] = useState<'approve' | 'reject' | null>(null);
  const [catatan, setCatatan] = useState('');
  const [errorCatatan, setErrorCatatan] = useState('');

  const handleDecision = async (decision: 'terverifikasi' | 'ditolak') => {
    setErrorCatatan('');

    if (decision === 'ditolak' && !catatan.trim()) {
      setErrorCatatan('Alasan penolakan wajib diisi agar mahasiswa dapat memperbaiki berkas.');
      return;
    }

    setIsLoading(true);
    try {
      const res = await submitVerificationDecision(
        prestasiId,
        decision,
        decision === 'ditolak' ? catatan : 'Disetujui dan diverifikasi oleh Operator Kampus.',
        user.name,
        user.id
      );

      if (res.success) {
        toast.success(res.message);
        router.push('/dashboard/operator/verifikasi');
        router.refresh();
      } else {
        toast.error(res.message || 'Gagal menyimpan keputusan verifikasi');
      }
    } catch (e) {
      toast.error('Terjadi kesalahan sistem.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="bg-card border border-text-muted/10 rounded-3xl p-6 sm:p-8 shadow-sm space-y-6">
      <div className="space-y-1.5 border-b border-text-muted/5 pb-4">
        <h4 className="font-bold text-text-primary text-base">Evaluasi Berkas Prestasi</h4>
        <p className="text-xs text-text-muted font-medium">
          Tentukan kelayakan dokumen fisik sertifikat mahasiswa. Pengaju akan menerima hasil verifikasi secara instan.
        </p>
      </div>

      <div className="space-y-4">
        {/* Toggle rejection notes input if reject action is chosen */}
        {action === 'reject' && (
          <FormField
            label="Alasan Penolakan Berkas"
            error={errorCatatan}
            required
            helperText="Tuliskan catatan detail mengenai apa yang salah (misal: File blur, sertifikat tidak sesuai nama, dll)."
          >
            <textarea
              value={catatan}
              onChange={(e) => {
                setCatatan(e.target.value);
                if (e.target.value.trim()) setErrorCatatan('');
              }}
              rows={3}
              disabled={isLoading}
              placeholder="Contoh: Sertifikat tidak mencantumkan logo instansi penyelenggara atau nama mahasiswa tidak terbaca..."
              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>
        )}

        {/* Action Controls */}
        <div className="flex flex-col sm:flex-row items-center justify-end gap-3 pt-2">
          {action === null ? (
            <>
              <button
                type="button"
                onClick={() => setAction('reject')}
                disabled={isLoading}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 border border-danger/20 bg-danger/5 hover:bg-danger/10 text-danger text-sm font-semibold rounded-xl transition-all"
              >
                <XCircle className="h-4.5 w-4.5" />
                Tolak Pengajuan
              </button>
              <button
                type="button"
                onClick={() => handleDecision('terverifikasi')}
                disabled={isLoading}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-success hover:bg-success/90 text-white text-sm font-semibold rounded-xl shadow-md shadow-success/20 hover:shadow-lg transition-all"
              >
                {isLoading ? (
                  <Loader2 className="h-4.5 w-4.5 animate-spin" />
                ) : (
                  <CheckSquare className="h-4.5 w-4.5" />
                )}
                Verifikasi & Setujui
              </button>
            </>
          ) : (
            <div className="flex items-center justify-between w-full">
              <button
                type="button"
                onClick={() => {
                  setAction(null);
                  setCatatan('');
                  setErrorCatatan('');
                }}
                className="inline-flex items-center gap-1 text-xs text-text-muted font-bold hover:underline"
              >
                <ChevronLeft className="h-4 w-4" />
                Kembali
              </button>
              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => handleDecision('ditolak')}
                  disabled={isLoading}
                  className="px-5 py-2.5 bg-danger hover:bg-danger/90 text-white text-sm font-semibold rounded-xl shadow-md shadow-danger/20 hover:shadow-lg transition-all inline-flex items-center gap-2"
                >
                  {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
                  Konfirmasi Tolak
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}