import { Icon } from "@iconify/react/dist/iconify.js";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import styled, { keyframes } from "styled-components";
import { useEmpresa } from "../../../context/EmpresaContext";

const ONBOARDING_STEPS = [
  {
    id: "datos_basicos",
    label: "Datos Básicos",
    icon: "mdi:domain",
    route: "/configuracion",
  },
  {
    id: "logo",
    label: "Logo",
    icon: "mdi:image",
    route: "/configuracion",
  },
  {
    id: "sucursal",
    label: "Sucursal",
    icon: "mdi:store",
    route: "/configuracion",
  },
  {
    id: "punto_expedicion",
    label: "Punto de Expedición",
    icon: "mdi:point-of-sale",
    route: "/configuracion",
  },
  {
    id: "timbrado",
    label: "Timbrado",
    icon: "mdi:receipt-text",
    route: "/configuracion",
  },
  {
    id: "certificado",
    label: "Certificado Digital",
    icon: "mdi:certificate",
    route: "/configuracion",
  },
  {
    id: "actividades",
    label: "Actividades Económicas",
    icon: "mdi:briefcase",
    route: "/configuracion",
  },
];

export const OnboardingBanner = () => {
  const navigate = useNavigate();
  const { empresa } = useEmpresa();
  const [isMinimized, setIsMinimized] = useState(false);
  const [isDismissed, setIsDismissed] = useState(() => {
    return localStorage.getItem("onboarding_dismissed") === "true";
  });

  const getStepStatus = (stepId) => {
    if (!empresa) return false;

    switch (stepId) {
      case "datos_basicos":
        return !!(empresa?.razon_social && empresa?.ruc);
      case "logo":
        return !!empresa?.logo;
      case "sucursal":
        return empresa?.empresas_sucursales?.length > 0;
      case "punto_expedicion": {
        const puntosExp = empresa?.empresas_puntos_expedicion || [];
        return (
          puntosExp.length > 0 &&
          puntosExp.some((punto) => punto.numeraciones_documento?.length > 0)
        );
      }
      case "timbrado":
        return empresa?.empresas_timbrado?.length > 0;
      case "certificado":
        return empresa?.certificados?.length > 0;
      case "actividades":
        return empresa?.actividades_economicas?.length > 0;
      default:
        return false;
    }
  };

  const completedSteps = ONBOARDING_STEPS.filter((step) =>
    getStepStatus(step.id),
  ).length;
  const totalSteps = ONBOARDING_STEPS.length;
  const progress = (completedSteps / totalSteps) * 100;
  const isComplete = completedSteps === totalSteps;
  const pendingSteps = ONBOARDING_STEPS.filter(
    (step) => !getStepStatus(step.id),
  );

  const handleDismiss = () => {
    setIsDismissed(true);
    localStorage.setItem("onboarding_dismissed", "true");
  };

  const handleNavigate = (route) => {
    navigate(route);
  };

  // No mostrar si está completo o fue descartado
  if (isComplete || isDismissed) {
    return null;
  }

  if (isMinimized) {
    return (
      <MinimizedBanner onClick={() => setIsMinimized(false)}>
        <Icon icon="mdi:rocket-launch" />
        <span>
          Configuración: {completedSteps}/{totalSteps}
        </span>
        <ProgressMini $progress={progress} />
        <Icon icon="mdi:chevron-down" />
      </MinimizedBanner>
    );
  }

  return (
    <BannerContainer>
      <BannerHeader>
        <BannerTitle>
          <IconWrapper>
            <Icon icon="mdi:rocket-launch" />
          </IconWrapper>
          <TitleText>
            <h4>¡Completa la configuración de tu empresa!</h4>
            <p>
              {completedSteps} de {totalSteps} pasos completados
            </p>
          </TitleText>
        </BannerTitle>
        <BannerActions>
          <ActionButton onClick={() => setIsMinimized(true)} title="Minimizar">
            <Icon icon="mdi:chevron-up" />
          </ActionButton>
          <ActionButton onClick={handleDismiss} title="No mostrar más">
            <Icon icon="mdi:close" />
          </ActionButton>
        </BannerActions>
      </BannerHeader>

      <ProgressContainer>
        <ProgressBar $progress={progress} />
        <ProgressText>{Math.round(progress)}%</ProgressText>
      </ProgressContainer>

      <StepsContainer>
        {pendingSteps.slice(0, 4).map((step) => (
          <StepChip key={step.id} onClick={() => handleNavigate(step.route)}>
            <Icon icon={step.icon} />
            <span>{step.label}</span>
            <Icon icon="mdi:arrow-right" className="arrow" />
          </StepChip>
        ))}
        {pendingSteps.length > 4 && (
          <MoreChip onClick={() => handleNavigate("/configuracion")}>
            +{pendingSteps.length - 4} más
          </MoreChip>
        )}
      </StepsContainer>

      <BannerFooter>
        <FooterButton onClick={() => handleNavigate("/configuracion")}>
          <Icon icon="mdi:cog" />
          Ir a Configuración
        </FooterButton>
      </BannerFooter>
    </BannerContainer>
  );
};

// Animations
const slideIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const shimmer = keyframes`
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
`;

// Styled Components
const BannerContainer = styled.div`
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(59, 130, 246, 0.1) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 14px;
  animation: ${slideIn} 0.3s ease-out;
  flex-shrink: 0;
`;

const BannerHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
`;

const BannerTitle = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
`;

const IconWrapper = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
`;

const TitleText = styled.div`
  h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
  }
  p {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: ${({ theme }) => theme.textSecondary || "#9ca3af"};
  }
`;

const BannerActions = styled.div`
  display: flex;
  gap: 4px;
`;

const ActionButton = styled.button`
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: ${({ theme }) => theme.textSecondary || "#9ca3af"};
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s;

  &:hover {
    background: ${({ theme }) => theme.bg3 || "#374151"};
    color: ${({ theme }) => theme.text || "#fff"};
  }
`;

const ProgressContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
`;

const ProgressBar = styled.div`
  flex: 1;
  height: 6px;
  background: ${({ theme }) => theme.bg3 || "#374151"};
  border-radius: 3px;
  overflow: hidden;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: ${({ $progress }) => $progress}%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.5s ease;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: ${({ $progress }) => $progress}%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    background-size: 200% 100%;
    animation: ${shimmer} 2s infinite;
  }
`;

const ProgressText = styled.span`
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
  min-width: 35px;
`;

const StepsContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
`;

const StepChip = styled.button`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid ${({ theme }) => theme.color2 || "#374151"};
  border-radius: 8px;
  background: ${({ theme }) => theme.bg2 || "#1f2937"};
  color: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;

  .arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s;
  }

  &:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);

    .arrow {
      opacity: 1;
      transform: translateX(0);
    }
  }
`;

const MoreChip = styled.button`
  padding: 6px 10px;
  border: 1px dashed ${({ theme }) => theme.color2 || "#374151"};
  border-radius: 8px;
  background: transparent;
  color: ${({ theme }) => theme.textSecondary || "#9ca3af"};
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #10b981;
    color: #10b981;
  }
`;

const BannerFooter = styled.div`
  display: flex;
  justify-content: flex-end;
`;

const FooterButton = styled.button`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
`;

const MinimizedBanner = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(59, 130, 246, 0.1) 100%
  );
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.15) 0%,
      rgba(59, 130, 246, 0.15) 100%
    );
  }

  svg:first-child {
    color: #10b981;
  }
`;

const ProgressMini = styled.div`
  width: 60px;
  height: 4px;
  background: ${({ theme }) => theme.bg3 || "#374151"};
  border-radius: 2px;
  overflow: hidden;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: ${({ $progress }) => $progress}%;
    background: #10b981;
    border-radius: 2px;
  }
`;

export default OnboardingBanner;