import React, { useState } from "react";
import { Head, Link, router, usePage } from "@inertiajs/react";
import { PageProps as InertiaPageProps } from "@inertiajs/core";
import {
    Plus,
    Clock,
    CheckCircle2,
    XCircle,
    AlertTriangle,
    Target,
    Calendar as CalendarIcon,
    Users,
    Building2,
    TrendingUp,
    Sparkles,
    MapPin,
    RotateCcw,
    Play,
} from "lucide-react";

import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

// Import Komponen Reusable Global
import { StatChip } from "@/components/crm/global-card";
import {
    DataTable,
    Column,
    FilterConfig,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
    OptionItem,
} from "@/components/crm/global-formdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import {
    DynamicViewDialog,
    ViewDetailSchema,
} from "@/components/crm/global-viewdialog";

// Interface Data
interface Customer {
    id: number;
    name: string;
    address?: string;
}

interface SalesPerson {
    id: number;
    name: string;
    email: string;
}

export interface VisitSchedule {
    id: number;
    perusahaan_id?: number;
    sales_id: number;
    customer_id: number;
    created_by?: number;
    scheduled_date: string;
    scheduled_time?: string;
    purpose: "survey" | "order" | "collection" | "general";
    status:
        | "planned"
        | "ongoing"
        | "completed"
        | "skipped"
        | "cancelled"
        | "missed";
    notes?: string;
    customer?: Customer;
    sales?: SalesPerson;
    visit?: { id: number; status: string } | null;
}

interface PageProps extends InertiaPageProps {
    schedules: PaginatedData<VisitSchedule>;
    stats: {
        total: number;
        planned: number;
        ongoing: number;
        completed: number;
        skipped: number;
        cancelled: number;
        missed: number;
    };
    customers?: OptionItem[];
    salesList?: OptionItem[];
    filters?: {
        search?: string;
        status?: string;
        purpose?: string;
        date?: string;
        from?: string;
        to?: string;
        sales_id?: number | null;
    };
}

export default function VisitSchedulesIndex() {
    const {
        schedules,
        customers = [],
        salesList = [],
        filters,
        stats,
    } = usePage<PageProps>().props;

    // State Dialog & Selection
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [isViewOpen, setIsViewOpen] = useState(false);
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);

    const [selectedSchedule, setSelectedSchedule] =
        useState<VisitSchedule | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);
    const [purposeFilter, setPurposeFilter] = useState(filters?.purpose || "");
    const [statusFilter, setStatusFilter] = useState(filters?.status || "");
    const [salesFilter, setSalesFilter] = useState(
        filters?.sales_id ? String(filters.sales_id) : "",
    );

    // Initial Values Form
    const initialFormValues = {
        customer_id: "",
        sales_id: "",
        scheduled_date: "",
        scheduled_time: "",
        purpose: "general",
        notes: "",
    };

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

    // Status Badge Component
    const renderStatusBadge = (status: VisitSchedule["status"]) => {
        switch (status) {
            case "planned":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-200/50 dark:border-blue-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-blue-500/15 transition-colors"
                    >
                        <Clock className="w-3.5 h-3.5 text-blue-500" />
                        Planned
                    </Badge>
                );
            case "ongoing":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200/50 dark:border-amber-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-amber-500/15 transition-colors animate-pulse"
                    >
                        <RotateCcw className="w-3.5 h-3.5 text-amber-500 animate-spin" />
                        Ongoing
                    </Badge>
                );
            case "completed":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200/50 dark:border-emerald-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-emerald-500/15 transition-colors"
                    >
                        <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
                        Done
                    </Badge>
                );
            case "skipped":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-200/50 dark:border-purple-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-purple-500/15 transition-colors"
                    >
                        <AlertTriangle className="w-3.5 h-3.5 text-purple-500" />
                        Skipped
                    </Badge>
                );
            case "cancelled":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-200/50 dark:border-rose-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-rose-500/15 transition-colors"
                    >
                        <XCircle className="w-3.5 h-3.5 text-rose-500" />
                        Cancelled
                    </Badge>
                );
            case "missed":
                return (
                    <Badge
                        variant="secondary"
                        className="bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-200/50 dark:border-orange-800/50 gap-1.5 px-2.5 py-1 font-medium shadow-2xs hover:bg-orange-500/15 transition-colors"
                    >
                        <AlertTriangle className="w-3.5 h-3.5 text-orange-500" />
                        Missed
                    </Badge>
                );
            default:
                return null;
        }
    };

    // Purpose Badge Component
    const renderPurposeBadge = (purpose: VisitSchedule["purpose"]) => {
        const labels: Record<
            VisitSchedule["purpose"],
            { label: string; className: string }
        > = {
            survey: {
                label: "Survey",
                className:
                    "bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 border-indigo-200/60 dark:border-indigo-800/60",
            },
            order: {
                label: "Order",
                className:
                    "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-200/60 dark:border-emerald-800/60",
            },
            collection: {
                label: "Collection",
                className:
                    "bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-200/60 dark:border-amber-800/60",
            },
            general: {
                label: "General",
                className:
                    "bg-muted/500/10 text-foreground/80 dark:text-muted-foreground/60 border-border/60 dark:border-slate-800/60",
            },
        };

        const item = labels[purpose] || labels.general;

        return (
            <Badge
                variant="outline"
                className={`gap-1 px-2 py-0.5 text-xs font-semibold rounded-md backdrop-blur-xs ${item.className}`}
            >
                <Target className="w-3 h-3 opacity-70" />
                {item.label}
            </Badge>
        );
    };

    // 1. Konfigurasi Kolom DataTable
    const columns: Column<VisitSchedule>[] = [
        {
            header: "Pelanggan",
            cell: (item) => (
                <div className="flex items-center gap-3 py-1">
                    <Avatar className="h-9 w-9 border border-border dark:border-slate-800 bg-muted dark:bg-slate-800">
                        <AvatarFallback className="text-xs font-bold text-foreground/80 dark:text-muted-foreground/60">
                            {getInitials(item.customer?.name)}
                        </AvatarFallback>
                    </Avatar>
                    <div className="flex flex-col max-w-55">
                        <span className="font-semibold text-foreground dark:text-slate-100 truncate text-sm">
                            {item.customer?.name || "-"}
                        </span>
                        <span className="text-xs text-muted-foreground dark:text-muted-foreground/80 truncate flex items-center gap-1 mt-0.5">
                            <MapPin className="w-3 h-3 shrink-0 text-muted-foreground/80" />
                            {item.customer?.address || "Alamat tidak tersedia"}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            header: "Sales Agent",
            cell: (item) => (
                <div className="flex items-center gap-2">
                    <div className="size-2 rounded-full bg-indigo-500"></div>
                    <span className="font-medium text-foreground dark:text-slate-200 text-sm">
                        {item.sales?.name || "-"}
                    </span>
                </div>
            ),
        },
        {
            header: "Jadwal & Waktu",
            sortable: true,
            sortKey: "scheduled_date",
            cell: (item) => (
                <div className="flex flex-col text-xs">
                    <div className="font-semibold text-foreground dark:text-slate-200 flex items-center gap-1.5">
                        <CalendarIcon className="w-3.5 h-3.5 text-muted-foreground/80" />
                        {item.scheduled_date}
                    </div>
                    {item.scheduled_time && (
                        <span className="text-muted-foreground dark:text-muted-foreground/80 pl-5 text-[11px] font-mono">
                            {item.scheduled_time}
                        </span>
                    )}
                </div>
            ),
        },
        {
            header: "Tujuan",
            cell: (item) => renderPurposeBadge(item.purpose),
        },
        {
            header: "Status",
            cell: (item) => renderStatusBadge(item.status),
        },
        {
            header: "Catatan",
            accessor: "notes",
            cell: (item) => (
                <span className="text-xs text-muted-foreground dark:text-muted-foreground/80 italic line-clamp-1 max-w-45">
                    {item.notes ? `"${item.notes}"` : "-"}
                </span>
            ),
        },
    ];

    // 2. Konfigurasi Filter DataTable
    const filterConfigs: FilterConfig[] = [
        {
            key: "sales_id",
            label: "Sales",
            value: salesFilter,
            options: salesList,
            onChange: setSalesFilter,
        },
        {
            key: "from",
            label: "Dari",
            type: "date",
            value: filters?.from || "",
            onChange: (value) =>
                router.get(
                    "/crm/visit-schedules",
                    { ...filters, from: value || undefined, page: 1 },
                    {
                        preserveState: true,
                        replace: true,
                        preserveScroll: true,
                    },
                ),
        },
        {
            key: "to",
            label: "Sampai",
            type: "date",
            value: filters?.to || "",
            onChange: (value) =>
                router.get(
                    "/crm/visit-schedules",
                    { ...filters, to: value || undefined, page: 1 },
                    {
                        preserveState: true,
                        replace: true,
                        preserveScroll: true,
                    },
                ),
        },
        {
            key: "purpose",
            label: "Tujuan",
            value: purposeFilter,
            options: [
                { label: "Survey", value: "survey" },
                { label: "Order", value: "order" },
                { label: "Collection", value: "collection" },
                { label: "General", value: "general" },
            ],
            onChange: setPurposeFilter,
        },
        {
            key: "status",
            label: "Status",
            value: statusFilter,
            options: [
                { label: "Planned", value: "planned" },
                { label: "Ongoing", value: "ongoing" },
                { label: "Completed", value: "completed" },
                { label: "Skipped", value: "skipped" },
                { label: "Cancelled", value: "cancelled" },
                { label: "Missed", value: "missed" },
            ],
            onChange: setStatusFilter,
        },
    ];

    // 3. Konfigurasi Form Dialog
    const formFields: FieldConfig[] = [
        {
            name: "customer_id",
            label: "Pelanggan",
            type: "select",
            required: true,
            colSpan: 2,
            options: customers,
        },
        {
            name: "sales_id",
            label: "Sales Agent",
            type: "select",
            required: true,
            colSpan: 2,
            options: salesList,
        },
        {
            name: "scheduled_date",
            label: "Tanggal Kunjungan",
            type: "date",
            required: true,
            colSpan: 1,
        },
        {
            name: "scheduled_time",
            label: "Waktu Kunjungan",
            type: "time",
            placeholder: "09:00 WIB",
            colSpan: 1,
        },
        {
            name: "purpose",
            label: "Tujuan Kunjungan",
            type: "select",
            required: true,
            colSpan: 2,
            options: [
                { label: "Survey", value: "survey" },
                { label: "Order", value: "order" },
                { label: "Collection", value: "collection" },
                { label: "General", value: "general" },
            ],
        },
        {
            name: "notes",
            label: "Catatan Tambahan",
            type: "textarea",
            colSpan: 4,
            rows: 3,
            placeholder: "Tambahkan detail/instruksi kunjungan untuk sales...",
        },
    ];

    // 4. Schema View Detail
    const viewSchema: ViewDetailSchema<VisitSchedule>[] = [
        { label: "Pelanggan", render: (item) => item.customer?.name || "-" },
        { label: "Sales Agent", render: (item) => item.sales?.name || "-" },
        {
            label: "Tanggal Kunjungan",
            render: (item) => item.scheduled_date || "-",
        },
        {
            label: "Waktu Kunjungan",
            render: (item) => item.scheduled_time || "-",
        },
        { label: "Tujuan", render: (item) => renderPurposeBadge(item.purpose) },
        { label: "Status", render: (item) => renderStatusBadge(item.status) },
        { label: "Catatan", render: (item) => item.notes || "-" },
        {
            label: "Aksi",
            render: (item) =>
                item.status === "planned" ? (
                    <Button
                        size="sm"
                        className="gap-1"
                        onClick={() =>
                            router.post(`/crm/visit-schedules/${item.id}/start`)
                        }
                    >
                        <Play className="h-3.5 w-3.5" /> Mulai Visit
                    </Button>
                ) : item.visit ? (
                    <Link href={`/crm/visits/${item.visit.id}`}>
                        <Button size="sm" variant="outline">
                            Lihat Visit
                        </Button>
                    </Link>
                ) : null,
        },
    ];

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

        setIsDeleting(true);
        router.delete(`/crm/visit-schedules/${selectedSchedule.id}`, {
            onSuccess: () => {
                setIsDeleteOpen(false);
                setSelectedSchedule(null);
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Jadwal Kunjungan", href: window.location.pathname },
            ]}
        >
            <Head title="Jadwal Kunjungan (Visit Schedules) | CRM SaaS" />

            <div className="crm-page space-y-8 pb-12">
                {/* Header Backdrop */}
                <div className="relative overflow-hidden rounded-2xl border border-border/80 bg-linear-to-r from-slate-900 via-indigo-950 to-slate-900 p-6 sm:p-8 text-white shadow-xl dark:border-slate-800">
                    <div className="absolute right-0 top-0 -mt-12 -mr-12 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl pointer-events-none" />
                    <div className="relative z-10 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                        <div className="space-y-1.5">
                            <div className="flex items-center gap-2">
                                <Badge
                                    variant="outline"
                                    className="border-indigo-400/30 bg-indigo-500/10 text-indigo-300 text-xs font-medium px-2.5 py-0.5 backdrop-blur-md"
                                >
                                    <Sparkles className="w-3 h-3 mr-1 text-indigo-400" />
                                    CRM Execution Hub
                                </Badge>
                            </div>
                            <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-white">
                                Jadwal Kunjungan
                            </h1>
                            <p className="text-sm text-muted-foreground/60 max-w-xl">
                                Kelola, alokasikan, dan pantau efektivitas ritme
                                kunjungan lapangan tim sales secara real-time.
                            </p>
                        </div>
                        <div className="flex items-center gap-3">
                            <Button
                                onClick={() => {
                                    setSelectedSchedule(null);
                                    setIsFormOpen(true);
                                }}
                                size="lg"
                                className="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold shadow-lg shadow-indigo-600/25 border border-indigo-400/20 rounded-xl transition-all duration-200 active:scale-95 gap-2"
                            >
                                <Plus className="w-5 h-5" />
                                Buat Jadwal Baru
                            </Button>
                        </div>
                    </div>
                </div>

                {/* Metrics Summary Cards */}
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                    <StatChip
                        icon={CalendarIcon}
                        label="TOTAL JADWAL"
                        value={schedules.total || schedules.data?.length || 0}
                        tone="violet"
                        description="Terjadwal di sistem"
                        trend={
                            <span className="flex items-center gap-1 text-emerald-600 font-medium">
                                <TrendingUp className="w-3 h-3" />
                                Aktif
                            </span>
                        }
                        variant="compact"
                    />

                    <StatChip
                        icon={AlertTriangle}
                        label="BELUM DIMULAI"
                        value={stats.planned}
                        tone="orange"
                        description="Menunggu check-in"
                        variant="compact"
                    />

                    <StatChip
                        icon={AlertTriangle}
                        label="TERTUNDA"
                        value={stats.missed}
                        tone="orange"
                        description="Backlog wajib ditindaklanjuti"
                        variant="compact"
                    />

                    <StatChip
                        icon={Building2}
                        label="PELANGGAN TERKAIT"
                        value={customers.length}
                        tone="blue"
                        description="Database aktif"
                        variant="compact"
                    />

                    <StatChip
                        icon={Users}
                        label="SALES AGENT"
                        value={salesList.length}
                        tone="emerald"
                        description="Agent aktif bertugas"
                        variant="compact"
                    />
                </div>

                {/* Banner Warning Missed Backlog */}
                {stats.missed > 0 && (
                    <Alert className="border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/30 text-amber-900 dark:text-amber-200 rounded-xl shadow-xs">
                        <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5" />
                        <div className="ml-2">
                            <AlertTitle className="font-bold text-amber-900 dark:text-amber-200 flex items-center gap-2">
                                {stats.missed} Kunjungan Tertunda
                            </AlertTitle>
                            <AlertDescription className="text-sm text-amber-800/90 dark:text-amber-300/80 mt-1 leading-relaxed">
                                Terdapat kunjungan terlewat yang wajib
                                ditindaklanjuti sebelum agenda baru dilanjutkan.
                            </AlertDescription>
                        </div>
                    </Alert>
                )}

                {/* Data Table Card */}
                <Card className="border-border/80 dark:border-slate-800 shadow-sm overflow-hidden rounded-2xl bg-card dark:bg-slate-900">
                    <CardHeader className="border-b border-slate-100 dark:border-slate-800/80 bg-muted/50/50 dark:bg-slate-900/50 px-6 py-4">
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                            <div>
                                <CardTitle className="text-base font-bold text-foreground dark:text-slate-100">
                                    Daftar Agenda Kunjungan
                                </CardTitle>
                                <CardDescription className="text-xs text-muted-foreground">
                                    Gunakan filter untuk menyaring berdasarkan
                                    sales, rentang tanggal, atau status
                                    kunjungan.
                                </CardDescription>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent className="p-6">
                        <DataTable
                            data={schedules}
                            columns={columns}
                            filters={filterConfigs}
                            searchPlaceholder="Cari nama pelanggan, lokasi, atau sales agent..."
                            searchValue={filters?.search || ""}
                            baseUrl="/crm/visit-schedules"
                            showNumber
                            useSkeleton
                            showTooltip
                            onView={(item) => {
                                setSelectedSchedule(item);
                                setIsViewOpen(true);
                            }}
                            onEdit={(item) => {
                                setSelectedSchedule(item);
                                setIsFormOpen(true);
                            }}
                            onDelete={(item) => {
                                setSelectedSchedule(item);
                                setIsDeleteOpen(true);
                            }}
                        />
                    </CardContent>
                </Card>

                {/* Form Dialog (Create & Edit) */}
                <DynamicFormDialog
                    open={isFormOpen}
                    onOpenChange={setIsFormOpen}
                    title={
                        selectedSchedule
                            ? "Edit Jadwal Kunjungan"
                            : "Buat Jadwal Kunjungan"
                    }
                    endpoint="/crm/visit-schedules"
                    fields={formFields}
                    initialValues={initialFormValues}
                    itemToEdit={selectedSchedule}
                    dialogSize="xl"
                />

                {/* View Detail Dialog */}
                <DynamicViewDialog
                    open={isViewOpen}
                    onOpenChange={setIsViewOpen}
                    title="Detail Agenda Kunjungan"
                    data={selectedSchedule}
                    schema={viewSchema}
                />

                {/* Confirm Delete Dialog */}
                <ConfirmDeleteDialog
                    open={isDeleteOpen}
                    onOpenChange={setIsDeleteOpen}
                    onConfirm={handleDeleteConfirm}
                    loading={isDeleting}
                    title="Hapus Jadwal Kunjungan?"
                    description="Apakah Anda yakin ingin menghapus jadwal kunjungan ini? Data yang terhapus tidak dapat dikembalikan."
                />
            </div>
        </AppLayout>
    );
}