import { useState } from "react";
import { Head, router } from "@inertiajs/react";
import {
    Plus,
    Target as TargetIcon,
    Sparkles,
    TrendingUp,
    Users,
    Mail,
    Phone,
    Calendar,
    CheckCircle2,
    XCircle,
    Building2,
    ShoppingCart,
    MapPin,
    Package,
} from "lucide-react";

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

// Import Reusable Global Components
import {
    DataTable,
    Column,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import AppLayout from "@/layouts/app-layout";

type Sales = {
    id: number;
    name: string;
    email: string;
    phone?: string;
    employee_code?: string;
    status: "active" | "inactive";
    team_id?: number | null;
    team?: { id: number; name: string } | null;
};

type Target = {
    id: number;
    sales_id: number;
    year: number;
    month: number;
    target_amount: string | number;
    target_qty?: number | string | null;
    target_visits: number | string;
    target_orders: number | string;
    sales?: { name: string };
};

type Props = {
    sales: PaginatedData<Sales>;
    salesList: { id: number; name: string }[];
    teams: { id: number; name: string }[];
    targets: PaginatedData<Target>;
    year: number;
};

const months = [
    { label: "Januari", value: "1" },
    { label: "Februari", value: "2" },
    { label: "Maret", value: "3" },
    { label: "April", value: "4" },
    { label: "Mei", value: "5" },
    { label: "Juni", value: "6" },
    { label: "Juli", value: "7" },
    { label: "Agustus", value: "8" },
    { label: "September", value: "9" },
    { label: "Oktober", value: "10" },
    { label: "November", value: "11" },
    { label: "Desember", value: "12" },
];

export default function SalesIndex({
    sales,
    salesList,
    teams,
    targets,
    year,
}: Props) {
    // State Form Dialog Sales
    const [salesFormOpen, setSalesFormOpen] = useState(false);
    const [selectedSales, setSelectedSales] = useState<Sales | null>(null);

    // State Form Dialog Target
    const [targetFormOpen, setTargetFormOpen] = useState(false);
    const [selectedTarget, setSelectedTarget] = useState<Target | null>(null);

    // State Confirm Delete Dialog
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [deleteUrl, setDeleteUrl] = useState("");
    const [deleteDescription, setDeleteDescription] = useState("");

    // Modal Handler Sales
    const openEditSalesModal = (item: Sales) => {
        setSelectedSales(item);
        setSalesFormOpen(true);
    };

    const openDeleteSalesModal = (item: Sales) => {
        setDeleteUrl(`/crm/sales/${item.id}`);
        setDeleteDescription(
            `Apakah Anda yakin ingin menonaktifkan atau menghapus sales "${item.name}"?`,
        );
        setDeleteOpen(true);
    };

    // Modal Handler Target Bulanan
    const openEditTargetModal = (item: Target) => {
        setSelectedTarget(item);
        setTargetFormOpen(true);
    };

    const openDeleteTargetModal = (item: Target) => {
        setDeleteUrl(`/crm/sales-targets/${item.id}`);
        setDeleteDescription(
            `Hapus alokasi target bulanan untuk "${item.sales?.name}"?`,
        );
        setDeleteOpen(true);
    };

    // Helper untuk Inisial Nama
    const getInitials = (name: string) => {
        if (!name) return "S";
        const parts = name.trim().split(" ");
        if (parts.length >= 2) {
            return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
        }
        return name.slice(0, 2).toUpperCase();
    };

    // Helper Format Rupiah Indonesia
    const formatRupiah = (value: string | number) => {
        const num = Number(value) || 0;
        return new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR",
            maximumFractionDigits: 0,
        }).format(num);
    };

    // Field Config Form Sales
    const salesFields: FieldConfig[] = [
        { name: "name", label: "Nama Sales", required: true, colSpan: 2 },
        {
            name: "email",
            label: "Email",
            type: "email",
            required: true,
            colSpan: 2,
        },
        { name: "phone", label: "Nomor Telepon", colSpan: 2 },
        { name: "employee_code", label: "Kode Karyawan", colSpan: 2 },
        {
            name: "team_id",
            label: "Tim Kerja",
            type: "select",
            options: teams.map((t) => ({ label: t.name, value: t.id })),
            colSpan: 2,
        },
        {
            name: "status",
            label: "Status Akun",
            type: "select",
            options: [
                { label: "Aktif", value: "active" },
                { label: "Nonaktif", value: "inactive" },
            ],
            colSpan: 2,
        },
        { name: "password", label: "Password", type: "password", colSpan: 2 },
        {
            name: "password_confirmation",
            label: "Konfirmasi Password",
            type: "password",
            colSpan: 2,
        },
    ];

    // Field Config Form Target
    const targetFields: FieldConfig[] = [
        {
            name: "sales_id",
            label: "Personel Sales",
            type: "select",
            required: true,
            options: salesList.map((s) => ({ label: s.name, value: s.id })),
            colSpan: 4,
        },
        {
            name: "year",
            label: "Tahun",
            type: "number",
            required: true,
            colSpan: 2,
        },
        {
            name: "month",
            label: "Bulan",
            type: "select",
            required: true,
            options: months,
            colSpan: 2,
        },
        {
            name: "target_amount",
            label: "Target Nominal Penjualan",
            type: "number",
            prefix: "Rp",
            colSpan: 2,
        },
        {
            name: "target_qty",
            label: "Target Kuantitas Produk (Qty)",
            type: "number",
            colSpan: 2,
        },
        {
            name: "target_visits",
            label: "Target Kunjungan (Visit)",
            type: "number",
            colSpan: 2,
        },
        {
            name: "target_orders",
            label: "Target Pesanan (Order)",
            type: "number",
            colSpan: 2,
        },
    ];

    // Columns Tabel Sales (Tanpa Kolom Aksi Manual)
    const salesColumns: Column<Sales>[] = [
        {
            header: "PERSONEL SALES",
            headerClassName: "text-left text-foreground/80 font-semibold",
            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-linear-to-br from-indigo-500 to-indigo-700 text-xs font-bold text-white shadow-sm ring-2 ring-indigo-100">
                        {getInitials(item.name)}
                    </div>
                    <div className="flex flex-col min-w-0">
                        <div className="flex items-center gap-2">
                            <span className="font-semibold text-foreground truncate hover:text-indigo-600 transition-colors">
                                {item.name}
                            </span>
                            {item.employee_code && (
                                <Badge
                                    variant="outline"
                                    className="bg-muted/50 text-[10px] text-muted-foreground border-border px-1.5 py-0 font-mono"
                                >
                                    #{item.employee_code}
                                </Badge>
                            )}
                        </div>
                        <div className="flex items-center gap-3 text-xs text-muted-foreground/80 mt-0.5">
                            <span className="flex items-center gap-1 truncate">
                                <Mail className="h-3 w-3 text-muted-foreground/60 shrink-0" />
                                {item.email}
                            </span>
                            {item.phone && (
                                <span className="hidden sm:flex items-center gap-1 shrink-0">
                                    <Phone className="h-3 w-3 text-muted-foreground/60" />
                                    {item.phone}
                                </span>
                            )}
                        </div>
                    </div>
                </div>
            ),
        },
        {
            header: "TIM KERJA",
            className: "text-center",
            headerClassName: "text-center text-foreground/80 font-semibold",
            cell: (item) =>
                item.team?.name ? (
                    <div className="inline-flex items-center gap-1.5 rounded-lg bg-indigo-50/80 px-2.5 py-1 text-xs font-medium text-indigo-700 border border-indigo-100">
                        <Building2 className="h-3.5 w-3.5 text-indigo-500" />
                        {item.team.name}
                    </div>
                ) : (
                    <span className="italic text-xs text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded border border-slate-100">
                        Tanpa Tim
                    </span>
                ),
        },
        {
            header: "STATUS",
            className: "text-center",
            headerClassName: "text-center text-foreground/80 font-semibold",
            cell: (item) => {
                const isActive = item.status === "active";
                return (
                    <div className="flex justify-center">
                        <Badge
                            variant="outline"
                            className={`px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center gap-1 shadow-2xs ${
                                isActive
                                    ? "bg-emerald-50 text-emerald-700 border-emerald-200/80"
                                    : "bg-muted text-muted-foreground border-border"
                            }`}
                        >
                            {isActive ? (
                                <>
                                    <CheckCircle2 className="h-3 w-3 text-emerald-600" />
                                    Aktif
                                </>
                            ) : (
                                <>
                                    <XCircle className="h-3 w-3 text-muted-foreground/80" />
                                    Nonaktif
                                </>
                            )}
                        </Badge>
                    </div>
                );
            },
        },
    ];

    // Columns Tabel Target (Tanpa Kolom Aksi Manual)
    const targetColumns: Column<Target>[] = [
        {
            header: "PERSONEL SALES",
            headerClassName: "text-left text-foreground/80 font-semibold",
            cell: (item) => (
                <div className="flex items-center gap-2.5 py-1">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 border border-indigo-100 text-indigo-600 font-bold text-xs">
                        {getInitials(item.sales?.name || "S")}
                    </div>
                    <span className="font-semibold text-foreground">
                        {item.sales?.name || "-"}
                    </span>
                </div>
            ),
        },
        {
            header: "PERIODE BULANAN",
            headerClassName: "text-left text-foreground/80 font-semibold",
            cell: (item) => {
                const monthName =
                    months.find((m) => Number(m.value) === item.month)?.label ||
                    "-";
                return (
                    <div className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground/80 bg-muted/50 px-2.5 py-1 rounded-md border border-border/80">
                        <Calendar className="h-3.5 w-3.5 text-indigo-500" />
                        {monthName} {item.year}
                    </div>
                );
            },
        },
        {
            header: "TARGET PENJUALAN",
            className: "text-right",
            headerClassName: "text-right text-foreground/80 font-semibold",
            cell: (item) => (
                <div className="flex items-center justify-end gap-1.5 font-bold text-emerald-600">
                    <span className="text-xs text-emerald-500 bg-emerald-50 p-1 rounded-md border border-emerald-100">
                        Rp
                    </span>
                    {formatRupiah(item.target_amount)}
                </div>
            ),
        },
        {
            header: "TARGET QTY",
            className: "text-center",
            headerClassName: "text-center text-foreground/80 font-semibold",
            cell: (item) => (
                <div className="flex justify-center">
                    <Badge
                        variant="outline"
                        className="bg-muted/50 text-foreground/80 border-border font-mono text-xs px-2 py-0.5"
                    >
                        <Package className="h-3 w-3 mr-1 text-muted-foreground/80" />
                        {Number(item.target_qty ?? 0).toLocaleString("id-ID")}
                    </Badge>
                </div>
            ),
        },
        {
            header: "VISIT",
            className: "text-center",
            headerClassName: "text-center text-foreground/80 font-semibold",
            cell: (item) => (
                <div className="flex justify-center">
                    <Badge
                        variant="outline"
                        className="bg-sky-50 text-sky-700 border-sky-200 font-semibold text-xs px-2 py-0.5"
                    >
                        <MapPin className="h-3 w-3 mr-1 text-sky-500" />
                        {item.target_visits}
                    </Badge>
                </div>
            ),
        },
        {
            header: "ORDER",
            className: "text-center",
            headerClassName: "text-center text-foreground/80 font-semibold",
            cell: (item) => (
                <div className="flex justify-center">
                    <Badge
                        variant="outline"
                        className="bg-violet-50 text-violet-700 border-violet-200 font-semibold text-xs px-2 py-0.5"
                    >
                        <ShoppingCart className="h-3 w-3 mr-1 text-violet-500" />
                        {item.target_orders}
                    </Badge>
                </div>
            ),
        },
    ];

    return (
        <AppLayout breadcrumbs={[{ title: "Sales Force", href: "/crm/sales" }]}>
            <Head title="Sales Force & Target" />

            <div className="crm-page space-y-6 pb-10">
                {/* 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 border border-indigo-500/20 bg-indigo-500/10 px-3 py-1 text-xs font-medium text-indigo-300 backdrop-blur-md">
                                <Sparkles className="h-3.5 w-3.5 text-indigo-400" />
                                <span>MINANGA CRM SALES</span>
                            </div>
                            <h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                                Tim Sales & Target Penjualan
                            </h1>
                            <p className="max-w-2xl text-sm leading-relaxed text-muted-foreground/60">
                                Kelola personel tim penjualan Anda serta
                                tetapkan alokasi target bulanan untuk memantau
                                performa dan tingkat konversi penjualan bisnis
                                secara real-time.
                            </p>
                        </div>
                        <div className="flex flex-wrap gap-3">
                            <Button
                                onClick={() => {
                                    setSelectedSales(null);
                                    setSalesFormOpen(true);
                                }}
                                className="h-11 rounded-xl bg-indigo-600 px-5 font-medium text-white shadow-lg shadow-indigo-600/30 transition-all hover:bg-indigo-500 gap-2 cursor-pointer"
                            >
                                <Plus className="h-4 w-4" />
                                Tambah Sales
                            </Button>
                            <Button
                                onClick={() => {
                                    setSelectedTarget(null);
                                    setTargetFormOpen(true);
                                }}
                                variant="outline"
                                className="h-11 rounded-xl border-slate-700 bg-slate-800/60 px-5 font-medium text-white backdrop-blur-md transition-all hover:bg-slate-700 gap-2 cursor-pointer"
                            >
                                <TargetIcon className="h-4 w-4 text-indigo-400" />
                                Set Target Bulanan
                            </Button>
                        </div>
                    </div>
                </div>

                {/* Section 1: Data Personel Sales */}
                <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">
                            <Users className="h-5 w-5 text-indigo-600" />
                            <h2 className="text-lg font-bold text-foreground">
                                Daftar Personel Sales
                            </h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Kelola data staf sales, penetapan tim kerja, serta
                            status akses CRM.
                        </p>
                    </div>

                    <DataTable
                        data={sales}
                        columns={salesColumns}
                        baseUrl="/crm/sales"
                        searchPlaceholder="Cari nama, email, atau kode karyawan..."
                        showNumber={true}
                        useSkeleton={true}
                        onEdit={openEditSalesModal}
                        onDelete={openDeleteSalesModal}
                    />
                </div>

                {/* Section 2: Data Target Bulanan Sales */}
                <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">
                            <TrendingUp className="h-5 w-5 text-indigo-600" />
                            <h2 className="text-lg font-bold text-foreground">
                                Target Bulanan Sales ({year})
                            </h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Pantau dan alokasikan Key Performance Indicator
                            (KPI) penjualan bulanan secara terukur.
                        </p>
                    </div>

                    <DataTable
                        data={targets}
                        columns={targetColumns}
                        baseUrl="/crm/sales"
                        searchPlaceholder="Cari target sales..."
                        showNumber={true}
                        useSkeleton={true}
                        onEdit={openEditTargetModal}
                        onDelete={openDeleteTargetModal}
                    />
                </div>

                {/* Form Dialog: Sales (Tambah & Edit) */}
                <DynamicFormDialog
                    open={salesFormOpen}
                    onOpenChange={setSalesFormOpen}
                    title="Sales"
                    endpoint="/crm/sales"
                    fields={salesFields}
                    initialValues={{
                        name: "",
                        email: "",
                        phone: "",
                        employee_code: "",
                        team_id: "",
                        status: "active",
                        password: "",
                        password_confirmation: "",
                    }}
                    itemToEdit={selectedSales}
                    submitText="Simpan Sales"
                    editText="Perbarui Sales"
                />

                {/* Form Dialog: Target Bulanan (Tambah & Edit) */}
                <DynamicFormDialog
                    open={targetFormOpen}
                    onOpenChange={setTargetFormOpen}
                    title="Target Bulanan Sales"
                    endpoint="/crm/sales-targets"
                    fields={targetFields}
                    initialValues={{
                        sales_id: "",
                        year: year,
                        month: String(new Date().getMonth() + 1),
                        target_amount: "",
                        target_qty: 0,
                        target_visits: 0,
                        target_orders: 0,
                    }}
                    itemToEdit={selectedTarget}
                    submitText="Simpan Target"
                    editText="Perbarui Target"
                />

                {/* Confirm Delete Dialog Global */}
                <ConfirmDeleteDialog
                    open={deleteOpen}
                    onOpenChange={setDeleteOpen}
                    onConfirm={() => {
                        if (!deleteUrl) return;
                        router.delete(deleteUrl, {
                            onSuccess: () => setDeleteOpen(false),
                        });
                    }}
                    description={
                        deleteDescription ||
                        "Tindakan ini tidak dapat dibatalkan."
                    }
                />
            </div>
        </AppLayout>
    );
}