import React, { useState } from "react";
import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    CalendarIcon,
    Plus,
    FileText,
    Calendar,
    Edit,
    Trash2,
    MoreHorizontal,
    CheckCircle2,
    XCircle,
    Clock,
    UserCheck,
    Receipt,
} from "lucide-react";

import {
    DataTable,
    Column,
    FilterConfig,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import { StatChip } from "@/components/crm/global-card";
import collectionSchedulesRoutes from "@/routes/crm/collection-schedules";

type CollectionStatus = "planned" | "visited" | "collected" | "failed";

export interface CollectionScheduleItem {
    id: number;
    scheduled_date: string;
    invoice_id: number | string;
    collector_id: number | string;
    status: CollectionStatus | string;
    notes?: string | null;
    invoice?: {
        id: number;
        invoice_number: string;
        amount: number | string;
        paid_amount: number | string;
    } | null;
    customer?: {
        id: number;
        name: string;
    } | null;
    collector?: {
        id: number;
        name: string;
    } | null;
}

interface IndexProps {
    schedules: PaginatedData<CollectionScheduleItem>;
    invoices: Array<{
        id: number;
        invoice_number: string;
        amount: number | string;
        paid_amount: number | string;
        customer?: { name: string } | null;
    }>;
    collectors: Array<{
        id: number;
        name: string;
    }>;
    filters?: {
        status?: string;
        search?: string;
        per_page?: number;
    };
}

const money = (value: number | string | null | undefined) =>
    new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0,
    }).format(Number(value) || 0);

const formatDateID = (dateString: string) => {
    if (!dateString) return "-";

    const localDateMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateString);
    const date = localDateMatch
        ? new Date(
              Number(localDateMatch[1]),
              Number(localDateMatch[2]) - 1,
              Number(localDateMatch[3]),
          )
        : new Date(dateString);

    if (Number.isNaN(date.getTime())) return dateString;

    return new Intl.DateTimeFormat("id-ID", {
        day: "numeric",
        month: "short",
        year: "numeric",
    }).format(date);
};

const getTodayLocal = () => {
    const date = new Date();
    const pad = (value: number) => String(value).padStart(2, "0");

    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
        date.getDate(),
    )}`;
};

const getInitials = (name: string) => {
    const parts = name.trim().split(/\s+/).filter(Boolean);

    if (!parts.length) return "?";

    return parts
        .map((part) => part[0])
        .join("")
        .toUpperCase()
        .slice(0, 2);
};

const getStatusBadge = (status: string) => {
    switch (status) {
        case "collected":
            return (
                <Badge className="inline-flex items-center gap-1 rounded-full border-emerald-200/60 bg-emerald-500/10 px-2.5 py-0.5 font-medium text-emerald-700 hover:bg-emerald-500/20">
                    <CheckCircle2 className="h-3 w-3 text-emerald-600" />
                    Collected
                </Badge>
            );

        case "visited":
            return (
                <Badge className="inline-flex items-center gap-1 rounded-full border-blue-200/60 bg-blue-500/10 px-2.5 py-0.5 font-medium text-blue-700 hover:bg-blue-500/20">
                    <UserCheck className="h-3 w-3 text-blue-600" />
                    Visited
                </Badge>
            );

        case "failed":
            return (
                <Badge className="inline-flex items-center gap-1 rounded-full border-rose-200/60 bg-rose-500/10 px-2.5 py-0.5 font-medium text-rose-700 hover:bg-rose-500/20">
                    <XCircle className="h-3 w-3 text-rose-600" />
                    Failed
                </Badge>
            );

        case "planned":
            return (
                <Badge className="inline-flex items-center gap-1 rounded-full border-indigo-200/60 bg-indigo-500/10 px-2.5 py-0.5 font-medium text-indigo-700 hover:bg-indigo-500/20">
                    <Calendar className="h-3 w-3 text-indigo-600" />
                    Planned
                </Badge>
            );

        default:
            return (
                <Badge
                    variant="outline"
                    className="inline-flex items-center gap-1 rounded-full border-border bg-muted/50 px-2.5 py-0.5 font-medium text-muted-foreground"
                >
                    <Clock className="h-3 w-3 text-muted-foreground/80" />
                    Pending
                </Badge>
            );
    }
};

export default function Index({
    schedules,
    invoices,
    collectors,
    filters,
}: IndexProps) {
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [selectedItem, setSelectedItem] =
        useState<CollectionScheduleItem | null>(null);
    const [selectedStatus, setSelectedStatus] = useState<string>(
        filters?.status ?? "",
    );

    const formFields: FieldConfig[] = [
        ...(!selectedItem
            ? [
                  {
                      name: "invoice_id",
                      label: "Invoice Target",
                      type: "select" as const,
                      placeholder: "Pilih Invoice",
                      required: true,
                      colSpan: 2 as const,
                      className: "w-full max-w-full truncate text-left",
                      options: invoices.map((invoice) => ({
                          label: `${invoice.invoice_number} — ${
                              invoice.customer?.name || "N/A"
                          } (${money(
                              Number(invoice.amount) -
                                  Number(invoice.paid_amount),
                          )})`,
                          value: String(invoice.id),
                      })),
                  },
                  {
                      name: "collector_id",
                      label: "Petugas Collector",
                      type: "select" as const,
                      placeholder: "Pilih Collector",
                      required: true,
                      colSpan: 2 as const,
                      className: "w-full max-w-full truncate text-left",
                      options: collectors.map((collector) => ({
                          label: collector.name,
                          value: String(collector.id),
                      })),
                  },
              ]
            : []),
        {
            name: "scheduled_date",
            label: "Tanggal Penagihan",
            type: "date",
            required: true,
            className: "w-auto",
            colSpan: 2,
        },
        {
            name: "notes",
            label: "Catatan Tambahan",
            type: "textarea",
            placeholder: "Masukkan instruksi khusus atau alamat lokasi...",
            rows: 2,
            colSpan: 4,
        },
    ];

    const initialFormValues = {
        invoice_id: "",
        collector_id: "",
        scheduled_date: getTodayLocal(),
        notes: "",
    };

    const handleCreate = () => {
        setSelectedItem(null);
        setIsDialogOpen(true);
    };

    const handleEdit = (item: CollectionScheduleItem) => {
        setSelectedItem(item);
        setIsDialogOpen(true);
    };

    const handleDelete = (id: number) => {
        if (
            !confirm("Apakah Anda yakin ingin menghapus jadwal penagihan ini?")
        ) {
            return;
        }

        router.delete(collectionSchedulesRoutes.destroy.url(id), {
            preserveScroll: true,
        });
    };

    const handleQuickUpdateStatus = (
        item: CollectionScheduleItem,
        status: CollectionStatus,
    ) => {
        router.put(
            collectionSchedulesRoutes.update.url(item.id),
            {
                status,
                scheduled_date: item.scheduled_date,
                notes: item.notes || "",
            },
            { preserveScroll: true },
        );
    };

    // Array kolom tanpa menyusun kolom Aksi secara manual
    const columns: Column<CollectionScheduleItem>[] = [
        {
            header: "Tanggal",
            sortable: true,
            sortKey: "scheduled_date",
            cell: (item) => (
                <div className="flex items-center gap-2 whitespace-nowrap text-xs font-medium text-foreground/80">
                    <CalendarIcon className="h-3.5 w-3.5 text-muted-foreground/80" />
                    {formatDateID(item.scheduled_date)}
                </div>
            ),
        },
        {
            header: "No. Invoice",
            cell: (item) => (
                <div className="flex items-center gap-1.5">
                    <Receipt className="h-3.5 w-3.5 text-indigo-500" />
                    <span className="rounded border border-indigo-100 bg-indigo-50 px-2 py-0.5 font-mono text-xs font-semibold text-indigo-950">
                        {item.invoice?.invoice_number || "-"}
                    </span>
                </div>
            ),
        },
        {
            header: "Pelanggan",
            cell: (item) => (
                <div className="flex min-w-0 flex-col">
                    <span className="text-xs font-medium text-foreground">
                        {item.customer?.name || "-"}
                    </span>
                    {item.notes && (
                        <span
                            className="max-w-45 truncate text-[11px] text-muted-foreground/80"
                            title={item.notes}
                        >
                            {item.notes}
                        </span>
                    )}
                </div>
            ),
        },
        {
            header: "Collector",
            accessor: "collector",
            className: "text-center",
            cell: (item) => (
                <div className="flex items-center justify-center gap-2">
                    <Avatar className="h-6 w-6 border bg-muted text-[10px] text-muted-foreground">
                        <AvatarFallback>
                            {getInitials(item.collector?.name || "")}
                        </AvatarFallback>
                    </Avatar>
                    <span className="text-xs font-medium text-foreground/80">
                        {item.collector?.name || "-"}
                    </span>
                </div>
            ),
        },
        {
            header: "Sisa Tagihan",
            className: "whitespace-nowrap text-right",
            cell: (item) => {
                const remaining =
                    Number(item.invoice?.amount || 0) -
                    Number(item.invoice?.paid_amount || 0);

                return (
                    <div className="text-right">
                        <span className="text-xs font-semibold text-foreground">
                            {money(remaining)}
                        </span>
                    </div>
                );
            },
        },
        {
            header: "Status",
            sortable: true,
            sortKey: "status",
            className: "text-center",
            cell: (item) => getStatusBadge(item.status),
        },
    ];

    // Menu dropdown kustom yang dioperkan via prop actions
    const renderRowActions = (item: CollectionScheduleItem) => (
        <div className="flex items-center justify-center">
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button
                        variant="ghost"
                        aria-label={`Aksi untuk jadwal ${
                            item.invoice?.invoice_number || item.id
                        }`}
                        className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                    >
                        <MoreHorizontal className="h-4 w-4" />
                    </Button>
                </DropdownMenuTrigger>

                <DropdownMenuContent align="end" className="w-44">
                    <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
                        Ubah Status
                    </DropdownMenuLabel>

                    <DropdownMenuItem
                        onClick={() => handleQuickUpdateStatus(item, "visited")}
                        className="gap-2 text-xs"
                    >
                        <UserCheck className="h-3.5 w-3.5 text-blue-500" />
                        Visited
                    </DropdownMenuItem>

                    <DropdownMenuItem
                        onClick={() =>
                            handleQuickUpdateStatus(item, "collected")
                        }
                        className="gap-2 text-xs"
                    >
                        <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                        Collected
                    </DropdownMenuItem>

                    <DropdownMenuItem
                        onClick={() => handleQuickUpdateStatus(item, "failed")}
                        className="gap-2 text-xs"
                    >
                        <XCircle className="h-3.5 w-3.5 text-rose-500" />
                        Failed
                    </DropdownMenuItem>

                    <DropdownMenuSeparator />

                    <DropdownMenuItem
                        onClick={() => handleEdit(item)}
                        className="gap-2 text-xs"
                    >
                        <Edit className="h-3.5 w-3.5 text-muted-foreground" />
                        Edit Jadwal
                    </DropdownMenuItem>

                    <DropdownMenuItem
                        onClick={() => handleDelete(item.id)}
                        className="gap-2 text-xs text-rose-600 focus:bg-rose-50 focus:text-rose-600"
                    >
                        <Trash2 className="h-3.5 w-3.5 text-rose-600" />
                        Hapus
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    );

    const tableFilters: FilterConfig[] = [
        {
            key: "status",
            label: "Status",
            type: "select",
            options: [
                { label: "Planned", value: "planned" },
                { label: "Visited", value: "visited" },
                { label: "Collected", value: "collected" },
                { label: "Failed", value: "failed" },
            ],
            value: selectedStatus,
            onChange: setSelectedStatus,
        },
    ];

    const plannedCount = schedules.data.filter(
        (schedule) => schedule.status === "planned",
    ).length;
    const pageCollectedCount = schedules.data.filter(
        (schedule) => schedule.status === "collected",
    ).length;
    const pageFailedCount = schedules.data.filter(
        (schedule) => schedule.status === "failed",
    ).length;

    return (
        <AppLayout
            breadcrumbs={[
                {
                    title: "Collection",
                    href: collectionSchedulesRoutes.index.url(),
                },
            ]}
        >
            <Head title="Collection Schedule" />

            <div className="crm-page space-y-6 pb-10">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="text-2xl font-bold tracking-tight text-foreground">
                            Jadwal Penagihan (Collection)
                        </h1>
                        <p className="text-xs text-muted-foreground">
                            Atur rute dan status penagihan piutang pelanggan
                            secara realtime.
                        </p>
                    </div>

                    <Button
                        onClick={handleCreate}
                        className="h-9 gap-2 rounded-lg bg-indigo-600 px-4 text-xs font-medium text-white shadow-sm hover:bg-indigo-700"
                    >
                        <Plus className="h-4 w-4" />
                        Tambah Jadwal
                    </Button>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatChip
                        icon={Receipt}
                        label="Total Jadwal"
                        value={schedules.total ?? schedules.data.length}
                        description="Sesuai filter aktif"
                        tone="blue"
                    />
                    <StatChip
                        icon={Clock}
                        label="Planned"
                        value={plannedCount}
                        description="Pada halaman ini"
                        tone="rose"
                    />
                    <StatChip
                        icon={CheckCircle2}
                        label="Berhasil Ditagih"
                        value={pageCollectedCount}
                        description="Pada halaman ini"
                        tone="emerald"
                    />
                    <StatChip
                        icon={XCircle}
                        label="Gagal"
                        value={pageFailedCount}
                        description="Pada halaman ini"
                        tone="orange"
                    />
                </div>

                <Card className="overflow-hidden rounded-xl border bg-card py-2 shadow-sm">
                    <CardHeader className="border-b bg-card py-4!">
                        <CardTitle className="flex items-center gap-2 text-sm font-semibold text-foreground">
                            <FileText className="h-4 w-4 text-indigo-600" />
                            Daftar Jadwal Penagihan
                        </CardTitle>
                    </CardHeader>

                    <CardContent>
                        <DataTable<CollectionScheduleItem>
                            data={schedules}
                            columns={columns}
                            actions={renderRowActions}
                            searchPlaceholder="Cari nomor invoice, customer, atau collector..."
                            searchValue={filters?.search ?? ""}
                            filters={tableFilters}
                            showNumber={true}
                            primaryKey="id"
                            baseUrl={collectionSchedulesRoutes.index.url()}
                        />
                    </CardContent>
                </Card>

                <DynamicFormDialog<CollectionScheduleItem>
                    open={isDialogOpen}
                    onOpenChange={setIsDialogOpen}
                    title="Jadwal Penagihan"
                    subtitle={
                        selectedItem
                            ? "Perbarui tanggal dan catatan jadwal penagihan."
                            : "Isi formulir berikut untuk menambah jadwal penagihan."
                    }
                    endpoint={collectionSchedulesRoutes.store.url()}
                    fields={formFields}
                    initialValues={initialFormValues}
                    itemToEdit={selectedItem}
                    primaryKey="id"
                    dialogSize="md"
                    submitText="Simpan Jadwal"
                    editText="Perbarui Jadwal"
                    icon={<Calendar className="h-5 w-5 text-white" />}
                />
            </div>
        </AppLayout>
    );
}