import { useState } from "react";
import { Head, router } from "@inertiajs/react";
import {
    Plus,
    Truck,
    Clock,
    CheckCircle2,
    AlertTriangle,
    PackageCheck,
    ArrowUpRight,
    TrendingUp,
} from "lucide-react";

import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { StatChip } from "@/components/crm/global-card";
import {
    DataTable,
    Column,
    FilterConfig,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import {
    DynamicViewDialog,
    ViewDetailSchema,
} from "@/components/crm/global-viewdialog";

type Delivery = {
    id: number;
    delivery_number: string;
    scheduled_date?: string | null;
    status: string;
    recipient_name?: string | null;
    notes?: string | null;
    order?: {
        order_number: string;
        grand_total: string | number;
        customer?: { name: string };
    };
    courier?: { name: string };
};

type OrderOption = {
    id: number | string;
    order_number: string;
    grand_total: number | string;
    customer?: { name: string };
};

type CourierOption = {
    id: number | string;
    name: string;
    phone?: string;
};

const statuses = [
    "pending",
    "assigned",
    "picked_up",
    "in_transit",
    "delivered",
    "failed",
];

// Helper Format Tanggal Indonesia
function formatDateID(dateString?: string | null) {
    if (!dateString) return "Belum dijadwalkan";
    try {
        const date = new Date(dateString);
        if (isNaN(date.getTime())) return dateString;
        return new Intl.DateTimeFormat("id-ID", {
            day: "numeric",
            month: "long",
            year: "numeric",
        }).format(date);
    } catch {
        return dateString;
    }
}

// Helper Badge Status
function PremiumStatusBadge({ status }: { status: string }) {
    const config: Record<string, { label: string; className: string }> = {
        pending: {
            label: "Menunggu",
            className:
                "bg-amber-50 text-amber-700 border-amber-200/60 dark:bg-amber-950/40 dark:text-amber-400",
        },
        assigned: {
            label: "Kurir Ditunjuk",
            className:
                "bg-blue-50 text-blue-700 border-blue-200/60 dark:bg-blue-950/40 dark:text-blue-400",
        },
        picked_up: {
            label: "Diambil",
            className:
                "bg-indigo-50 text-indigo-700 border-indigo-200/60 dark:bg-indigo-950/40 dark:text-indigo-400",
        },
        in_transit: {
            label: "Dalam Pengiriman",
            className:
                "bg-purple-50 text-purple-700 border-purple-200/60 dark:bg-purple-950/40 dark:text-purple-400",
        },
        delivered: {
            label: "Selesai",
            className:
                "bg-emerald-50 text-emerald-700 border-emerald-200/60 dark:bg-emerald-950/40 dark:text-emerald-400",
        },
        failed: {
            label: "Gagal",
            className:
                "bg-rose-50 text-rose-700 border-rose-200/60 dark:bg-rose-950/40 dark:text-rose-400",
        },
    };

    const current = config[status] || {
        label: status.replaceAll("_", " "),
        className: "bg-muted/50 text-foreground/80 border-border",
    };

    return (
        <Badge
            variant="outline"
            className={`capitalize font-medium text-[11px] px-2.5 py-0.5 rounded-full border shadow-2xs ${current.className}`}
        >
            {current.label}
        </Badge>
    );
}

interface IndexProps {
    deliveries: PaginatedData<Delivery>;
    filters: { search?: string; status?: string; date?: string };
    isCourier: boolean;
    orders?: OrderOption[];
    couriers?: CourierOption[];
    stats?: {
        total?: number;
        in_transit?: number;
        delivered?: number;
        pending?: number;
    };
}

export default function Index({
    deliveries,
    filters,
    isCourier,
    orders = [],
    couriers = [],
    stats = { total: 0, in_transit: 0, delivered: 0, pending: 0 },
}: IndexProps) {
    const [statusFilter, setStatusFilter] = useState(filters?.status ?? "");
    const [dateFilter, setDateFilter] = useState(filters?.date ?? "");

    // State Dialogs
    const [openCreateModal, setOpenCreateModal] = useState(false);
    const [openViewModal, setOpenViewModal] = useState(false);
    const [openDeleteModal, setOpenDeleteModal] = useState(false);

    const [selectedDelivery, setSelectedDelivery] = useState<Delivery | null>(
        null,
    );
    const [isDeleting, setIsDeleting] = useState(false);

    // Ambil angka dari props stats
    const totalCount = stats.total ?? 0;
    const inTransitCount = stats.in_transit ?? 0;
    const deliveredCount = stats.delivered ?? 0;
    const pendingCount = stats.pending ?? 0;

    // Kolom Tabel
    const columns: Column<Delivery>[] = [
        {
            header: "Surat Jalan",
            sortable: true,
            sortKey: "delivery_number",
            cell: (item) => (
                <div className="flex flex-col">
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={() =>
                            router.visit(`/crm/deliveries/${item.id}`)
                        }
                        className="group inline-flex items-center gap-1.5 font-semibold text-foreground dark:text-slate-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors text-left"
                    >
                        <span>{item.delivery_number}</span>
                        <ArrowUpRight className="size-3.5 opacity-0 -translate-y-0.5 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all text-indigo-600" />
                    </Button>
                    <span className="text-[11px] text-muted-foreground/80 font-mono">
                        ID: #{String(item.id).padStart(5, "0")}
                    </span>
                </div>
            ),
        },
        {
            header: "Order & Customer",
            cell: (item) => (
                <div className="flex flex-col">
                    <span className="font-medium text-foreground dark:text-slate-200">
                        {item.order?.order_number ?? "-"}
                    </span>
                    <span className="text-xs text-muted-foreground">
                        {item.order?.customer?.name ?? "Tanpa Customer"}
                    </span>
                </div>
            ),
        },
        {
            header: "Kurir",
            cell: (item) =>
                item.courier?.name ? (
                    <div className="flex items-center gap-2">
                        <div className="size-6 rounded-full bg-indigo-100 text-indigo-700 font-bold text-[10px] flex items-center justify-center">
                            {item.courier.name.charAt(0).toUpperCase()}
                        </div>
                        <span className="text-sm font-medium text-foreground/80 dark:text-muted-foreground/60">
                            {item.courier.name}
                        </span>
                    </div>
                ) : (
                    <span className="inline-flex items-center text-xs text-amber-600 bg-amber-50 dark:bg-amber-950/30 px-2 py-0.5 rounded-md font-medium border border-amber-200/50">
                        Belum di-assign
                    </span>
                ),
        },
        {
            header: "Jadwal Pengiriman",
            sortable: true,
            sortKey: "scheduled_date",
            cell: (item) => (
                <div className="flex items-center justify-center gap-1.5 text-muted-foreground dark:text-muted-foreground/80 text-xs">
                    <Clock className="size-3.5 text-muted-foreground/80" />
                    <span>{formatDateID(item.scheduled_date)}</span>
                </div>
            ),
        },
        {
            header: "Status Operasional",
            className: "text-center",
            cell: (item) => <PremiumStatusBadge status={item.status} />,
        },
    ];

    const filterConfigs: FilterConfig[] = [
        {
            key: "date",
            label: "Jadwal",
            type: "date",
            value: dateFilter,
            onChange: (val) => setDateFilter(val),
        },
        {
            key: "status",
            label: "Status",
            value: statusFilter,
            options: statuses.map((s) => ({
                label: s.replaceAll("_", " ").toUpperCase(),
                value: s,
            })),
            onChange: (val) => setStatusFilter(val),
        },
    ];

    const formFields: FieldConfig[] = [
        {
            name: "order_id",
            label: "Pilih Order Terkonfirmasi",
            type: "select",
            required: true,
            placeholder: "Cari & pilih order...",
            options: orders.map((o) => ({
                label: `${o.order_number} • ${o.customer?.name ?? "-"} • Rp ${Number(o.grand_total || 0).toLocaleString("id-ID")}`,
                value: o.id,
            })),
            colSpan: 4,
        },
        {
            name: "courier_id",
            label: "Petugas Kurir",
            type: "select",
            placeholder: "Assign nanti saat siap",
            options: couriers.map((c) => ({
                label: `${c.name}${c.phone ? ` (${c.phone})` : ""}`,
                value: c.id,
            })),
            colSpan: 2,
        },
        {
            name: "scheduled_date",
            label: "Tanggal Penjadwalan",
            type: "date",
            className: "w-auto",
            colSpan: 2,
        },
        {
            name: "notes",
            label: "Instruksi Khusus / Catatan Pengiriman",
            type: "textarea",
            placeholder:
                "Tuliskan catatan alamat, penanganan paket, atau instruksi khusus kurir...",
            rows: 3,
            colSpan: 4,
        },
    ];

    // Schema untuk Modal Detail View
    const viewSchema: ViewDetailSchema<Delivery>[] = [
        { label: "Nomor Surat Jalan", render: (item) => item.delivery_number },
        {
            label: "Nomor Order",
            render: (item) => item.order?.order_number || "-",
        },
        {
            label: "Nama Customer",
            render: (item) => item.order?.customer?.name || "-",
        },
        {
            label: "Kurir Bertugas",
            render: (item) => item.courier?.name || "Belum di-assign",
        },
        {
            label: "Tanggal Penjadwalan",
            render: (item) => formatDateID(item.scheduled_date),
        },
        {
            label: "Status Pengiriman",
            render: (item) => <PremiumStatusBadge status={item.status} />,
        },
        { label: "Penerima", render: (item) => item.recipient_name || "-" },
        { label: "Catatan", render: (item) => item.notes || "-" },
    ];

    // Handler Hapus Data
    const handleDeleteConfirm = () => {
        if (!selectedDelivery) return;

        setIsDeleting(true);
        router.delete(`/crm/deliveries/${selectedDelivery.id}`, {
            onSuccess: () => {
                setOpenDeleteModal(false);
                setSelectedDelivery(null);
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    return (
        <AppLayout
            breadcrumbs={[{ title: "Pengiriman", href: "/crm/deliveries" }]}
        >
            <Head
                title={
                    isCourier
                        ? "Tugas Pengiriman Saya"
                        : "Surat Jalan Operations"
                }
            />

            <div className="crm-page space-y-6 pb-10">
                {/* Header Section */}
                <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center border-b pb-5 border-border/80 dark:border-slate-800">
                    <div>
                        <div className="mb-1 flex items-center gap-2 text-xs font-semibold tracking-wider text-indigo-600 dark:text-indigo-400 uppercase">
                            <Truck className="size-4" /> Logistics & Fulfillment
                        </div>
                        <h1 className="text-2xl font-bold tracking-tight text-foreground dark:text-slate-50">
                            {isCourier
                                ? "Tugas Pengiriman Saya"
                                : "Manajemen Surat Jalan"}
                        </h1>
                        <p className="text-sm text-muted-foreground dark:text-muted-foreground/80">
                            {isCourier
                                ? "Pantau dan perbarui status pengiriman yang ditugaskan kepada Anda secara terintegrasi."
                                : "Monitor armada logistik, alokasikan kurir, dan kelola alur distribusi barang."}
                        </p>
                    </div>

                    {!isCourier && (
                        <Button
                            onClick={() => {
                                setSelectedDelivery(null);
                                setOpenCreateModal(true);
                            }}
                            className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-md hover:shadow-indigo-500/20 rounded-xl transition-all font-medium cursor-pointer"
                        >
                            <Plus className="mr-2 size-4" /> Buat Surat Jalan
                            Baru
                        </Button>
                    )}
                </div>

                {/* Ringkasan KPI Cards */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatChip
                        icon={PackageCheck}
                        label="Total Pengiriman"
                        value={totalCount}
                        tone="blue"
                        description="Terdata di sistem"
                        trend={
                            <span className="inline-flex items-center gap-0.5 text-emerald-600 font-medium">
                                <TrendingUp className="size-3" />
                            </span>
                        }
                    />

                    <StatChip
                        icon={Truck}
                        label="Dalam Transit"
                        value={inTransitCount}
                        tone="violet"
                        description="Aktif di jalan"
                    />

                    <StatChip
                        icon={CheckCircle2}
                        label="Berhasil Terkirim"
                        value={deliveredCount}
                        tone="emerald"
                        description="Selesai 100%"
                    />

                    <StatChip
                        icon={AlertTriangle}
                        label="Menunggu Penugasan"
                        value={pendingCount}
                        tone="orange"
                        description="Membutuhkan tindakan"
                    />
                </div>

                {/* Tabel Data Reusable Baru */}
                <div className="bg-card dark:bg-slate-900 rounded-2xl border border-border/80 dark:border-slate-800 p-4 shadow-xs">
                    <DataTable<Delivery>
                        data={deliveries}
                        columns={columns}
                        showNumber={true}
                        showTooltip={true}
                        useSkeleton={true}
                        searchValue={filters?.search ?? ""}
                        searchPlaceholder="Cari nomor surat jalan, ID order, atau customer..."
                        filters={filterConfigs}
                        baseUrl="/crm/deliveries"
                        onView={(item) => {
                            setSelectedDelivery(item);
                            setOpenViewModal(true);
                        }}
                        onEdit={
                            !isCourier
                                ? (item) => {
                                      setSelectedDelivery(item);
                                      setOpenCreateModal(true);
                                  }
                                : undefined
                        }
                        onDelete={
                            !isCourier
                                ? (item) => {
                                      setSelectedDelivery(item);
                                      setOpenDeleteModal(true);
                                  }
                                : undefined
                        }
                    />
                </div>

                {/* Modal Form Reusable (Create & Edit) */}
                <DynamicFormDialog
                    open={openCreateModal}
                    onOpenChange={setOpenCreateModal}
                    title={
                        selectedDelivery
                            ? "Edit Surat Jalan Pengiriman"
                            : "Penerbitan Surat Jalan Baru"
                    }
                    endpoint="/crm/deliveries"
                    fields={formFields}
                    initialValues={{
                        order_id: "",
                        courier_id: "",
                        scheduled_date: "",
                        notes: "",
                    }}
                    itemToEdit={selectedDelivery}
                    submitText={
                        selectedDelivery
                            ? "Simpan Perubahan"
                            : "Terbitkan Surat Jalan"
                    }
                    dialogSize="md"
                />

                {/* Modal View Detail */}
                <DynamicViewDialog
                    open={openViewModal}
                    onOpenChange={setOpenViewModal}
                    title="Detail Surat Jalan Pengiriman"
                    data={selectedDelivery}
                    schema={viewSchema}
                />

                {/* Modal Konfirmasi Hapus */}
                <ConfirmDeleteDialog
                    open={openDeleteModal}
                    onOpenChange={setOpenDeleteModal}
                    onConfirm={handleDeleteConfirm}
                    loading={isDeleting}
                    title="Hapus Surat Jalan?"
                    description="Apakah Anda yakin ingin menghapus data surat jalan ini? Tindakan ini tidak dapat dibatalkan."
                />
            </div>
        </AppLayout>
    );
}