import { useState } from "react";
import { Head, Link } from "@inertiajs/react";
import {
    Plus,
    ShoppingCart,
    Sparkles,
    TrendingUp,
    CheckCircle2,
    Clock,
    FileSpreadsheet,
    User,
    ArrowUpRight,
    ShieldCheck,
} from "lucide-react";

import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/crm-data-table";

// 🟢 1. Import Komponen StatChip Reusable
import { StatChip } from "@/components/crm/global-card";

// Import komponen reusable global lainnya
import {
    DataTable,
    Column,
    PaginatedData,
} from "@/components/crm/global-datatable";
import { CreateOrderDialog } from "@/components/crm/global-orderdialog";
import {
    OrderDetailDialog,
    OrderDetail,
} from "@/components/crm/global-orderdetaildialog";

type Order = {
    id: number;
    order_number: string;
    order_date: string;
    grand_total: string | number;
    status: string;
    customer?: { name: string; code?: string };
    sales?: { name: string };
    items?: any[];
};

interface OrdersProps {
    orders: PaginatedData<Order>;
    filters: { search?: string; status?: string };
    customers?: any[];
    salesList?: any[];
    products?: any[];
    canApprove?: boolean;
}

const statusOptions = [
    { label: "Draf", value: "draft" },
    { label: "Diajukan", value: "submitted" },
    { label: "Disetujui", value: "approved" },
    { label: "Ditolak", value: "rejected" },
    { label: "Dikirim", value: "shipped" },
    { label: "Lunas", value: "lunas" },
    { label: "Dibatalkan", value: "cancelled" },
];

// Helper Inisial Avatar
const getInitials = (name?: string) => {
    if (!name) return "??";
    return name
        .split(" ")
        .map((n) => n[0])
        .join("")
        .substring(0, 2)
        .toUpperCase();
};

export default function Orders({
    orders,
    filters,
    customers = [],
    salesList = [],
    products = [],
    canApprove = false,
}: OrdersProps) {
    const [isCreateOpen, setIsCreateOpen] = useState(false);
    const [selectedOrder, setSelectedOrder] = useState<OrderDetail | null>(
        null,
    );
    const [isDetailOpen, setIsDetailOpen] = useState(false);
    const [statusFilter, setStatusFilter] = useState(filters?.status ?? "");

    const handleOpenDetail = (order: Order) => {
        setSelectedOrder(order as OrderDetail);
        setIsDetailOpen(true);
    };

    // Perhitungan Statistik Data
    const totalOrdersCount = orders?.data?.length || 0;
    const totalRevenue =
        orders?.data?.reduce(
            (acc, item) => acc + Number(item.grand_total || 0),
            0,
        ) || 0;
    const approvedCount =
        orders?.data?.filter(
            (o) =>
                o.status === "approved" ||
                o.status === "lunas" ||
                o.status === "disetujui",
        ).length || 0;
    const pendingCount =
        orders?.data?.filter(
            (o) =>
                o.status === "draft" ||
                o.status === "submitted" ||
                o.status === "diajukan",
        ).length || 0;

    // 🟢 2. Definisi Kolom Tabel (Bersih tanpa kolom 'Aksi' atau 'No' manual)
    const columns: Column<Order>[] = [
        {
            header: "Nomor Order",
            accessor: "order_number",
            sortable: true,
            sortKey: "order_number",
            cell: (item) => (
                <div className="flex items-center gap-2">
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={() => handleOpenDetail(item)}
                        className="group inline-flex items-center gap-1.5 rounded-lg bg-indigo-50/80 px-2.5 py-1 text-xs font-bold text-indigo-700 transition-all hover:bg-indigo-600 hover:text-white hover:shadow-md hover:shadow-indigo-200"
                    >
                        <span>{item.order_number}</span>
                        <ArrowUpRight className="h-3 w-3 opacity-60 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:opacity-100" />
                    </Button>
                </div>
            ),
        },
        {
            header: "Pelanggan",
            cell: (item) => {
                const name = item.customer?.name || "Customer Umum";
                return (
                    <div className="flex items-center gap-3">
                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-bold text-foreground/80 ring-2 ring-white shadow-sm border border-border/60">
                            {getInitials(name)}
                        </div>
                        <div className="flex flex-col">
                            <span className="text-xs font-bold text-foreground line-clamp-1">
                                {name}
                            </span>
                            <span className="text-[10px] font-medium text-muted-foreground/80">
                                {item.customer?.code || "ID Customer"}
                            </span>
                        </div>
                    </div>
                );
            },
        },
        {
            header: "Sales Rep",
            cell: (item) => (
                <div className="flex items-center gap-2 text-muted-foreground">
                    <div className="flex h-6 w-6 items-center justify-center rounded-md bg-indigo-50/60 text-indigo-600">
                        <User className="h-3.5 w-3.5" />
                    </div>
                    <span className="text-xs font-medium text-foreground/80">
                        {item.sales?.name || "-"}
                    </span>
                </div>
            ),
        },
        {
            header: "Tanggal Pesanan",
            accessor: "order_date",
            sortable: true,
            sortKey: "order_date",
            className: "text-center",
            cell: (item) => (
                <span className="text-xs font-medium text-foreground/80">
                    {new Date(item.order_date).toLocaleDateString("id-ID", {
                        day: "2-digit",
                        month: "short",
                        year: "numeric",
                    })}
                </span>
            ),
        },
        {
            header: "Nilai Total",
            sortable: true,
            sortKey: "grand_total",
            className: "text-right",
            cell: (item) => (
                <span className="rounded-md bg-emerald-50/80 px-2.5 py-1 text-xs font-extrabold text-emerald-700 border border-emerald-200/50">
                    Rp {Number(item.grand_total).toLocaleString("id-ID")}
                </span>
            ),
        },
        {
            header: "Status",
            sortable: true,
            sortKey: "status",
            className: "text-center",
            cell: (item) => (
                <div className="flex justify-center">
                    <StatusBadge status={item.status} />
                </div>
            ),
        },
    ];

    return (
        <AppLayout breadcrumbs={[{ title: "Orders", href: "/crm/orders" }]}>
            <Head title="Order Penjualan" />

            <div className="crm-page space-y-6 pb-10">
                {/* Header Banner */}
                <div className="relative overflow-hidden rounded-3xl bg-linear-to-r from-slate-900 via-indigo-950 to-slate-900 p-6 text-white shadow-xl md:p-8 border border-slate-800">
                    <div className="absolute -right-10 -bottom-10 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl pointer-events-none" />
                    <div className="relative z-10 flex flex-col justify-between gap-6 md:flex-row md:items-center">
                        <div className="space-y-2">
                            <div className="inline-flex items-center gap-1.5 rounded-full bg-indigo-500/20 px-3 py-1 text-[11px] font-semibold text-indigo-300 ring-1 ring-inset ring-indigo-400/30">
                                <Sparkles className="h-3.5 w-3.5 text-indigo-400" />
                                <span>Sales Management Engine</span>
                            </div>

                            <h1 className="text-2xl font-black tracking-tight text-white md:text-3xl">
                                Transaksi Order Penjualan
                            </h1>

                            <p className="max-w-2xl text-xs text-muted-foreground/60 leading-relaxed">
                                Kelola katalog transaksi, pemrosesan order
                                sales, status persetujuan, dan pencatatan hasil
                                kunjungan secara terpusat.
                            </p>
                        </div>

                        <div className="flex items-center gap-2 self-start md:self-center">
                            {canApprove && (
                                <Button
                                    asChild
                                    variant="outline"
                                    className="rounded-xl border-indigo-200 bg-white/10 text-white hover:bg-white/20 hover:text-white"
                                >
                                    <Link href="/crm/orders/approval">
                                        <ShieldCheck className="h-4 w-4" />
                                        <span>Approval Order</span>
                                    </Link>
                                </Button>
                            )}
                            <Button
                                onClick={() => setIsCreateOpen(true)}
                                className="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg shadow-indigo-600/30 transition-all self-start md:self-center text-xs flex items-center gap-2"
                            >
                                <Plus className="h-4 w-4" />
                                <span>Buat Order Baru</span>
                            </Button>
                        </div>
                    </div>
                </div>

                {/* StatChip Cards */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <StatChip
                        icon={ShoppingCart}
                        label="Total Pesanan"
                        value={`${totalOrdersCount} Order`}
                        tone="violet"
                        description="Keseluruhan order dalam sistem"
                        variant="compact"
                    />
                    <StatChip
                        icon={TrendingUp}
                        label="Est. Revenue"
                        value={`Rp ${totalRevenue.toLocaleString("id-ID")}`}
                        tone="blue"
                        description="Estimasi total pendapatan"
                        variant="compact"
                    />
                    <StatChip
                        icon={CheckCircle2}
                        label="Order Disetujui"
                        value={`${approvedCount} Item`}
                        tone="emerald"
                        description="Order status disetujui / lunas"
                        variant="compact"
                    />
                    <StatChip
                        icon={Clock}
                        label="Dalam Proses"
                        value={`${pendingCount} Draft/Diajukan`}
                        tone="orange"
                        description="Menunggu persetujuan / draf"
                        variant="compact"
                    />
                </div>

                {/* Main Table Container */}
                <div className="rounded-2xl border border-border/80 bg-card shadow-sm overflow-hidden">
                    <div className="p-6 border-b border-slate-100 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 border border-indigo-100">
                                <FileSpreadsheet className="h-5 w-5" />
                            </div>
                            <div>
                                <h2 className="text-base font-bold text-foreground tracking-tight">
                                    Daftar Master Order
                                </h2>
                                <p className="text-xs text-muted-foreground">
                                    Kelola pesanan penjualan, status pengiriman,
                                    dan rincian transaksi CRM.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className="p-6 pt-2">
                        {/* 🟢 3. Penggunaan Komponent DataTable Baru */}
                        <DataTable
                            data={orders}
                            columns={columns}
                            searchPlaceholder="Cari nomor order, customer..."
                            searchValue={filters?.search ?? ""}
                            baseUrl="/crm/orders"
                            filters={[
                                {
                                    key: "status",
                                    label: "Status",
                                    options: statusOptions,
                                    value: statusFilter,
                                    onChange: setStatusFilter,
                                },
                            ]}
                            showNumber
                            useSkeleton={true}
                            onView={handleOpenDetail}
                        />
                    </div>
                </div>

                {/* Modal Buat Order */}
                <CreateOrderDialog
                    open={isCreateOpen}
                    onOpenChange={setIsCreateOpen}
                    customers={customers}
                    salesList={salesList}
                    products={products}
                />

                {/* Modal Detail Order */}
                <OrderDetailDialog
                    open={isDetailOpen}
                    onOpenChange={setIsDetailOpen}
                    order={selectedOrder}
                />
            </div>
        </AppLayout>
    );
}