import { AdminFormDialog } from '@/components/admin-form-dialog';
import { useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
    AdminPage,
    Filters,
    Status,
    Pagination,
    Errors,
    date,
    type PageData,
} from '@/components/admin-page';
interface Activity {
    id: number;
    title: string;
    description: string;
    alumni_name_snapshot: string;
    program_studi_snapshot: string;
    status: string;
    activity_date: string | null;
    admin_note: string | null;
    photo_path?: string | null;
}
export default function Activities({
    activities,
    currentStatus,
}: {
    activities: PageData<Activity>;
    currentStatus: string;
}) {
    const [selected, setSelected] = useState<Activity | null>(null);
    const form = useForm({ status: 'PUBLISHED', admin_note: '' });
    return (
        <AdminPage
            title="Moderasi kegiatan"
            description="Baca kiriman alumni sebelum diterbitkan. Catat alasan bila kegiatan perlu ditolak atau diarsipkan."
            path="/admin/activities"
        >
            <Filters
                path="/admin/activities"
                values={[
                    'PENDING',
                    'PUBLISHED',
                    'APPROVED',
                    'REJECTED',
                    'ARCHIVED',
                    'ALL',
                ]}
                current={currentStatus}
            />
            {selected && (
                <AdminFormDialog
                    title="Tinjau kegiatan"
                    onClose={() => setSelected(null)}
                >
                    <form
                        className="admin-form"
                        onSubmit={(e) => {
                            e.preventDefault();
                            form.put(
                                `/admin/activities/${selected.id}/status`,
                                { onSuccess: () => setSelected(null) },
                            );
                        }}
                    >
                        <h2>Tinjau: {selected.title}</h2>
                        {selected.photo_path && (
                            <div style={{ marginBottom: 16 }}>
                                <img
                                    src={
                                        selected.photo_path.startsWith(
                                            'http',
                                        ) || selected.photo_path.startsWith('/')
                                            ? selected.photo_path
                                            : `/storage/${selected.photo_path}`
                                    }
                                    alt={selected.title}
                                    style={{
                                        maxHeight: 260,
                                        maxWidth: '100%',
                                        objectFit: 'contain',
                                        borderRadius: 8,
                                        border: '1px solid #e7e3df',
                                    }}
                                />
                            </div>
                        )}
                        <p style={{ whiteSpace: 'pre-wrap' }}>
                            {selected.description}
                        </p>
                        <Errors errors={form.errors} />
                        <div className="admin-field">
                            <label htmlFor="review-status">Keputusan</label>
                            <select
                                id="review-status"
                                value={form.data.status}
                                onChange={(e) =>
                                    form.setData('status', e.target.value)
                                }
                            >
                                <option value="PUBLISHED">
                                    Terbitkan ke portal
                                </option>
                                <option value="APPROVED">
                                    Setujui tanpa menerbitkan
                                </option>
                                <option value="REJECTED">Tolak</option>
                                <option value="PENDING">
                                    Kembalikan ke antrean
                                </option>
                                <option value="ARCHIVED">Arsipkan</option>
                            </select>
                        </div>
                        <div className="admin-field">
                            <label htmlFor="review-note">Catatan admin</label>
                            <textarea
                                id="review-note"
                                rows={3}
                                maxLength={5000}
                                value={form.data.admin_note}
                                onChange={(e) =>
                                    form.setData('admin_note', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-form-actions">
                            <button
                                id="review-save"
                                disabled={form.processing}
                                className="admin-primary-link"
                            >
                                {form.processing
                                    ? 'Menyimpan…'
                                    : 'Simpan keputusan'}
                            </button>
                            <button
                                id="review-close"
                                type="button"
                                className="admin-button"
                                onClick={() => setSelected(null)}
                            >
                                Tutup
                            </button>
                        </div>
                    </form>
                </AdminFormDialog>
            )}
            <section
                className="admin-panel admin-table-scroll"
                aria-label="Kiriman alumni"
            >
                <table className="admin-table">
                    <thead>
                        <tr>
                            <th scope="col">Kegiatan</th>
                            <th scope="col">Alumni</th>
                            <th scope="col">Status</th>
                            <th scope="col">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        {activities.data.length ? (
                            activities.data.map((a) => (
                                <tr key={a.id}>
                                    <td>
                                        <strong>{a.title}</strong>
                                        <p>{date(a.activity_date)}</p>
                                        <details className="admin-details">
                                            <summary>Isi kegiatan</summary>
                                            <p>{a.description}</p>
                                        </details>
                                    </td>
                                    <td>
                                        {a.alumni_name_snapshot}
                                        <p>{a.program_studi_snapshot}</p>
                                    </td>
                                    <td>
                                        <Status value={a.status} />
                                    </td>
                                    <td>
                                        <button
                                            id={`review-${a.id}`}
                                            className="admin-button"
                                            onClick={() => {
                                                setSelected(a);
                                                form.clearErrors();
                                                form.setData({
                                                    status:
                                                        a.status === 'PENDING'
                                                            ? 'PUBLISHED'
                                                            : a.status,
                                                    admin_note:
                                                        a.admin_note ?? '',
                                                });
                                                window.scrollTo({ top: 0 });
                                            }}
                                        >
                                            Tinjau
                                        </button>
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={4}>
                                    Tidak ada kegiatan pada status ini.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </section>
            <Pagination page={activities} />
        </AdminPage>
    );
}