import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Link } from '@inertiajs/react';
import { Edit, Eye, Trash2, ArrowUpDown } from 'lucide-react';
import { ColumnDef } from '@tanstack/react-table';

interface BaseEntity {
    id: number;
    name: string;
    description?: string;
    created_at: string;
    updated_at: string;
}

interface DataTableConfig {
    entityPath: string;
    entityIcon: React.ComponentType<{ className?: string }>;
    handleDelete: (id: number, name: string) => void;
    extraColumns?: ColumnDef<any>[];
}

export function createBaseColumns<T extends BaseEntity>(config: DataTableConfig): ColumnDef<T>[] {
    const baseColumns: ColumnDef<T>[] = [
        {
            accessorKey: "id",
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="h-auto p-0 font-medium"
                >
                    ID
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => <div className="font-mono text-xs">{row.getValue("id")}</div>,
        },
        {
            accessorKey: "name",
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="h-auto p-0 font-medium"
                >
                    Nombre
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => <div className="font-medium">{row.getValue("name")}</div>,
        },
        {
            accessorKey: "description",
            header: "Descripción",
            cell: ({ row }) => {
                const description = row.getValue("description") as string;
                return (
                    <div className="max-w-md text-sm text-muted-foreground">
                        {description || "Sin descripción"}
                    </div>
                );
            },
        },
    ];

    // Add extra columns if provided
    if (config.extraColumns) {
        baseColumns.splice(-1, 0, ...config.extraColumns);
    }

    // Add date and actions columns
    baseColumns.push(
        {
            accessorKey: "created_at",
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="h-auto p-0 font-medium"
                >
                    Fecha de Creación
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => {
                const date = new Date(row.getValue("created_at"));
                return <div className="text-sm">{date.toLocaleDateString('es-ES')}</div>;
            },
        },
        {
            id: "actions",
            header: "Acciones",
            cell: ({ row }) => {
                const entity = row.original;

                return (
                    <div className="flex items-center gap-2">
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`${config.entityPath}/${entity.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`${config.entityPath}/${entity.id}/edit`}>
                                <Edit className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => config.handleDelete(entity.id, entity.name)}
                            className="hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20"
                        >
                            <Trash2 className="w-4 h-4" />
                        </Button>
                    </div>
                );
            },
        }
    );

    return baseColumns;
}

export function createMobileCard<T extends BaseEntity>(
    entity: T,
    entityPath: string,
    EntityIcon: React.ComponentType<{ className?: string }>,
    handleDelete: (id: number, name: string) => void
) {
    return (
        <Card className="hover:shadow-md transition-shadow">
            <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                    <div className="flex items-start gap-3 flex-1">
                        <div className="p-2 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg flex-shrink-0">
                            <EntityIcon className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <CardTitle className="text-lg">{entity.name}</CardTitle>
                            {entity.description && (
                                <CardDescription className="mt-1">
                                    {entity.description}
                                </CardDescription>
                            )}
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="pt-0">
                <div className="flex items-center justify-between">
                    <p className="text-xs text-muted-foreground">
                        Creada: {new Date(entity.created_at).toLocaleDateString('es-ES')}
                    </p>
                    <div className="flex items-center gap-1">
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`${entityPath}/${entity.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`${entityPath}/${entity.id}/edit`}>
                                <Edit className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(entity.id, entity.name)}
                            className="hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20"
                        >
                            <Trash2 className="w-4 h-4" />
                        </Button>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}