import { useState } from "react";
import { Head, Link, router } from "@inertiajs/react";
import {
    CalendarCheck2,
    AlertTriangle,
    CheckCircle2,
    Clock3,
    MapPin,
    User,
    Building2,
    Ban,
    CalendarDays,
} from "lucide-react";

import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/crm-data-table";
import { StatChip } from "@/components/crm/global-card";
import {
    DataTable,
    Column,
    PaginatedData,
    FilterConfig,
} from "@/components/crm/global-datatable";
import { show as visitShow } from "@/routes/crm/visits";

type Visit = {
    id: number;
    status:
        | "planned"
        | "ongoing"
        | "completed"
        | "skipped"
        | "cancelled"
        | "missed";
    result_type?: "survey" | "order" | "collection" | "general" | string | null;
    checkin_at?: string | null;
    checkout_at?: string | null;
    customer?: { id: number; name: string } | null;
    sales?: { id: number; name: string } | null;
    schedule?: {
        scheduled_date: string;
        scheduled_time?: string | null;
        purpose?: string | null;
    } | null;
    order?: { id: number; status?: string | null } | null;
};

type Props = {
    visits: PaginatedData<Visit>;
    stats?: {
        total: number;
        planned: number;
        ongoing: number;
        completed: number;
        skipped: number;
        cancelled: number;
        missed: number;
    };
    sales?: { id: number; name: string }[];
    filters?: {
        search?: string;
        from?: string;
        to?: string;
        sales_id?: number | null;
        status?: string;
        result_type?: string;
    };
};

const statusOptions = [
    { label: "Belum Dimulai", value: "planned" },
    { label: "Berlangsung", value: "ongoing" },
    { label: "Selesai", value: "completed" },
    { label: "Dilewati", value: "skipped" },
    { label: "Dibatalkan", value: "cancelled" },
    { label: "Terlewat", value: "missed" },
];

const resultOptions = [
    { label: "Survey", value: "survey" },
    { label: "Order", value: "order" },
    { label: "Collection", value: "collection" },
    { label: "Umum", value: "general" },
];

const formatDate = (value?: string | null) => {
    if (!value) return "—";
    const date = new Date(`${value}T00:00:00`);
    return date.toLocaleDateString("id-ID", {
        day: "2-digit",
        month: "short",
        year: "numeric",
    });
};

const formatDateTime = (value?: string | null) => {
    if (!value) return "—";
    return new Date(value).toLocaleString("id-ID", {
        day: "2-digit",
        month: "short",
        hour: "2-digit",
        minute: "2-digit",
    });
};

export default function VisitsIndex({
    visits,
    stats = {
        total: 0,
        planned: 0,
        ongoing: 0,
        completed: 0,
        skipped: 0,
        cancelled: 0,
        missed: 0,
    },
    sales = [],
    filters = {},
}: Props) {
    // State Filter Lokal
    const [salesIdFilter, setSalesIdFilter] = useState(
        filters.sales_id ? String(filters.sales_id) : "",
    );
    const [statusFilter, setStatusFilter] = useState(filters.status || "");
    const [resultTypeFilter, setResultTypeFilter] = useState(
        filters.result_type || "",
    );
    const [fromFilter, setFromFilter] = useState(filters.from || "");
    const [toFilter, setToFilter] = useState(filters.to || "");

    const handleViewDetail = (item: Visit) => {
        router.get(visitShow.url({ visit: item.id }));
    };

    // Definisi Kolom Utama (Tanpa kolom Aksi manual)
    const columns: Column<Visit>[] = [
        {
            header: "Visit",
            className: "w-1/8",
            cell: (item) => (
                <Button
                    type="button"
                    variant="ghost"
                    onClick={() => handleViewDetail(item)}
                    className="group text-left"
                >
                    <div className="font-bold text-sm text-foreground group-hover:text-indigo-600">
                        Visit #{item.id}
                    </div>
                    <div className="text-[11px] text-muted-foreground/80 mt-0.5">
                        Jadwal {formatDate(item.schedule?.scheduled_date)}
                    </div>
                </Button>
            ),
        },
        {
            header: "Customer",
            cell: (item) => (
                <div className="flex items-center gap-3 min-w-0">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 border border-indigo-100">
                        <Building2 className="h-4 w-4" />
                    </div>
                    <span className="text-xs font-bold text-foreground truncate">
                        {item.customer?.name || "—"}
                    </span>
                </div>
            ),
        },
        {
            header: "Sales",
            accessor: "sales",
            cell: (item) => (
                <div className="flex items-center gap-2">
                    <div className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground">
                        <User className="h-3.5 w-3.5" />
                    </div>
                    <span className="text-xs font-medium text-foreground/80">
                        {item.sales?.name || "—"}
                    </span>
                </div>
            ),
        },
        {
            header: "Jadwal",
            sortable: true,
            sortKey: "scheduled_date",
            className: "text-center",
            cell: (item) => (
                <div className="inline-flex flex-col items-center">
                    <span className="text-xs font-semibold text-foreground/80">
                        {formatDate(item.schedule?.scheduled_date)}
                    </span>
                    <span className="text-[11px] text-muted-foreground/80 font-mono mt-0.5">
                        {item.schedule?.scheduled_time?.slice(0, 5) || "—"} WIB
                    </span>
                </div>
            ),
        },
        {
            header: "Realisasi",
            sortable: true,
            sortKey: "checkin_at",
            className: "truncate w-1/8",
            cell: (item) => (
                <div className="space-y-1 text-[11px]">
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                        <MapPin className="h-3 w-3 text-emerald-600" />
                        <span>Masuk: {formatDateTime(item.checkin_at)}</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                        <Clock3 className="h-3 w-3" />
                        <span>Keluar: {formatDateTime(item.checkout_at)}</span>
                    </div>
                </div>
            ),
        },
        {
            header: "Status",
            sortable: true,
            sortKey: "status",
            className: "text-center",
            cell: (item) => (
                <div className="flex justify-center">
                    <StatusBadge status={item.status} />
                </div>
            ),
        },
    ];

    // Konfigurasi Filter Terintegrasi
    const tableFilters: FilterConfig[] = [
        {
            key: "sales_id",
            label: "Sales",
            value: salesIdFilter,
            onChange: setSalesIdFilter,
            options: sales.map((sale) => ({
                label: sale.name,
                value: sale.id,
            })),
        },
        {
            key: "status",
            label: "Status",
            value: statusFilter,
            onChange: setStatusFilter,
            options: statusOptions,
        },
        // {
        //     key: "result_type",
        //     label: "Hasil",
        //     value: resultTypeFilter,
        //     onChange: setResultTypeFilter,
        //     options: resultOptions,
        // },
        {
            key: "from",
            label: "Dari",
            type: "date",
            value: fromFilter,
            onChange: setFromFilter,
        },
        {
            key: "to",
            label: "Sampai",
            type: "date",
            value: toFilter,
            onChange: setToFilter,
        },
    ];

    return (
        <AppLayout breadcrumbs={[{ title: "Kunjungan", href: "/crm/visits" }]}>
            <Head title="Visit Management" />

            <div className="crm-page space-y-6 pb-10">
                <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-4 pb-2 border-b border-border/60">
                    <div>
                        <div className="flex items-center gap-2 text-xs font-semibold text-indigo-600 mb-1">
                            <CalendarCheck2 className="h-4 w-4" />
                            Monitoring Realisasi Kunjungan
                        </div>
                        <h1 className="text-2xl font-bold tracking-tight text-foreground">
                            Visit Management
                        </h1>
                        <p className="text-sm text-muted-foreground mt-0.5 max-w-2xl">
                            Pantau seluruh Visit, baik yang terjadwal maupun
                            yang dibuat langsung oleh Sales di lapangan.
                        </p>
                    </div>

                    <Link href="/crm/visit-schedules">
                        <Button
                            variant="outline"
                            className="rounded-xl gap-2 font-semibold"
                        >
                            <CalendarDays className="h-4 w-4" />
                            Kelola Jadwal Visit
                        </Button>
                    </Link>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <StatChip
                        icon={CalendarCheck2}
                        label="Total Visit"
                        value={stats.total}
                        description="Realisasi dalam periode"
                        tone="blue"
                    />
                    <StatChip
                        icon={Clock3}
                        label="Belum Dimulai"
                        value={stats.planned}
                        description="Menunggu check-in"
                        tone="rose"
                    />
                    <StatChip
                        icon={Clock3}
                        label="Berlangsung"
                        value={stats.ongoing}
                        description="Sedang berjalan"
                        tone="blue"
                    />
                    <StatChip
                        icon={CheckCircle2}
                        label="Selesai"
                        value={stats.completed}
                        description="Sudah check-out"
                        tone="emerald"
                    />
                    <StatChip
                        icon={AlertTriangle}
                        label="Tertunda"
                        value={stats.missed}
                        description="Backlog kunjungan terlewat"
                        tone="orange"
                    />
                    <StatChip
                        icon={Ban}
                        label="Dilewati"
                        value={stats.skipped}
                        description="Visit yang dilewati"
                        tone="violet"
                    />
                </div>

                <div className="bg-card p-5 rounded-2xl border border-border/80 shadow-sm">
                    <DataTable
                        data={visits}
                        columns={columns}
                        searchPlaceholder="Cari customer, sales, atau catatan..."
                        searchValue={filters.search || ""}
                        filters={tableFilters}
                        baseUrl="/crm/visits"
                        showNumber={true}
                        useSkeleton={true}
                        onView={handleViewDetail}
                    />
                </div>
            </div>
        </AppLayout>
    );
}