import React from "react";
import { Link, router } from "@inertiajs/react";
import {
    ArrowLeft,
    Database,
    Download,
    HardDrive,
    Loader2,
    RefreshCcw,
    Trash2,
} from "lucide-react";
import { Card, PageHeader, Button, Badge } from "../../components/ui";

type Backup = {
    name: string;
    path: string;
    size: number;
    created_at: string;
};

function formatSize(bytes: number) {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}

export default function DatabaseBackup({
    driver,
    backups,
}: {
    driver: string;
    backups: Backup[];
}) {
    const [running, setRunning] = React.useState(false);
    const [deleting, setDeleting] = React.useState<string | null>(null);
    const [error, setError] = React.useState<string | null>(null);

    const runBackup = () => {
        setRunning(true);
        setError(null);
        router.post(
            "/settings/database",
            {},
            {
                preserveScroll: true,
                onError: (errors) =>
                    setError(
                        (Object.values(errors)[0] as string) ?? "Backup gagal.",
                    ),
                onFinish: () => setRunning(false),
            },
        );
    };

    const remove = (backup: Backup) => {
        if (!confirm(`Hapus file backup "${backup.name}"?`)) return;
        setDeleting(backup.path);
        router.delete("/settings/database", {
            data: { path: backup.path },
            preserveScroll: true,
            onFinish: () => setDeleting(null),
        });
    };

    return (
        <div className="p-7">
            <PageHeader
                title="Database"
                description="Backup manual dan riwayat backup database."
                action={
                    <Link
                        href="/settings"
                        className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
                    >
                        <ArrowLeft size={15} />
                        Kembali ke Settings
                    </Link>
                }
            />

            <Card className="p-6">
                <div className="flex flex-wrap items-start justify-between gap-4">
                    <div className="flex items-start gap-3">
                        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#e9fbf7] text-[#0b7668]">
                            <Database size={18} />
                        </div>
                        <div>
                            <h2 className="font-black">Backup Database</h2>
                            <p className="mt-1 text-xs leading-5 text-slate-500">
                                Driver aktif: <Badge>{driver}</Badge>. Backup
                                dibuat langsung saat request (sinkron) — untuk
                                database besar, jalankan lewat cron/artisan (
                                <code className="rounded bg-slate-100 px-1">
                                    php artisan backup:database
                                </code>
                                ) supaya tidak kena batas waktu server.
                            </p>
                        </div>
                    </div>
                    <Button onClick={runBackup} disabled={running}>
                        {running ? (
                            <Loader2 size={15} className="mr-2 animate-spin" />
                        ) : (
                            <RefreshCcw size={15} className="mr-2" />
                        )}
                        Backup Sekarang
                    </Button>
                </div>

                {error && (
                    <p className="mt-4 rounded-xl bg-rose-50 px-3.5 py-2.5 text-xs font-semibold text-rose-600">
                        {error}
                    </p>
                )}

                <div className="mt-6 space-y-2">
                    {backups.map((b) => (
                        <div
                            key={b.path}
                            className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-4 py-3"
                        >
                            <div className="flex items-center gap-2.5">
                                <HardDrive
                                    size={15}
                                    className="text-slate-400"
                                />
                                <div>
                                    <div className="text-xs font-bold text-slate-700">
                                        {b.name}
                                    </div>
                                    <div className="mt-0.5 text-[11px] text-slate-400">
                                        {new Date(b.created_at).toLocaleString(
                                            "id-ID",
                                        )}{" "}
                                        · {formatSize(b.size)}
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center gap-1.5">
                                <a
                                    href={`/settings/database/download?path=${encodeURIComponent(b.path)}`}
                                    className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-bold text-slate-600 hover:bg-slate-100"
                                >
                                    <Download size={13} />
                                    Download
                                </a>
                                <button
                                    type="button"
                                    onClick={() => remove(b)}
                                    disabled={deleting === b.path}
                                    className="inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-1.5 text-xs font-bold text-rose-600 transition hover:bg-rose-100 disabled:opacity-50"
                                >
                                    {deleting === b.path ? (
                                        <Loader2
                                            size={13}
                                            className="animate-spin"
                                        />
                                    ) : (
                                        <Trash2 size={13} />
                                    )}
                                </button>
                            </div>
                        </div>
                    ))}
                    {backups.length === 0 && (
                        <p className="py-6 text-center text-xs text-slate-400">
                            Belum ada backup. Klik &quot;Backup Sekarang&quot;
                            untuk membuat yang pertama.
                        </p>
                    )}
                </div>
            </Card>

            <p className="mt-4 max-w-2xl text-[11px] leading-5 text-slate-400">
                Backup otomatis harian jam 02:00 sudah dijadwalkan di kode (
                <code className="rounded bg-slate-100 px-1">
                    routes/console.php
                </code>
                ). Di cPanel, tambahkan satu Cron Job:{" "}
                <code className="rounded bg-slate-100 px-1">
                    * * * * * php /path/ke/project/artisan schedule:run
                </code>{" "}
                supaya jadwal ini benar-benar berjalan.
            </p>
        </div>
    );
}