import { Icon } from "@iconify/react";
import { useQuery } from "@tanstack/react-query";
import styled from "styled-components";
import { getMetricasRRHH } from "../../../api/ai-dashboard.service";
import { formatCurrency } from "../../../utils/Conversiones";

const fg = (v) => formatCurrency(v || 0, "PYG");

const Wrap = styled.section`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 14px;
  overflow: hidden;
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  color: ${({ theme }) => theme.text};
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
`;

const Body = styled.div`
  padding: 8px 18px 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  @media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 540px) { grid-template-columns: 1fr; }
`;

const Card = styled.div`
  background: ${({ theme }) => theme.bg3};
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
`;

const Label = styled.div`
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.7;
`;

const Value = styled.div`
  font-size: 18px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
`;

const Hint = styled.div`
  font-size: 11px;
  opacity: 0.65;
`;

const Trend = styled.span`
  font-size: 11px;
  color: ${({ $up, theme }) => ($up ? "#10b981" : theme.danger || "#ef4444")};
  font-weight: 600;
`;

const Empty = styled.div`
  padding: 12px 18px 18px;
  font-size: 13px;
  opacity: 0.65;
`;

export default function AcordeonRRHH({ periodo }) {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["ai-metricas-rrhh", periodo],
    queryFn: () => getMetricasRRHH(periodo),
    staleTime: 1000 * 60 * 5,
    retry: false,
  });

  // Backend retorna null cuando la empresa no tiene módulo o el usuario no tiene permiso.
  // En ese caso no renderizamos nada.
  if (isError) return null;
  if (!isLoading && !data) return null;

  return (
    <Wrap>
      <Header>
        <Icon icon="mdi:account-group" />
        RRHH / Nómina
      </Header>
      {isLoading ? (
        <Empty>Cargando KPIs de nómina...</Empty>
      ) : (
        <Body>
            <Card>
              <Label>Empleados activos</Label>
              <Value>{data.empleadosActivos}</Value>
              <Hint>Plantilla vigente</Hint>
            </Card>
            <Card>
              <Label>Nómina del mes</Label>
              <Value>{fg(data.nominaMes.netoAPagar)}</Value>
              <Hint>
                {data.nominaMes.empleados} empleados
                {data.variacionPct !== null && (
                  <>
                    {" · "}
                    <Trend $up={data.variacionPct >= 0}>
                      {data.variacionPct >= 0 ? "+" : ""}{data.variacionPct}% vs mes ant.
                    </Trend>
                  </>
                )}
              </Hint>
            </Card>
            <Card>
              <Label>IPS del mes</Label>
              <Value>{fg(data.ips.total)}</Value>
              <Hint>Obrero {fg(data.ips.obrero)} · Patronal {fg(data.ips.patronal)}</Hint>
            </Card>
            <Card>
              <Label>Proyección próximo mes</Label>
              <Value>{fg(data.proyeccionNomina)}</Value>
              <Hint>Promedio últimos 3 meses cerrados</Hint>
            </Card>
            <Card>
              <Label>Préstamos activos</Label>
              <Value>{data.prestamosActivos.cantidad}</Value>
              <Hint>Saldo pendiente {fg(data.prestamosActivos.saldoPendiente)}</Hint>
            </Card>
            <Card>
              <Label>Vacaciones pendientes</Label>
              <Value>{Number(data.vacaciones.diasPendientes).toLocaleString("es-PY")} días</Value>
              <Hint>Acumulado a tomar</Hint>
            </Card>
        </Body>
      )}
    </Wrap>
  );
}