import { AdminFormDialog } from '@/components/admin-form-dialog';
import { Fragment, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { AdminPage, Errors, money, date } from '@/components/admin-page';

interface Program {
    id: number;
    name: string;
    description: string | null;
    target_amount: string;
    collected_amount: string;
    donations_count: number;
    donations_sum_amount: string | null;
    is_active: boolean;
    created_at: string;
}

function ProgramForm({
    initial,
    action,
    onCancel,
}: {
    initial?: Partial<Program>;
    action: string;
    onCancel: () => void;
}) {
    const form = useForm({
        name: initial?.name ?? '',
        description: initial?.description ?? '',
        target_amount: initial?.target_amount ?? '',
        is_active: initial?.is_active ?? true,
    });

    return (
        <form
            className="admin-form"
            onSubmit={(e) => {
                e.preventDefault();
                const method = initial?.id ? 'put' : 'post';
                form[method](action, {
                    onSuccess: onCancel,
                    preserveScroll: true,
                });
            }}
        >
            <h2>{initial?.id ? 'Edit program' : 'Tambah program donasi'}</h2>
            <Errors errors={form.errors} />
            <div className="admin-field">
                <label htmlFor="prog-name">Nama program *</label>
                <input
                    id="prog-name"
                    required
                    maxLength={255}
                    value={form.data.name}
                    onChange={(e) => form.setData('name', e.target.value)}
                />
            </div>
            <div className="admin-field">
                <label htmlFor="prog-desc">Deskripsi</label>
                <textarea
                    id="prog-desc"
                    rows={3}
                    maxLength={2000}
                    value={form.data.description}
                    onChange={(e) =>
                        form.setData('description', e.target.value)
                    }
                />
            </div>
            <div className="admin-field">
                <label htmlFor="prog-target">
                    Target dana (Rp) — kosongkan jika tidak ada target
                </label>
                <input
                    id="prog-target"
                    type="number"
                    min="0"
                    step="1"
                    value={form.data.target_amount}
                    onChange={(e) =>
                        form.setData('target_amount', e.target.value)
                    }
                    placeholder="0"
                />
            </div>
            <div
                className="admin-field"
                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
            >
                <input
                    id="prog-active"
                    type="checkbox"
                    checked={form.data.is_active}
                    onChange={(e) =>
                        form.setData('is_active', e.target.checked)
                    }
                    style={{ width: 'auto' }}
                />
                <label htmlFor="prog-active" style={{ margin: 0 }}>
                    Program aktif (tampil di halaman donasi)
                </label>
            </div>
            <div className="admin-form-actions">
                <button
                    id={
                        initial?.id
                            ? `prog-save-${initial.id}`
                            : 'prog-save-new'
                    }
                    className="admin-primary-link"
                    disabled={form.processing}
                >
                    {form.processing ? 'Menyimpan…' : 'Simpan'}
                </button>
                <button
                    type="button"
                    className="admin-button"
                    onClick={onCancel}
                >
                    Batal
                </button>
            </div>
        </form>
    );
}

export default function Programs({ programs }: { programs: Program[] }) {
    const [showCreate, setShowCreate] = useState(false);
    const [editId, setEditId] = useState<number | null>(null);

    return (
        <AdminPage
            title="Program donasi"
            description="Kelola program donasi Alumni Bergerak. Hanya program aktif yang tampil di halaman publik."
            path="/admin/programs"
            action={
                <button
                    id="prog-open-create"
                    className="admin-primary-link"
                    onClick={() => {
                        setShowCreate(true);
                        setEditId(null);
                    }}
                >
                    + Tambah program
                </button>
            }
        >
            {showCreate && (
                <AdminFormDialog
                    title="Tambah program donasi"
                    onClose={() => setShowCreate(false)}
                >
                    <ProgramForm
                        action="/admin/programs"
                        onCancel={() => setShowCreate(false)}
                    />
                </AdminFormDialog>
            )}

            {editId !== null && programs.find((p) => p.id === editId) && (
                <AdminFormDialog
                    title="Edit program donasi"
                    onClose={() => setEditId(null)}
                >
                    <ProgramForm
                        key={editId}
                        initial={programs.find((p) => p.id === editId)}
                        action={`/admin/programs/${editId}`}
                        onCancel={() => setEditId(null)}
                    />
                </AdminFormDialog>
            )}

            <section
                className="admin-panel admin-table-scroll"
                aria-label="Daftar program donasi"
            >
                <table className="admin-table">
                    <thead>
                        <tr>
                            <th scope="col">Program</th>
                            <th scope="col">Target</th>
                            <th scope="col">Terkumpul (lunas)</th>
                            <th scope="col">Transaksi</th>
                            <th scope="col">Status</th>
                            <th scope="col">Dibuat</th>
                            <th scope="col">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {programs.length ? (
                            programs.map((p) => (
                                <Fragment key={p.id}>
                                    <tr key={p.id}>
                                        <td>
                                            <strong>{p.name}</strong>
                                            {p.description && (
                                                <p
                                                    style={{
                                                        color: 'var(--color-muted-foreground)',
                                                        fontSize: 12,
                                                    }}
                                                >
                                                    {p.description}
                                                </p>
                                            )}
                                        </td>
                                        <td>
                                            {Number(p.target_amount) > 0 ? (
                                                money(p.target_amount)
                                            ) : (
                                                <span
                                                    style={{
                                                        color: 'var(--color-muted-foreground)',
                                                    }}
                                                >
                                                    —
                                                </span>
                                            )}
                                        </td>
                                        <td>
                                            <strong>
                                                {money(
                                                    p.donations_sum_amount ??
                                                        '0',
                                                )}
                                            </strong>
                                        </td>
                                        <td>{p.donations_count} transaksi</td>
                                        <td>
                                            <span
                                                style={{
                                                    display: 'inline-block',
                                                    padding: '2px 10px',
                                                    borderRadius: 999,
                                                    fontSize: 12,
                                                    fontWeight: 600,
                                                    background: p.is_active
                                                        ? '#d1fae5'
                                                        : '#fee2e2',
                                                    color: p.is_active
                                                        ? '#065f46'
                                                        : '#991b1b',
                                                }}
                                            >
                                                {p.is_active
                                                    ? 'Aktif'
                                                    : 'Nonaktif'}
                                            </span>
                                        </td>
                                        <td>{date(p.created_at)}</td>
                                        <td>
                                            <button
                                                id={`prog-edit-${p.id}`}
                                                className="admin-button"
                                                onClick={() => {
                                                    setEditId(
                                                        editId === p.id
                                                            ? null
                                                            : p.id,
                                                    );
                                                    setShowCreate(false);
                                                }}
                                            >
                                                {editId === p.id
                                                    ? 'Tutup'
                                                    : 'Edit'}
                                            </button>
                                        </td>
                                    </tr>
                                </Fragment>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={7}>
                                    Belum ada program donasi. Klik "+ Tambah
                                    program" untuk membuat.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </section>
        </AdminPage>
    );
}