import { AdminFormDialog } from '@/components/admin-form-dialog';
import { useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
    AdminPage,
    Filters,
    Status,
    Pagination,
    Errors,
    money,
    date,
    type PageData,
} from '@/components/admin-page';
interface Donation {
    id: number;
    alumni_name_snapshot: string;
    alumni_npm: string;
    program: { name: string } | null;
    amount: string;
    payment_status: string;
    created_at: string;
    paid_at: string | null;
}
export default function Donations({
    donations,
    currentStatus,
}: {
    donations: PageData<Donation>;
    currentStatus: string;
}) {
    const [showForm, setShowForm] = useState(false);
    const form = useForm({
        title: '',
        description: '',
        allocated_amount: '',
        distribution_date: '',
    });
    return (
        <AdminPage
            title="Transaksi donasi"
            description="Pantau pembayaran Alumni Bergerak dan catat penyaluran dana. Status pembayaran diperbarui otomatis."
            path="/admin/donations"
            action={
                <button
                    id="allocation-open"
                    className="admin-primary-link"
                    onClick={() => setShowForm(!showForm)}
                    aria-expanded={showForm}
                    aria-controls="allocation-form"
                >
                    Catat penyaluran
                </button>
            }
        >
            {showForm && (
                <AdminFormDialog
                    title="Catat penyaluran"
                    onClose={() => setShowForm(false)}
                >
                    <form
                        className="admin-form"
                        onSubmit={(e) => {
                            e.preventDefault();
                            form.post('/admin/allocations', {
                                onSuccess: () => {
                                    form.reset();
                                    setShowForm(false);
                                },
                            });
                        }}
                    >
                        <h2>Catatan penyaluran dana</h2>
                        <p>
                            Disimpan sebagai catatan internal, belum
                            dipublikasikan ke portal.
                        </p>
                        <Errors errors={form.errors} />
                        <div className="admin-field">
                            <label htmlFor="allocation-title">
                                Judul penyaluran
                            </label>
                            <input
                                id="allocation-title"
                                required
                                maxLength={255}
                                value={form.data.title}
                                onChange={(e) =>
                                    form.setData('title', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="allocation-amount">
                                Nominal (Rp)
                            </label>
                            <input
                                id="allocation-amount"
                                type="number"
                                min="1"
                                step="0.01"
                                required
                                value={form.data.allocated_amount}
                                onChange={(e) =>
                                    form.setData(
                                        'allocated_amount',
                                        e.target.value,
                                    )
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="allocation-date">
                                Tanggal penyaluran
                            </label>
                            <input
                                id="allocation-date"
                                type="date"
                                required
                                value={form.data.distribution_date}
                                onChange={(e) =>
                                    form.setData(
                                        'distribution_date',
                                        e.target.value,
                                    )
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="allocation-description">
                                Rincian penggunaan dana
                            </label>
                            <textarea
                                id="allocation-description"
                                rows={4}
                                required
                                value={form.data.description}
                                onChange={(e) =>
                                    form.setData('description', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-form-actions">
                            <button
                                id="allocation-save"
                                className="admin-primary-link"
                                disabled={form.processing}
                            >
                                {form.processing
                                    ? 'Menyimpan…'
                                    : 'Simpan catatan'}
                            </button>
                            <button
                                id="allocation-cancel"
                                type="button"
                                className="admin-button"
                                onClick={() => setShowForm(false)}
                            >
                                Tutup
                            </button>
                        </div>
                    </form>
                </AdminFormDialog>
            )}
            <Filters
                path="/admin/donations"
                values={[
                    'ALL',
                    'PENDING_PAYMENT',
                    'PAID',
                    'FAILED',
                    'EXPIRED',
                    'REFUNDED',
                    'CREATED',
                ]}
                current={currentStatus}
            />
            {/* Table Donasi */}
            <section
                className="admin-panel admin-table-scroll"
                aria-label="Daftar transaksi"
            >
                <table className="admin-table">
                    <thead>
                        <tr>
                            <th scope="col">Donatur</th>
                            <th scope="col">Program</th>
                            <th scope="col">Nominal</th>
                            <th scope="col">Status</th>
                            <th scope="col">Tanggal</th>
                        </tr>
                    </thead>
                    <tbody>
                        {donations.data.length ? (
                            donations.data.map((d) => (
                                <tr key={d.id}>
                                    <td>
                                        <strong>
                                            {d.alumni_name_snapshot}
                                        </strong>
                                        <p>
                                            {d.alumni_npm} · #{d.id}
                                        </p>
                                    </td>
                                    <td>
                                        {d.program?.name ??
                                            'Program tidak tersedia'}
                                    </td>
                                    <td>{money(d.amount)}</td>
                                    <td>
                                        <Status value={d.payment_status} />
                                    </td>
                                    <td>
                                        {date(d.created_at)}
                                        {d.paid_at && (
                                            <p>Lunas: {date(d.paid_at)}</p>
                                        )}
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={5}>
                                    Tidak ada transaksi pada status ini.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </section>
            <Pagination page={donations} />
        </AdminPage>
    );
}