import { Icon } from "@iconify/react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { hoyISO } from "../../../utils/fecha";
import {
  aplicarLimiteOverride,
  limpiarLimiteOverride,
} from "../../../api/suscripciones.service";

const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
`;

const Dialog = styled.div`
  background: ${(p) => p.theme.bg2};
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: ${(p) => p.theme.boxshadow};
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid ${(p) => p.theme.borderColor};
  flex-shrink: 0;
`;

const HeaderIcon = styled.div`
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: ${(p) => p.theme.bg6};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(p) => p.theme.primary};
  font-size: 1.1rem;
  flex-shrink: 0;
`;

const HeaderText = styled.div`
  flex: 1;
  h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: ${(p) => p.theme.text};
  }
  p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: ${(p) => p.theme.textSecondary};
  }
`;

const CloseBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  color: ${(p) => p.theme.textSecondary};
  font-size: 1.1rem;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition:
    background 0.15s,
    color 0.15s;
  &:hover {
    background: ${(p) => p.theme.bgAlpha};
    color: ${(p) => p.theme.text};
  }
`;

const Body = styled.div`
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
`;

const InfoBanner = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: ${(p) => p.theme.bg6};
  border: 1px solid ${(p) => p.theme.primary}30;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: ${(p) => p.theme.textSecondary};
  line-height: 1.55;
  strong {
    color: ${(p) => p.theme.text};
  }
  svg {
    color: ${(p) => p.theme.primary};
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.95rem;
  }
`;

const SectionLabel = styled.p`
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: ${(p) => p.theme.textSecondary};
  text-transform: uppercase;
  letter-spacing: 0.07em;
`;

const FieldGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  @media (max-width: 460px) {
    grid-template-columns: 1fr;
  }
`;

const FormField = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  label {
    font-size: 0.78rem;
    color: ${(p) => p.theme.textSecondary};
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    svg {
      font-size: 0.85rem;
    }
  }
  input {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: ${(p) => p.theme.text};
    font-size: 0.875rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
    &:focus {
      border-color: ${(p) => p.theme.primary};
      box-shadow: 0 0 0 3px ${(p) => p.theme.primary}20;
    }
    &::placeholder {
      color: ${(p) => p.theme.textSecondary}60;
    }
  }
  small {
    font-size: 0.7rem;
    color: ${(p) => p.theme.textSecondary};
    opacity: 0.7;
  }
`;

const FullField = styled(FormField)`
  grid-column: 1 / -1;
`;

const ExistingOverrideBanner = styled.div`
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: ${(p) => p.theme.text};
  svg {
    color: #f59e0b;
    flex-shrink: 0;
  }
`;

const ClearOverrideBtn = styled.button`
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: all 0.15s;
  &:hover {
    background: rgba(239, 68, 68, 0.2);
  }
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
`;

const Footer = styled.div`
  padding: 1rem 1.5rem;
  border-top: 1px solid ${(p) => p.theme.borderColor};
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-shrink: 0;
  @media (max-width: 400px) {
    flex-direction: column-reverse;
    button {
      width: 100%;
      justify-content: center;
    }
  }
`;

const SecondaryBtn = styled.button`
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.borderColor};
  background: transparent;
  color: ${(p) => p.theme.textSecondary};
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
  &:hover {
    background: ${(p) => p.theme.bgAlpha};
    color: ${(p) => p.theme.text};
  }
`;

const PrimaryBtn = styled.button`
  padding: 0.55rem 1.4rem;
  border-radius: 8px;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.15s;
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  &:not(:disabled):hover {
    opacity: 0.88;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .spin {
    animation: spin 1s linear infinite;
  }
`;

const LIMIT_FIELDS = [
  {
    key: "max_documentos",
    label: "Docs. por mes",
    icon: "lucide:file-text",
    placeholder: "ej: 200",
  },
  {
    key: "max_user",
    label: "Usuarios",
    icon: "lucide:users",
    placeholder: "ej: 10",
  },
  {
    key: "max_producto",
    label: "Productos",
    icon: "lucide:package",
    placeholder: "ej: 2000",
  },
  {
    key: "max_clientes",
    label: "Clientes",
    icon: "lucide:user-check",
    placeholder: "ej: 1000",
  },
  {
    key: "max_empresas",
    label: "Empresas",
    icon: "lucide:building-2",
    placeholder: "ej: 5",
  },
  {
    key: "max_sucursales",
    label: "Sucursales",
    icon: "lucide:map-pin",
    placeholder: "ej: 5",
  },
];

export function LimiteOverrideDialog({ open, onClose, empresa }) {
  const qc = useQueryClient();
  const [limites, setLimites] = useState({});
  const [expira_at, setExpiraAt] = useState("");
  const [nota, setNota] = useState("");

  const hasExistingOverride = !!empresa?.suscripcion?.limite_override;

  const applyMutation = useMutation({
    mutationFn: () => {
      const limitesNumericos = {};
      Object.entries(limites).forEach(([k, v]) => {
        if (v && !isNaN(Number(v)) && Number(v) > 0) {
          limitesNumericos[k] = Number(v);
        }
      });
      return aplicarLimiteOverride(
        empresa.id,
        limitesNumericos,
        expira_at || null,
        nota || null,
      );
    },
    onSuccess: () => {
      toast.success(`Límites ampliados para ${empresa?.razon_social}`);
      qc.invalidateQueries({ queryKey: ["jerarquia"] });
      qc.invalidateQueries({ queryKey: ["plan-usage"] });
      onClose();
      setLimites({});
      setExpiraAt("");
      setNota("");
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message || "Error al aplicar override");
    },
  });

  const clearMutation = useMutation({
    mutationFn: () => limpiarLimiteOverride(empresa.id),
    onSuccess: () => {
      toast.success("Override eliminado — se restauraron los límites del plan");
      qc.invalidateQueries({ queryKey: ["jerarquia"] });
      qc.invalidateQueries({ queryKey: ["plan-usage"] });
      onClose();
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message || "Error al limpiar override");
    },
  });

  const handleLimiteChange = (key, value) => {
    setLimites((prev) => ({ ...prev, [key]: value }));
  };

  const hasAnyLimite = Object.values(limites).some(
    (v) => v && !isNaN(Number(v)) && Number(v) > 0,
  );

  if (!open) return null;

  return (
    <Overlay onClick={onClose}>
      <Dialog onClick={(e) => e.stopPropagation()}>
        <Header>
          <HeaderIcon>
            <Icon icon="lucide:sliders-horizontal" />
          </HeaderIcon>
          <HeaderText>
            <h3>Ampliar Límites Temporalmente</h3>
            <p>
              {empresa?.razon_social} · RUC {empresa?.ruc}
            </p>
          </HeaderText>
          <CloseBtn onClick={onClose}>
            <Icon icon="lucide:x" />
          </CloseBtn>
        </Header>

        <Body>
          <InfoBanner>
            <Icon icon="lucide:info" />
            <span>
              Los valores ingresados{" "}
              <strong>sobreescriben temporalmente</strong> los límites del plan.
              Dejá vacío los campos que no querés modificar. Al vencer el
              override, se restauran automáticamente los límites del plan.
            </span>
          </InfoBanner>

          {hasExistingOverride && (
            <ExistingOverrideBanner>
              <Icon icon="lucide:alert-triangle" />
              <span>
                Este cliente ya tiene un override activo. Podés sobreescribirlo
                o eliminarlo.
              </span>
              <ClearOverrideBtn
                onClick={() => clearMutation.mutate()}
                disabled={clearMutation.isPending}
              >
                {clearMutation.isPending ? (
                  <Icon
                    icon="lucide:loader-2"
                    className="spin"
                    style={{ animation: "spin 1s linear infinite" }}
                  />
                ) : (
                  <Icon icon="lucide:trash-2" />
                )}
                Eliminar override
              </ClearOverrideBtn>
            </ExistingOverrideBanner>
          )}

          <div>
            <SectionLabel>Nuevos límites máximos</SectionLabel>
            <FieldGrid>
              {LIMIT_FIELDS.map((field) => (
                <FormField key={field.key}>
                  <label>
                    <Icon icon={field.icon} style={{ fontSize: "0.85rem" }} />
                    {field.label}
                  </label>
                  <input
                    type="number"
                    min="1"
                    placeholder={field.placeholder}
                    value={limites[field.key] || ""}
                    onChange={(e) =>
                      handleLimiteChange(field.key, e.target.value)
                    }
                  />
                </FormField>
              ))}

              <FormField>
                <label>
                  <Icon
                    icon="lucide:calendar"
                    style={{ fontSize: "0.85rem" }}
                  />
                  Vence el (opcional)
                </label>
                <input
                  type="date"
                  value={expira_at}
                  onChange={(e) => setExpiraAt(e.target.value)}
                  min={hoyISO()}
                />
                <small>Sin fecha = permanente hasta cambio de plan</small>
              </FormField>

              <FullField>
                <label>
                  <Icon
                    icon="lucide:message-square"
                    style={{ fontSize: "0.85rem" }}
                  />
                  Nota interna
                </label>
                <input
                  type="text"
                  placeholder="Ej: Ampliar por campaña fin de mes — cobro adicional acordado"
                  value={nota}
                  onChange={(e) => setNota(e.target.value)}
                  maxLength={120}
                />
              </FullField>
            </FieldGrid>
          </div>
        </Body>

        <Footer>
          <SecondaryBtn onClick={onClose}>Cancelar</SecondaryBtn>
          <PrimaryBtn
            disabled={!hasAnyLimite || applyMutation.isPending}
            onClick={() => applyMutation.mutate()}
          >
            {applyMutation.isPending ? (
              <>
                <Icon icon="lucide:loader-2" className="spin" />
                Aplicando...
              </>
            ) : (
              <>
                <Icon icon="lucide:check" />
                Aplicar override
              </>
            )}
          </PrimaryBtn>
        </Footer>
      </Dialog>
    </Overlay>
  );
}