/* Database backups: made every night at 02:30 (the newest are kept), downloadable, or made now. */
import { router } from '@inertiajs/react';
import { useState } from 'react';
import { DatabaseBackup, Download, Plus } from 'lucide-react';
import PlatformLayout from '../../layouts/PlatformLayout';
import { Button, Card, EmptyState, PageHeader } from '../../components/ui';

export default function Backups({ backups, keep }: { backups: { name: string; size: string; when: string }[]; keep: number }) {
    const [busy, setBusy] = useState(false);
    return (
        <PlatformLayout title="Backups">
            <PageHeader title="Backups" subtitle={`The whole database, every night at 02:30. The newest ${keep} are kept on the server; download one now and then to keep a copy elsewhere.`}
                actions={<Button icon={Plus} disabled={busy} onClick={() => router.post(route('platform.backups.store'), {}, { onStart: () => setBusy(true), onFinish: () => setBusy(false) })}>{busy ? 'Backing up…' : 'Back up now'}</Button>} />
            <Card pad={false}>
                {backups.length === 0 ? <EmptyState icon={DatabaseBackup}>No backups yet. They start tonight, or press “Back up now”.</EmptyState> : (
                    <ul className="divide-y divide-line">
                        {backups.map((b) => (
                            <li key={b.name} className="flex items-center gap-3 px-5 py-3">
                                <DatabaseBackup className="size-5 text-muted" aria-hidden />
                                <div className="min-w-0 flex-1"><p className="truncate font-semibold text-ink">{b.when}</p><p className="truncate text-xs text-muted">{b.name} · {b.size}</p></div>
                                <a href={route('platform.backups.download', { name: b.name })} className="flex items-center gap-1.5 rounded-lg border border-line px-3 py-2 text-sm font-semibold text-ink-2 hover:bg-line-2"><Download className="size-4" aria-hidden />Download</a>
                            </li>
                        ))}
                    </ul>
                )}
            </Card>
            <p className="mt-4 text-sm text-muted">To restore on the server: <code className="rounded bg-line-2 px-1.5 py-0.5">gunzip -c backup.sql.gz | mysql dawn_shop</code> (or import it in cPanel → phpMyAdmin).</p>
        </PlatformLayout>
    );
}