import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import styled, { keyframes } from "styled-components";
import { getAlertas, marcarAlertaLeida, resolverAlerta } from "../../../api/ai-dashboard.service";

const fadeIn = keyframes`from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}`;

const Wrap = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Poppins", sans-serif;
`;

const Card = styled.div`
  background: ${({ theme }) => theme.bg2};
  border-radius: 12px;
  border-left: 4px solid ${(p) =>
    p.$criticidad === "alta" ? "#dc2626" : p.$criticidad === "media" ? "#f59e0b" : "#22c55e"};
  padding: 16px 18px;
  box-shadow: ${({ theme }) => theme.boxshadow};
  animation: ${fadeIn} 0.3s ease;
  transition: opacity 0.3s;
  opacity: ${(p) => (p.$resuelta ? 0.5 : 1)};
`;

const Top = styled.div`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
`;

const CriticidadBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  background: ${(p) =>
    p.$c === "alta" ? "#fef2f2" : p.$c === "media" ? "#fffbeb" : "#f0fdf4"};
  color: ${(p) =>
    p.$c === "alta" ? "#dc2626" : p.$c === "media" ? "#d97706" : "#16a34a"};
`;

const Titulo = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: ${({ theme }) => theme.text};
  margin-bottom: 4px;
`;

const Desc = styled.div`
  font-size: 13px;
  color: ${({ theme }) => theme.textSecondary};
  line-height: 1.5;
`;

const Accion = styled.div`
  margin-top: 10px;
  padding: 8px 12px;
  background: ${({ theme }) => theme.bg3};
  border-radius: 8px;
  font-size: 12px;
  color: ${({ theme }) => theme.textSecondary};
  display: flex;
  gap: 6px;
  align-items: flex-start;
`;

const Actions = styled.div`
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
`;

const Btn = styled.button`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid ${({ theme }) => theme.bg4};
  background: ${({ theme }) => theme.bg2};
  color: ${(p) => p.$primary ? "#6366f1" : p.theme.textSecondary};
  border-color: ${(p) => p.$primary ? "#c7d2fe" : p.theme.bg4};
  cursor: pointer;
  transition: all 0.15s;
  font-family: "Poppins", sans-serif;
  &:hover { background: ${(p) => p.$primary ? "#eef2ff" : p.theme.bg3}; }
  &:disabled { opacity: 0.4; cursor: not-allowed; }
`;

const Vacio = styled.div`
  text-align: center;
  padding: 48px 24px;
  color: ${({ theme }) => theme.textSecondary};
  background: ${({ theme }) => theme.bg3};
  border-radius: 14px;
  border: 2px dashed ${({ theme }) => theme.bg4};
`;

const SkeletonItem = styled.div`
  height: 100px;
  background: ${({ theme }) => theme.bg3};
  border-radius: 12px;
  border-left: 4px solid ${({ theme }) => theme.bg4};
`;

const CRITICIDAD_ICON = {
  alta:  { icon: "mdi:alert-circle",   color: "#dc2626" },
  media: { icon: "mdi:alert",          color: "#d97706" },
  baja:  { icon: "mdi:information",    color: "#16a34a" },
};

export const AlertasPanel = () => {
  const qc = useQueryClient();

  const { data: alertas = [], isLoading } = useQuery({
    queryKey: ["ai-alertas"],
    queryFn: getAlertas,
    staleTime: 1000 * 60 * 2,
  });

  const { mutate: leer } = useMutation({
    mutationFn: marcarAlertaLeida,
    onSuccess: () => qc.invalidateQueries({ queryKey: ["ai-alertas"] }),
  });

  const { mutate: resolver } = useMutation({
    mutationFn: resolverAlerta,
    onSuccess: () => qc.invalidateQueries({ queryKey: ["ai-alertas"] }),
  });

  if (isLoading) return (
    <Wrap>
      {[1, 2, 3].map(i => (
        <SkeletonItem key={i} />
      ))}
    </Wrap>
  );

  const altas = alertas.filter((a) => a.criticidad === "alta");
  const otras = alertas.filter((a) => a.criticidad !== "alta");
  const ordenadas = [...altas, ...otras];

  if (ordenadas.length === 0) return (
    <Vacio>
      <Icon icon="mdi:shield-check" style={{ fontSize: 48, marginBottom: 10, color: "#22c55e" }} />
      <div style={{ fontWeight: 600, marginBottom: 4 }}>Sin alertas activas</div>
      <div style={{ fontSize: 13 }}>Todo parece estar en orden. El sistema monitorea constantemente.</div>
    </Vacio>
  );

  return (
    <Wrap>
      {altas.length > 0 && (
        <div style={{ fontSize: 11, fontWeight: 700, color: "#dc2626", textTransform: "uppercase", letterSpacing: 0.5, display: "flex", alignItems: "center", gap: 4 }}>
          <Icon icon="mdi:alert-circle" /> {altas.length} alerta{altas.length > 1 ? "s" : ""} crítica{altas.length > 1 ? "s" : ""}
        </div>
      )}

      {ordenadas.map((a) => {
        const ci = CRITICIDAD_ICON[a.criticidad] || CRITICIDAD_ICON.baja;
        return (
          <Card key={a.id} $criticidad={a.criticidad} $resuelta={a.resuelta}>
            <Top>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                  <Icon icon={ci.icon} style={{ color: ci.color, flexShrink: 0 }} />
                  <Titulo>{a.titulo}</Titulo>
                </div>
                <Desc>{a.descripcion}</Desc>
              </div>
              <CriticidadBadge $c={a.criticidad}>
                {a.criticidad.toUpperCase()}
              </CriticidadBadge>
            </Top>

            {a.accion_sugerida && (
              <Accion>
                <Icon icon="mdi:lightbulb-on" style={{ color: "#f59e0b", flexShrink: 0, marginTop: 1 }} />
                <span><strong>Acción sugerida:</strong> {a.accion_sugerida}</span>
              </Accion>
            )}

            <Actions>
              {!a.leida && (
                <Btn onClick={() => leer(a.id)}>
                  <Icon icon="mdi:eye" /> Marcar leída
                </Btn>
              )}
              {!a.resuelta && (
                <Btn $primary onClick={() => resolver(a.id)}>
                  <Icon icon="mdi:check-circle" /> Resolver
                </Btn>
              )}
              {a.resuelta && (
                <span style={{ fontSize: 12, color: "#94a3b8", display: "flex", alignItems: "center", gap: 4 }}>
                  <Icon icon="mdi:check-all" /> Resuelta
                </span>
              )}
            </Actions>
          </Card>
        );
      })}
    </Wrap>
  );
};