import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, Link } from '@inertiajs/react';
import { Edit, Plus, Trash2, Eye, MapPin, Building, Mail, Phone, ArrowUpDown, Map } from 'lucide-react';
import { useCrudOperations } from '@/hooks/use-crud-operations';
import { ServerDataTable, PaginatedData } from '@/components/ui/server-data-table';
import { createBaseColumns } from '@/lib/datatable-helpers';
import { ColumnDef } from '@tanstack/react-table';

interface Institution {
    id: number;
    name: string;
}

interface InstitutionSede {
    id: number;
    name: string;
    address?: string;
    phone?: string;
    email?: string;
    latitude?: number;
    longitude?: number;
    institution: Institution;
    created_at: string;
    updated_at: string;
}

interface Props {
    sedes: PaginatedData<InstitutionSede>;
    filters: {
        search?: string;
    };
}

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
    { title: 'Sedes', href: '/institution-sedes' },
];

export default function InstitutionSedesIndex({ sedes, filters }: Props) {
    const { handleDelete } = useCrudOperations({
        entityName: 'Sede',
        entityNamePlural: 'Sedes',
        basePath: '/institution-sedes'
    });

    // Columnas específicas para sedes con información de ubicación
    const extraColumns: ColumnDef<InstitutionSede>[] = [
        {
            accessorKey: "institution",
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="h-auto p-0 font-medium"
                >
                    Institución
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => {
                const institution = row.getValue("institution") as Institution;
                return (
                    <div className="flex items-center gap-2">
                        <Building className="w-4 h-4 text-muted-foreground" />
                        <span className="text-sm font-medium">{institution?.name || 'Sin institución'}</span>
                    </div>
                );
            },
        },
        {
            accessorKey: "address",
            header: "Dirección",
            cell: ({ row }) => {
                const address = row.getValue("address") as string;
                return address ? (
                    <div className="flex items-center gap-2">
                        <MapPin className="w-4 h-4 text-muted-foreground" />
                        <span className="text-sm max-w-xs truncate">{address}</span>
                    </div>
                ) : (
                    <span className="text-sm text-muted-foreground">Sin dirección</span>
                );
            },
        },
        {
            accessorKey: "latitude",
            header: "Ubicación",
            cell: ({ row }) => {
                const latitude = row.getValue("latitude") as number;
                const longitude = row.original.longitude;
                return latitude && longitude ? (
                    <div className="flex items-center gap-2">
                        <Map className="w-4 h-4 text-muted-foreground" />
                        <a
                            href={`https://www.google.com/maps?q=${latitude},${longitude}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-sm text-emerald-600 hover:text-emerald-700 hover:underline"
                        >
                            Ver en mapa
                        </a>
                    </div>
                ) : (
                    <span className="text-sm text-muted-foreground">Sin coordenadas</span>
                );
            },
        },
    ];

    // Columnas personalizadas para sedes (sin descripción ni fecha)
    const columns: ColumnDef<InstitutionSede>[] = [
        {
            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>,
        },
        ...extraColumns,
        {
            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={`/institution-sedes/${entity.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/institution-sedes/${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>
                );
            },
        }
    ];

    // Custom mobile card for sedes with all location info
    const renderMobileCard = (sede: InstitutionSede) => (
        <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">
                            <MapPin className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <CardTitle className="text-lg">{sede.name}</CardTitle>
                            <CardDescription className="mt-1 flex items-center gap-1">
                                <Building className="w-3 h-3 flex-shrink-0" />
                                <span className="truncate">{sede.institution?.name}</span>
                            </CardDescription>
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="pt-0">
                <div className="space-y-2 mb-3">
                    {sede.address && (
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <MapPin className="w-4 h-4" />
                            <span className="truncate">{sede.address}</span>
                        </div>
                    )}
                    {sede.email && (
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Mail className="w-4 h-4" />
                            <span className="truncate">{sede.email}</span>
                        </div>
                    )}
                    {sede.phone && (
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Phone className="w-4 h-4" />
                            <span>{sede.phone}</span>
                        </div>
                    )}
                    {sede.latitude && sede.longitude && (
                        <div className="flex items-center gap-2 text-sm text-emerald-600 dark:text-emerald-400">
                            <Map className="w-4 h-4" />
                            <a
                                href={`https://www.google.com/maps?q=${sede.latitude},${sede.longitude}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="hover:underline"
                            >
                                Ver en Google Maps
                            </a>
                        </div>
                    )}
                </div>
                <div className="flex items-center justify-between">
                    <p className="text-xs text-muted-foreground">
                        Creada: {new Date(sede.created_at).toLocaleDateString('es-ES')}
                    </p>
                    <div className="flex items-center gap-1">
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/institution-sedes/${sede.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/institution-sedes/${sede.id}/edit`}>
                                <Edit className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(sede.id, sede.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>
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Sedes" />

            <div className="flex h-full flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="p-2 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg">
                            <MapPin className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div>
                            <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
                                Sedes Institucionales
                            </h1>
                            <p className="text-slate-600 dark:text-slate-400 mt-1 text-sm sm:text-base">
                                Gestiona las sedes de las instituciones educativas
                            </p>
                        </div>
                    </div>
                    <div className="hidden sm:block">
                        <Button asChild className="bg-emerald-600 hover:bg-emerald-700 w-full sm:w-auto">
                            <Link href="/institution-sedes/create">
                                <Plus className="w-4 h-4 mr-2" />
                                Nueva Sede
                            </Link>
                        </Button>
                    </div>
                </div>
                <div className="block sm:hidden">
                    <Button asChild className="bg-emerald-600 hover:bg-emerald-700 w-full sm:w-auto">
                        <Link href="/institution-sedes/create">
                            <Plus className="w-4 h-4 mr-2" />
                            Nueva Sede
                        </Link>
                    </Button>
                </div>
                {/* DataTable */}
                <ServerDataTable
                    columns={columns}
                    paginatedData={sedes}
                    searchKey="name"
                    searchPlaceholder="Buscar sedes..."
                    emptyMessage="No se encontraron sedes. Crea tu primera sede para comenzar."
                    renderMobileCard={renderMobileCard}
                    routeName="/institution-sedes"
                    initialSearch={filters?.search || ''}
                />
            </div>
        </AppLayout>
    );
}