import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import PortalLayout from '@/layouts/portal-layout';
import {
    CheckCircle2,
    AlertCircle,
    Lock,
    ArrowRight,
    Search,
    History,
    Users,
    TrendingUp,
} from 'lucide-react';
import '../../../css/alumni-home.css';

interface BergerakProps {
    programs: Array<{
        id: number | string;
        name: string;
        description?: string;
    }>;
    recentDonations: Array<{
        id: number | string;
        program_name: string;
        donor_name: string;
        program_studi?: string | null;
        graduation_year?: number | string | null;
        amount: number | string;
        paid_at?: string | null;
        message?: string | null;
    }>;
    allocations: Array<{
        id: number;
        title: string;
        description: string;
        allocated_amount: string;
        distribution_date: string | null;
    }>;
}

const PRESET_AMOUNTS = [50000, 100000, 250000, 500000, 1000000];

function getCsrfToken(): string {
    return decodeURIComponent(
        document.cookie
            .split('; ')
            .find((c) => c.startsWith('XSRF-TOKEN='))
            ?.slice(11) ?? '',
    );
}

export default function AlumniBergerak({ programs, recentDonations, allocations }: BergerakProps) {
    // Identitas alumni
    const [npm, setNpm] = useState('');
    const [verifiedAlumni, setVerifiedAlumni] = useState<{
        npm: string;
        nama?: string;
        prodi?: string;
        tahun_lulus?: number | string;
    } | null>(null);
    const [lookingUp, setLookingUp] = useState(false);

    // Form donasi
    const [selectedProgram, setSelectedProgram] = useState<string | number>(programs[0]?.id || '');
    const [amount, setAmount] = useState<number | string>(100000);
    const [customAmount, setCustomAmount] = useState('');
    const [showCustom, setShowCustom] = useState(false);
    const [message, setMessage] = useState('');
    const [isAnonymous, setIsAnonymous] = useState(false);
    const [submittingPayment, setSubmittingPayment] = useState(false);

    // UI
    const [errorMessage, setErrorMessage] = useState<string | null>(null);
    const [successMessage, setSuccessMessage] = useState<string | null>(null);
    const [sideTab, setSideTab] = useState<'donatur' | 'penyaluran'>('donatur');

    // Step 1: Verifikasi NPM langsung ke SIMAK — tanpa OTP
    const handleVerifyNpm = async () => {
        const trimmed = npm.trim();
        if (!trimmed) {
            setErrorMessage('Masukkan NPM alumni terlebih dahulu.');
            return;
        }
        setLookingUp(true);
        setErrorMessage(null);
        setSuccessMessage(null);
        try {
            const res = await fetch('/api/verify-alumni-npm', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                    'X-XSRF-TOKEN': getCsrfToken(),
                },
                body: JSON.stringify({ npm: trimmed }),
            });
            const json = await res.json();
            if (res.ok && json.success && json.data) {
                setVerifiedAlumni(json.data);
                setSuccessMessage(
                    `Identitas berhasil diverifikasi. Silakan lanjutkan mengisi nominal donasi.`,
                );
            } else {
                setErrorMessage(
                    res.status === 429
                        ? 'Terlalu banyak percobaan. Tunggu beberapa menit sebelum mencoba lagi.'
                        : json.message || 'NPM tidak ditemukan. Periksa kembali NPM Anda.',
                );
            }
        } catch {
            setErrorMessage('Gagal terhubung ke server. Periksa koneksi internet Anda.');
        } finally {
            setLookingUp(false);
        }
    };

    // Step 2: Buat donasi langsung (kirim NPM, bukan token OTP)
    const handleCreateDonation = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!verifiedAlumni) {
            setErrorMessage('Verifikasi NPM terlebih dahulu.');
            return;
        }
        const finalAmount = showCustom ? parseInt(customAmount, 10) : Number(amount);
        if (!finalAmount || finalAmount < 10000) {
            setErrorMessage('Nominal kontribusi minimal Rp 10.000.');
            return;
        }
        setSubmittingPayment(true);
        setErrorMessage(null);
        try {
            const res = await fetch('/api/v1/alumni-bergerak/donations', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                    'X-XSRF-TOKEN': getCsrfToken(),
                },
                body: JSON.stringify({
                    npm: verifiedAlumni.npm,
                    program_id: selectedProgram,
                    amount: finalAmount,
                    message: message.trim() || null,
                    is_anonymous: isAnonymous,
                }),
            });
            const json = await res.json();
            if (res.ok && json.payment_url) {
                window.location.href = json.payment_url;
            } else {
                setErrorMessage(
                    res.status === 429
                        ? 'Terlalu banyak permintaan. Tunggu beberapa saat sebelum mencoba lagi.'
                        : res.status >= 500
                          ? 'Layanan sedang gangguan — coba kembali dalam beberapa saat.'
                          : json.message || 'Gagal memproses transaksi. Coba kembali.',
                );
                setSubmittingPayment(false);
            }
        } catch {
            setErrorMessage('Gagal terhubung ke sistem pembayaran. Periksa koneksi internet Anda.');
            setSubmittingPayment(false);
        }
    };

    return (
        <PortalLayout>
            <Head title="Alumni Bergerak - Program Kepedulian FT UNMA">
                <meta
                    name="description"
                    content="Program donasi sukarela alumni untuk kemajuan Fakultas Teknik Universitas Majalengka. Tercatat, transparan, dan dilaporkan secara berkala."
                />
            </Head>

            <div className="alumni-home min-h-screen pb-20">
                {/* ── HERO ── */}
                <header className="border-b border-[#E7E3DF] bg-white">
                    <div className="alumni-shell py-10 lg:py-14">
                        <div className="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
                            <div className="max-w-2xl">
                                <p className="stagger-1 mb-2 text-xs font-semibold tracking-[0.14em] text-[#87630E] uppercase">
                                    Program Kepedulian Almamater
                                </p>
                                <h1 className="stagger-2 alumni-display text-3xl leading-[1.12] font-bold tracking-tight text-[#17171A] sm:text-4xl lg:text-[44px]">
                                    Alumni Bergerak FT UNMA
                                </h1>
                                <p className="stagger-3 mt-3.5 text-sm leading-relaxed text-[#5F5F64] sm:text-base">
                                    Donasi sukarela dari alumni untuk kemajuan Fakultas Teknik Universitas Majalengka.
                                    Setiap kontribusi dicatat dan dilaporkan secara terbuka.
                                </p>
                            </div>
                        </div>
                    </div>
                </header>

                <main className="alumni-shell py-8 sm:py-12">
                    <div className="grid grid-cols-1 items-start gap-8 sm:gap-10 lg:grid-cols-5">
                        {/* ── KOLOM KIRI (3/5) ── */}
                        <div className="space-y-6 lg:col-span-3">
                            {/* Cara berkontribusi */}
                            <div className="stagger-4 rounded-xl border border-[#E7E3DF] bg-[#FAF8F5] px-5 py-4 sm:px-6">
                                <p className="mb-2 text-xs font-semibold tracking-wider text-[#87630E] uppercase">
                                    Cara Berkontribusi
                                </p>
                                <p className="text-sm leading-6 text-[#5F5F64]">
                                    Masukkan NPM Anda untuk diverifikasi ke basis data alumni
                                    universitas. Tidak perlu kode OTP — cukup NPM yang Anda miliki.
                                    Setelah terverifikasi, pilih program dan isi nominal donasi,
                                    lalu Anda akan diarahkan ke halaman pembayaran.
                                </p>
                            </div>

                            {/* ── FORM DONASI ── */}
                            <div className="stagger-5 overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                <div className="border-b border-[#E7E3DF] bg-[#FAF8F5] px-6 py-5 sm:px-8">
                                    <span className="mb-1 block text-[10px] font-bold tracking-wider text-[#87630E] uppercase">
                                        Formulir Kontribusi Alumni
                                    </span>
                                    <h2 className="font-serif text-lg font-bold text-[#17171A]">
                                        Salurkan Donasi Alumni Bergerak
                                    </h2>
                                    <p className="mt-1 text-xs text-slate-500">
                                        Masukkan NPM terdaftar untuk memverifikasi identitas alumni Anda.
                                    </p>
                                </div>

                                <div className="space-y-5 px-6 py-6 sm:px-8">
                                    {/* Alert */}
                                    {errorMessage && (
                                        <div className="flex items-start gap-2.5 border-l-2 border-[#7A1F2A] bg-[#7A1F2A]/5 px-4 py-3 text-xs text-[#7A1F2A]">
                                            <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                            <span className="font-medium">{errorMessage}</span>
                                        </div>
                                    )}
                                    {successMessage && (
                                        <div className="flex items-start gap-2.5 border-l-2 border-[#87630E] bg-[#87630E]/5 px-4 py-3 text-xs text-[#87630E]">
                                            <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                            <span className="font-medium">{successMessage}</span>
                                        </div>
                                    )}

                                    {!verifiedAlumni ? (
                                        /* ── STEP 1: Verifikasi NPM (tanpa OTP) ── */
                                        <div className="space-y-5 rounded-xl border border-[#E7E3DF] bg-[#FAF8F5] p-5">
                                            <div className="flex items-center gap-2.5 border-b border-[#E7E3DF] pb-3.5">
                                                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#7A1F2A] text-xs font-bold text-white">
                                                    1
                                                </span>
                                                <h3 className="text-sm font-bold text-[#17171A]">
                                                    Verifikasi NPM Alumni
                                                </h3>
                                            </div>

                                            <div>
                                                <label
                                                    htmlFor="alumni-npm"
                                                    className="mb-1.5 block text-xs font-semibold tracking-wider text-[#5F5F64] uppercase"
                                                >
                                                    Nomor Pokok Mahasiswa (NPM)
                                                </label>
                                                <div className="flex gap-2">
                                                    <input
                                                        id="alumni-npm"
                                                        type="text"
                                                        value={npm}
                                                        onChange={(e) => setNpm(e.target.value)}
                                                        onKeyDown={(e) =>
                                                            e.key === 'Enter' && handleVerifyNpm()
                                                        }
                                                        placeholder="Contoh: 221410059 atau 22.14.1.0059"
                                                        disabled={lookingUp}
                                                        className="h-11 w-full rounded-lg border border-[#D7D1CC] bg-white px-3.5 font-mono text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden disabled:bg-slate-100"
                                                    />
                                                    <button
                                                        type="button"
                                                        onClick={handleVerifyNpm}
                                                        disabled={lookingUp || !npm.trim()}
                                                        className="flex shrink-0 items-center gap-1.5 rounded-lg bg-[#7A1F2A] px-4 py-2 text-xs font-semibold text-white transition-all hover:bg-[#681923] active:scale-95 disabled:opacity-50"
                                                    >
                                                        <Search className="h-3.5 w-3.5" />
                                                        {lookingUp ? 'Memeriksa...' : 'Periksa NPM'}
                                                    </button>
                                                </div>
                                                <p className="mt-1.5 text-[11px] text-slate-400">
                                                    Format yang didukung: tanpa titik (221410059) atau dengan titik (22.14.1.0059).
                                                </p>
                                            </div>
                                        </div>
                                    ) : (
                                        /* ── STEP 2: Form Donasi ── */
                                        <form onSubmit={handleCreateDonation} className="space-y-5">
                                            {/* Badge terverifikasi */}
                                            <div className="flex items-center justify-between gap-3 border-l-2 border-[#87630E] bg-[#87630E]/5 px-4 py-3">
                                                <div className="flex items-center gap-2 text-xs font-bold text-[#5a4008]">
                                                    <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-[#87630E]" />
                                                    <span>
                                                        {verifiedAlumni.nama || verifiedAlumni.npm}
                                                    </span>
                                                    {verifiedAlumni.prodi && (
                                                        <span className="font-normal text-[#87630E]">
                                                            · {verifiedAlumni.prodi}
                                                        </span>
                                                    )}
                                                </div>
                                                <button
                                                    type="button"
                                                    onClick={() => {
                                                        setVerifiedAlumni(null);
                                                        setSuccessMessage(null);
                                                    }}
                                                    className="shrink-0 text-[11px] font-semibold text-[#87630E] underline"
                                                >
                                                    Ganti
                                                </button>
                                            </div>

                                            {/* Program */}
                                            <div>
                                                <label
                                                    htmlFor="donation-program"
                                                    className="mb-1.5 block text-xs font-semibold tracking-wider text-[#5F5F64] uppercase"
                                                >
                                                    Program Penyaluran Dana
                                                </label>
                                                <select
                                                    id="donation-program"
                                                    value={selectedProgram}
                                                    onChange={(e) => setSelectedProgram(e.target.value)}
                                                    className="h-11 w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] px-3.5 text-sm text-[#17171A] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden"
                                                    required
                                                >
                                                    {programs.map((p) => (
                                                        <option key={p.id} value={p.id}>
                                                            {p.name}
                                                        </option>
                                                    ))}
                                                </select>
                                            </div>

                                            {/* Nominal */}
                                            <div>
                                                <label className="mb-1.5 block text-xs font-semibold tracking-wider text-[#5F5F64] uppercase">
                                                    Nominal Kontribusi
                                                </label>
                                                <div className="mb-2.5 grid grid-cols-3 gap-2">
                                                    {PRESET_AMOUNTS.map((val) => (
                                                        <button
                                                            key={val}
                                                            type="button"
                                                            onClick={() => {
                                                                setAmount(val);
                                                                setCustomAmount('');
                                                                setShowCustom(false);
                                                            }}
                                                            className={`rounded-lg border px-2 py-2 text-xs font-semibold transition-all active:scale-95 ${
                                                                !showCustom && amount === val
                                                                    ? 'border-[#7A1F2A] bg-[#7A1F2A] text-white shadow-xs'
                                                                    : 'border-[#D7D1CC] bg-[#FAF8F5] text-slate-700 hover:border-[#7A1F2A]/40'
                                                            }`}
                                                        >
                                                            {val >= 1_000_000
                                                                ? `${val / 1_000_000}Jt`
                                                                : `${val / 1000}Rb`}
                                                        </button>
                                                    ))}
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            setShowCustom(true);
                                                            setAmount('');
                                                            setTimeout(() => {
                                                                document
                                                                    .getElementById('custom-amount-input')
                                                                    ?.focus();
                                                            }, 50);
                                                        }}
                                                        className={`rounded-lg border px-2 py-2 text-xs font-semibold transition-all active:scale-95 ${
                                                            showCustom
                                                                ? 'border-[#7A1F2A] bg-[#7A1F2A] text-white shadow-xs'
                                                                : 'border-[#D7D1CC] bg-[#FAF8F5] text-slate-700 hover:border-[#7A1F2A]/40'
                                                        }`}
                                                    >
                                                        Jumlah Lain
                                                    </button>
                                                </div>
                                                {showCustom && (
                                                    <div className="relative">
                                                        <span className="absolute top-1/2 left-3.5 -translate-y-1/2 text-sm font-bold text-[#7A1F2A]">
                                                            Rp
                                                        </span>
                                                        <input
                                                            id="custom-amount-input"
                                                            type="text"
                                                            inputMode="numeric"
                                                            value={
                                                                customAmount
                                                                    ? Number(customAmount).toLocaleString('id-ID')
                                                                    : ''
                                                            }
                                                            onChange={(e) => {
                                                                const raw = e.target.value.replace(/\D/g, '');
                                                                setCustomAmount(raw);
                                                            }}
                                                            placeholder="Ketik nominal (min 10.000)"
                                                            className="h-11 w-full rounded-lg border-2 border-[#7A1F2A] bg-white pr-3.5 pl-10 tabular-nums text-sm text-[#17171A] placeholder-[#AEAEB5] transition-all focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden"
                                                        />
                                                    </div>
                                                )}
                                            </div>

                                            {/* Pesan */}
                                            <div>
                                                <label
                                                    htmlFor="donation-message"
                                                    className="mb-1.5 block text-xs font-semibold tracking-wider text-[#5F5F64] uppercase"
                                                >
                                                    Pesan untuk Almamater{' '}
                                                    <span className="font-normal text-slate-400 normal-case">
                                                        (opsional)
                                                    </span>
                                                </label>
                                                <textarea
                                                    id="donation-message"
                                                    rows={3}
                                                    value={message}
                                                    onChange={(e) => setMessage(e.target.value)}
                                                    placeholder="Tuliskan pesan atau doa untuk kemajuan Fakultas Teknik UNMA..."
                                                    className="w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] p-3 text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden"
                                                />
                                            </div>

                                            {/* Anonim toggle */}
                                            <button
                                                type="button"
                                                id="donation-anon"
                                                role="switch"
                                                aria-checked={isAnonymous}
                                                onClick={() => setIsAnonymous(!isAnonymous)}
                                                className="flex cursor-pointer items-center gap-3 rounded-lg p-0 text-left focus:outline-none"
                                            >
                                                <span
                                                    className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ${
                                                        isAnonymous ? 'bg-[#7A1F2A]' : 'bg-slate-200'
                                                    }`}
                                                >
                                                    <span
                                                        className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200 ${
                                                            isAnonymous ? 'translate-x-4' : 'translate-x-0'
                                                        }`}
                                                    />
                                                </span>
                                                <span className="text-xs text-slate-600">
                                                    Sembunyikan nama di daftar publik (tampil sebagai "Alumni Anonim")
                                                </span>
                                            </button>

                                            {/* CTA */}
                                            <button
                                                type="submit"
                                                disabled={submittingPayment}
                                                className="group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#7A1F2A] px-6 py-3.5 text-sm font-semibold text-white shadow-xs transition-all hover:bg-[#681923] active:scale-95 disabled:opacity-50"
                                            >
                                                <Lock className="h-4 w-4 text-[#E8D9A3]" />
                                                {submittingPayment
                                                    ? 'Menyiapkan Pembayaran...'
                                                    : 'Lanjutkan ke Pembayaran'}
                                                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                                            </button>
                                            <p className="text-center text-[11px] text-slate-400">
                                                Pembayaran aman berstandar perbankan nasional.
                                            </p>
                                        </form>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* ── KOLOM KANAN (2/5) — TABS ── */}
                        <div className="space-y-0 lg:sticky lg:top-24 lg:col-span-2">
                            <div className="overflow-hidden rounded-2xl border border-[#E7E3DF] bg-white shadow-xs">
                                {/* Tab bar */}
                                <div className="flex border-b border-[#E7E3DF]">
                                    <button
                                        type="button"
                                        onClick={() => setSideTab('donatur')}
                                        className={`flex flex-1 items-center justify-center gap-2 py-3.5 text-xs font-semibold transition-colors ${
                                            sideTab === 'donatur'
                                                ? 'border-b-2 border-[#7A1F2A] bg-white text-[#7A1F2A]'
                                                : 'bg-[#FAF8F5] text-slate-500 hover:text-slate-700'
                                        }`}
                                    >
                                        <Users className="h-3.5 w-3.5" />
                                        Donatur
                                        {recentDonations.length > 0 && (
                                            <span className="text-xs tabular-nums">
                                                ({recentDonations.length})
                                            </span>
                                        )}
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setSideTab('penyaluran')}
                                        className={`flex flex-1 items-center justify-center gap-2 py-3.5 text-xs font-semibold transition-colors ${
                                            sideTab === 'penyaluran'
                                                ? 'border-b-2 border-[#7A1F2A] bg-white text-[#7A1F2A]'
                                                : 'bg-[#FAF8F5] text-slate-500 hover:text-slate-700'
                                        }`}
                                    >
                                        <TrendingUp className="h-3.5 w-3.5" />
                                        Penyaluran
                                        {allocations.length > 0 && (
                                            <span className="text-xs tabular-nums">
                                                ({allocations.length})
                                            </span>
                                        )}
                                    </button>
                                </div>

                                {/* Tab: Donatur */}
                                {sideTab === 'donatur' && (
                                    <div>
                                        <div className="border-b border-[#E7E3DF] px-5 py-3.5">
                                            <h2 className="text-sm font-semibold text-[#17171A]">
                                                Daftar donatur
                                            </h2>
                                        </div>
                                        <div className="max-h-105 divide-y divide-slate-100 overflow-y-auto">
                                            {recentDonations.length === 0 ? (
                                                <p className="py-10 text-center text-xs text-slate-400 italic">
                                                    Belum ada donasi terverifikasi.
                                                </p>
                                            ) : (
                                                recentDonations.map((item) => (
                                                    <div
                                                        key={item.id}
                                                        className="px-5 py-3.5 transition-colors hover:bg-[#FAF8F5]"
                                                    >
                                                        <div className="flex items-start justify-between gap-2">
                                                            <div className="min-w-0">
                                                                <p className="truncate text-xs font-bold text-[#17171A]">
                                                                    {item.donor_name}
                                                                </p>
                                                                <p className="mt-0.5 truncate text-[11px] text-slate-500">
                                                                    {item.program_name}
                                                                </p>
                                                            </div>
                                                            <div className="shrink-0 text-right">
                                                                <p className="font-mono text-xs font-bold text-[#7A1F2A]">
                                                                    Rp{' '}
                                                                    {Number(item.amount).toLocaleString('id-ID')}
                                                                </p>
                                                                <p className="mt-0.5 text-[10px] text-slate-400">
                                                                    {item.paid_at
                                                                        ? new Date(item.paid_at).toLocaleDateString(
                                                                              'id-ID',
                                                                              {
                                                                                  day: 'numeric',
                                                                                  month: 'short',
                                                                              },
                                                                          )
                                                                        : ''}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        {item.message && (
                                                            <p className="mt-2 rounded-r border-l-2 border-[#7A1F2A]/40 bg-[#FAF8F5] py-1 pl-2.5 text-[11px] leading-relaxed text-slate-600 italic">
                                                                "{item.message}"
                                                            </p>
                                                        )}
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </div>
                                )}

                                {/* Tab: Penyaluran */}
                                {sideTab === 'penyaluran' && (
                                    <div>
                                        <div className="flex items-center gap-2 border-b border-[#E7E3DF] px-5 py-3.5">
                                            <History className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                            <span className="text-xs font-bold text-[#17171A]">
                                                Jejak Penyaluran Dana
                                            </span>
                                        </div>
                                        <div className="max-h-105 divide-y divide-slate-100 overflow-y-auto">
                                            {allocations.length === 0 ? (
                                                <p className="py-10 text-center text-xs text-slate-400 italic">
                                                    Belum ada laporan penyaluran dipublikasikan.
                                                </p>
                                            ) : (
                                                allocations.map((al) => (
                                                    <div
                                                        key={al.id}
                                                        className="px-5 py-4 transition-colors hover:bg-[#FAF8F5]"
                                                    >
                                                        <div className="flex items-start gap-3">
                                                            <div className="min-w-0">
                                                                <p className="text-xs leading-snug font-bold text-[#17171A]">
                                                                    {al.title}
                                                                </p>
                                                                <p className="mt-1 line-clamp-2 text-[11px] leading-relaxed text-slate-500">
                                                                    {al.description}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div className="mt-2.5 flex items-center justify-between text-[11px]">
                                                            <span className="text-slate-400">
                                                                {al.distribution_date
                                                                    ? new Date(
                                                                          al.distribution_date,
                                                                      ).toLocaleDateString('id-ID', {
                                                                          day: 'numeric',
                                                                          month: 'long',
                                                                          year: 'numeric',
                                                                      })
                                                                    : 'Tanggal belum dicatat'}
                                                            </span>
                                                            <span className="font-mono font-bold text-[#7A1F2A]">
                                                                Rp{' '}
                                                                {Number(al.allocated_amount).toLocaleString('id-ID')}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </PortalLayout>
    );
}