import { useState, useEffect } from "react";
import AppLayout from "@/layouts/app-layout";
import { Head, router } from "@inertiajs/react";
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    CardDescription,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/crm-data-table";
import {
    Activity,
    Search,
    ShieldAlert,
    UserCheck,
    FilePlus,
    FileEdit,
    Trash2,
    LogIn,
    LogOut,
    Clock,
    User,
    Terminal,
    ChevronLeft,
    ChevronRight,
} from "lucide-react";
import { StatChip } from "@/components/crm/global-card";

type AuditLog = {
    id: number;
    action: string;
    subject_type?: string;
    subject_id?: number | string;
    created_at: string;
    ip_address?: string;
    user?: {
        name?: string;
        email?: string;
    };
    properties?: Record<string, any>;
};

type PaginationLink = {
    url: string | null;
    label: string;
    active: boolean;
};

type Props = {
    logs: {
        data: AuditLog[];
        total: number;
        current_page: number;
        last_page: number;
        per_page: number;
        from: number | null;
        to: number | null;
        links: PaginationLink[];
    };
    filters?: {
        search?: string;
        action?: string;
    };
    uniqueUsersCount?: number;
};

const actionConfig: Record<
    string,
    { label: string; color: string; badgeBg: string; icon: any }
> = {
    created: {
        label: "Membuat Data",
        color: "text-emerald-600 dark:text-emerald-400",
        badgeBg:
            "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-900/50",
        icon: FilePlus,
    },
    updated: {
        label: "Mengubah Data",
        color: "text-amber-600 dark:text-amber-400",
        badgeBg:
            "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-400 dark:border-amber-900/50",
        icon: FileEdit,
    },
    deleted: {
        label: "Menghapus Data",
        color: "text-rose-600 dark:text-rose-400",
        badgeBg:
            "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/40 dark:text-rose-400 dark:border-rose-900/50",
        icon: Trash2,
    },
    login: {
        label: "Autentikasi Masuk",
        color: "text-indigo-600 dark:text-indigo-400",
        badgeBg:
            "bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-400 dark:border-indigo-900/50",
        icon: LogIn,
    },
    logout: {
        label: "Sesi Keluar",
        color: "text-slate-600 dark:text-slate-400",
        badgeBg:
            "bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700",
        icon: LogOut,
    },
};

const formatDate = (dateString: string) => {
    try {
        const date = new Date(dateString);
        return new Intl.DateTimeFormat("id-ID", {
            day: "numeric",
            month: "short",
            year: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        }).format(date);
    } catch {
        return dateString;
    }
};

export default function AuditLogs({
    logs,
    filters,
    uniqueUsersCount = 0,
}: Props) {
    const [searchQuery, setSearchQuery] = useState(filters?.search || "");
    const [selectedAction, setSelectedAction] = useState<string | null>(
        filters?.action || null,
    );

    const logData = logs?.data ?? [];

    // Trigger Inertia Request ketika filter berubah
    const handleFilterChange = (
        newSearch: string,
        newAction: string | null,
    ) => {
        router.get(
            "/audit-logs",
            {
                search: newSearch || undefined,
                action: newAction || undefined,
            },
            {
                preserveState: true,
                replace: true,
            },
        );
    };

    // Debounce search agar tidak melakukan request berlebihan saat mengetik
    useEffect(() => {
        const timer = setTimeout(() => {
            if (searchQuery !== (filters?.search || "")) {
                handleFilterChange(searchQuery, selectedAction);
            }
        }, 300);

        return () => clearTimeout(timer);
    }, [searchQuery]);

    const handleActionClick = (actionKey: string | null) => {
        setSelectedAction(actionKey);
        handleFilterChange(searchQuery, actionKey);
    };

    const totalLogsCount = logs?.total ?? 0;

    return (
        <AppLayout breadcrumbs={[{ title: "Audit Log", href: "/audit-logs" }]}>
            <Head title="Audit Logs & System Activity" />

            <div className="crm-page space-y-6 pb-12">
                {/* Header Section */}
                <div className="flex flex-col justify-between gap-4 border-b border-slate-200/80 pb-5 md:flex-row md:items-center dark:border-slate-800">
                    <div>
                        <div className="mb-1 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
                            <ShieldAlert className="size-4" /> Enterprise
                            Security & Traceability
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50">
                            Audit Trail & Logs
                        </h1>
                        <p className="text-sm text-slate-500 dark:text-slate-400">
                            Lacak seluruh jejak aktivitas pengguna, perubahan
                            data sensitif, dan log autentikasi sistem.
                        </p>
                    </div>
                </div>

                {/* KPI Metrics */}
                <div className="grid gap-4 sm:grid-cols-3">
                    <StatChip
                        icon={Activity}
                        label="Total Log Aktivitas"
                        value={totalLogsCount}
                        tone="rose"
                        variant="compact"
                        description="Terekam dalam database keamanan"
                    />

                    <StatChip
                        icon={UserCheck}
                        label="Pengguna Aktif Teraktivasi"
                        value={uniqueUsersCount}
                        tone="emerald"
                        variant="compact"
                        description="Aktivitas sesi terverifikasi"
                    />

                    <StatChip
                        icon={Terminal}
                        label="Status Audit Monitoring"
                        value="LIVE TRACKING"
                        tone="orange"
                        variant="compact"
                        description="Real-time log capture active"
                    />
                </div>

                {/* Audit Logs Content Table & Timeline */}
                <Card className="rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900">
                    <CardHeader className="border-b border-slate-100 pb-4! dark:border-slate-800">
                        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                                    Riwayat Aktivitas & Perubahan
                                </CardTitle>
                                <CardDescription className="text-xs">
                                    Menampilkan {logs.from ?? 0} -{" "}
                                    {logs.to ?? 0} dari {totalLogsCount} entri
                                    riwayat.
                                </CardDescription>
                            </div>

                            {/* Search & Action Filter Controls */}
                            <div className="flex flex-wrap items-center gap-2">
                                <div className="relative w-full sm:w-64">
                                    <Search className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-slate-400" />
                                    <Input
                                        className="rounded-xl border-slate-200 pl-8 text-xs focus-visible:ring-indigo-500"
                                        placeholder="Cari user, modul, atau kata kunci..."
                                        value={searchQuery}
                                        onChange={(e) =>
                                            setSearchQuery(e.target.value)
                                        }
                                    />
                                </div>

                                <div className="flex items-center gap-1">
                                    <Button
                                        variant={
                                            selectedAction === null
                                                ? "secondary"
                                                : "outline"
                                        }
                                        size="sm"
                                        onClick={() => handleActionClick(null)}
                                        className="h-8 rounded-xl px-2.5 text-xs font-medium"
                                    >
                                        Semua
                                    </Button>
                                    {Object.keys(actionConfig).map((actKey) => (
                                        <Button
                                            key={actKey}
                                            variant={
                                                selectedAction === actKey
                                                    ? "secondary"
                                                    : "outline"
                                            }
                                            size="sm"
                                            onClick={() =>
                                                handleActionClick(actKey)
                                            }
                                            className="h-8 rounded-xl px-2 text-xs font-medium capitalize"
                                        >
                                            {actKey}
                                        </Button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </CardHeader>

                    <CardContent className="px-4 pt-4 sm:px-6">
                        {logData.length ? (
                            <div className="relative space-y-4 before:absolute before:left-6 before:top-3 before:h-[calc(100%-24px)] before:w-0.5 before:bg-slate-200 dark:before:bg-slate-800">
                                {logData.map((log) => {
                                    const subject =
                                        log.subject_type?.split("\\").pop() ??
                                        "Sistem";
                                    const actionMeta = actionConfig[
                                        log.action
                                    ] || {
                                        label: log.action,
                                        color: "text-slate-600",
                                        badgeBg:
                                            "bg-slate-100 text-slate-700 border-slate-200",
                                        icon: Activity,
                                    };
                                    const IconComponent = actionMeta.icon;

                                    return (
                                        <div
                                            key={log.id}
                                            className="group relative flex items-start gap-4 pl-1"
                                        >
                                            {/* Icon Node */}
                                            <div className="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white shadow-2xs transition-transform group-hover:scale-105 dark:border-slate-800 dark:bg-slate-900">
                                                <IconComponent
                                                    className={`size-4.5 ${actionMeta.color}`}
                                                />
                                            </div>

                                            {/* Content Card */}
                                            <div className="flex-1 rounded-2xl border border-slate-200/80 bg-white p-4 transition-all hover:border-indigo-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900/60 dark:hover:border-slate-700">
                                                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                                    <div className="space-y-1">
                                                        <div className="flex flex-wrap items-center gap-2">
                                                            <Badge
                                                                variant="outline"
                                                                className={`rounded-lg px-2 py-0.5 text-[10px] font-bold ${actionMeta.badgeBg}`}
                                                            >
                                                                {
                                                                    actionMeta.label
                                                                }
                                                            </Badge>

                                                            <span className="text-xs font-bold text-slate-900 dark:text-slate-100">
                                                                Modul: {subject}
                                                            </span>

                                                            {log.subject_id && (
                                                                <span className="rounded-md bg-slate-100 px-1.5 py-0.5 font-mono text-[10px] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-400">
                                                                    #
                                                                    {
                                                                        log.subject_id
                                                                    }
                                                                </span>
                                                            )}
                                                        </div>

                                                        <div className="flex flex-wrap items-center gap-2 pt-1 text-xs text-slate-600 dark:text-slate-400">
                                                            <span className="flex items-center gap-1 font-semibold text-slate-800 dark:text-slate-200">
                                                                <User className="size-3.5 text-slate-400" />
                                                                {log.user
                                                                    ?.name ||
                                                                    "System Automated"}
                                                            </span>
                                                            {log.user
                                                                ?.email && (
                                                                <span className="text-slate-400">
                                                                    (
                                                                    {
                                                                        log.user
                                                                            .email
                                                                    }
                                                                    )
                                                                </span>
                                                            )}
                                                            {log.ip_address && (
                                                                <span className="rounded bg-slate-100 px-1.5 font-mono text-[10px] dark:bg-slate-800">
                                                                    IP:{" "}
                                                                    {
                                                                        log.ip_address
                                                                    }
                                                                </span>
                                                            )}
                                                        </div>
                                                    </div>

                                                    <div className="flex items-center gap-1.5 text-xs text-slate-400 dark:text-slate-500">
                                                        <Clock className="size-3.5 text-indigo-500" />
                                                        <span className="font-mono text-[11px] font-medium">
                                                            {formatDate(
                                                                log.created_at,
                                                            )}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        ) : (
                            <EmptyState
                                title="Tidak Ada Log Aktivitas"
                                description="Belum ada riwayat aktivitas yang tercatat atau tidak ada data yang cocok dengan kueri filter Anda."
                            />
                        )}

                        {/* Pagination Navigation Controls */}
                        {logs && logs.last_page > 1 && (
                            <div className="mt-6 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-4 sm:flex-row dark:border-slate-800">
                                <p className="text-xs text-slate-500 dark:text-slate-400">
                                    Halaman{" "}
                                    <span className="font-semibold text-slate-700 dark:text-slate-200">
                                        {logs.current_page}
                                    </span>{" "}
                                    dari{" "}
                                    <span className="font-semibold text-slate-700 dark:text-slate-200">
                                        {logs.last_page}
                                    </span>
                                </p>

                                <div className="flex items-center gap-1">
                                    {logs.links.map((link, idx) => {
                                        let label = link.label;
                                        if (label.includes("&laquo;")) {
                                            label = "Sebelumnya";
                                        } else if (label.includes("&raquo;")) {
                                            label = "Selanjutnya";
                                        }

                                        const isPrev = label === "Sebelumnya";
                                        const isNext = label === "Selanjutnya";

                                        return (
                                            <Button
                                                key={idx}
                                                variant={
                                                    link.active
                                                        ? "default"
                                                        : "outline"
                                                }
                                                size="sm"
                                                disabled={!link.url}
                                                onClick={() => {
                                                    if (link.url) {
                                                        router.get(
                                                            link.url,
                                                            {},
                                                            {
                                                                preserveState: true,
                                                                replace: true,
                                                            },
                                                        );
                                                    }
                                                }}
                                                className={`h-8 rounded-xl text-xs font-medium ${
                                                    link.active
                                                        ? "bg-indigo-600 text-white hover:bg-indigo-700"
                                                        : ""
                                                }`}
                                            >
                                                {isPrev ? (
                                                    <ChevronLeft className="mr-1 size-3.5" />
                                                ) : null}
                                                {label}
                                                {isNext ? (
                                                    <ChevronRight className="ml-1 size-3.5" />
                                                ) : null}
                                            </Button>
                                        );
                                    })}
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}