import React, { useState, useEffect, useCallback } from 'react';
import {
  Box, Typography, Button, Paper, IconButton, Chip, Alert, CircularProgress,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
  FormControl, InputLabel, Select, MenuItem, Tabs, Tab, Tooltip
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import HistoryIcon from '@mui/icons-material/History';
import FilterListIcon from '@mui/icons-material/FilterList';

import cierresCcService from '../../services/Contables/cierresCcService';
import distribuidorService from '../../services/Distribucion/distribuidorService';
import empresaService from '../../services/Distribucion/empresaService';

import type { CierreCuentaCorrienteDto } from '../../models/dtos/Contables/CierreCuentaCorrienteDto';
import type { CrearCierreDto } from '../../models/dtos/Contables/CrearCierreDto';
import type { ReabrirCierreDto } from '../../models/dtos/Contables/ReabrirCierreDto';
import type { CierreCuentaCorrienteHistorialDto } from '../../models/dtos/Auditoria/CierreCuentaCorrienteHistorialDto';
import type { DistribuidorDropdownDto } from '../../models/dtos/Distribucion/DistribuidorDropdownDto';
import type { EmpresaDropdownDto } from '../../models/dtos/Distribucion/EmpresaDropdownDto';

import NuevoCierreModal from '../../components/Modals/Contables/NuevoCierreModal';
import ReabrirCierreModal from '../../components/Modals/Contables/ReabrirCierreModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const formatDate = (dateString?: string | null): string => {
  if (!dateString) return '-';
  const datePart = dateString.split('T')[0];
  const parts = datePart.split('-');
  if (parts.length === 3) return `${parts[2]}/${parts[1]}/${parts[0]}`;
  return datePart;
};

const formatDateTime = (dateString?: string | null): string => {
  if (!dateString) return '-';
  const d = new Date(dateString);
  if (isNaN(d.getTime())) return dateString;
  return d.toLocaleString('es-AR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  });
};

// Extrae el codigo de error del backend si viene en el response (PERIODO_CERRADO_BLOQUEO_OPERACION,
// CIERRE_FECHA_FUTURA, etc.) y arma un mensaje legible. Si no hay codigo, usa message generico.
const parseApiError = (err: unknown, fallback: string): string => {
  if (axios.isAxiosError(err)) {
    const data = err.response?.data;
    if (data && typeof data === 'object') {
      const codigo = (data as { codigo?: string }).codigo;
      const mensaje = (data as { mensaje?: string; message?: string }).mensaje
        || (data as { mensaje?: string; message?: string }).message;
      if (mensaje) return codigo ? `[${codigo}] ${mensaje}` : mensaje;
      if (codigo) return `Error: ${codigo}`;
    }
  }
  return fallback;
};

const CierresCuentaCorrientePage: React.FC = () => {
  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVer = isSuperAdmin || tienePermiso('CC003');
  const puedeCrear = isSuperAdmin || tienePermiso('CC001');
  // Reapertura: exclusivo SuperAdmin — sin código de permiso asignable.
  const puedeReabrir = isSuperAdmin;

  const [filtroIdDistribuidor, setFiltroIdDistribuidor] = useState<number | string>('');
  const [filtroIdEmpresa, setFiltroIdEmpresa] = useState<number | string>('');

  const [distribuidores, setDistribuidores] = useState<DistribuidorDropdownDto[]>([]);
  const [empresas, setEmpresas] = useState<EmpresaDropdownDto[]>([]);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);

  const [cierres, setCierres] = useState<CierreCuentaCorrienteDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pageApiErrorMessage, setPageApiErrorMessage] = useState<string | null>(null);
  const [modalApiErrorMessage, setModalApiErrorMessage] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(25);

  const [tabIndex, setTabIndex] = useState(0);
  const [cierreSeleccionadoHistorial, setCierreSeleccionadoHistorial] = useState<CierreCuentaCorrienteDto | null>(null);
  const [historial, setHistorial] = useState<CierreCuentaCorrienteHistorialDto[]>([]);
  const [loadingHistorial, setLoadingHistorial] = useState(false);

  const [nuevoModalOpen, setNuevoModalOpen] = useState(false);
  const [reabrirModalOpen, setReabrirModalOpen] = useState(false);
  const [cierreParaReabrir, setCierreParaReabrir] = useState<CierreCuentaCorrienteDto | null>(null);

  // Carga dropdowns una sola vez al montar
  useEffect(() => {
    const fetchDropdowns = async () => {
      setLoadingDropdowns(true);
      try {
        const [distData, empData] = await Promise.all([
          distribuidorService.getAllDistribuidoresDropdown(),
          empresaService.getEmpresasDropdown()
        ]);
        setDistribuidores(distData);
        setEmpresas(empData);
      } catch (err) {
        console.error(err);
        setError('Error al cargar opciones de filtro.');
      } finally {
        setLoadingDropdowns(false);
      }
    };
    fetchDropdowns();
  }, []);

  const cargarCierres = useCallback(async () => {
    if (!puedeVer) {
      setError('No tiene permiso.');
      return;
    }
    if (!filtroIdDistribuidor || !filtroIdEmpresa) {
      setCierres([]);
      return;
    }

    setLoading(true);
    setError(null);
    setPageApiErrorMessage(null);
    try {
      const data = await cierresCcService.getAllCierres(
        Number(filtroIdDistribuidor),
        Number(filtroIdEmpresa)
      );
      setCierres(data);
      setPage(0);
    } catch (err) {
      console.error(err);
      setPageApiErrorMessage(parseApiError(err, 'Error al cargar los cierres.'));
    } finally {
      setLoading(false);
    }
  }, [puedeVer, filtroIdDistribuidor, filtroIdEmpresa]);

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

  const cargarHistorial = useCallback(async (idCierre: number) => {
    setLoadingHistorial(true);
    try {
      const data = await cierresCcService.getHistorialCierre(idCierre);
      setHistorial(data);
    } catch (err) {
      console.error(err);
      setPageApiErrorMessage(parseApiError(err, 'Error al cargar el historial.'));
    } finally {
      setLoadingHistorial(false);
    }
  }, []);

  const handleSelectCierreHistorial = (cierre: CierreCuentaCorrienteDto) => {
    setCierreSeleccionadoHistorial(cierre);
    setTabIndex(1);
    cargarHistorial(cierre.idCierre);
  };

  const clearModalApiErrorMessage = useCallback(() => setModalApiErrorMessage(null), []);

  const handleSubmitNuevoCierre = async (data: CrearCierreDto) => {
    setModalApiErrorMessage(null);
    try {
      const creado = await cierresCcService.crearCierre(data);
      cargarCierres();
      return creado;
    } catch (err) {
      const msg = parseApiError(err, 'Error al crear el cierre.');
      setModalApiErrorMessage(msg);
      throw err;
    }
  };

  const handleOpenReabrir = (cierre: CierreCuentaCorrienteDto) => {
    setCierreParaReabrir(cierre);
    setReabrirModalOpen(true);
  };

  const handleSubmitReabrir = async (idCierre: number, data: ReabrirCierreDto) => {
    setModalApiErrorMessage(null);
    try {
      const result = await cierresCcService.reabrirCierre(idCierre, data);
      cargarCierres();
      if (cierreSeleccionadoHistorial?.idCierre === idCierre) {
        cargarHistorial(idCierre);
      }
      return result;
    } catch (err) {
      const msg = parseApiError(err, 'Error al reabrir el cierre.');
      setModalApiErrorMessage(msg);
      throw err;
    }
  };

  const handleChangePage = (_e: unknown, newPage: number) => setPage(newPage);
  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const displayData = cierres.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  if (!puedeVer) {
    return (
      <Box sx={{ p: 2 }}>
        <Alert severity="error">No tiene permiso para acceder a esta sección.</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Cierres de Cuenta Corriente</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 }}>
          <FormControl size="small" sx={{ minWidth: 220, flexGrow: 1 }} disabled={loadingDropdowns}>
            <InputLabel>Distribuidor</InputLabel>
            <Select
              value={filtroIdDistribuidor}
              label="Distribuidor"
              onChange={(e) => setFiltroIdDistribuidor(e.target.value as number | string)}
            >
              <MenuItem value=""><em>Seleccione</em></MenuItem>
              {distribuidores.map(d => <MenuItem key={d.idDistribuidor} value={d.idDistribuidor}>{d.nombre}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 200, flexGrow: 1 }} disabled={loadingDropdowns}>
            <InputLabel>Empresa</InputLabel>
            <Select
              value={filtroIdEmpresa}
              label="Empresa"
              onChange={(e) => setFiltroIdEmpresa(e.target.value as number | string)}
            >
              <MenuItem value=""><em>Seleccione</em></MenuItem>
              {empresas.map(e => <MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>)}
            </Select>
          </FormControl>
        </Box>
        {puedeCrear && (
          <Button
            variant="contained"
            startIcon={<AddIcon />}
            onClick={() => setNuevoModalOpen(true)}
            disabled={loadingDropdowns}
          >
            Nuevo Cierre
          </Button>
        )}
      </Paper>

      <Paper sx={{ mb: 2 }}>
        <Tabs value={tabIndex} onChange={(_e, v) => setTabIndex(v)}>
          <Tab label="Cierres" />
          <Tab
            label={cierreSeleccionadoHistorial
              ? `Historial #${cierreSeleccionadoHistorial.idCierre}`
              : 'Historial'}
            disabled={!cierreSeleccionadoHistorial}
            icon={<HistoryIcon fontSize="small" />}
            iconPosition="start"
          />
        </Tabs>
      </Paper>

      {error && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
      {pageApiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{pageApiErrorMessage}</Alert>}

      {tabIndex === 0 && (
        <>
          {loading && (
            <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}>
              <CircularProgress />
            </Box>
          )}
          {!loading && (!filtroIdDistribuidor || !filtroIdEmpresa) && (
            <Alert severity="info">Seleccioná un distribuidor y una empresa para ver los cierres.</Alert>
          )}
          {!loading && filtroIdDistribuidor && filtroIdEmpresa && (
            <TableContainer component={Paper}>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Fecha de Corte</TableCell>
                    <TableCell>Fecha de Cierre</TableCell>
                    <TableCell align="right">Saldo del Cierre</TableCell>
                    <TableCell align="center">Estado</TableCell>
                    <TableCell>Justificación</TableCell>
                    <TableCell>Usuario</TableCell>
                    <TableCell align="right">Acciones</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {displayData.length === 0 ? (
                    <TableRow><TableCell colSpan={7} align="center">No hay cierres registrados.</TableCell></TableRow>
                  ) : (
                    displayData.map((c) => (
                      <TableRow key={c.idCierre} hover>
                        <TableCell>{formatDate(c.fechaCorte)}</TableCell>
                        <TableCell>{formatDateTime(c.fechaCierre)}</TableCell>
                        <TableCell align="right">
                          {c.saldoCierre.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
                        </TableCell>
                        <TableCell align="center">
                          <Chip
                            label={c.estado === 'Activo' && c.esUltimoVigente ? 'Activo (último)' : c.estado}
                            color={c.estado === 'Activo' ? 'success' : 'default'}
                            size="small"
                          />
                        </TableCell>
                        <TableCell>
                          <Tooltip title={c.justificacion || ''}>
                            <Box sx={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                              {c.justificacion || '-'}
                            </Box>
                          </Tooltip>
                        </TableCell>
                        <TableCell>{c.nombreUsuarioCierre}</TableCell>
                        <TableCell align="right">
                          <Tooltip title="Ver historial">
                            <IconButton size="small" onClick={() => handleSelectCierreHistorial(c)}>
                              <HistoryIcon fontSize="small" />
                            </IconButton>
                          </Tooltip>
                          {puedeReabrir && c.estado === 'Activo' && c.esUltimoVigente && (
                            <Tooltip title="Reabrir cierre">
                              <IconButton
                                size="small"
                                color="warning"
                                onClick={() => handleOpenReabrir(c)}
                              >
                                <LockOpenIcon fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          )}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
              <TablePagination
                rowsPerPageOptions={[25, 50, 100]}
                component="div"
                count={cierres.length}
                rowsPerPage={rowsPerPage}
                page={page}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
                labelRowsPerPage="Filas por página:"
              />
            </TableContainer>
          )}
        </>
      )}

      {tabIndex === 1 && cierreSeleccionadoHistorial && (
        <>
          <Paper sx={{ p: 2, mb: 2 }}>
            <Typography variant="body2">
              Historial del cierre <strong>#{cierreSeleccionadoHistorial.idCierre}</strong>
              {' — '}{cierreSeleccionadoHistorial.nombreDistribuidor} / {cierreSeleccionadoHistorial.nombreEmpresa}
              {' — '}corte: {formatDate(cierreSeleccionadoHistorial.fechaCorte)}
            </Typography>
          </Paper>
          {loadingHistorial && (
            <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}>
              <CircularProgress />
            </Box>
          )}
          {!loadingHistorial && (
            <TableContainer component={Paper}>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Tipo Modificación</TableCell>
                    <TableCell>Fecha Modificación</TableCell>
                    <TableCell>Usuario</TableCell>
                    <TableCell align="right">Saldo</TableCell>
                    <TableCell align="center">Estado</TableCell>
                    <TableCell>Justificación</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {historial.length === 0 ? (
                    <TableRow><TableCell colSpan={6} align="center">No hay registros de auditoría.</TableCell></TableRow>
                  ) : (
                    historial.map((h) => (
                      <TableRow key={h.id_Historial}>
                        <TableCell>{h.tipoMod}</TableCell>
                        <TableCell>{formatDateTime(h.fechaMod)}</TableCell>
                        <TableCell>{h.nombreUsuarioModifico}</TableCell>
                        <TableCell align="right">
                          {h.saldoCierre.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
                        </TableCell>
                        <TableCell align="center">
                          <Chip label={h.estado} color={h.estado === 'Activo' ? 'success' : 'default'} size="small" />
                        </TableCell>
                        <TableCell>
                          <Tooltip title={h.justificacion_Anulacion || h.justificacion || ''}>
                            <Box sx={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                              {h.justificacion_Anulacion || h.justificacion || '-'}
                            </Box>
                          </Tooltip>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </>
      )}

      <NuevoCierreModal
        open={nuevoModalOpen}
        onClose={() => setNuevoModalOpen(false)}
        onSubmit={handleSubmitNuevoCierre}
        initialIdDistribuidor={filtroIdDistribuidor ? Number(filtroIdDistribuidor) : null}
        initialIdEmpresa={filtroIdEmpresa ? Number(filtroIdEmpresa) : null}
        errorMessage={modalApiErrorMessage}
        clearErrorMessage={clearModalApiErrorMessage}
      />

      <ReabrirCierreModal
        open={reabrirModalOpen}
        onClose={() => { setReabrirModalOpen(false); setCierreParaReabrir(null); }}
        onSubmit={handleSubmitReabrir}
        cierre={cierreParaReabrir}
        errorMessage={modalApiErrorMessage}
        clearErrorMessage={clearModalApiErrorMessage}
      />
    </Box>
  );
};

export default CierresCuentaCorrientePage;
