// src/components/OrdenSenadoresNacionalesManager.tsx
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
import { arrayMove, SortableContext, sortableKeyboardCoordinates, horizontalListSortingStrategy } from '@dnd-kit/sortable';
import { getAgrupaciones, updateOrden, getComposicionNacional } from '../services/apiService';
import type { AgrupacionPolitica } from '../types';
import { SortableItem } from './SortableItem';
import './AgrupacionesManager.css';

const ELECCION_ID_NACIONAL = 2;

export const OrdenSenadoresNacionalesManager = () => {
    const [agrupacionesOrdenadas, setAgrupacionesOrdenadas] = useState<AgrupacionPolitica[]>([]);
    
    const { data: todasAgrupaciones = [], isLoading: isLoadingAgrupaciones } = useQuery<AgrupacionPolitica[]>({
        queryKey: ['agrupaciones'],
        queryFn: getAgrupaciones,
    });
    
    const { data: composicionData, isLoading: isLoadingComposicion } = useQuery({
        queryKey: ['composicionNacional', ELECCION_ID_NACIONAL],
        queryFn: () => getComposicionNacional(ELECCION_ID_NACIONAL),
    });

    useEffect(() => {
        if (!composicionData || !todasAgrupaciones || todasAgrupaciones.length === 0) {
            return;
        }

        // Creamos un Set con los IDs de los partidos que tienen al menos una banca de senador
        const partidosConBancasIds = new Set(
            composicionData.senadores.partidos
                .filter(p => p.bancasTotales > 0)
                .map(p => p.id)
        );

        const agrupacionesFiltradas = todasAgrupaciones.filter(a => partidosConBancasIds.has(a.id));

        agrupacionesFiltradas.sort((a, b) => (a.ordenSenadoresNacionales || 999) - (b.ordenSenadoresNacionales || 999));
        
        setAgrupacionesOrdenadas(agrupacionesFiltradas);

    }, [todasAgrupaciones, composicionData]);

    const sensors = useSensors(
      useSensor(PointerSensor),
      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
    );

    const handleDragEnd = (event: DragEndEvent) => {
      const { active, over } = event;
      if (over && active.id !== over.id) {
        setAgrupacionesOrdenadas((items) => {
          const oldIndex = items.findIndex((item) => item.id === active.id);
          const newIndex = items.findIndex((item) => item.id === over.id);
          return arrayMove(items, oldIndex, newIndex);
        });
      }
    };

    const handleSaveOrder = async () => {
        const idsOrdenados = agrupacionesOrdenadas.map(a => a.id);
        try {
            await updateOrden('senadores-nacionales', idsOrdenados);
            alert('Orden de Senadores Nacionales guardado con éxito!');
        } catch (error) {
            alert('Error al guardar el orden de Senadores Nacionales.');
        }
    };

    const isLoading = isLoadingAgrupaciones || isLoadingComposicion;
    if (isLoading) return <p>Cargando orden de Senadores Nacionales...</p>;

    return (
        <div className="admin-module">
            <h3>Ordenar Agrupaciones (Senado de la Nación)</h3>
            <p>Arrastre para reordenar. Solo se muestran los partidos con bancas.</p>
            <p>Ancla izquierda. Prioridad de izquierda a derecha y de arriba abajo.</p>
            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
              <SortableContext items={agrupacionesOrdenadas.map(a => a.id)} strategy={horizontalListSortingStrategy}>
                <ul className="sortable-list-horizontal">
                  {agrupacionesOrdenadas.map(agrupacion => (
                    <SortableItem key={agrupacion.id} id={agrupacion.id}>
                      {agrupacion.nombreCorto || agrupacion.nombre}
                    </SortableItem>
                  ))}
                </ul>
              </SortableContext>
            </DndContext>
            <button onClick={handleSaveOrder} style={{ marginTop: '1rem' }}>Guardar Orden</button>
        </div>
    );
};