import React from "react";
import { router } from "@inertiajs/react";
import {
    Plus,
    Search,
    Download,
    Upload,
    MoreHorizontal,
    Pencil,
    Trash2,
} from "lucide-react";
import {
    Card,
    Button,
    Input,
    PageHeader,
    Badge,
    Empty,
} from "../components/ui";
export type Row = Record<string, any>;
export default function CrudPage({
    title,
    description,
    rows = [],
    columns,
    createLabel = "Tambah Data",
    searchPlaceholder = "Cari data...",
    onCreate,
    resource,
}: {
    title: string;
    description?: string;
    rows?: Row[];
    columns: {
        key: string;
        label: string;
        render?: (r: Row) => React.ReactNode;
    }[];
    createLabel?: string;
    searchPlaceholder?: string;
    onCreate?: () => void;
    resource?: string;
}) {
    const [q, setQ] = React.useState("");
    const filtered = rows.filter((r) =>
        JSON.stringify(r).toLowerCase().includes(q.toLowerCase()),
    );
    const destroy = (id: any) => {
        if (resource && confirm("Hapus data ini?"))
            router.delete(`/${resource}/${id}`);
    };
    return (
        <div className="p-7">
            <PageHeader
                title={title}
                description={description}
                action={
                    <div className="flex gap-2">
                        <Button variant="outline">
                            <Upload size={15} className="mr-2" />
                            Import
                        </Button>
                        <Button variant="outline">
                            <Download size={15} className="mr-2" />
                            Export
                        </Button>
                        <Button onClick={onCreate}>
                            <Plus size={16} className="mr-2" />
                            {createLabel}
                        </Button>
                    </div>
                }
            />
            <Card>
                <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 p-4">
                    <div className="flex w-full max-w-sm items-center gap-2">
                        <Search size={17} className="text-slate-400" />
                        <Input
                            value={q}
                            onChange={(e) => setQ(e.target.value)}
                            placeholder={searchPlaceholder}
                        />
                    </div>
                    <div className="text-xs text-slate-400">
                        {filtered.length} data
                    </div>
                </div>
                {filtered.length ? (
                    <div className="overflow-x-auto">
                        <table className="w-full text-left text-sm">
                            <thead className="bg-slate-50 text-xs uppercase text-slate-500">
                                <tr>
                                    {columns.map((c) => (
                                        <th
                                            key={c.key}
                                            className="px-5 py-3 font-bold"
                                        >
                                            {c.label}
                                        </th>
                                    ))}
                                    {resource && (
                                        <th className="px-5 py-3">Aksi</th>
                                    )}
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100">
                                {filtered.map((r, i) => (
                                    <tr
                                        key={r.id ?? i}
                                        className="hover:bg-slate-50/70"
                                    >
                                        {columns.map((c) => (
                                            <td
                                                key={c.key}
                                                className="px-5 py-4"
                                            >
                                                {c.render
                                                    ? c.render(r)
                                                    : r[c.key]}
                                            </td>
                                        ))}
                                        {resource && (
                                            <td className="px-5 py-4">
                                                <div className="flex gap-1">
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                    >
                                                        <Pencil size={14} />
                                                    </Button>
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                        onClick={() =>
                                                            destroy(r.id)
                                                        }
                                                    >
                                                        <Trash2
                                                            size={14}
                                                            className="text-rose-500"
                                                        />
                                                    </Button>
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                    >
                                                        <MoreHorizontal
                                                            size={14}
                                                        />
                                                    </Button>
                                                </div>
                                            </td>
                                        )}
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                ) : (
                    <Empty />
                )}
            </Card>
        </div>
    );
}