'use client';

import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { PageHeader } from '@/components/common/PageHeader';
import { FormPrestasi } from '@/components/mahasiswa/FormPrestasi';
import { ConfirmDialog } from '@/components/common/ConfirmDialog';
import { StatusBadge } from '@/components/common/StatusBadge';
import { getPrestasiById, deletePrestasi } from '@/lib/api/prestasi';
import { getCurrentUserSync } from '@/lib/api/auth';
import { TPrestasi } from '@/types/domain';
import { TSessionUser } from '@/types/auth';
import { toast } from '@/lib/stores/notificationStore';
import { formatDate } from '@/lib/utils';
import { Trash, Calendar, Award, ShieldAlert, ShieldCheck } from 'lucide-react';

export default function MahasiswaPrestasiDetailPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [user, setUser] = useState<TSessionUser | null>(null);
  const [prestasi, setPrestasi] = useState<TPrestasi | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);

  useEffect(() => {
    const session = getCurrentUserSync();
    if (session) {
      setUser(session);
      loadPrestasi(id);
    }
  }, [id]);

  async function loadPrestasi(prestasiId: string) {
    setIsLoading(true);
    try {
      const res = await getPrestasiById(prestasiId);
      if (res.success && res.data) {
        setPrestasi(res.data);
      } else {
        toast.error(res.message || 'Data prestasi tidak ditemukan');
        router.push('/dashboard/mahasiswa/prestasi');
      }
    } catch (e) {
      toast.error('Terjadi kesalahan memuat data.');
    } finally {
      setIsLoading(false);
    }
  }

  const handleDelete = async () => {
    if (!prestasi) return;
    try {
      const res = await deletePrestasi(prestasi.id);
      if (res.success) {
        toast.success(res.message);
        router.push('/dashboard/mahasiswa/prestasi');
        router.refresh();
      } else {
        toast.error(res.message || 'Gagal menghapus data');
      }
    } catch (e) {
      toast.error('Terjadi kesalahan. Gagal menghapus data.');
    }
  };

  if (!user || isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[50vh]">
        <span className="text-sm text-text-muted font-bold animate-pulse">Memuat data prestasi...</span>
      </div>
    );
  }

  if (!prestasi) return null;

  const isEditable = prestasi.status === 'draft' || prestasi.status === 'ditolak';

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      {/* Page Header */}
      <PageHeader
        title="Detail Capaian Prestasi"
        description="Informasi rinci verifikasi dan pengajuan berkas fisik prestasi."
        action={
          prestasi.status === 'draft' && (
            <button
              onClick={() => setIsConfirmOpen(true)}
              className="inline-flex items-center gap-2 px-4 py-2 border border-danger/20 bg-danger/5 hover:bg-danger/10 text-danger rounded-xl text-xs sm:text-sm font-semibold transition-all"
            >
              <Trash className="h-4 w-4" />
              Hapus Draft
            </button>
          )
        }
      />

      {/* Verification Audit Log Summary */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        {/* Info detail */}
        <div className="md:col-span-2 bg-card border border-text-muted/10 rounded-3xl p-6 space-y-4 shadow-sm">
          <div className="flex items-center justify-between pb-3 border-b border-text-muted/5">
            <span className="text-xs font-bold text-text-muted">Capaian Prestasi</span>
            <StatusBadge status={prestasi.status} />
          </div>

          <div className="space-y-3">
            <div className="flex items-center gap-2.5">
              <Award className="h-5 w-5 text-primary" />
              <span className="text-sm font-bold text-text-primary">{prestasi.capaian} - {prestasi.namaKegiatan}</span>
            </div>
            
            <div className="grid grid-cols-2 gap-4 text-xs font-medium text-text-muted pt-2">
              <div>
                <span className="block text-[10px] text-text-muted/70 uppercase font-bold">Penyelenggara</span>
                <span className="text-text-primary">{prestasi.penyelenggara}</span>
              </div>
              <div>
                <span className="block text-[10px] text-text-muted/70 uppercase font-bold">Tingkat Kompetisi</span>
                <span className="text-text-primary">{prestasi.tingkat}</span>
              </div>
              <div>
                <span className="block text-[10px] text-text-muted/70 uppercase font-bold">Tanggal Kegiatan</span>
                <span className="text-text-primary">{formatDate(prestasi.tanggalKegiatan)}</span>
              </div>
              <div>
                <span className="block text-[10px] text-text-muted/70 uppercase font-bold">File Bukti Terunggah</span>
                <a
                  href={prestasi.dokumenPath}
                  target="_blank"
                  rel="noreferrer"
                  className="text-primary hover:underline font-bold"
                >
                  {prestasi.dokumenName}
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Verification Status Card */}
        <div className="bg-card border border-text-muted/10 rounded-3xl p-6 flex flex-col justify-between shadow-sm">
          <h4 className="text-xs font-extrabold text-text-muted uppercase tracking-wider border-b border-text-muted/5 pb-2">
            Status Verifikasi
          </h4>

          {prestasi.status === 'terverifikasi' ? (
            <div className="space-y-2 py-4">
              <div className="text-success flex items-center gap-2 font-bold text-sm">
                <ShieldCheck className="h-5 w-5" />
                Valid & Terverifikasi
              </div>
              <p className="text-xs text-text-muted font-medium leading-relaxed">
                Prestasi ini telah dikonfirmasi dan disetujui oleh verifikator kampus: <span className="text-text-primary font-semibold">{prestasi.verifikatorName}</span>.
              </p>
            </div>
          ) : prestasi.status === 'ditolak' ? (
            <div className="space-y-2 py-4">
              <div className="text-danger flex items-center gap-2 font-bold text-sm">
                <ShieldAlert className="h-5 w-5" />
                Pengajuan Ditolak
              </div>
              <p className="text-xs text-text-muted font-medium leading-relaxed">
                Alasan: <span className="text-danger font-semibold">{prestasi.alasanPenolakan || '-'}</span>
              </p>
            </div>
          ) : (
            <div className="space-y-2 py-4">
              <div className="text-warning flex items-center gap-2 font-bold text-sm">
                <Calendar className="h-5 w-5" />
                Antrian Verifikasi
              </div>
              <p className="text-xs text-text-muted font-medium leading-relaxed">
                Berkas diajukan dan sedang menunggu review dokumen oleh Operator PT {prestasi.perguruanTinggiName}.
              </p>
            </div>
          )}

          <div className="text-[10px] text-text-muted font-semibold">
            Tanggal Pengajuan: {formatDate(prestasi.createdAt)}
          </div>
        </div>
      </div>

      {/* Render input form in edit mode if editable */}
      {isEditable ? (
        <div className="space-y-4">
          <h3 className="text-sm font-extrabold text-text-muted uppercase tracking-wider">
            Formulir Edit Prestasi
          </h3>
          <FormPrestasi initialData={prestasi} user={user} />
        </div>
      ) : (
        <div className="bg-card border border-text-muted/10 rounded-3xl p-6 text-center text-xs text-text-muted font-semibold">
          Data pengajuan prestasi ini telah terkunci dan tidak dapat diubah karena sedang/telah melalui tahap verifikasi.
        </div>
      )}

      {/* Confirm deletion dialog */}
      <ConfirmDialog
        isOpen={isConfirmOpen}
        onClose={() => setIsConfirmOpen(false)}
        onConfirm={handleDelete}
        title="Hapus Draft Prestasi"
        description="Apakah Anda yakin ingin menghapus draft pengajuan prestasi ini? Tindakan ini tidak dapat dibatalkan."
        confirmLabel="Ya, Hapus"
        isDestructive
      />
    </div>
  );
}