import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useState } from "react";
import { Search, SlidersHorizontal, RotateCcw } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Pagination, PaginationLink } from "@/components/crm/crm-pagination";

export type Column<T> = {
    header: string;
    accessor?: keyof T;
    cell?: (item: T) => React.ReactNode;
    className?: string;
    headerClassName?: string;
};

export type PaginatedData<T> = {
    data: T[];
    links: PaginationLink[];
    total: number;
    from: number | null;
    to: number | null;
};

interface DataTableProps<T> {
    data: PaginatedData<T>;
    columns: Column<T>[];
    searchPlaceholder?: string;
    searchValue?: string;
    onSearchChange?: (value: string) => void;
    filters?: React.ReactNode;
    onFilterSubmit?: (e: React.FormEvent) => void;
    onResetFilters?: () => void;
    hasActiveFilters?: boolean;
    emptyIcon?: React.ReactNode;
    emptyText?: string;
    emptySubtext?: string;
    totalLabel?: string;
}

export function DataTable<T extends { id: number | string }>({
    data,
    columns,
    searchPlaceholder = "Cari...",
    searchValue = "",
    onSearchChange,
    filters,
    onFilterSubmit,
    onResetFilters,
    hasActiveFilters = false,
    emptyIcon,
    emptyText = "Belum ada data",
    emptySubtext = "Data yang Anda cari tidak ditemukan.",
    totalLabel = "data",
}: DataTableProps<T>) {
    const numberFormatter = (val: number) =>
        new Intl.NumberFormat("id-ID").format(val || 0);

    return (
        <div className="space-y-4">
            {/* Filter Card */}
            {(onSearchChange || filters) && (
                <Card className="border-border/80 bg-card shadow-sm">
                    <CardContent className="px-5">
                        <form onSubmit={onFilterSubmit} className="space-y-4">
                            <div className="flex items-center gap-2 text-sm font-semibold text-foreground/80">
                                <SlidersHorizontal className="size-4 text-blue-500" />
                                Filter Data
                            </div>

                            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
                                {onSearchChange && (
                                    <div className="relative xl:col-span-2">
                                        <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/80" />
                                        <Input
                                            value={searchValue}
                                            onChange={(e) =>
                                                onSearchChange(e.target.value)
                                            }
                                            placeholder={searchPlaceholder}
                                            className="rounded-xl border-border bg-muted/50/60 pl-10 shadow-none transition focus-visible:bg-card focus-visible:ring-2 focus-visible:ring-blue-500/20"
                                        />
                                    </div>
                                )}

                                {filters && (
                                    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:col-span-5 xl:grid-cols-4">
                                        {filters}
                                    </div>
                                )}

                                <div className="flex gap-2 xl:col-span-1">
                                    {hasActiveFilters && onResetFilters && (
                                        <Button
                                            type="button"
                                            variant="outline"
                                            onClick={onResetFilters}
                                            className="rounded-xl border-border px-4 font-semibold text-muted-foreground hover:border-border hover:bg-muted/50"
                                        >
                                            <RotateCcw className="size-4" />
                                        </Button>
                                    )}
                                    {onFilterSubmit && (
                                        <Button
                                            type="submit"
                                            className="rounded-xl bg-blue-600 font-semibold shadow-lg shadow-blue-600/20 transition-all hover:-translate-y-0.5 hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-600/20"
                                        >
                                            Filter
                                        </Button>
                                    )}
                                </div>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            )}

            {/* Table Card */}
            <Card className="overflow-hidden border-border/80 bg-card shadow-sm">
                <CardContent className="p-0">
                    <div className="overflow-x-auto">
                        <Table className="w-full min-w-225 text-sm">
                            <TableHeader className="bg-muted/50 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                                <TableRow>
                                    {columns.map((col, index) => (
                                        <TableHead
                                            key={index}
                                            className={`px-4 py-3 ${
                                                col.headerClassName ||
                                                "text-left"
                                            }`}
                                        >
                                            {col.header}
                                        </TableHead>
                                    ))}
                                </TableRow>
                            </TableHeader>
                            <TableBody className="divide-y divide-slate-100">
                                {data.data.map((item) => (
                                    <TableRow
                                        key={item.id}
                                        className="transition-colors hover:bg-muted/50/80"
                                    >
                                        {columns.map((col, colIndex) => (
                                            <TableCell
                                                key={colIndex}
                                                className={`px-4 py-3 ${
                                                    col.className || ""
                                                }`}
                                            >
                                                {col.cell
                                                    ? col.cell(item)
                                                    : col.accessor
                                                      ? (item[
                                                            col.accessor
                                                        ] as React.ReactNode)
                                                      : null}
                                            </TableCell>
                                        ))}
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </div>

                    {data.data.length === 0 ? (
                        <div className="flex flex-col items-center gap-3 py-16 text-center">
                            {emptyIcon && (
                                <div className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground/80">
                                    {emptyIcon}
                                </div>
                            )}
                            <div>
                                <p className="font-semibold text-muted-foreground">
                                    {emptyText}
                                </p>
                                <p className="mt-1 text-sm text-muted-foreground/80">
                                    {emptySubtext}
                                </p>
                            </div>
                        </div>
                    ) : (
                        <div className="flex flex-col items-center justify-between gap-3 border-t border-slate-100 px-5 py-4 sm:flex-row">
                            <p className="text-xs text-muted-foreground/80">
                                Menampilkan{" "}
                                <span className="font-semibold text-muted-foreground">
                                    {data.from ?? 0}–{data.to ?? 0}
                                </span>{" "}
                                dari{" "}
                                <span className="font-semibold text-muted-foreground">
                                    {numberFormatter(data.total)}
                                </span>{" "}
                                {totalLabel}
                            </p>
                            <Pagination links={data.links} />
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}