import React, { useState } from 'react';
import { Head, router, Link } from '@inertiajs/react';
import PortalLayout from '@/layouts/portal-layout';
import {
    Search,
    X,
    CheckCircle2,
    ShieldCheck,
    Award,
    Trophy,
    BadgeCheck,
    Users,
    BookOpenCheck,
    AlertCircle,
    Building2,
} from 'lucide-react';
import '../../../css/alumni-home.css';

interface PrestasiItem {
    judul?: string;
    nama?: string;
    penyelenggara?: string;
    lembaga?: string;
    tahun?: number | string;
    keterangan?: string | null;
    tingkat?: string;
    nomor_sertifikat?: string;
}

interface SertifikasiItem {
    nama?: string;
    judul?: string;
    lembaga?: string;
    penyelenggara?: string;
    tahun?: number | string;
    nomor?: string | null;
    nomor_sertifikat?: string;
}

interface OrganisasiItem {
    nama?: string;
    judul?: string;
    jabatan?: string;
    penyelenggara?: string;
    tahun?: number | string;
    tahun_mulai?: number | string;
    tahun_selesai?: number | string | null;
}

interface PelatihanItem {
    nama?: string;
    judul?: string;
    penyelenggara?: string;
    tahun?: number | string;
    durasi?: string | null;
}

interface SeminarItem {
    judul?: string;
    nama?: string;
    penyelenggara?: string;
    tahun?: number | string;
}

interface SkpiDataProps {
    npm: string;
    noSkpi?: string | null;
    tglCetak?: string | null;
    prestasi?: PrestasiItem[];
    sertifikasi?: SertifikasiItem[];
    organisasi?: OrganisasiItem[];
    pelatihan?: PelatihanItem[];
    seminar?: SeminarItem[];
}

interface AlumniItemProps {
    npm: string;
    nama: string;
    namaProdi?: string;
    prodi?: string;
    mulaiSmt?: number;
    tahun_masuk?: number | string;
    tahun_lulus?: number | string;
    keluarSmt?: number | null;
    status_kelulusan?: string;
    noSkpi?: string | null;
    tglCetakSkpi?: string | null;
    skpi?: SkpiDataProps;
}

interface SkpiPageProps {
    alumni: AlumniItemProps | null;
    skpi?: SkpiDataProps | null;
    searchedNpm: string | null;
}

export default function SkpiPage({ alumni, skpi, searchedNpm }: SkpiPageProps) {
    const [npmInput, setNpmInput] = useState(searchedNpm || '');

    const handleSearch = (e: React.FormEvent, customNpm?: string) => {
        if (e) e.preventDefault();
        const target = customNpm !== undefined ? customNpm : npmInput;
        const trimmed = target.trim();
        if (trimmed) {
            router.get('/skpi', { npm: trimmed }, { preserveState: true });
        }
    };

    const handleClear = () => {
        setNpmInput('');
        router.get('/skpi', {}, { preserveState: true });
    };

    const activeSkpi: SkpiDataProps | undefined = skpi || alumni?.skpi;
    const prodiName = alumni?.namaProdi || alumni?.prodi || 'Informatika';
    const noSkpiDisplay =
        activeSkpi?.noSkpi || alumni?.noSkpi || 'SKPI/14/S1/2026/000';
    const tglPengesahan = activeSkpi?.tglCetak || alumni?.tglCetakSkpi;

    const totalPrestasi = activeSkpi?.prestasi?.length || 0;
    const totalSertifikasi = activeSkpi?.sertifikasi?.length || 0;
    const totalOrganisasi = activeSkpi?.organisasi?.length || 0;
    const totalPelatihan =
        (activeSkpi?.pelatihan?.length || 0) +
        (activeSkpi?.seminar?.length || 0);

    return (
        <PortalLayout>
            <Head title="Verifikasi SKPI - Fakultas Teknik Universitas Majalengka">
                <meta
                    name="description"
                    content="Layanan resmi verifikasi Surat Keterangan Pendamping Ijazah (SKPI) Fakultas Teknik Universitas Majalengka."
                />
            </Head>

            <div className="alumni-home min-h-screen pb-20">
                {/* Header Banner - Konsisten dengan Halaman Alumni & Home */}
                <header className="border-b border-[#E7E3DF] bg-white">
                    <div className="alumni-shell py-10 lg:py-14">
                        <div className="max-w-3xl">
                            <p className="stagger-1 mb-2 text-xs font-semibold tracking-[0.14em] text-[#87630E] uppercase">
                                VERIFIKASI RESMI
                            </p>
                            <h1 className="stagger-2 alumni-display text-3xl leading-[1.12] font-bold tracking-tight text-[#17171A] sm:text-4xl lg:text-[44px]">
                                Verifikasi SKPI Alumni
                            </h1>
                            <p className="stagger-3 mt-3.5 max-w-2xl text-sm leading-relaxed text-[#5F5F64] sm:text-base">
                                Cek keabsahan data Surat Keterangan Pendamping
                                Ijazah (SKPI) resmi lulusan Fakultas Teknik
                                Universitas Majalengka.
                            </p>
                        </div>
                    </div>
                </header>

                {/* Search & Filter Console - Menggunakan alumni-shell Penuh (Simetris dengan Konten) */}
                <section
                    className="border-b border-[#E7E3DF] bg-[#F7F6F3]"
                    aria-label="Pencarian Verifikasi SKPI"
                >
                    <div className="alumni-shell py-7">
                        <form onSubmit={handleSearch} className="space-y-4">
                            {/* Card Box Filter Terpadu */}
                            <div className="stagger-4 rounded-2xl border border-[#D7D1CC] bg-white p-5 shadow-xs transition-shadow focus-within:shadow-md sm:p-6">
                                <label
                                    htmlFor="skpi-npm-input"
                                    className="mb-2 block text-xs font-semibold tracking-wider text-[#5F5F64] uppercase"
                                >
                                    Nomor Pokok Mahasiswa (NPM) Alumni
                                </label>
                                <div className="flex flex-col gap-3 sm:flex-row">
                                    <div className="relative flex flex-1 items-center">
                                        <Search
                                            aria-hidden="true"
                                            className="pointer-events-none absolute left-3.5 h-4 w-4 text-[#87878D]"
                                        />
                                        <input
                                            id="skpi-npm-input"
                                            type="text"
                                            value={npmInput}
                                            onChange={(e) =>
                                                setNpmInput(e.target.value)
                                            }
                                            placeholder="Ketik NPM alumni yang ingin diperiksa (contoh: 221410059)..."
                                            autoComplete="off"
                                            className="h-12 w-full rounded-lg border border-[#D7D1CC] bg-white pr-9 pl-10 font-mono text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden"
                                        />
                                        {npmInput && (
                                            <button
                                                type="button"
                                                onClick={handleClear}
                                                aria-label="Hapus kata kunci"
                                                className="absolute right-3 rounded-md p-1 text-[#87878D] transition-colors hover:bg-[#F7F6F3] hover:text-[#17171A]"
                                            >
                                                <X className="h-3.5 w-3.5" />
                                            </button>
                                        )}
                                    </div>
                                    <button
                                        type="submit"
                                        className="inline-flex h-12 shrink-0 items-center justify-center rounded-lg bg-[#7A1F2A] px-6 text-xs font-semibold text-white transition-all duration-200 hover:bg-[#681923] hover:shadow-md active:scale-95"
                                    >
                                        Periksa SKPI
                                    </button>
                                </div>

                                {/* Status Bar */}
                                <div className="mt-4 flex justify-end border-t border-[#F0ECE8] pt-4">
                                    <div className="flex items-center gap-1.5 text-xs text-[#2F7D4A]">
                                        <ShieldCheck className="h-3.5 w-3.5 shrink-0" />
                                        <span>Data Resmi Akademik FT UNMA</span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>

                {/* Main Content Area - Lebar Simetris alumni-shell Sama Persis dengan Search Box */}
                <main className="alumni-shell pt-8">
                    {!searchedNpm ? (
                        /* Initial State: Panduan Layanan */
                        <div className="stagger-5 hover-lift rounded-2xl border border-[#E7E3DF] bg-white p-8 shadow-xs sm:p-10">
                            <div className="max-w-3xl">
                                <div className="flex items-start gap-4">
                                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-[#E7E3DF] bg-[#F8EEEF] text-[#7A1F2A]">
                                        <Award className="h-6 w-6" />
                                    </div>
                                    <div>
                                        <h2 className="alumni-display text-2xl font-bold text-[#17171A]">
                                            Sistem Verifikasi Rekam Jejak SKPI
                                        </h2>
                                        <p className="mt-2 text-sm leading-relaxed text-[#5F5F64]">
                                            Masukkan Nomor Pokok Mahasiswa (NPM)
                                            pada form pencarian di atas untuk
                                            memeriksa rincian capaian prestasi
                                            kejuaraan, sertifikasi kompetensi
                                            industri, partisipasi organisasi
                                            mahasiswa, serta pelatihan yang sah
                                            diakui oleh Fakultas Teknik.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="mt-8 grid grid-cols-1 gap-6 border-t border-[#F0ECE8] pt-8 md:grid-cols-3">
                                <div className="space-y-1.5 rounded-lg p-3 transition-colors hover:bg-[#FAF9F7]">
                                    <div className="flex items-center gap-2 text-xs font-semibold tracking-wider text-[#87630E] uppercase">
                                        <ShieldCheck className="h-4 w-4" />
                                        <span>Catatan Akademik Resmi</span>
                                    </div>
                                    <p className="text-xs leading-relaxed text-[#5F5F64]">
                                        Mencakup prestasi kejuaraan,
                                        sertifikasi, organisasi, dan pelatihan
                                        yang diakui oleh Fakultas Teknik.
                                    </p>
                                </div>
                                <div className="space-y-1.5 rounded-lg p-3 transition-colors hover:bg-[#FAF9F7]">
                                    <div className="flex items-center gap-2 text-xs font-semibold tracking-wider text-[#87630E] uppercase">
                                        <BadgeCheck className="h-4 w-4" />
                                        <span>Standar Portofolio</span>
                                    </div>
                                    <p className="text-xs leading-relaxed text-[#5F5F64]">
                                        Memvalidasi keahlian teknis, lisensi
                                        asosiasi profesi, serta sertifikasi
                                        kompetensi kerja.
                                    </p>
                                </div>
                                <div className="space-y-1.5 rounded-lg p-3 transition-colors hover:bg-[#FAF9F7]">
                                    <div className="flex items-center gap-2 text-xs font-semibold tracking-wider text-[#87630E] uppercase">
                                        <Building2 className="h-4 w-4" />
                                        <span>Dapat Diperiksa Perusahaan</span>
                                    </div>
                                    <p className="text-xs leading-relaxed text-[#5F5F64]">
                                        Memudahkan rekruter industri dan lembaga
                                        pendidikan untuk memeriksa rekam jejak
                                        lulusan.
                                    </p>
                                </div>
                            </div>
                        </div>
                    ) : !alumni ? (
                        /* Not Found State */
                        <div className="stagger-5 rounded-2xl border border-[#E7E3DF] bg-white p-12 text-center shadow-xs">
                            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#FAF0F0] text-[#B4232F]">
                                <AlertCircle className="h-7 w-7" />
                            </div>
                            <h2 className="alumni-display text-xl font-bold text-[#17171A]">
                                Data SKPI Tidak Ditemukan
                            </h2>
                            <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-[#5F5F64]">
                                Tidak ada arsip SKPI resmi yang terdaftar untuk
                                Nomor Pokok Mahasiswa (NPM){' '}
                                <strong className="font-mono text-[#17171A]">
                                    {searchedNpm}
                                </strong>
                                .
                            </p>
                            <p className="mt-1 text-xs text-[#87878D]">
                                Pastikan NPM yang dimasukkan sudah benar atau
                                alumni bersangkutan belum menyelesaikan
                                pengajuan berkas SKPI di fakultas.
                            </p>
                            <div className="mt-6 flex flex-wrap justify-center gap-3">
                                <button
                                    type="button"
                                    onClick={handleClear}
                                    className="inline-flex h-10 items-center gap-1.5 rounded-lg border border-[#D7D1CC] px-4 text-xs font-semibold text-[#17171A] transition-all duration-200 hover:bg-[#F7F6F3] active:scale-95"
                                >
                                    Ulangi Pencarian
                                </button>
                                <Link
                                    href="/alumni"
                                    className="inline-flex h-10 items-center gap-1.5 rounded-lg bg-[#7A1F2A] px-4 text-xs font-semibold text-white transition-all duration-200 hover:bg-[#681923] active:scale-95"
                                >
                                    Buka Direktori Alumni
                                </Link>
                            </div>
                        </div>
                    ) : (
                        /* Found State: TAMPILAN SKPI BERSIH, SIMETRIS & SELARAS DENGAN WEB PORTAL */
                        <div className="space-y-6">
                            {/* Card Profil Utama Alumni */}
                            <div className="stagger-1 hover-lift rounded-2xl border border-[#E7E3DF] bg-white p-6 shadow-xs sm:p-8">
                                <div className="flex flex-col justify-between gap-6 border-b border-[#E7E3DF] pb-6 md:flex-row md:items-center">
                                    <div>
                                        <div className="mb-2 flex items-center gap-2">
                                            <span className="rounded-md border border-[#E7E3DF] bg-[#F7F6F3] px-2.5 py-0.5 font-mono text-xs font-semibold text-[#5F5F64]">
                                                NPM {alumni.npm}
                                            </span>
                                            <span className="inline-flex items-center gap-1 rounded-md bg-[#EBF5EF] px-2.5 py-0.5 text-[11px] font-medium text-[#2F7D4A]">
                                                <CheckCircle2 className="h-3.5 w-3.5" />{' '}
                                                SKPI Terverifikasi Sah
                                            </span>
                                        </div>
                                        <h2 className="alumni-display text-2xl font-bold text-[#17171A] sm:text-3xl">
                                            {alumni.nama}
                                        </h2>
                                        <p className="mt-1 text-sm text-[#5F5F64]">
                                            Program Studi{' '}
                                            <strong className="text-[#17171A]">
                                                {prodiName}
                                            </strong>{' '}
                                            • Jenjang Sarjana Teknik (S.T.)
                                        </p>
                                    </div>

                                    <div className="shrink-0 space-y-1 text-left md:text-right">
                                        <span className="block text-[11px] font-semibold tracking-wider text-[#87878D] uppercase">
                                            Nomor Registrasi SKPI
                                        </span>
                                        <span className="inline-block rounded-lg border border-[#E7E3DF] bg-[#F8EEEF] px-3 py-1 font-mono text-sm font-bold text-[#7A1F2A]">
                                            {noSkpiDisplay}
                                        </span>
                                        {tglPengesahan && (
                                            <p className="mt-1 text-xs text-[#5F5F64]">
                                                Pengesahan:{' '}
                                                <strong>{tglPengesahan}</strong>
                                            </p>
                                        )}
                                    </div>
                                </div>

                                {/* Ringkasan Statistik Rekam Jejak */}
                                <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
                                    <div className="hover-lift cursor-default rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-4 transition-all duration-200">
                                        <span className="block text-[11px] font-semibold tracking-wider text-[#87878D] uppercase">
                                            Prestasi
                                        </span>
                                        <span className="mt-0.5 block text-xl font-bold text-[#17171A]">
                                            {totalPrestasi} Catatan
                                        </span>
                                    </div>
                                    <div className="hover-lift cursor-default rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-4 transition-all duration-200">
                                        <span className="block text-[11px] font-semibold tracking-wider text-[#87878D] uppercase">
                                            Sertifikasi Profesi
                                        </span>
                                        <span className="mt-0.5 block text-xl font-bold text-[#17171A]">
                                            {totalSertifikasi} Lisensi
                                        </span>
                                    </div>
                                    <div className="hover-lift cursor-default rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-4 transition-all duration-200">
                                        <span className="block text-[11px] font-semibold tracking-wider text-[#87878D] uppercase">
                                            Organisasi
                                        </span>
                                        <span className="mt-0.5 block text-xl font-bold text-[#17171A]">
                                            {totalOrganisasi} Peran
                                        </span>
                                    </div>
                                    <div className="hover-lift cursor-default rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-4 transition-all duration-200">
                                        <span className="block text-[11px] font-semibold tracking-wider text-[#87878D] uppercase">
                                            Pelatihan & Seminar
                                        </span>
                                        <span className="mt-0.5 block text-xl font-bold text-[#17171A]">
                                            {totalPelatihan} Kegiatan
                                        </span>
                                    </div>
                                </div>
                            </div>

                            {/* Section 1: Prestasi dan Penghargaan */}
                            <section className="stagger-3 hover-lift overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                <div className="flex items-center justify-between border-b border-[#E7E3DF] bg-[#FAF9F7] px-6 py-4">
                                    <div className="flex items-center gap-2 text-xs font-bold tracking-wider text-[#17171A] uppercase">
                                        <Trophy className="h-4 w-4 text-[#87630E]" />
                                        <span>
                                            I. Prestasi dan Penghargaan
                                            Kompetisi
                                        </span>
                                    </div>
                                    <span className="text-xs font-medium text-[#5F5F64]">
                                        {totalPrestasi} item
                                    </span>
                                </div>
                                <div className="p-6">
                                    {activeSkpi?.prestasi &&
                                    activeSkpi.prestasi.length > 0 ? (
                                        <div className="divide-y divide-[#E7E3DF]">
                                            {activeSkpi.prestasi.map(
                                                (item, idx) => (
                                                    <div
                                                        key={idx}
                                                        className="flex flex-col justify-between gap-2 py-3.5 text-xs first:pt-0 last:pb-0 sm:flex-row sm:items-center"
                                                    >
                                                        <div>
                                                            <h3 className="text-sm font-semibold text-[#17171A]">
                                                                {item.judul ||
                                                                    item.nama}
                                                            </h3>
                                                            <p className="mt-0.5 text-[#5F5F64]">
                                                                Penyelenggara:{' '}
                                                                {item.penyelenggara ||
                                                                    item.lembaga ||
                                                                    'Fakultas Teknik'}
                                                                {item.tingkat && (
                                                                    <>
                                                                        {' '}
                                                                        •
                                                                        Tingkat:{' '}
                                                                        <strong className="font-medium text-[#17171A]">
                                                                            {
                                                                                item.tingkat
                                                                            }
                                                                        </strong>
                                                                    </>
                                                                )}
                                                                {item.keterangan && (
                                                                    <>
                                                                        {' '}
                                                                        •{' '}
                                                                        <span className="text-[#87878D] italic">
                                                                            {
                                                                                item.keterangan
                                                                            }
                                                                        </span>
                                                                    </>
                                                                )}
                                                            </p>
                                                        </div>
                                                        <div className="shrink-0 sm:text-right">
                                                            {item.nomor_sertifikat && (
                                                                <span className="block font-mono text-[11px] text-[#87878D]">
                                                                    No:{' '}
                                                                    {
                                                                        item.nomor_sertifikat
                                                                    }
                                                                </span>
                                                            )}
                                                            <span className="mt-0.5 inline-block rounded border border-[#E7E3DF] bg-[#FAF9F7] px-2.5 py-0.5 text-[11px] font-semibold text-[#17171A]">
                                                                Tahun{' '}
                                                                {item.tahun}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ),
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-xs text-[#87878D] italic">
                                            Tidak ada catatan prestasi kompetisi
                                            yang terdaftar.
                                        </p>
                                    )}
                                </div>
                            </section>

                            {/* Section 2: Sertifikasi Keahlian & Lisensi Profesi */}
                            <section className="stagger-4 hover-lift overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                <div className="flex items-center justify-between border-b border-[#E7E3DF] bg-[#FAF9F7] px-6 py-4">
                                    <div className="flex items-center gap-2 text-xs font-bold tracking-wider text-[#17171A] uppercase">
                                        <BadgeCheck className="h-4 w-4 text-[#2F7D4A]" />
                                        <span>
                                            II. Sertifikasi Keahlian & Lisensi
                                            Profesi
                                        </span>
                                    </div>
                                    <span className="text-xs font-medium text-[#5F5F64]">
                                        {totalSertifikasi} item
                                    </span>
                                </div>
                                <div className="p-6">
                                    {activeSkpi?.sertifikasi &&
                                    activeSkpi.sertifikasi.length > 0 ? (
                                        <div className="divide-y divide-[#E7E3DF]">
                                            {activeSkpi.sertifikasi.map(
                                                (item, idx) => (
                                                    <div
                                                        key={idx}
                                                        className="flex flex-col justify-between gap-2 rounded-lg p-2 py-3.5 text-xs transition-colors first:pt-0 last:pb-0 hover:bg-[#FAF8F5] sm:flex-row sm:items-center"
                                                    >
                                                        <div>
                                                            <h3 className="text-sm font-semibold text-[#17171A]">
                                                                {item.nama ||
                                                                    item.judul}
                                                            </h3>
                                                            <p className="mt-0.5 text-[#5F5F64]">
                                                                Lembaga Penerbit
                                                                / Asosiasi:{' '}
                                                                {item.lembaga ||
                                                                    item.penyelenggara}
                                                            </p>
                                                        </div>
                                                        <div className="shrink-0 sm:text-right">
                                                            {(item.nomor ||
                                                                item.nomor_sertifikat) && (
                                                                <span className="block font-mono text-[11px] text-[#87878D]">
                                                                    ID:{' '}
                                                                    {item.nomor ||
                                                                        item.nomor_sertifikat}
                                                                </span>
                                                            )}
                                                            <span className="mt-0.5 inline-block rounded border border-[#E7E3DF] bg-[#FAF9F7] px-2.5 py-0.5 text-[11px] font-semibold text-[#17171A]">
                                                                Tahun{' '}
                                                                {item.tahun}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ),
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-xs text-[#87878D] italic">
                                            Tidak ada catatan sertifikasi
                                            profesi yang terdaftar.
                                        </p>
                                    )}
                                </div>
                            </section>

                            {/* Section 3: Organisasi & Kepemimpinan */}
                            <section className="stagger-5 hover-lift overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                <div className="flex items-center justify-between border-b border-[#E7E3DF] bg-[#FAF9F7] px-6 py-4">
                                    <div className="flex items-center gap-2 text-xs font-bold tracking-wider text-[#17171A] uppercase">
                                        <Users className="h-4 w-4 text-[#7A1F2A]" />
                                        <span>
                                            III. Organisasi & Kepemimpinan
                                            Mahasiswa
                                        </span>
                                    </div>
                                    <span className="text-xs font-medium text-[#5F5F64]">
                                        {totalOrganisasi} item
                                    </span>
                                </div>
                                <div className="p-6">
                                    {activeSkpi?.organisasi &&
                                    activeSkpi.organisasi.length > 0 ? (
                                        <div className="divide-y divide-[#E7E3DF]">
                                            {activeSkpi.organisasi.map(
                                                (item, idx) => {
                                                    const periode =
                                                        item.tahun_mulai
                                                            ? `${item.tahun_mulai}${item.tahun_selesai ? ` - ${item.tahun_selesai}` : ' - Sekarang'}`
                                                            : item.tahun;
                                                    return (
                                                        <div
                                                            key={idx}
                                                            className="flex flex-col justify-between gap-2 rounded-lg p-2 py-3.5 text-xs transition-colors first:pt-0 last:pb-0 hover:bg-[#FAF8F5] sm:flex-row sm:items-center"
                                                        >
                                                            <div>
                                                                <h3 className="text-sm font-semibold text-[#17171A]">
                                                                    {item.nama ||
                                                                        item.judul}
                                                                </h3>
                                                                <p className="mt-0.5 text-[#5F5F64]">
                                                                    Jabatan /
                                                                    Peran:{' '}
                                                                    <strong className="font-semibold text-[#17171A]">
                                                                        {item.jabatan ||
                                                                            'Anggota'}
                                                                    </strong>
                                                                    {item.penyelenggara &&
                                                                        ` • ${item.penyelenggara}`}
                                                                </p>
                                                            </div>
                                                            <div className="shrink-0 sm:text-right">
                                                                <span className="inline-block rounded border border-[#E7E3DF] bg-[#FAF9F7] px-2.5 py-0.5 text-[11px] font-semibold text-[#17171A]">
                                                                    Periode{' '}
                                                                    {periode}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    );
                                                },
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-xs text-[#87878D] italic">
                                            Tidak ada catatan aktivitas
                                            organisasi terdaftar.
                                        </p>
                                    )}
                                </div>
                            </section>

                            {/* Section 4: Pelatihan & Seminar */}
                            <section className="stagger-6 hover-lift overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                <div className="flex items-center justify-between border-b border-[#E7E3DF] bg-[#FAF9F7] px-6 py-4">
                                    <div className="flex items-center gap-2 text-xs font-bold tracking-wider text-[#17171A] uppercase">
                                        <BookOpenCheck className="h-4 w-4 text-[#87630E]" />
                                        <span>
                                            IV. Pelatihan, Seminar & Lokakarya
                                            Teknis
                                        </span>
                                    </div>
                                    <span className="text-xs font-medium text-[#5F5F64]">
                                        {totalPelatihan} item
                                    </span>
                                </div>
                                <div className="p-6">
                                    {(activeSkpi?.pelatihan &&
                                        activeSkpi.pelatihan.length > 0) ||
                                    (activeSkpi?.seminar &&
                                        activeSkpi.seminar.length > 0) ? (
                                        <div className="divide-y divide-[#E7E3DF]">
                                            {activeSkpi.pelatihan?.map(
                                                (item, idx) => (
                                                    <div
                                                        key={`pelatihan-${idx}`}
                                                        className="flex flex-col justify-between gap-2 rounded-lg p-2 py-3.5 text-xs transition-colors first:pt-0 last:pb-0 hover:bg-[#FAF8F5] sm:flex-row sm:items-center"
                                                    >
                                                        <div>
                                                            <h3 className="text-sm font-semibold text-[#17171A]">
                                                                {item.nama ||
                                                                    item.judul}
                                                            </h3>
                                                            <p className="mt-0.5 text-[#5F5F64]">
                                                                Penyelenggara:{' '}
                                                                {item.penyelenggara ||
                                                                    'Fakultas Teknik'}
                                                                {item.durasi && (
                                                                    <>
                                                                        {' '}
                                                                        •
                                                                        Durasi:{' '}
                                                                        <strong className="text-[#17171A]">
                                                                            {
                                                                                item.durasi
                                                                            }
                                                                        </strong>
                                                                    </>
                                                                )}
                                                            </p>
                                                        </div>
                                                        <div className="shrink-0 sm:text-right">
                                                            <span className="inline-block rounded border border-[#E7E3DF] bg-[#FAF9F7] px-2.5 py-0.5 text-[11px] font-semibold text-[#17171A]">
                                                                Tahun{' '}
                                                                {item.tahun}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ),
                                            )}
                                            {activeSkpi.seminar?.map(
                                                (item, idx) => (
                                                    <div
                                                        key={`seminar-${idx}`}
                                                        className="flex flex-col justify-between gap-2 rounded-lg p-2 py-3.5 text-xs transition-colors first:pt-0 last:pb-0 hover:bg-[#FAF8F5] sm:flex-row sm:items-center"
                                                    >
                                                        <div>
                                                            <h3 className="text-sm font-semibold text-[#17171A]">
                                                                {item.judul ||
                                                                    item.nama}
                                                            </h3>
                                                            <p className="mt-0.5 text-[#5F5F64]">
                                                                Penyelenggara:{' '}
                                                                {item.penyelenggara ||
                                                                    'Fakultas Teknik'}
                                                            </p>
                                                        </div>
                                                        <div className="shrink-0 sm:text-right">
                                                            <span className="inline-block rounded border border-[#E7E3DF] bg-[#FAF9F7] px-2.5 py-0.5 text-[11px] font-semibold text-[#17171A]">
                                                                Tahun{' '}
                                                                {item.tahun}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ),
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-xs text-[#87878D] italic">
                                            Tidak ada catatan pelatihan atau
                                            seminar yang terdaftar.
                                        </p>
                                    )}
                                </div>
                            </section>

                            {/* Footer Keterangan Resmi */}
                            <div className="stagger-6 flex items-center justify-between rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-4 text-xs text-[#5F5F64]">
                                <div className="flex items-center gap-2">
                                    <ShieldCheck className="h-4 w-4 shrink-0 text-[#2F7D4A]" />
                                    <span>
                                        Data ini bersumber dari catatan akademik
                                        resmi Fakultas Teknik Universitas
                                        Majalengka.
                                    </span>
                                </div>
                                <Link
                                    href="/alumni"
                                    className="font-semibold text-[#7A1F2A] hover:underline"
                                >
                                    Kembali ke Direktori Alumni
                                </Link>
                            </div>
                        </div>
                    )}
                </main>
            </div>
        </PortalLayout>
    );
}