import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Box,
  Chip,
  CircularProgress,
  Dialog,
  DialogContent,
  DialogTitle,
  IconButton,
  InputAdornment,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { getSolicitudesAprobadas } from "../../../api/solicitud-credito.service";
import { formatMoney } from "../../../utils/formatMoney";

export function SolicitudesCreditoPendientesDialog({ open, onClose, onSelectSolicitud, sucursalId, clienteId }) {
  const [solicitudes, setSolicitudes] = useState([]);
  const [loading, setLoading] = useState(false);
  const [busqueda, setBusqueda] = useState("");

  useEffect(() => {
    if (!open) return;
    setBusqueda("");
    let cancelled = false;
    setLoading(true);

    const params = {};
    if (sucursalId) params.sucursal_id = sucursalId;
    if (clienteId) params.cliente_id = clienteId;

    getSolicitudesAprobadas(params)
      .then((data) => {
        if (cancelled) return;
        const lista = Array.isArray(data) ? data : data?.dataFormat || data?.data || [];
        setSolicitudes(lista);
      })
      .catch(() => {
        if (!cancelled) {
          toast.error("Error cargando solicitudes de crédito");
          setSolicitudes([]);
        }
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => { cancelled = true; };
  }, [open, sucursalId, clienteId]);

  const solicitudesFiltradas = useMemo(() => {
    return solicitudes.filter((sol) => {
      if (!busqueda.trim()) return true;
      const term = busqueda.toLowerCase();
      const cliente = sol.cliente;
      const razonSocial = (cliente?.personas?.razon_social || cliente?.nombre_fantasia || "").toLowerCase();
      const ruc = (cliente?.personas?.ruc || "").toLowerCase();
      const numero = (sol.numero_solicitud || "").toLowerCase();
      return razonSocial.includes(term) || ruc.includes(term) || numero.includes(term);
    });
  }, [solicitudes, busqueda]);

  const handleSelect = (solicitud) => {
    onSelectSolicitud(solicitud);
    onClose();
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="mdi:file-document-check" width={24} />
          Solicitudes de Crédito Aprobadas
          {!loading && solicitudes.length > 0 && (
            <Chip label={solicitudesFiltradas.length} size="small" sx={{ ml: 0.5 }} />
          )}
        </Box>
        <IconButton onClick={onClose} size="small">
          <Icon icon="mdi:close" width={20} />
        </IconButton>
      </DialogTitle>
      <DialogContent>
        {loading ? (
          <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
            <CircularProgress />
          </Box>
        ) : solicitudes.length === 0 ? (
          <EmptyState>
            <Icon icon="mdi:file-document-check" width={48} />
            <Typography variant="h6" sx={{ mt: 2 }}>
              No hay solicitudes aprobadas
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {clienteId
                ? "Este cliente no tiene solicitudes de crédito aprobadas"
                : "Las solicitudes aprobadas aparecerán aquí para ser facturadas"}
            </Typography>
          </EmptyState>
        ) : (
          <>
            <FiltersBar>
              <TextField
                size="small"
                placeholder="Buscar por nro, cliente, RUC..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                sx={{ flex: 1, minWidth: 200 }}
                slotProps={{
                  input: {
                    startAdornment: (
                      <InputAdornment position="start">
                        <Icon icon="mdi:magnify" width={20} />
                      </InputAdornment>
                    ),
                    ...(busqueda && {
                      endAdornment: (
                        <InputAdornment position="end">
                          <IconButton size="small" onClick={() => setBusqueda("")}>
                            <Icon icon="mdi:close" width={16} />
                          </IconButton>
                        </InputAdornment>
                      ),
                    }),
                  },
                }}
              />
            </FiltersBar>

            {solicitudesFiltradas.length === 0 ? (
              <EmptyState>
                <Icon icon="mdi:filter-off" width={40} />
                <Typography variant="body1" sx={{ mt: 1 }}>
                  No se encontraron solicitudes con los filtros aplicados
                </Typography>
              </EmptyState>
            ) : (
              <SolicitudesList>
                {solicitudesFiltradas.map((sol) => {
                  const cliente = sol.cliente;
                  const razonSocial =
                    cliente?.personas?.razon_social ||
                    cliente?.nombre_fantasia ||
                    "Sin nombre";
                  const ruc = cliente?.personas?.ruc || "";
                  const vendedor = sol.vendedor;
                  const cantItems = sol._count?.detalle || sol.detalle?.length || 0;
                  const fechaSol = sol.fecha_solicitud
                    ? new Date(sol.fecha_solicitud).toLocaleDateString("es-PY", {
                        day: "2-digit",
                        month: "2-digit",
                        year: "2-digit",
                        hour: "2-digit",
                        minute: "2-digit",
                      })
                    : "";

                  return (
                    <SolicitudCard
                      key={sol.id}
                      onClick={() => handleSelect(sol)}
                    >
                      <CardHeader>
                        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                          <SolicitudNumero>{sol.numero_solicitud || "S/N"}</SolicitudNumero>
                          <Chip
                            label="Aprobada"
                            size="small"
                            color="success"
                            variant="outlined"
                          />
                          {sol.cant_cuotas_total && (
                            <Tooltip title="Cantidad de cuotas">
                              <Chip
                                icon={<Icon icon="mdi:calendar-clock" width={14} />}
                                label={`${sol.cant_cuotas_total} cuotas`}
                                size="small"
                                variant="outlined"
                              />
                            </Tooltip>
                          )}
                        </Box>
                        <Typography variant="caption" color="text.secondary">
                          {fechaSol}
                        </Typography>
                      </CardHeader>

                      <CardBody>
                        <ClienteInfo>
                          <Icon icon="mdi:account" width={16} />
                          <span className="nombre">{razonSocial}</span>
                          {ruc && <span className="ruc">RUC: {ruc}</span>}
                        </ClienteInfo>

                        <MetaRow>
                          {vendedor && (
                            <MetaItem>
                              <Icon icon="mdi:badge-account" width={14} />
                              {vendedor.nombre} {vendedor.apellido}
                            </MetaItem>
                          )}
                          <MetaItem>
                            <Icon icon="mdi:package-variant" width={14} />
                            {cantItems} {cantItems === 1 ? "producto" : "productos"}
                          </MetaItem>
                          {(() => {
                            const intervalo = sol.intervalo_dias;
                            const freq =
                              intervalo === 7 ? "Semanal" :
                              intervalo === 15 ? "Quincenal" :
                              intervalo === 30 ? "Mensual" :
                              intervalo ? `Cada ${intervalo}d` :
                              sol.condicion_pago?.descripcion || null;
                            if (!freq) return null;
                            return (
                              <MetaItem>
                                <Icon icon="mdi:credit-card-clock" width={14} />
                                {freq}
                              </MetaItem>
                            );
                          })()}
                          {sol.dia_fijo_pago_1 && (
                            <MetaItem>
                              <Icon icon="mdi:calendar-clock" width={14} />
                              {sol.dia_fijo_pago_2
                                ? `Días ${sol.dia_fijo_pago_1} y ${sol.dia_fijo_pago_2}`
                                : `Día ${sol.dia_fijo_pago_1}`}
                            </MetaItem>
                          )}
                          {sol.dia_cobro_semana && !sol.dia_fijo_pago_1 && (
                            <MetaItem>
                              <Icon icon="mdi:calendar-clock" width={14} />
                              {["", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"][sol.dia_cobro_semana]}
                            </MetaItem>
                          )}
                          {sol.dias_gracia_override != null && (
                            <MetaItem title={`Gracia acordada: ${sol.dias_gracia_override} días`}>
                              <Icon icon="mdi:clock-alert-outline" width={14} />
                              Gracia {sol.dias_gracia_override}d
                            </MetaItem>
                          )}
                          {sol.observaciones && (
                            <MetaItem title={sol.observaciones}>
                              <Icon icon="mdi:note-text" width={14} />
                              {sol.observaciones.substring(0, 40)}
                              {sol.observaciones.length > 40 ? "..." : ""}
                            </MetaItem>
                          )}
                        </MetaRow>
                      </CardBody>

                      <CardFooter>
                        <TotalLabel>Total</TotalLabel>
                        <TotalValue>
                          {formatMoney(sol.monto_total, sol.moneda || "PYG")}
                        </TotalValue>
                      </CardFooter>
                    </SolicitudCard>
                  );
                })}
              </SolicitudesList>
            )}
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}

const EmptyState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: ${({ theme }) => theme.textSecondary || "#999"};

  svg {
    opacity: 0.4;
  }
`;

const FiltersBar = styled.div`
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
`;

const SolicitudesList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
`;

const SolicitudCard = styled.div`
  border: 1px solid ${({ theme }) => theme.color2 || "#333"};
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  background: ${({ theme }) => theme.bg2 || "#1e1e1e"};

  &:hover {
    border-color: ${({ theme }) => theme.primary || "#f88533"};
    background: ${({ theme }) => theme.bg3 || "#2a2a2a"};
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
`;

const CardHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
`;

const SolicitudNumero = styled.span`
  font-weight: 700;
  font-size: 0.95rem;
  font-family: monospace;
`;

const CardBody = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
`;

const ClienteInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;

  .nombre {
    font-weight: 600;
  }

  .ruc {
    color: ${({ theme }) => theme.textSecondary || "#999"};
    font-size: 0.8rem;
  }
`;

const MetaRow = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
`;

const MetaItem = styled.span`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: ${({ theme }) => theme.textSecondary || "#999"};
`;

const CardFooter = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid ${({ theme }) => theme.color2 || "#333"};
`;

const TotalLabel = styled.span`
  font-size: 0.8rem;
  color: ${({ theme }) => theme.textSecondary || "#999"};
`;

const TotalValue = styled.span`
  font-size: 1.15rem;
  font-weight: 700;
  color: ${({ theme }) => theme.primary || "#f88533"};
`;