import React, { useState, useEffect, useCallback } from 'react';
import {
    Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
    Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
    CircularProgress, Alert, FormControl, InputLabel, Select
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import FilterListIcon from '@mui/icons-material/FilterList';

import cancionService from '../../services/Radios/cancionService';
import ritmoService from '../../services/Radios/ritmoService'; // Para el filtro de ritmo

import type { CancionDto } from '../../models/dtos/Radios/CancionDto';
import type { CreateCancionDto } from '../../models/dtos/Radios/CreateCancionDto';
import type { UpdateCancionDto } from '../../models/dtos/Radios/UpdateCancionDto';
import type { RitmoDto } from '../../models/dtos/Radios/RitmoDto';

import CancionFormModal from '../../components/Modals/Radios/CancionFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarCancionesPage: React.FC = () => {
  const [canciones, setCanciones] = useState<CancionDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  // Filtros
  const [filtroTema, setFiltroTema] = useState('');
  const [filtroInterprete, setFiltroInterprete] = useState('');
  const [filtroIdRitmo, setFiltroIdRitmo] = useState<number | string>('');

  const [ritmos, setRitmos] = useState<RitmoDto[]>([]); // Para el dropdown de filtro
  const [loadingFiltersDropdown, setLoadingFiltersDropdown] = useState(false);

  const [modalOpen, setModalOpen] = useState(false);
  const [editingCancion, setEditingCancion] = useState<CancionDto | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedRow, setSelectedRow] = useState<CancionDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeGestionar = isSuperAdmin || tienePermiso("SS005"); // Usar permiso general de la sección

  const fetchRitmosParaFiltro = useCallback(async () => {
    setLoadingFiltersDropdown(true);
    try {
        const data = await ritmoService.getAllRitmos();
        setRitmos(data);
    } catch (err) { console.error(err); setError("Error al cargar ritmos para filtro.");
    } finally { setLoadingFiltersDropdown(false); }
  }, []);

  useEffect(() => { fetchRitmosParaFiltro(); }, [fetchRitmosParaFiltro]);

  const cargarCanciones = useCallback(async () => {
    if (!puedeGestionar) { setError("No tiene permiso."); setLoading(false); return; }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const params = {
        temaFilter: filtroTema || null,
        interpreteFilter: filtroInterprete || null,
        idRitmoFilter: filtroIdRitmo ? Number(filtroIdRitmo) : null,
      };
      const data = await cancionService.getAllCanciones(params);
      setCanciones(data);
    } catch (err) { console.error(err); setError('Error al cargar las canciones.');
    } finally { setLoading(false); }
  }, [puedeGestionar, filtroTema, filtroInterprete, filtroIdRitmo]);

  useEffect(() => { cargarCanciones(); }, [cargarCanciones]);

  const handleOpenModal = (item?: CancionDto) => {
    setEditingCancion(item || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => { setModalOpen(false); setEditingCancion(null); };

  const handleSubmitModal = async (data: CreateCancionDto | UpdateCancionDto, id?: number) => {
    setApiErrorMessage(null);
    try {
      if (id && editingCancion) {
        await cancionService.updateCancion(id, data as UpdateCancionDto);
      } else {
        await cancionService.createCancion(data as CreateCancionDto);
      }
      cargarCanciones();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar la canción.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (id: number) => {
    if (window.confirm(`¿Seguro de eliminar esta canción (ID: ${id})?`)) {
       setApiErrorMessage(null);
       try { await cancionService.deleteCancion(id); cargarCanciones(); }
       catch (err: any) { const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar.'; setApiErrorMessage(msg); }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, item: CancionDto) => {
    setAnchorEl(event.currentTarget); setSelectedRow(item);
  };
  const handleMenuClose = () => { setAnchorEl(null); setSelectedRow(null); };

  const handleChangePage = (_event: unknown, newPage: number) => setPage(newPage);
  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRowsPerPage(parseInt(event.target.value, 10)); setPage(0);
  };
  const displayData = canciones.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  if (!loading && !puedeGestionar && !loadingFiltersDropdown) return <Box sx={{ p: 2 }}><Alert severity="error">{error || "Acceso denegado."}</Alert></Box>;

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Gestionar Canciones</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
         <Typography variant="h6" gutterBottom>Filtros <FilterListIcon fontSize="small"/></Typography>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center', mb: 2}}>
            <TextField label="Filtrar por Tema" size="small" value={filtroTema} onChange={(e) => setFiltroTema(e.target.value)} sx={{minWidth: 200, flexGrow: 1}}/>
            <TextField label="Filtrar por Intérprete" size="small" value={filtroInterprete} onChange={(e) => setFiltroInterprete(e.target.value)} sx={{minWidth: 200, flexGrow: 1}}/>
            <FormControl size="small" sx={{minWidth: 180, flexGrow: 1}} disabled={loadingFiltersDropdown}>
                <InputLabel>Ritmo</InputLabel>
                <Select value={filtroIdRitmo} label="Ritmo" onChange={(e) => setFiltroIdRitmo(e.target.value as number | string)}>
                    <MenuItem value=""><em>Todos</em></MenuItem>
                    {ritmos.map(r => <MenuItem key={r.id} value={r.id}>{r.nombreRitmo}</MenuItem>)}
                </Select>
            </FormControl>
         </Box>
         {puedeGestionar && (<Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>Agregar Canción</Button>)}
      </Paper>

      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
      {error && !loading && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
      {apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}

      {!loading && !error && puedeGestionar && (
         <TableContainer component={Paper}>
           <Table size="small">
             <TableHead><TableRow sx={{backgroundColor: 'action.hover'}}>
                 <TableCell>Tema</TableCell><TableCell>Intérprete</TableCell>
                 <TableCell>Álbum</TableCell><TableCell>Ritmo</TableCell>
                 <TableCell>Formato</TableCell><TableCell>Pista</TableCell>
                 <TableCell align="right">Acciones</TableCell>
             </TableRow></TableHead>
             <TableBody>
               {displayData.length === 0 ? (
                  <TableRow><TableCell colSpan={7} align="center">No se encontraron canciones.</TableCell></TableRow>
               ) : (
                 displayData.map((c) => (
                     <TableRow key={c.id} hover>
                     <TableCell sx={{fontWeight:500}}>{c.tema || '-'}</TableCell>
                     <TableCell>{c.interprete || '-'}</TableCell>
                     <TableCell>{c.album || '-'}</TableCell>
                     <TableCell>{c.nombreRitmo || '-'}</TableCell>
                     <TableCell>{c.formato || '-'}</TableCell>
                     <TableCell align="center">{c.pista ?? '-'}</TableCell>
                     <TableCell align="right">
                        <IconButton onClick={(e) => handleMenuOpen(e, c)} disabled={!puedeGestionar}><MoreVertIcon /></IconButton>
                     </TableCell>
                     </TableRow>
                 )))}
             </TableBody>
           </Table>
           <TablePagination
             rowsPerPageOptions={[10, 25, 50, 100]} component="div" count={canciones.length}
             rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
             onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
           />
         </TableContainer>
       )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {puedeGestionar && selectedRow && (
            <MenuItem onClick={() => { handleOpenModal(selectedRow); handleMenuClose(); }}><EditIcon fontSize="small" sx={{mr:1}}/> Modificar</MenuItem>)}
        {puedeGestionar && selectedRow && (
            <MenuItem onClick={() => handleDelete(selectedRow.id)}><DeleteIcon fontSize="small" sx={{mr:1}}/> Eliminar</MenuItem>)}
      </Menu>

      <CancionFormModal
        open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
        initialData={editingCancion} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
    </Box>
  );
};

export default GestionarCancionesPage;