import { DataTable } from '@admin/components/datatable';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardTitle } from '@admin/components/ui/card';
import AppLayout from '@admin/layouts/app-layout';
import type { PaginatedData } from '@admin/types';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import {
    AlertTriangle,
    CheckCircle2,
    Clock,
    Cloud,
    Database,
    Download,
    FileArchive,
    FileText,
    FolderArchive,
    HardDrive,
    TrendingUp,
    User,
} from 'lucide-react';
import type { ReactNode } from 'react';

type BackupItem = {
    path: string;
    basename: string;
    size: number;
    last_modified: number;
    ext: string;
    user_name?: string;
    created_at?: string | null;
};
type BackupDb = {
    id: number;
    mode: 'manual' | 'auto';
    category: 'database' | 'files';
    s3_url?: string | null;
    local_path: string | null;
    s3_path: string | null;
    google_path: string | null;
    size_bytes: number | null;
    success: boolean;
    s3_ok: boolean;
    google_ok: boolean;
    created_at: string | null;
    user?: { id: number; name: string; email: string } | null;
};
type BackupStats = {
    total: number;
    success: number;
    failed: number;
    manual: number;
    auto: number;
    database: number;
    files: number;
    storage_present: number;
    s3_ok: number;
    google_ok: number;
    size_total: number;
    latest_at: string | null;
    last_backup?: { date: string; type: 'database' | 'files'; mode: 'manual' | 'auto'; status: 'success' | 'failed'; size: number | null } | null;
    next_scheduled?: string | null;
    storage_status?: { local_root: string; total_size: number; s3_ok: number; google_ok: number };
    recent_error?: { date: string; message?: string | null } | null;
};
type Props = { backups: { manual: BackupItem[]; auto: BackupItem[] }; backupsDb: PaginatedData<BackupDb>; backupStats: BackupStats };

export default function Index({ backups, backupsDb, backupStats }: Props) {
    const runManual = (opts: { db?: boolean; files?: boolean }) => {
        const form = new FormData();
        if (opts.db !== undefined) form.append('db', String(opts.db));
        if (opts.files !== undefined) form.append('files', String(opts.files));
        router.post(route('backup.manual'), form, { preserveScroll: true });
    };

    const formatBytes = (bytes: number) => {
        if (!bytes && bytes !== 0) return '-';
        const sizes = ['B', 'KB', 'MB', 'GB'];
        if (bytes === 0) return '0 B';
        const i = Math.floor(Math.log(bytes) / Math.log(1024));
        const val = bytes / Math.pow(1024, i);
        return `${val.toFixed(val >= 100 ? 0 : 1)} ${sizes[i]}`;
    };

    const formatWhen = (ts?: number) => {
        try {
            if (!ts) return '';
            return format(new Date(ts * 1000), 'MMM dd, yyyy HH:mm');
        } catch {
            return '';
        }
    };

    const formatDate = (iso?: string | null) => {
        if (!iso) return '';
        try {
            return format(new Date(iso), 'MMM dd, yyyy HH:mm');
        } catch {
            return '';
        }
    };

    const renderCards = (items: BackupItem[]) => {
        if (!items || items.length === 0) return <p className="text-sm text-muted-foreground">No backups yet.</p>;
        return (
            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                {items.map((f) => (
                    <Card key={f.path} className="rounded-lg border">
                        <CardContent className="p-4">
                            <div className="flex items-start justify-between gap-3">
                                <div className="min-w-0">
                                    <div className="flex items-center gap-2">
                                        {f.ext === 'zip' ? (
                                            <FileArchive className="h-4 w-4 text-muted-foreground" />
                                        ) : (
                                            <FileText className="h-4 w-4 text-muted-foreground" />
                                        )}
                                        <span className="truncate font-mono" title={f.basename}>
                                            {f.basename}
                                        </span>
                                        <Badge variant="secondary" className="ml-2 uppercase">
                                            {f.ext}
                                        </Badge>
                                    </div>
                                    <div className="mt-2 space-x-3 text-xs text-muted-foreground">
                                        <span>{formatBytes(f.size)}</span>
                                        <span className="inline-flex items-center gap-1">
                                            <Clock className="h-3 w-3" /> {formatWhen(f.last_modified)}
                                        </span>
                                    </div>
                                </div>
                                <div className="text-right text-xs text-muted-foreground">
                                    <div>{f.user_name || '—'}</div>
                                    <div>{f.created_at ? formatDate(f.created_at) : ''}</div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderCompactRow = (f: BackupItem | null | undefined, emptyText: string) => {
        if (!f) return <div className="p-3 text-sm text-muted-foreground">{emptyText}</div>;
        return (
            <div className="flex items-center justify-between p-3 transition-colors hover:bg-muted/30">
                <div className="flex min-w-0 items-center gap-2">
                    {f.ext === 'zip' ? (
                        <FileArchive className="h-4 w-4 shrink-0 text-orange-500" />
                    ) : (
                        <FileText className="h-4 w-4 shrink-0 text-blue-500" />
                    )}
                    <span className="truncate font-mono text-sm font-medium" title={f.basename}>
                        {f.basename}
                    </span>
                    <Badge variant="secondary" className="ml-2 shrink-0 uppercase">
                        {f.ext}
                    </Badge>
                </div>
                <div className="flex shrink-0 items-center gap-6 text-xs text-muted-foreground">
                    <span>{formatBytes(f.size)}</span>
                    <span className="inline-flex items-center gap-1">
                        <Clock className="h-3 w-3" /> {formatWhen(f.last_modified)}
                    </span>
                    {(f.user_name || f.created_at) && (
                        <div className="text-right">
                            <div className="font-medium">{f.user_name || '—'}</div>
                            <div>{f.created_at ? formatDate(f.created_at) : ''}</div>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    // Latest items per mode/type
    const pickLatestByExt = (items: BackupItem[], ext: 'sql' | 'zip') =>
        (items || []).filter((i) => i.ext === ext).sort((a, b) => b.last_modified - a.last_modified)[0];
    const lastManualDb = pickLatestByExt(backups?.manual || [], 'sql');
    const lastManualFiles = pickLatestByExt(backups?.manual || [], 'zip');
    const lastAutoDb = pickLatestByExt(backups?.auto || [], 'sql');
    const lastAutoFiles = pickLatestByExt(backups?.auto || [], 'zip');

    // (deduped above) latest entries computed once

    const renderSlimSqlRow = (f: BackupItem | null | undefined, emptyText: string) => {
        if (!f) return <p className="text-sm text-muted-foreground">{emptyText}</p>;
        return (
            <div className="space-y-1 text-sm">
                <div className="font-medium">SQL {formatBytes(f.size)}</div>
                <div className="text-muted-foreground">{f.user_name || '—'}</div>
                <div className="text-muted-foreground">{f.created_at ? formatDate(f.created_at) : formatWhen(f.last_modified)}</div>
            </div>
        );
    };

    const renderSlimBadgedRow = (f: BackupItem | null | undefined, mode: 'manual' | 'auto', type: 'sql' | 'zip', emptyText: string) => {
        if (!f) return <p className="text-sm text-muted-foreground">{emptyText}</p>;
        const typeLabel = type.toUpperCase();
        const modeLabel = mode.toUpperCase();
        return (
            <div className="space-y-1 text-sm">
                <div className="flex items-center gap-2">
                    <Badge variant="outline" className="uppercase">
                        {modeLabel}
                    </Badge>
                    <Badge variant="secondary" className="text-white uppercase">
                        {typeLabel}
                    </Badge>
                    <span className="text-muted-foreground">{formatBytes(f.size)}</span>
                </div>
                <div className="flex items-center gap-1 text-muted-foreground">
                    <User className="h-3 w-3" />
                    <span>{f.user_name || '—'}</span>
                </div>
                <div className="flex items-center gap-1 text-muted-foreground">
                    <Clock className="h-3 w-3" />
                    <span>
                        {f.created_at
                            ? formatDate(f.created_at) // ISO string
                            : f.last_modified
                              ? formatWhen(f.last_modified) // Unix timestamp in seconds
                              : '-'}
                    </span>
                </div>
            </div>
        );
    };

    // DataTable columns for Backup History
    const historyColumns: (ColumnDef<BackupDb> & { enable_sorting?: boolean })[] = [
        {
            id: 'when',
            header: 'When',
            cell: ({ row }) => <span className="whitespace-nowrap">{formatDate(row.original.created_at)}</span>,
        },
        {
            id: 'mode',
            header: 'Mode',
            cell: ({ row }) => (
                <Badge variant="secondary" className="text-white uppercase">
                    {row.original.mode}
                </Badge>
            ),
        },
        {
            id: 'category',
            header: 'Category',
            cell: ({ row }) => <Badge className="text-white uppercase">{row.original.category}</Badge>,
        },
        {
            id: 'by',
            header: 'By',
            cell: ({ row }) => <span className="whitespace-nowrap">{row.original.user?.name || '—'}</span>,
        },
        {
            id: 'size',
            header: 'Size',
            cell: ({ row }) => <span className="whitespace-nowrap">{formatBytes(row.original.size_bytes ?? 0)}</span>,
        },
        {
            id: 'storage',
            header: 'Storage',
            cell: ({ row }) =>
                row.original.local_path ? (
                    <div className="flex items-center gap-2">
                        <Button asChild size="sm" variant="ghost" className="flex items-center gap-1">
                            <a href={route('backup.download', { backup: row.original.id, disk: 'local' })}>
                                <Download className="h-4 w-4" /> Download
                            </a>
                        </Button>
                    </div>
                ) : (
                    <Badge variant="destructive">Missing</Badge>
                ),
        },
        {
            id: 's3',
            header: 'Cloud',
            cell: ({ row }) =>
                row.original.s3_path ? (
                    <div className="flex items-center gap-2">
                        <Button asChild size="sm" variant="ghost" className="flex items-center gap-1">
                            <a href={route('backup.download', { backup: row.original.id, disk: 's3' })}>
                                <Download className="h-4 w-4" /> Download
                            </a>
                        </Button>
                    </div>
                ) : (
                    <span className="text-muted-foreground">—</span>
                ),
        },
        {
            id: 'status',
            header: 'Status',
            cell: ({ row }) =>
                row.original.success ? (
                    <Badge variant="secondary" className="border-green-200 bg-green-100 text-green-800">
                        OK
                    </Badge>
                ) : (
                    <Badge variant="destructive">Failed</Badge>
                ),
        },
    ];

    return (
        <>
            <Head title="Backup" />
            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-2">
                {/* Header */}
                <div className="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                    <div className="grid grid-cols-1 gap-1">
                        <h2 className="text-xl font-bold sm:text-2xl">Backups logs</h2>
                        <div className="flex items-center text-sm text-gray-600">
                            <span>System</span>
                            <span className="mx-2">›</span>
                            <span>Backups Logs</span>
                        </div>
                    </div>
                </div>
                {/* Section 1: Top backup statistics (4 cards) */}
                <div className="grid grid-cols-1 rounded-lg border bg-card md:grid-cols-2 lg:grid-cols-4">
                    {/* Last Backup */}
                    <Card className="h-full border-none">
                        <CardContent className="h-full border-r p-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-blue-50 text-blue-600">
                                        <Clock className="h-5 w-5" />
                                    </div>
                                    <div>
                                        <div className="text-xs text-muted-foreground uppercase">Last Backup</div>
                                        <div className="text-sm font-medium">
                                            {backupStats?.last_backup ? formatDate(backupStats.last_backup.date) : '—'}
                                        </div>
                                    </div>
                                </div>
                                {backupStats?.last_backup &&
                                    (backupStats.last_backup.status === 'success' ? (
                                        <Badge variant="secondary" className="border-green-200 bg-green-100 text-green-800">
                                            Success
                                        </Badge>
                                    ) : (
                                        <Badge variant="destructive">Failed</Badge>
                                    ))}
                            </div>
                            <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
                                {backupStats?.last_backup && (
                                    <>
                                        <Badge variant="outline" className="uppercase">
                                            {backupStats.last_backup.mode}
                                        </Badge>
                                        <Badge variant="secondary" className="text-white uppercase">
                                            {backupStats.last_backup.type}
                                        </Badge>
                                        <span className="text-muted-foreground">{formatBytes(backupStats.last_backup.size || 0)}</span>
                                    </>
                                )}
                            </div>
                        </CardContent>
                    </Card>

                    {/* Backup Success Rate */}
                    <Card className="h-full border-none">
                        <CardContent className="h-full border-r p-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                                        <TrendingUp className="h-5 w-5" />
                                    </div>
                                    <div>
                                        <div className="text-xs text-muted-foreground uppercase">Backup Success Rate</div>
                                        <div className="text-2xl font-semibold">
                                            {(() => {
                                                const total = backupStats?.total ?? 0;
                                                const ok = backupStats?.success ?? 0;
                                                return total > 0 ? Math.round((ok / total) * 100) : 0;
                                            })()}
                                            %
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="mt-2 text-xs text-muted-foreground">
                                {backupStats?.success ?? 0} successful • {backupStats?.failed ?? 0} failed • Total: {backupStats?.total ?? 0}
                            </div>
                        </CardContent>
                    </Card>

                    {/* Storage Status */}
                    <Card className="h-full border-none">
                        <CardContent className="h-full border-r p-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-violet-50 text-violet-600">
                                        <HardDrive className="h-5 w-5" />
                                    </div>
                                    <div>
                                        <div className="text-xs text-muted-foreground uppercase">Storage Status</div>
                                        <div className="text-sm font-medium">Local: {formatBytes(backupStats?.storage_status?.total_size || 0)}</div>
                                    </div>
                                </div>
                            </div>
                            <div className="mt-3 flex items-center gap-2 text-xs">
                                <Badge variant="outline" className="inline-flex items-center gap-1">
                                    <Cloud className="h-3.5 w-3.5" /> S3 uploads OK: {backupStats?.storage_status?.s3_ok ?? 0}
                                </Badge>
                                <Badge variant="outline" className="inline-flex items-center gap-1">
                                    <Cloud className="h-3.5 w-3.5" /> Google uploads OK: {backupStats?.storage_status?.google_ok ?? 0}
                                </Badge>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Recent Errors */}
                    <Card className="h-full border-none">
                        <CardContent className="h-full p-4">
                            <div className="flex items-center gap-3">
                                {backupStats?.recent_error ? (
                                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-rose-50 text-rose-600">
                                        <AlertTriangle className="h-5 w-5" />
                                    </div>
                                ) : (
                                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                                        <CheckCircle2 className="h-5 w-5" />
                                    </div>
                                )}
                                <div>
                                    <div className="text-xs text-muted-foreground uppercase">Recent Errors</div>
                                    {backupStats?.recent_error ? (
                                        <div className="text-sm font-medium">{formatDate(backupStats.recent_error.date)}</div>
                                    ) : (
                                        <div className="text-sm font-medium">All clear</div>
                                    )}
                                    <div className="max-w-[28ch] text-xs break-words text-muted-foreground">
                                        {backupStats?.recent_error ? backupStats.recent_error.message || '—' : 'No recent errors detected.'}
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Section 2: Actions (left) + Recent Backups (right) */}
                <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
                    {/* Backup Actions */}
                    <Card className="rounded-lg border">
                        <CardContent className="p-4">
                            <div className="flex items-start justify-between">
                                <CardTitle className="flex items-center gap-2 text-base font-semibold">
                                    <Database className="h-4 w-4" /> Backup Actions
                                </CardTitle>
                            </div>
                            <div className="mt-4 space-y-4">
                                <p className="text-sm text-muted-foreground">
                                    Create on-demand backups of the database and critical files. Files include storage/app, public/uploads, and your
                                    .env file.
                                </p>
                                <div className="flex flex-wrap gap-2">
                                    <Button
                                        onClick={() => runManual({ db: true, files: false })}
                                        className="cursor-pointer transition-transform duration-150 active:scale-95 active:bg-blue-700"
                                    >
                                        Run DB Backup
                                    </Button>

                                    <Button
                                        variant="secondary"
                                        onClick={() => runManual({ files: true, db: false })}
                                        className="cursor-pointer text-white transition-transform duration-150 active:scale-95 active:bg-gray-600"
                                    >
                                        <FolderArchive className="mr-1 h-4 w-4" /> Run Files Backup
                                    </Button>

                                    <Button
                                        variant="outline"
                                        onClick={() => runManual({ db: true, files: true })}
                                        className="cursor-pointer transition-transform duration-150 active:scale-95 active:bg-gray-200"
                                    >
                                        Run Both
                                    </Button>
                                </div>

                                <div className="rounded-md bg-muted/40 p-3 text-xs text-muted-foreground">
                                    Backups are stored under <code className="font-mono">storage/app/private/backup</code> and uploaded to your
                                    configured S3 and Google Drive disks.
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Recent Backups (Local FS) - compact, consistent styling */}
                    <Card className="rounded-lg border">
                        <CardContent className="p-4">
                            <div className="flex items-start justify-between">
                                <CardTitle className="text-base font-semibold">Recent Backups (Local FS)</CardTitle>
                            </div>

                            <div className="mt-4 space-y-6">
                                {/* Row 1: Manual (SQL, ZIP) */}
                                <div>
                                    <h3 className="mb-2 text-sm font-semibold">Manual</h3>
                                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        {renderSlimBadgedRow(lastManualDb, 'manual', 'sql', 'No recent manual SQL backup.')}
                                        {renderSlimBadgedRow(lastManualFiles, 'manual', 'zip', 'No recent manual ZIP backup.')}
                                    </div>
                                </div>

                                {/* Row 2: Automatic (SQL, ZIP) */}
                                <div>
                                    <h3 className="mb-2 text-sm font-semibold">Automatic</h3>
                                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        {renderSlimBadgedRow(lastAutoDb, 'auto', 'sql', 'No recent automatic SQL backup.')}
                                        {renderSlimBadgedRow(lastAutoFiles, 'auto', 'zip', 'No recent automatic ZIP backup.')}
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Section 3: Full-width History */}
                <Card className="rounded-lg border">
                    <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                            <CardTitle className="text-base font-semibold">History</CardTitle>
                        </div>
                        {!backupsDb || backupsDb.data.length === 0 ? (
                            <p className="text-sm text-muted-foreground">No backup records yet.</p>
                        ) : (
                            <div className="mt-4 w-96 sm:w-full">
                                <DataTable
                                    columns={historyColumns}
                                    data={backupsDb.data}
                                    paginatedData={backupsDb}
                                    tableKey="backup-history"
                                    showToolbar={false}
                                />
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

// Attach layout for Inertia page
Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Settings', href: route('settings.company.edit') },
            { title: 'Backup', href: route('backup.index') },
        ]}
        title="Backup"
    >
        {page}
    </AppLayout>
);