import { useState, useEffect } from "react";
import { Head, router } from "@inertiajs/react";
import {
    Plus,
    Tag,
    Sparkles,
    Package,
    ImageIcon,
    AlertTriangle,
    CheckCircle2,
    XCircle,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

import {
    DataTable,
    Column,
    FilterConfig,
    PaginatedData,
} from "@/components/crm/global-datatable";

import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import {
    DynamicViewDialog,
    ViewDetailSchema,
} from "@/components/crm/global-viewdialog";
import AppLayout from "@/layouts/app-layout";

type Product = {
    id: number;
    sku: string;
    name: string;
    product_category_id: number;
    category?: { id: number; name: string } | string;
    description?: string;
    unit?: string;
    price: number | string;
    cost_price?: number | string | null;
    image?: string | null;
    stock: number;
    status: "active" | "inactive";
};

export default function ProductIndex({
    products,
    categories = [],
    filters: serverFilters = {},
}: {
    products: PaginatedData<Product>;
    categories: { id: number; name: string }[];
    filters: any;
}) {
    const [selectedCategory, setSelectedCategory] = useState(
        serverFilters?.product_category_id
            ? String(serverFilters.product_category_id)
            : "",
    );
    const [selectedStatus, setSelectedStatus] = useState(
        serverFilters?.status || "",
    );

    useEffect(() => {
        setSelectedCategory(
            serverFilters?.product_category_id
                ? String(serverFilters.product_category_id)
                : "",
        );
        setSelectedStatus(serverFilters?.status || "");
    }, [serverFilters]);

    const [formOpen, setFormOpen] = useState(false);
    const [viewOpen, setViewOpen] = useState(false);
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [selectedItem, setSelectedItem] = useState<Product | null>(null);

    const activeFilters: FilterConfig[] = [
        {
            key: "product_category_id",
            label: "Kategori",
            value: selectedCategory,
            onChange: setSelectedCategory,
            options: categories.map((c) => ({
                label: c.name,
                value: String(c.id),
            })),
        },
        {
            key: "status",
            label: "Status",
            value: selectedStatus,
            onChange: setSelectedStatus,
            options: [
                { label: "Aktif", value: "active" },
                { label: "Nonaktif", value: "inactive" },
            ],
        },
    ];

    const formatRupiah = (val: number | string | null | undefined) => {
        const numericValue = Number(val ?? 0);

        return new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR",
            maximumFractionDigits: 0,
        }).format(Number.isFinite(numericValue) ? numericValue : 0);
    };

    // Definisikan kolom tanpa memasukkan kolom "Aksi" manual
    const columns: Column<Product>[] = [
        {
            header: "Produk",
            className: "w-1/3",
            cell: (p) => (
                <div className="flex items-center gap-3 py-1">
                    <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-lg border border-border/80 bg-muted/50 flex items-center justify-center">
                        {p.image ? (
                            <img
                                src={
                                    p.image.startsWith("http")
                                        ? p.image
                                        : `/storage/${p.image}`
                                }
                                alt={p.name}
                                className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
                            />
                        ) : (
                            <ImageIcon className="h-5 w-5 text-muted-foreground/60" />
                        )}
                    </div>
                    <div className="flex flex-col min-w-0">
                        <span className="font-semibold text-foreground truncate hover:text-indigo-600 transition-colors">
                            {p.name}
                        </span>
                        <div className="flex items-center gap-2 mt-0.5">
                            <span className="font-mono text-[11px] font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border/60 whitespace-nowrap">
                                SKU: {p.sku || "-"}
                            </span>
                            {p.unit && (
                                <span className="text-xs text-muted-foreground/80 truncate max-w-45">
                                    • {p.unit}
                                </span>
                            )}
                        </div>
                    </div>
                </div>
            ),
        },
        {
            header: "Kategori",
            cell: (p) => {
                const categoryName =
                    typeof p.category === "object" && p.category !== null
                        ? p.category.name
                        : p.category;

                if (!categoryName)
                    return <span className="text-muted-foreground/80 text-xs">-</span>;

                return (
                    <Badge
                        variant="outline"
                        className="bg-muted/50/80 text-foreground/80 border-border font-medium px-2.5 py-1 rounded-md text-xs inline-flex items-center gap-1.5"
                    >
                        <Tag className="h-3 w-3 text-indigo-500" />
                        {categoryName}
                    </Badge>
                );
            },
        },
        {
            header: "Harga Jual",
            cell: (p) => (
                <div className="flex flex-col text-right">
                    <span className="font-bold text-foreground text-sm tracking-tight">
                        {formatRupiah(p.price)}
                    </span>
                    {p.cost_price ? (
                        <span className="text-[11px] text-muted-foreground/80">
                            Modal: {formatRupiah(p.cost_price)}
                        </span>
                    ) : null}
                </div>
            ),
            className: "text-right",
            headerClassName: "text-right",
        },
        {
            header: "Stok",
            className: "text-center",
            headerClassName: "text-center",
            cell: (p) => {
                const stockNum = Number(p.stock);
                let stockBadgeClass =
                    "bg-emerald-50 text-emerald-700 border-emerald-200";
                let StockIcon = CheckCircle2;

                if (stockNum === 0) {
                    stockBadgeClass =
                        "bg-rose-50 text-rose-700 border-rose-200";
                    StockIcon = XCircle;
                } else if (stockNum <= 5) {
                    stockBadgeClass =
                        "bg-amber-50 text-amber-700 border-amber-200";
                    StockIcon = AlertTriangle;
                }

                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 ${stockBadgeClass}`}
                        >
                            <StockIcon className="h-3.5 w-3.5" />
                            {p.stock} {p.unit || "Pcs"}
                        </Badge>
                    </div>
                );
            },
        },
        {
            header: "Status",
            className: "text-center",
            headerClassName: "text-center",
            cell: (p) => {
                const isActive = p.status === "active";
                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 ${
                                isActive
                                    ? "bg-emerald-50/80 text-emerald-700 border-emerald-200"
                                    : "bg-muted text-muted-foreground border-border"
                            }`}
                        >
                            <span
                                className={`h-1.5 w-1.5 rounded-full ${
                                    isActive
                                        ? "bg-emerald-500 animate-pulse"
                                        : "bg-slate-400"
                                }`}
                            />
                            {isActive ? "Aktif" : "Nonaktif"}
                        </Badge>
                    </div>
                );
            },
        },
    ];

    const productsEndpoint = "/crm/products";

    const formFields: FieldConfig[] = [
        {
            name: "image",
            label: "Gambar Produk",
            type: "file",
            accept: "image/*",
            colSpan: 4,
        },
        { name: "sku", label: "Kode Barang", required: true, colSpan: 1 },
        { name: "name", label: "Nama Produk", required: true, colSpan: 3 },
        {
            name: "description",
            label: "Deskripsi",
            type: "textarea",
            placeholder: "Deskripsi singkat produk (opsional)",
            rows: 3,
            colSpan: 4,
        },
        {
            name: "stock",
            label: "Stok Awal",
            type: "number",
            required: true,
            colSpan: 1,
        },
        {
            name: "unit",
            label: "Satuan",
            type: "select",
            required: true,
            options: [
                { label: "Pcs (Buah)", value: "pcs" },
                { label: "Box (Kotak)", value: "box" },
                { label: "Pack", value: "pack" },
                { label: "Kg (Kilogram)", value: "kg" },
                { label: "Gram", value: "gr" },
                { label: "Liter", value: "liter" },
                { label: "Set", value: "set" },
            ],
            colSpan: 1,
        },
        {
            name: "product_category_id",
            label: "Kategori",
            type: "select",
            required: true,
            options: categories.map((c) => ({
                label: c.name,
                value: String(c.id),
            })),
            colSpan: 2,
        },
        {
            name: "price",
            label: "Harga Jual",
            type: "number",
            prefix: "Rp",
            required: true,
            colSpan: 2,
        },
        {
            name: "cost_price",
            label: "Harga Modal",
            type: "number",
            prefix: "Rp",
            required: false,
            colSpan: 2,
        },
        {
            name: "status",
            label: "Status",
            type: "select",
            required: true,
            options: [
                { label: "Aktif", value: "active" },
                { label: "Nonaktif", value: "inactive" },
            ],
            colSpan: 2,
        },
    ];

    const viewSchema: ViewDetailSchema<Product>[] = [
        {
            label: "Gambar Produk",
            render: (p) =>
                p.image ? (
                    <img
                        src={
                            p.image.startsWith("http")
                                ? p.image
                                : `/storage/${p.image}`
                        }
                        alt={p.name}
                        className="w-24 h-24 object-cover rounded-xl border border-border shadow-sm"
                    />
                ) : (
                    <div className="w-24 h-24 rounded-xl bg-muted border border-dashed border-border flex items-center justify-center text-xs text-muted-foreground/80">
                        Tidak ada gambar
                    </div>
                ),
        },
        { label: "Kode (SKU)", render: (p) => p.sku || "-" },
        { label: "Nama Produk", render: (p) => p.name },
        {
            label: "Deskripsi",
            render: (p) => p.description || "-",
        },
        {
            label: "Kategori",
            render: (p) => {
                const categoryName =
                    typeof p.category === "object" && p.category !== null
                        ? p.category.name
                        : p.category;

                return categoryName ? (
                    <Badge
                        variant="secondary"
                        className="bg-muted text-foreground/80"
                    >
                        <Tag className="mr-1 h-3 w-3 text-muted-foreground/80" />
                        {categoryName}
                    </Badge>
                ) : (
                    "-"
                );
            },
        },
        {
            label: "Satuan",
            render: (p) => (p.unit ? p.unit.toUpperCase() : "PCS"),
        },
        {
            label: "Harga Jual",
            render: (p) => (
                <span className="font-semibold text-emerald-600">
                    {formatRupiah(p.price)}
                </span>
            ),
        },
        {
            label: "Harga Modal",
            render: (p) => (p.cost_price ? formatRupiah(p.cost_price) : "-"),
        },
        {
            label: "Stok",
            render: (p) => (
                <span className="font-medium text-foreground/80">
                    {p.stock} {p.unit || "Pcs"}
                </span>
            ),
        },
        {
            label: "Status",
            render: (p) => (
                <Badge
                    variant={p.status === "active" ? "default" : "secondary"}
                    className={
                        p.status === "active"
                            ? "bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-50"
                            : "bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-50"
                    }
                >
                    {p.status === "active" ? "Aktif" : "Nonaktif"}
                </Badge>
            ),
        },
    ];

    return (
        <AppLayout>
            <Head title="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>CRM Catalog Engine</span>
                            </div>
                            <h1 className="text-3xl font-extrabold tracking-tight text-white">
                                Daftar Produk
                            </h1>
                            <p className="max-w-2xl text-sm text-muted-foreground/60 leading-relaxed">
                                Kelola katalog produk, penetapan harga, status
                                ketersediaan stok, dan klasifikasi item secara
                                terpusat untuk mengoptimalkan operasional
                                bisnis.
                            </p>
                        </div>
                        <Button
                            onClick={() => {
                                setSelectedItem(null);
                                setFormOpen(true);
                            }}
                            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 Produk
                        </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">
                            <Package className="h-5 w-5 text-indigo-600" />
                            <h2 className="text-lg font-bold text-foreground">
                                Master Data Produk
                            </h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Kelola data item, harga, variasi satuan, serta
                            pantau ketersediaan stok produk Anda.
                        </p>
                    </div>

                    <DataTable
                        data={products}
                        columns={columns}
                        baseUrl={productsEndpoint}
                        searchValue={serverFilters?.search || ""}
                        searchPlaceholder="Cari kode atau nama produk..."
                        filters={activeFilters}
                        showNumber={true}
                        useSkeleton={true}
                        onView={(item) => {
                            setSelectedItem(item);
                            setViewOpen(true);
                        }}
                        onEdit={(item) => {
                            setSelectedItem(item);
                            setFormOpen(true);
                        }}
                        onDelete={(item) => {
                            setSelectedItem(item);
                            setDeleteOpen(true);
                        }}
                    />
                </div>

                {/* Modals */}
                <DynamicFormDialog
                    open={formOpen}
                    onOpenChange={setFormOpen}
                    title="Produk"
                    endpoint="/crm/products"
                    fields={formFields}
                    initialValues={{
                        image: null,
                        sku: "",
                        name: "",
                        description: "",
                        unit: "pcs",
                        product_category_id:
                            categories.length > 0
                                ? String(categories[0].id)
                                : "",
                        status: "active",
                        price: 0,
                        cost_price: 0,
                        stock: 0,
                    }}
                    itemToEdit={selectedItem}
                />

                <DynamicViewDialog
                    open={viewOpen}
                    onOpenChange={setViewOpen}
                    title="Detail Produk"
                    data={selectedItem}
                    schema={viewSchema}
                />

                <ConfirmDeleteDialog
                    open={deleteOpen}
                    onOpenChange={setDeleteOpen}
                    title="Hapus Produk?"
                    itemName={selectedItem?.name}
                    onConfirm={() => {
                        if (!selectedItem) return;

                        router.delete(
                            `${productsEndpoint}/${selectedItem.id}`,
                            {
                                onSuccess: () => {
                                    setDeleteOpen(false);
                                    setSelectedItem(null);
                                },
                            },
                        );
                    }}
                />
            </div>
        </AppLayout>
    );
}