import { Icon } from "@iconify/react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { usePermission } from "../hooks/usePermission";
import { useAuthStore } from "../store/AuthStore";
import { useMisSubmodulosActivosQuery } from "../hooks/useSubmodulo";

/**
 * Configuración de categorías de reportes.
 * Para agregar un nuevo reporte, solo agregá un item al array correspondiente.
 * - to: ruta relativa dentro de /reportes/
 * - label: nombre visible del link
 * - disponible: si es false muestra como "Próximamente"
 */
const REPORT_CATEGORIES = [
  {
    id: "ventas",
    title: "Ventas",
    subtitle: "Analizá el rendimiento de tu empresa",
    icon: "lucide:trending-up",
    modulo: "REPORTES",
    requiereModulo: "VENTAS",
    links: [
      { label: "Resumen de Ventas", to: "/reportes/ventas", disponible: true },
      {
        label: "Transacciones",
        to: "/reportes/ventas/transacciones",
        disponible: false,
      },
      {
        label: "Productos y Servicios",
        to: "/reportes/ventas/productos",
        disponible: true,
        requiereModulo: "VENTAS",
      },
      {
        label: "Rentabilidad",
        to: "/reportes/rentabilidad",
        disponible: true,
        requiereModulo: "VENTAS",
      },
      {
        label: "Análisis de Clientes",
        to: "/reportes/ventas/clientes",
        disponible: true,
        requiereModulo: "VENTAS",
      },
      {
        label: "Categorías",
        to: "/reportes/ventas/categorias",
        disponible: false,
      },
    ],
  },
  {
    id: "admin",
    title: "Administrativos y Financieros",
    subtitle: "Administrá cada aspecto de tu empresa",
    icon: "lucide:building-2",
    modulo: "REPORTES",
    requiereModulo: "VENTAS",
    links: [
      {
        label: "Cuentas por Cobrar",
        to: "/cuentas-cobrar",
        disponible: true,
        requiereModulo: "COBRANZAS",
      },
      {
        label: "Cuentas por Pagar",
        to: "/cuentas-pagar",
        disponible: true,
        requiereAlgunoDeModulos: ["COMPRAS", "TESORERIA"],
      },
      {
        label: "Resumen de Compras",
        to: "/reportes/compras",
        disponible: true,
        requiereModulo: "COMPRAS",
      },
      {
        label: "Clasificación de terceros",
        to: "/reportes/compras/clasificacion-terceros",
        disponible: true,
        requiereModulo: "CONTABILIDAD",
      },
      {
        label: "Resumen Anual",
        to: "/reportes/financiero/resumen-anual",
        disponible: false,
      },
      {
        label: "Posición de Caja",
        to: "/reportes/financiero/posicion-caja",
        disponible: true,
        requiereModulo: "TESORERIA",
      },
      {
        label: "Flujo de Caja",
        to: "/reportes/financiero/flujo-caja",
        disponible: true,
        requiereModulo: "TESORERIA",
      },
      {
        label: "Movimientos de Caja",
        to: "/reportes/movimientos-caja",
        disponible: true,
      },
      {
        label: "Facturas Recurrentes",
        to: "/reportes/financiero/facturas-recurrentes",
        disponible: false,
      },
    ],
  },
  {
    id: "inventario",
    title: "Inventario",
    subtitle: "Conocé tu inventario con información detallada",
    icon: "lucide:package",
    modulo: "REPORTES",
    requiereModulo: "INVENTARIO",
    links: [
      {
        label: "Movimientos de Stock",
        to: "/reportes/inventario/movimientos",
        disponible: true,
        requiereSubmodulo: "INV_MOVIMIENTOS",
      },
      {
        label: "Niveles de Stock",
        to: "/reportes/inventario/stock",
        disponible: true,
        requiereSubmodulo: "INV_STOCK",
      },
      {
        label: "Lotes de Productos",
        to: "/reportes/inventario/lotes",
        disponible: true,
        requiereSubmodulo: "INV_LOTES",
      },
      {
        label: "Reporte por Proveedor",
        to: "/reportes/inventario/vencidos-proveedor",
        disponible: true,
        requiereSubmodulo: "INV_RPR",
      },
      { label: "Conteo", to: "/reportes/inventario/conteo", disponible: false },
      {
        label: "Productos con Stock Bajo",
        to: "/reportes/inventario/stock-bajo",
        disponible: false,
      },
    ],
  },
  {
    id: "traslados",
    title: "Logística / Traslados",
    subtitle: "Controlá los traslados de mercadería (notas de remisión)",
    icon: "lucide:truck",
    modulo: "REPORTES",
    requiereModulo: "VENTAS",
    links: [
      {
        label: "Remisiones (Traslados)",
        to: "/reportes/traslados/remisiones",
        disponible: true,
        requiereModulo: "VENTAS",
      },
      {
        label: "Remisiones pendientes de facturar",
        to: "/reportes/traslados/pendientes",
        disponible: true,
        requiereModulo: "VENTAS",
      },
    ],
  },
  {
    id: "fiscal",
    title: "Fiscal e Impuestos",
    subtitle: "Reportes fiscales para la declaración de impuestos",
    icon: "lucide:landmark",
    modulo: "REPORTES",
    requiereModulo: "VENTAS",
    links: [
      {
        label: "Libro IVA Ventas",
        to: "/reportes/fiscal/libro-iva-ventas",
        disponible: true,
        requiereModulo: "VENTAS",
      },
      {
        label: "Libro IVA Compras",
        to: "/reportes/fiscal/libro-iva-compras",
        disponible: true,
        requiereModulo: "COMPRAS",
      },
      {
        label: "Liquidación de IVA",
        to: "/reportes/fiscal/liquidacion-iva",
        disponible: true,
      },
    ],
  },
  {
    id: "contabilidad",
    title: "Contabilidad Financiera",
    subtitle: "Libros contables, balances y estado de resultados",
    icon: "lucide:landmark",
    modulo: "CONTABILIDAD",
    links: [
      {
        label: "Libro Diario",
        to: "/contabilidad?tab=reportes",
        disponible: true,
      },
      {
        label: "Libro Mayor",
        to: "/contabilidad?tab=reportes",
        disponible: true,
      },
      {
        label: "Balance de Comprobación",
        to: "/contabilidad?tab=reportes",
        disponible: true,
      },
      {
        label: "Estado de Resultados",
        to: "/contabilidad?tab=reportes",
        disponible: true,
      },
      {
        label: "Balance General",
        to: "/contabilidad?tab=reportes",
        disponible: true,
      },
    ],
  },
  {
    id: "cobranzas",
    title: "Cobranzas",
    subtitle: "Rendimiento del equipo de cobros y morosidad",
    icon: "lucide:landmark",
    modulo: "COBRANZAS",
    links: [
      {
        label: "Reporte por Cobrador",
        to: "/reportes/cobranzas/cobrador",
        disponible: true,
      },
      {
        label: "Cierre de Cobros",
        to: "/reportes/cobranzas/cierre-cobros",
        disponible: true,
      },
      {
        label: "Dashboard de Morosidad",
        to: "/reportes/cobranzas/morosidad",
        disponible: true,
        requiereSubmodulo: "ADM_INTERES_MORA",
      },
      {
        label: "Reporte de Rendiciones",
        to: "/reportes/cobranzas/rendiciones",
        disponible: true,
        requiereSubmodulo: "COB_RENDICIONES",
      },
      {
        label: "Intereses Cobrados",
        to: "/reportes/cobranzas/intereses",
        disponible: true,
      },
      {
        label: "Libro de Retenciones",
        to: "/reportes/cobranzas/libro-retenciones",
        disponible: true,
      },
      {
        label: "Cumplimiento de Promesas",
        to: "/reportes/cobranzas/promesas",
        disponible: true,
        requiereSubmodulo: "COB_PROMESAS",
      },
      {
        label: "Productividad de Cobradores",
        to: "/reportes/cobranzas/productividad",
        disponible: true,
        requiereSubmodulo: "COB_WORKFLOW",
      },
      {
        label: "Morosidad por Zona",
        to: "/reportes/cobranzas/morosidad-zona",
        disponible: false,
      },
    ],
  },
  {
    id: "auditoria",
    title: "Auditoría y Seguridad",
    subtitle: "Controlá y supervisá todas las acciones de tu empresa",
    icon: "lucide:shield-check",
    modulo: "AUDITORIA",
    links: [
      {
        label: "Logs de Auditoría",
        to: "/reportes/auditoria",
        disponible: true,
      },
      {
        label: "Historial por Entidad",
        to: "/reportes/auditoria/entidad",
        disponible: false,
      },
    ],
  },
];

export function Reportes() {
  const navigate = useNavigate();
  const { hasPermission, hasModule } = useAuthStore();
  const { can: canReportes } = usePermission("REPORTES");
  const canReadReportes = hasPermission("REPORTES");
  const canReadAuditoria = canReportes("REP_AUD_REPORTE_VER");
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const canReadCobranzasCxC = canCobranzas("COB_CC_CUENTA_COBRAR_VER");
  const canReadReporteCobrador = canCobranzas("COB_REP_REPORTE_VER");
  const { can: canContabilidad } = usePermission("CONTABILIDAD");
  const { data: submodulosActivos } = useMisSubmodulosActivosQuery();
  const tieneSubmodulo = (codigo) =>
    !codigo || (submodulosActivos ?? []).some((s) => s.codigo === codigo);

  const canShowCategory = (category) => {
    if (category.requiereModulo && !hasModule(category.requiereModulo)) return false;
    if (!category.modulo) return true;
    if (category.modulo === "REPORTES") return canReadReportes;
    if (category.modulo === "AUDITORIA") return canReadAuditoria;
    if (category.modulo === "COBRANZAS") return canReadReporteCobrador;
    if (category.modulo === "CONTABILIDAD") return canContabilidad("CONT_REP_REPORTE_VER");
    return false;
  };

  const visibleCategories = REPORT_CATEGORIES.filter(canShowCategory);

  if (!canReadReportes && !canReadAuditoria) {
    return <AccesoRestringido modulo="REPORTES" />;
  }

  return (
    <Container>
      <Header>
        <HeaderContent>
          <TitleSection>
            <MainTitle>
              <Icon icon="lucide:bar-chart-2" />
              Reportes
            </MainTitle>
            <Subtitle>Centro de reportes y análisis de tu empresa</Subtitle>
          </TitleSection>
        </HeaderContent>
      </Header>

      <Content>
        <Grid>
          {visibleCategories.map((cat) => (
            <Card key={cat.id}>
              <CardHeader>
                <CardIcon>
                  <Icon icon={cat.icon} />
                </CardIcon>
                <CardTitleGroup>
                  <CardTitle>{cat.title}</CardTitle>
                  <CardSubtitle>{cat.subtitle}</CardSubtitle>
                </CardTitleGroup>
              </CardHeader>
              <CardLinks>
                {cat.links
                  .filter((link) => {
                    if (Array.isArray(link.requiereAlgunoDeModulos)) {
                      return link.requiereAlgunoDeModulos.some((mod) => hasModule(mod));
                    }
                    if (link.requiereModulo && !hasModule(link.requiereModulo)) return false;
                    if (link.requiereSubmodulo && !tieneSubmodulo(link.requiereSubmodulo)) return false;
                    return true;
                  })
                  .map((link) => (
                    <ReportLink key={link.to} $disponible={link.disponible} onClick={() => link.disponible && navigate(link.to)} title={link.disponible ? `Ver ${link.label}` : "Próximamente"}>
                      <span>{link.label}</span>
                      {!link.disponible && <Soon>Próximamente</Soon>}
                      {link.disponible && <Icon icon="lucide:chevron-right" />}
                    </ReportLink>
                  ))}
              </CardLinks>
            </Card>
          ))}
        </Grid>
      </Content>
    </Container>
  );
}

// ===== Styled Components =====
const Container = styled.div`
  background: ${({ theme }) => theme.bg || theme.body};
  min-height: 100vh;
`;

const Header = styled.div`
  background: ${({ theme }) => theme.bgcards || theme.bg2};
  border-bottom: 1px solid ${({ theme }) => theme.borderColor || theme.bg4};
  padding: 0.75rem 1.5rem;
  @media (max-width: 768px) {
    padding: 0.6rem 1rem;
  }
`;

const HeaderContent = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
`;

const TitleSection = styled.div`
  flex: 1;
`;

const MainTitle = styled.h1`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0 0 0.15rem 0;
  svg {
    color: #f88533;
    width: 1.4rem;
    height: 1.4rem;
  }
  @media (max-width: 768px) {
    font-size: 1.2rem;
    svg { width: 1.2rem; height: 1.2rem; }
  }
`;

const Subtitle = styled.p`
  font-size: 0.8rem;
  color: ${({ theme }) => theme.textSecondary || `${theme.text}99`};
  margin: 0;
`;

const Content = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  @media (max-width: 768px) {
    padding: 1rem;
  }
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
`;

const Card = styled.div`
  background: ${({ theme }) => theme.bgcards || theme.bg2};
  border: 1px solid ${({ theme }) => theme.borderColor || theme.bg4};
  border-radius: 12px;
  overflow: hidden;
  box-shadow: ${({ theme }) => theme.boxshadow};
  transition: box-shadow 0.2s, border-color 0.2s;
  &:hover {
    border-color: ${({ theme }) => theme.primary};
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
  }
`;

const CardHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid ${({ theme }) => theme.borderColor || theme.bg4};
  background: ${({ theme }) => theme.bg6 || `${theme.primary}08`};
`;

const CardIcon = styled.div`
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f8853320;
  flex-shrink: 0;
  svg {
    width: 1.2rem;
    height: 1.2rem;
    color: #f88533;
  }
`;

const CardTitleGroup = styled.div`
  display: flex;
  flex-direction: column;
`;

const CardTitle = styled.h3`
  font-size: 0.9rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0;
`;

const CardSubtitle = styled.span`
  font-size: 0.72rem;
  color: ${({ theme }) => theme.textSecondary || `${theme.text}80`};
  margin-top: 0.1rem;
`;

const CardLinks = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem 0.75rem;
`;

const ReportLink = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.6rem;
  border-radius: 7px;
  transition: background 0.15s;
  cursor: ${({ $disponible }) => ($disponible ? "pointer" : "default")};

  span {
    font-size: 0.84rem;
    font-weight: 500;
    color: ${({ $disponible, theme }) =>
      $disponible ? theme.primary : `${theme.text}35`};
    transition: color 0.15s;
  }

  svg {
    width: 0.85rem;
    height: 0.85rem;
    color: ${({ $disponible, theme }) =>
      $disponible ? `${theme.primary}90` : "transparent"};
    flex-shrink: 0;
    transition: transform 0.15s;
  }

  &:hover {
    background: ${({ $disponible, theme }) =>
      $disponible ? theme.bg6 || `${theme.primary}10` : "transparent"};
    svg {
      transform: ${({ $disponible }) => ($disponible ? "translateX(3px)" : "none")};
    }
  }
`;

const Soon = styled.span`
  && {
    font-size: 0.63rem;
    font-weight: 600;
    color: ${({ theme }) => theme.textSecondary || `${theme.text}60`};
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    background: ${({ theme }) => theme.bg4}80;
    letter-spacing: 0.02em;
  }
`;