import { useEffect, useState } from "react";
import {
  Alert,
  Avatar,
  Box,
  Button,
  Chip,
  Container,
  FormControlLabel,
  IconButton,
  InputAdornment,
  Paper,
  Skeleton,
  Stack,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import { EmptyState, ScreenGuia } from "../../components/_standards";
import ModoCarteraBadge from "../../components/cartera-inteligente/ModoCarteraBadge";
import { fmtMoneda } from "../../components/_standards/enums/monedas";
import { fmtFechaCalendario } from "../../utils/fecha";
import { usePermission } from "../../hooks/usePermission";
import { getCarteraWorklist } from "../../api/cartera.service";
import GestionDialog from "../../components/cartera-inteligente/GestionDialog";
import HistorialGestionesDrawer from "../../components/cartera-inteligente/HistorialGestionesDrawer";
import ClienteCarteraDrawer from "../../components/cartera-inteligente/ClienteCarteraDrawer";
import { NuevoReciboMultiWizard } from "../../components/organismos/RecibosMulti/NuevoReciboMultiWizard";

const getInitials = (name) => {
  if (!name) return "?";
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
};

const getMoraStyle = (dias) => {
  if (dias > 90) return { color: "error", label: `${dias} d` };
  if (dias > 30) return { color: "warning", label: `${dias} d` };
  if (dias > 0) return { color: "default", label: `${dias} d` };
  return { color: "success", label: "Al día" };
};

export default function WorklistPage() {
  const qc = useQueryClient();
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const canVer = canCobranzas("COB_CART_VER");
  const canCobrar = canCobranzas("COB_REC_RECIBO_CREAR");
  const [cobroOpen, setCobroOpen] = useState(false);
  const [cobroClienteId, setCobroClienteId] = useState(null);

  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(50);
  const [search, setSearch] = useState("");
  const [minDiasMora, setMinDiasMora] = useState("");
  const [soloMisClientes, setSoloMisClientes] = useState(false);
  const [debounced, setDebounced] = useState({ search: "", minDiasMora: "" });
  const [gestionOpen, setGestionOpen] = useState(false);
  const [historialOpen, setHistorialOpen] = useState(false);
  const [clienteOpen, setClienteOpen] = useState(false);
  const [cuentaSeleccionada, setCuentaSeleccionada] = useState(null);
  const [clienteIdSeleccionado, setClienteIdSeleccionado] = useState(null);

  useEffect(() => {
    const t = setTimeout(() => {
      setDebounced({ search, minDiasMora });
      setPage(0);
    }, 400);
    return () => clearTimeout(t);
  }, [search, minDiasMora]);

  const { data, isLoading, isFetching, refetch } = useQuery({
    queryKey: ["cartera", "worklist", page, pageSize, debounced.search, debounced.minDiasMora, soloMisClientes],
    queryFn: () =>
      getCarteraWorklist({
        page: page + 1,
        page_size: pageSize,
        search: debounced.search || undefined,
        min_dias_mora: debounced.minDiasMora === "" ? undefined : Number(debounced.minDiasMora),
        solo_mis_clientes: soloMisClientes ? true : undefined,
      }),
    enabled: canVer,
    keepPreviousData: true,
  });

  if (!canVer) {
    return (
      <Container maxWidth="xl" sx={{ py: 3 }}>
        <Typography variant="body2" color="text.secondary">
          No tenés permisos para ver esta sección.
        </Typography>
      </Container>
    );
  }

  const items = data?.items ?? [];

  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      {/* Breadcrumb + back */}
      <Stack direction="row" alignItems="center" spacing={1} mb={2}>
        <Button
          component={Link}
          to="/cartera-inteligente"
          startIcon={<Icon icon="lucide:arrow-left" width={16} />}
          size="small"
          variant="text"
          sx={{ minWidth: 0 }}
        >
          Cartera Inteligente
        </Button>
        <Icon icon="lucide:chevron-right" width={14} />
        <Typography variant="body2" color="text.secondary">
          Worklist
        </Typography>
      </Stack>

      {/* Header card */}
      <Paper
        elevation={0}
        sx={{
          p: 2.5,
          mb: 2,
          borderRadius: 2,
          border: 1,
          borderColor: "divider",
          background: (theme) =>
            theme.palette.mode === "dark"
              ? "linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(99,102,241,0.02) 100%)"
              : "linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(255,255,255,1) 100%)",
        }}
      >
        <Stack direction={{ xs: "column", sm: "row" }} alignItems={{ sm: "center" }} spacing={2}>
          <Avatar
            variant="rounded"
            sx={{
              width: 48,
              height: 48,
              bgcolor: "primary.main",
              boxShadow: 2,
            }}
          >
            <Icon icon="lucide:list-checks" width={26} />
          </Avatar>
          <Box sx={{ flex: 1 }}>
            <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
              <Typography variant="h5" fontWeight={700}>
                Worklist
              </Typography>
              {data && (
                <Chip
                  size="small"
                  label={`${items.length} ${items.length === 1 ? "cuenta" : "cuentas"}`}
                  color="primary"
                  variant="outlined"
                  sx={{ fontWeight: 600 }}
                />
              )}
              {data && (
                <Chip
                  size="small"
                  icon={<Icon icon="lucide:database" width={12} />}
                  label={data.fuente}
                  variant="outlined"
                />
              )}
              {data && <ModoCarteraBadge modo={data.modo} />}
            </Stack>
            <Typography variant="body2" color="text.secondary" mt={0.5}>
              Facturas con saldo pendiente ordenadas por vencimiento más antiguo.
            </Typography>
          </Box>
          <Tooltip title="Recargar">
            <IconButton
              onClick={() => refetch()}
              disabled={isFetching}
              sx={{
                bgcolor: "action.hover",
                "&:hover": { bgcolor: "action.selected" },
              }}
            >
              <Icon icon="lucide:refresh-ccw" width={18} />
            </IconButton>
          </Tooltip>
        </Stack>
      </Paper>

      {data?.modo === "co-pilot" && (
        <Alert severity="info" sx={{ mb: 2, borderRadius: 2 }} icon={<Icon icon="lucide:bot" width={20} />}>
          <strong>Modo Co-pilot:</strong> el módulo solo recomienda. La cobranza y las acciones operativas siguen ocurriendo en tu sistema original. Las gestiones que registres acá quedan como tracking + disparan webhooks.
        </Alert>
      )}

      <ScreenGuia titulo="¿Cómo funciona el worklist?">
        <Typography variant="body2" component="div">
          Cada fila es una factura con saldo a cobrar. El orden por defecto prioriza
          el vencimiento más antiguo (mayor mora arriba). Usá los filtros para enfocarte
          en un cliente específico o un rango de días de mora. Click en el cliente abre
          el drawer con recomendaciones IA, informe ejecutivo y todas sus cuentas.
        </Typography>
      </ScreenGuia>

      {/* Toolbar de filtros */}
      <Paper
        elevation={0}
        sx={{ p: 2, mt: 2, borderRadius: 2, border: 1, borderColor: "divider" }}
      >
        <Stack direction={{ xs: "column", md: "row" }} spacing={1.5} alignItems={{ md: "center" }}>
          <TextField
            size="small"
            placeholder="Buscar cliente o número de documento…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="lucide:search" width={18} />
                </InputAdornment>
              ),
            }}
            sx={{ flex: 1, minWidth: 240 }}
          />
          <TextField
            size="small"
            label="Mora mínima (días)"
            type="number"
            value={minDiasMora}
            onChange={(e) => setMinDiasMora(e.target.value)}
            inputProps={{ min: 0 }}
            sx={{ width: { xs: "100%", md: 170 } }}
            InputLabelProps={{ shrink: true }}
          />
          <FormControlLabel
            control={
              <Switch
                size="small"
                checked={soloMisClientes}
                onChange={(e) => {
                  setSoloMisClientes(e.target.checked);
                  setPage(0);
                }}
              />
            }
            label={
              <Typography variant="caption" fontWeight={600}>
                Solo mis clientes
              </Typography>
            }
            sx={{ mr: 0 }}
          />
        </Stack>

        {data?.usuario_no_es_cobrador && soloMisClientes && (
          <Alert severity="warning" sx={{ mt: 1.5 }} icon={<Icon icon="lucide:user-x" width={20} />}>
            <strong>No estás asignado como cobrador en este sistema.</strong> El filtro «Solo mis clientes» no devuelve resultados. Pedile al admin que te vincule en Contactos → Vendedores y Cobradores.
          </Alert>
        )}
      </Paper>

      {/* Tabla */}
      <Paper
        elevation={0}
        sx={{ mt: 2, borderRadius: 2, border: 1, borderColor: "divider", overflow: "hidden" }}
      >
        {isLoading ? (
          <Box sx={{ p: 2 }}>
            <Stack spacing={1}>
              {[...Array(6)].map((_, i) => (
                <Skeleton key={i} variant="rounded" height={56} />
              ))}
            </Stack>
          </Box>
        ) : items.length === 0 ? (
          <Box sx={{ p: 4 }}>
            <EmptyState
              icon="lucide:inbox"
              title="No hay cuentas pendientes"
              description="No se encontraron facturas con saldo pendiente con los filtros actuales."
            />
          </Box>
        ) : (
          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow
                  sx={{
                    "& th": {
                      fontWeight: 700,
                      bgcolor: "action.hover",
                      borderBottom: 2,
                      borderColor: "divider",
                      textTransform: "uppercase",
                      fontSize: 11,
                      letterSpacing: 0.5,
                      color: "text.secondary",
                    },
                  }}
                >
                  <TableCell sx={{ minWidth: 240 }}>Cliente</TableCell>
                  <TableCell sx={{ minWidth: 140 }}>Documento</TableCell>
                  <TableCell align="right" sx={{ minWidth: 130 }}>Saldo</TableCell>
                  <TableCell align="right" sx={{ minWidth: 130 }}>Total</TableCell>
                  <TableCell sx={{ minWidth: 110 }}>Vencimiento</TableCell>
                  <TableCell align="center" sx={{ minWidth: 90 }}>Mora</TableCell>
                  <TableCell align="center" sx={{ minWidth: 180 }}>Acciones</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {items.map((row) => {
                  const mora = getMoraStyle(row.dias_mora);
                  const acentoColor =
                    row.dias_mora > 90
                      ? "error.main"
                      : row.dias_mora > 30
                        ? "warning.main"
                        : row.dias_mora > 0
                          ? "info.main"
                          : "success.main";
                  return (
                    <TableRow
                      key={row.id}
                      hover
                      sx={{
                        cursor: "pointer",
                        position: "relative",
                        "&:hover": { bgcolor: "action.hover" },
                        "& td": { borderBottom: 1, borderColor: "divider", py: 1.25 },
                        "&:last-child td": { borderBottom: 0 },
                      }}
                    >
                      <TableCell>
                        <Stack direction="row" alignItems="center" spacing={1.5}>
                          <Box
                            sx={{
                              width: 4,
                              height: 36,
                              borderRadius: 1,
                              bgcolor: acentoColor,
                              flexShrink: 0,
                            }}
                          />
                          <Avatar
                            sx={{
                              width: 36,
                              height: 36,
                              fontSize: 13,
                              fontWeight: 700,
                              bgcolor: "primary.main",
                              color: "primary.contrastText",
                            }}
                          >
                            {getInitials(row.cliente_nombre)}
                          </Avatar>
                          <Box sx={{ minWidth: 0 }}>
                            <Typography
                              variant="body2"
                              fontWeight={600}
                              sx={{
                                cursor: "pointer",
                                color: "primary.main",
                                "&:hover": { textDecoration: "underline" },
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                maxWidth: 280,
                              }}
                              onClick={() => {
                                setClienteIdSeleccionado(row.cliente_id);
                                setClienteOpen(true);
                              }}
                            >
                              {row.cliente_nombre}
                            </Typography>
                          </Box>
                        </Stack>
                      </TableCell>
                      <TableCell>
                        <Typography
                          variant="caption"
                          sx={{
                            fontFamily: "monospace",
                            bgcolor: "action.hover",
                            px: 1,
                            py: 0.5,
                            borderRadius: 0.75,
                            fontSize: 11,
                          }}
                        >
                          {row.documento_numero}
                        </Typography>
                      </TableCell>
                      <TableCell align="right">
                        <Typography variant="body2" fontWeight={700} color={acentoColor}>
                          {fmtMoneda(row.saldo_pendiente, row.moneda_codigo)}
                        </Typography>
                      </TableCell>
                      <TableCell align="right">
                        <Typography variant="caption" color="text.secondary">
                          {fmtMoneda(row.monto_total, row.moneda_codigo)}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Typography variant="caption">
                          {fmtFechaCalendario(row.fecha_vencimiento)}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        <Chip
                          size="small"
                          label={mora.label}
                          color={mora.color}
                          sx={{ fontWeight: 600, minWidth: 60 }}
                        />
                      </TableCell>
                      <TableCell align="center">
                        <Stack direction="row" spacing={0.25} justifyContent="center">
                          <Tooltip title="Nueva gestión" enterDelay={300}>
                            <IconButton
                              size="small"
                              color="primary"
                              onClick={() => {
                                setCuentaSeleccionada(row);
                                setGestionOpen(true);
                              }}
                              sx={{
                                "&:hover": { bgcolor: "primary.lighter", color: "primary.dark" },
                              }}
                            >
                              <Icon icon="lucide:phone-call" width={16} />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Ver historial" enterDelay={300}>
                            <IconButton
                              size="small"
                              onClick={() => {
                                setCuentaSeleccionada(row);
                                setHistorialOpen(true);
                              }}
                            >
                              <Icon icon="lucide:history" width={16} />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Ver cliente" enterDelay={300}>
                            <IconButton
                              size="small"
                              onClick={() => {
                                setClienteIdSeleccionado(row.cliente_id);
                                setClienteOpen(true);
                              }}
                            >
                              <Icon icon="lucide:user-circle" width={16} />
                            </IconButton>
                          </Tooltip>
                          {data?.fuente === "erp-novasis" && data?.modo !== "co-pilot" && canCobrar && (
                            <Tooltip title="Registrar cobro" enterDelay={300}>
                              <IconButton
                                size="small"
                                color="success"
                                onClick={() => {
                                  setCobroClienteId(row.cliente_id);
                                  setCobroOpen(true);
                                }}
                                sx={{
                                  "&:hover": { bgcolor: "success.lighter", color: "success.dark" },
                                }}
                              >
                                <Icon icon="lucide:dollar-sign" width={16} />
                              </IconButton>
                            </Tooltip>
                          )}
                        </Stack>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
            <TablePagination
              component="div"
              count={-1}
              page={page}
              onPageChange={(_e, p) => setPage(p)}
              rowsPerPage={pageSize}
              onRowsPerPageChange={(e) => {
                setPageSize(parseInt(e.target.value, 10));
                setPage(0);
              }}
              rowsPerPageOptions={[25, 50, 100]}
              labelRowsPerPage="Por página"
              sx={{ borderTop: 1, borderColor: "divider" }}
            />
          </TableContainer>
        )}
      </Paper>

      <GestionDialog
        open={gestionOpen}
        onClose={() => setGestionOpen(false)}
        cuenta={cuentaSeleccionada}
      />
      <HistorialGestionesDrawer
        open={historialOpen}
        onClose={() => setHistorialOpen(false)}
        cuenta={cuentaSeleccionada}
      />
      <ClienteCarteraDrawer
        open={clienteOpen}
        onClose={() => setClienteOpen(false)}
        clienteId={clienteIdSeleccionado}
      />
      <NuevoReciboMultiWizard
        open={cobroOpen}
        initialClienteId={cobroClienteId}
        onClose={(creado) => {
          setCobroOpen(false);
          setCobroClienteId(null);
          if (creado) {
            qc.invalidateQueries({ queryKey: ["cartera", "worklist"] });
            qc.invalidateQueries({ queryKey: ["cartera", "mi-dia"] });
            qc.invalidateQueries({ queryKey: ["cartera", "cliente"] });
          }
        }}
      />
    </Container>
  );
}