import { useState } from "react";
import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
    Plus,
    Package,
    Tag,
    Sparkles,
    Calendar,
    Layers,
    FolderSearch,
} from "lucide-react";
import {
    DataTable,
    Column,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import {
    DynamicViewDialog,
    ViewDetailSchema,
} from "@/components/crm/global-viewdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";

interface ProductCategory {
    id: number;
    name: string;
    description?: string;
    products_count?: number;
    created_at?: string;
}

interface PageProps {
    categories: PaginatedData<ProductCategory>;
}

export default function ProductCategoryIndex({ categories }: PageProps) {
    const [isCreateOpen, setIsCreateOpen] = useState(false);
    const [isEditOpen, setIsEditOpen] = useState(false);
    const [isViewOpen, setIsViewOpen] = useState(false);
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);

    const [selectedCategory, setSelectedCategory] =
        useState<ProductCategory | null>(null);
    const [processing, setProcessing] = useState(false);

    /**
     * Helper Format Tanggal Indonesia
     */
    const formatDateIndonesian = (dateString?: string, includeTime = false) => {
        if (!dateString) return "-";
        const date = new Date(dateString);

        if (isNaN(date.getTime())) return "-";

        const options: Intl.DateTimeFormatOptions = {
            day: "numeric",
            month: "long",
            year: "numeric",
            ...(includeTime && {
                hour: "2-digit",
                minute: "2-digit",
                timeZoneName: "short",
            }),
        };

        return new Intl.DateTimeFormat("id-ID", options).format(date);
    };

    // Initial Values Form
    const initialValues: Record<string, string> = {
        name: "",
        description: "",
    };

    // Configuration Fields Form
    const formFields: FieldConfig[] = [
        {
            name: "name",
            label: "Nama Kategori",
            type: "text",
            placeholder: "Contoh: Elektronik, Bahan Makanan...",
            required: true,
            colSpan: 4,
        },
        {
            name: "description",
            label: "Deskripsi",
            type: "textarea",
            placeholder: "Penjelasan singkat mengenai kategori...",
            rows: 3,
            colSpan: 4,
        },
    ];

    // Detail View Schema
    const viewSchema: ViewDetailSchema<ProductCategory>[] = [
        {
            label: "Nama Kategori",
            render: (item) => (
                <div className="flex items-center gap-2 font-semibold text-foreground">
                    <Tag className="h-4 w-4 text-indigo-500" />
                    {item.name}
                </div>
            ),
        },
        {
            label: "Deskripsi",
            render: (item) => (
                <span className="text-muted-foreground leading-relaxed">
                    {item.description || "Tidak ada deskripsi"}
                </span>
            ),
        },
        {
            label: "Jumlah Produk",
            render: (item) => (
                <Badge
                    variant="outline"
                    className="bg-emerald-50 text-emerald-700 border-emerald-200 font-semibold"
                >
                    <Package className="mr-1.5 h-3.5 w-3.5" />
                    {item.products_count ?? 0} Produk Terhubung
                </Badge>
            ),
        },
        {
            label: "Tanggal Dibuat",
            render: (item) => formatDateIndonesian(item.created_at, true),
        },
    ];

    // Modal Action Openers
    const openCreateModal = () => {
        setSelectedCategory(null);
        setIsCreateOpen(true);
    };

    const openEditModal = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsEditOpen(true);
    };

    const openViewModal = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsViewOpen(true);
    };

    const openDeleteModal = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsDeleteOpen(true);
    };

    // Delete Action Handler
    const handleDelete = () => {
        if (!selectedCategory) return;
        setProcessing(true);
        router.delete(`/crm/product-categories/${selectedCategory.id}`, {
            onSuccess: () => {
                setIsDeleteOpen(false);
                setSelectedCategory(null);
                setProcessing(false);
            },
            onError: () => setProcessing(false),
            onFinish: () => setProcessing(false),
        });
    };

    // Data Table Columns Configuration
    const columns: Column<ProductCategory>[] = [
        {
            header: "Nama Kategori",
            accessor: "name",
            sortable: true,
            sortKey: "name",
            cell: (item) => (
                <div className="flex items-center gap-3 py-1">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 border border-indigo-100 text-indigo-600 transition-colors group-hover:bg-indigo-100">
                        <Tag className="h-5 w-5" />
                    </div>
                    <div className="flex flex-col min-w-0">
                        <span className="font-semibold text-foreground truncate hover:text-indigo-600 transition-colors">
                            {item.name}
                        </span>
                        <span className="text-[11px] text-muted-foreground/80 flex items-center gap-1 mt-0.5">
                            <Layers className="h-3 w-3 text-muted-foreground/60" />
                            ID Kategori: #{item.id}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            header: "Deskripsi",
            accessor: "description",
            sortable: true,
            sortKey: "description",
            cell: (item) => (
                <span className="text-muted-foreground text-sm line-clamp-1 max-w-md">
                    {item.description || (
                        <span className="text-muted-foreground/60 italic text-xs">
                            Tidak ada deskripsi
                        </span>
                    )}
                </span>
            ),
        },
        {
            header: "Jumlah Produk",
            accessor: "products_count",
            sortable: true,
            sortKey: "products_count",
            headerClassName: "text-center",
            className: "text-center",
            cell: (item) => {
                const count = item.products_count ?? 0;
                const hasProducts = count > 0;

                return (
                    <div className="flex justify-center">
                        <Badge
                            variant="outline"
                            className={`font-semibold px-2.5 py-1 rounded-full text-xs inline-flex items-center gap-1.5 shadow-2xs ${
                                hasProducts
                                    ? "bg-emerald-50 text-emerald-700 border-emerald-200/80"
                                    : "bg-muted/50 text-muted-foreground border-border"
                            }`}
                        >
                            <Package className="h-3.5 w-3.5" />
                            {count} Produk
                        </Badge>
                    </div>
                );
            },
        },
        {
            header: "Tanggal Dibuat",
            accessor: "created_at",
            sortable: true,
            sortKey: "created_at",
            headerClassName: "text-center",
            className: "text-center",
            cell: (item) => (
                <div className="flex items-center justify-center gap-1.5 text-xs font-medium text-muted-foreground">
                    <Calendar className="h-3.5 w-3.5 text-indigo-500" />
                    {formatDateIndonesian(item.created_at)}
                </div>
            ),
        },
    ];

    return (
        <AppLayout>
            <Head title="Kategori Produk" />

            <div className="crm-page space-y-6 pb-10">
                {/* Dark Hero Banner Section */}
                <div className="relative overflow-hidden rounded-2xl bg-linear-to-r from-slate-950 via-slate-900 to-indigo-950 p-8 text-white shadow-xl">
                    <div className="relative z-10 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                        <div className="space-y-2">
                            <div className="inline-flex items-center gap-2 rounded-full bg-indigo-500/10 px-3 py-1 text-xs font-medium text-indigo-300 border border-indigo-500/20 backdrop-blur-md">
                                <Sparkles className="h-3.5 w-3.5 text-indigo-400" />
                                <span>MINANGA CRM</span>
                            </div>
                            <h1 className="text-3xl font-extrabold tracking-tight text-white">
                                Kategori Produk
                            </h1>
                            <p className="max-w-2xl text-sm text-muted-foreground/60 leading-relaxed">
                                Kelola master data klasifikasi dan katalog
                                produk Anda secara efisien untuk mempermudah
                                inventarisasi dan penargetan penjualan.
                            </p>
                        </div>
                        <Button
                            onClick={openCreateModal}
                            className="gap-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow-lg shadow-indigo-600/30 transition-all rounded-xl h-11 px-5 self-start sm:self-auto cursor-pointer"
                        >
                            <Plus className="h-4 w-4" />
                            Tambah Kategori
                        </Button>
                    </div>
                </div>

                {/* Table Container Card */}
                <div className="rounded-2xl border border-border/80 bg-card p-6 shadow-sm">
                    <div className="mb-6 flex flex-col gap-1">
                        <div className="flex items-center gap-2">
                            <Tag className="h-5 w-5 text-indigo-600" />
                            <h2 className="text-lg font-bold text-foreground">
                                Daftar Kategori Produk
                            </h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Kelola master data klasifikasi dan segmen katalog
                            produk Anda.
                        </p>
                    </div>

                    <DataTable
                        data={categories}
                        columns={columns}
                        baseUrl="/crm/product-categories"
                        searchPlaceholder="Cari nama atau deskripsi kategori..."
                        showNumber
                        useSkeleton={true}
                        emptyIcon={FolderSearch}
                        emptyTitle="Kategori produk tidak ditemukan"
                        emptyDescription="Coba gunakan kata kunci pencarian lain atau buat kategori produk baru."
                        onView={openViewModal}
                        onEdit={openEditModal}
                        onDelete={openDeleteModal}
                    />
                </div>
            </div>

            {/* Modals */}
            <DynamicFormDialog
                open={isCreateOpen}
                onOpenChange={setIsCreateOpen}
                title="Kategori Produk"
                endpoint="/crm/product-categories"
                fields={formFields}
                initialValues={initialValues}
                submitText="Simpan"
                dialogSize="md"
            />

            <DynamicFormDialog
                open={isEditOpen}
                onOpenChange={setIsEditOpen}
                title="Kategori Produk"
                endpoint="/crm/product-categories"
                fields={formFields}
                initialValues={initialValues}
                itemToEdit={selectedCategory}
                editText="Simpan Perubahan"
            />

            <DynamicViewDialog
                open={isViewOpen}
                onOpenChange={setIsViewOpen}
                title="Detail Kategori Produk"
                data={selectedCategory}
                schema={viewSchema}
            />

            <ConfirmDeleteDialog
                open={isDeleteOpen}
                onOpenChange={setIsDeleteOpen}
                title="Hapus Kategori Produk?"
                description={`Apakah Anda yakin ingin menghapus kategori "${selectedCategory?.name}"? Tindakan ini tidak dapat dibatalkan.`}
                onConfirm={handleDelete}
                loading={processing}
            />
        </AppLayout>
    );
}