import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
    cambiarEstadoSuscripcion,
    crearSuscripcionSubsidiario,
    editarSuscripcion,
    suscripcionesQueries,
} from "../../../api/suscripciones.service";
import { UserAuth } from "../../../context/AuthContent";
import { SuscripcionModal } from "./SuscripcionModal";
import { GestionModulosDialog } from "./GestionModulosDialog";

export function GestionSuscripciones() {
  const { user } = UserAuth();
  const qc = useQueryClient();
  const eId = user?.empresa?.id;
  const [filtroEstado, setFiltroEstado] = useState("");
  const [filtroTipo, setFiltroTipo] = useState("");
  const [busqueda, setBusqueda] = useState("");
  const [modal, setModal] = useState({
    open: false,
    mode: "crear",
    sub: null,
    susc: null,
  });
  const [page, setPage] = useState(1);
  const [confirm, setConfirm] = useState({
    open: false,
    suscId: null,
    estado: null,
  });
  const [modulosDialog, setModulosDialog] = useState({ open: false, sub: null });

  const filtros = {
    ...(filtroEstado && { estado: filtroEstado }),
    ...(filtroTipo && { tipo: filtroTipo }),
    ...(busqueda && { busqueda }),
    page,
    limit: 20,
  };

  const {
    data: res,
    isLoading,
    error,
  } = useQuery({
    ...suscripcionesQueries.suscripcionesSubsidiarios(eId, filtros),
    enabled: !!eId,
  });
  const subs = res?.data?.subsidiarios || [];
  const resumen = res?.data?.resumen || {};
  const pagination = res?.data?.pagination || {};

  const { data: planesRes } = useQuery(
    suscripcionesQueries.planesDisponibles(),
  );
  const planes = planesRes?.data || [];

  const inv = () =>
    qc.invalidateQueries({ queryKey: ["suscripciones-subsidiarios"] });

  const crearM = useMutation({
    mutationFn: ({ sid, datos }) =>
      crearSuscripcionSubsidiario(eId, sid, datos),
    onSuccess: () => {
      toast.success("Suscripción creada exitosamente");
      inv();
      setModal((prev) => ({ ...prev, open: false }));
    },
    onError: (e) =>
      toast.error(e?.response?.data?.message || "Error al crear suscripción"),
  });
  const editarM = useMutation({
    mutationFn: ({ sid, datos }) => editarSuscripcion(eId, sid, datos),
    onSuccess: () => {
      toast.success("Suscripción actualizada exitosamente");
      inv();
      setModal((prev) => ({ ...prev, open: false }));
    },
    onError: (e) =>
      toast.error(e?.response?.data?.message || "Error al editar suscripción"),
  });
  const estadoM = useMutation({
    mutationFn: ({ sid, estado }) => cambiarEstadoSuscripcion(eId, sid, estado),
    onSuccess: (_, v) => {
      toast.success(`Suscripción ${v.estado.toLowerCase()}`);
      inv();
    },
    onError: (e) => toast.error(e?.response?.data?.message || "Error"),
  });

  const handleEstado = (suscId, estado) =>
    setConfirm({ open: true, suscId, estado });
  const confirmAction = () => {
    if (confirm.suscId && confirm.estado) {
      estadoM.mutate({ sid: confirm.suscId, estado: confirm.estado });
    }
    setConfirm({ open: false, suscId: null, estado: null });
  };
  const cancelConfirm = () =>
    setConfirm({ open: false, suscId: null, estado: null });

  if (isLoading)
    return (
      <Container>
        <LoadingState>
          <Icon icon="lucide:loader-2" className="animate-spin" />
          <span>Cargando...</span>
        </LoadingState>
      </Container>
    );
  if (error)
    return (
      <Container>
        <ErrorState>
          <Icon icon="lucide:alert-circle" />
          <span>Error al cargar</span>
        </ErrorState>
      </Container>
    );

  const formatFecha = (f) =>
    f ? new Date(f).toLocaleDateString("es-PY") : "-";
  const formatPrecio = (p) =>
    p ? Number(p).toLocaleString("es-PY") + " Gs." : "-";

  return (
    <Container>
      <HeaderSection>
        <TitleSection>
          <Title>Gestión de Suscripciones</Title>
          <Subtitle>
            Administra suscripciones de subsidiarios y resellers
          </Subtitle>
        </TitleSection>
      </HeaderSection>

      <ResumenCards>
        {[
          {
            key: "",
            label: "Total",
            val: resumen.total,
            icon: "lucide:building-2",
            color: "#3b82f6",
          },
          {
            key: "Activo",
            label: "Activas",
            val: resumen.con_suscripcion_activa,
            icon: "lucide:check-circle",
            color: "#22c55e",
          },
          {
            key: "sin_suscripcion",
            label: "Sin plan",
            val: resumen.sin_suscripcion,
            icon: "lucide:alert-triangle",
            color: "#f59e0b",
          },
          {
            key: "Pausado",
            label: "Pausadas",
            val: resumen.pausadas,
            icon: "lucide:pause-circle",
            color: "#8b5cf6",
          },
        ].map((c) => (
          <ResumenCard
            key={c.key}
            $active={filtroEstado === c.key}
            onClick={() => {
              setFiltroEstado(filtroEstado === c.key ? "" : c.key);
              setPage(1);
            }}
          >
            <ResumenIcon $color={c.color}>
              <Icon icon={c.icon} />
            </ResumenIcon>
            <ResumenInfo>
              <ResumenValor>{c.val || 0}</ResumenValor>
              <ResumenLabel>{c.label}</ResumenLabel>
            </ResumenInfo>
          </ResumenCard>
        ))}
      </ResumenCards>

      <FiltersSection>
        <SearchInput>
          <Icon icon="lucide:search" />
          <input
            type="text"
            placeholder="Buscar por nombre o RUC..."
            value={busqueda}
            onChange={(e) => {
              setBusqueda(e.target.value);
              setPage(1);
            }}
          />
          {busqueda && (
            <ClearBtn onClick={() => setBusqueda("")}>
              <Icon icon="lucide:x" />
            </ClearBtn>
          )}
        </SearchInput>
        <FilterSelect
          value={filtroTipo}
          onChange={(e) => {
            setFiltroTipo(e.target.value);
            setPage(1);
          }}
        >
          <option value="">Todos los tipos</option>
          <option value="subsidiario">Subsidiarios</option>
          <option value="reseller">Resellers</option>
        </FilterSelect>
      </FiltersSection>

      {subs.length === 0 ? (
        <EmptyState>
          <Icon icon="lucide:inbox" />
          <h3>Sin resultados</h3>
          <p>Ajustá los filtros o agregá subsidiarios</p>
        </EmptyState>
      ) : (
        <TableWrap>
          <Table>
            <thead>
              <tr>
                <Th>Empresa</Th>
                <Th>Tipo</Th>
                <Th>Plan</Th>
                <Th>Estado</Th>
                <Th>Vencimiento</Th>
                <Th>Precio</Th>
                <Th $center>Acciones</Th>
              </tr>
            </thead>
            <tbody>
              {subs.map((sub) => {
                const s = sub.suscripcion_activa;
                const venc = s?.fecha_fin && new Date(s.fecha_fin) < new Date();
                return (
                  <Tr key={sub.id} $warn={venc && s?.estado === "Activo"}>
                    <TdEmpresa>
                      <EmpNombre>{sub.razon_social}</EmpNombre>
                      <EmpRuc>{sub.ruc}</EmpRuc>
                    </TdEmpresa>
                    <Td>
                      <TypeBadge $type={sub.type}>
                        {sub.type === "reseller" ? "Reseller" : "Subsidiario"}
                      </TypeBadge>
                    </Td>
                    <Td data-label="Plan">
                      {s?.planes?.descripcion || <NoData>Sin plan</NoData>}
                    </Td>
                    <Td>
                      {s ? (
                        <EstadoBadge $e={s.estado}>
                          <Icon
                            icon={
                              s.estado === "Activo"
                                ? "lucide:check-circle"
                                : s.estado === "Pausado"
                                  ? "lucide:pause-circle"
                                  : "lucide:x-circle"
                            }
                          />
                          {s.estado}
                        </EstadoBadge>
                      ) : (
                        <EstadoBadge $e="none">
                          <Icon icon="lucide:minus-circle" />
                          Sin plan
                        </EstadoBadge>
                      )}
                    </Td>
                    <TdHideMobile>
                      {s?.fecha_fin ? (
                        <span style={{ color: venc ? "#ef4444" : "inherit" }}>
                          {formatFecha(s.fecha_fin)}
                          {venc && " (vencida)"}
                        </span>
                      ) : (
                        "-"
                      )}
                    </TdHideMobile>
                    <TdHideMobile>
                      {s ? formatPrecio(s.costo_mensual) : "-"}
                    </TdHideMobile>
                    <TdActions>
                      <Actions>
                        {!s ? (
                          <ActBtn
                            $v="primary"
                            onClick={() =>
                              setModal({
                                open: true,
                                mode: "crear",
                                sub,
                                susc: null,
                              })
                            }
                          >
                            <Icon icon="lucide:plus" /> Asignar
                          </ActBtn>
                        ) : (
                          <>
                            <ActBtn
                              onClick={() => {
                                setModal({
                                  open: true,
                                  mode: "editar",
                                  sub,
                                  susc: s,
                                });
                              }}
                              title="Editar"
                            >
                              <Icon icon="lucide:pencil" />
                            </ActBtn>
                            <ActBtn
                              $v="primary"
                              onClick={() =>
                                setModulosDialog({ open: true, sub })
                              }
                              title="Gestionar módulos y addons"
                            >
                              <Icon icon="mdi:puzzle-plus" />
                            </ActBtn>
                            {s.estado === "Activo" && (
                              <ActBtn
                                $v="warning"
                                onClick={() => handleEstado(s.id, "Pausado")}
                                title="Pausar"
                              >
                                <Icon icon="lucide:pause" />
                              </ActBtn>
                            )}
                            {s.estado === "Pausado" && (
                              <ActBtn
                                $v="success"
                                onClick={() => handleEstado(s.id, "Activo")}
                                title="Reactivar"
                              >
                                <Icon icon="lucide:play" />
                              </ActBtn>
                            )}
                            {s.estado !== "Cancelado" && (
                              <ActBtn
                                $v="danger"
                                onClick={() => handleEstado(s.id, "Cancelado")}
                                title="Cancelar"
                              >
                                <Icon icon="lucide:x-circle" />
                              </ActBtn>
                            )}
                          </>
                        )}
                      </Actions>
                    </TdActions>
                  </Tr>
                );
              })}
            </tbody>
          </Table>
        </TableWrap>
      )}

      {pagination.totalPages > 1 && (
        <PaginationWrap>
          <PaginationInfo>
            Página {pagination.page} de {pagination.totalPages} —{" "}
            {pagination.total} subsidiarios
          </PaginationInfo>
          <PaginationButtons>
            <PagBtn
              disabled={!pagination.hasPrev}
              onClick={() => setPage((p) => Math.max(1, p - 1))}
            >
              <Icon icon="lucide:chevron-left" /> Anterior
            </PagBtn>
            <PagBtn
              disabled={!pagination.hasNext}
              onClick={() => setPage((p) => p + 1)}
            >
              Siguiente <Icon icon="lucide:chevron-right" />
            </PagBtn>
          </PaginationButtons>
        </PaginationWrap>
      )}

      {confirm.open && (
        <ConfirmOverlay onClick={cancelConfirm}>
          <ConfirmBox onClick={(e) => e.stopPropagation()}>
            <ConfirmIcon $estado={confirm.estado}>
              <Icon
                icon={
                  confirm.estado === "Cancelado"
                    ? "lucide:alert-triangle"
                    : confirm.estado === "Pausado"
                      ? "lucide:pause-circle"
                      : "lucide:play-circle"
                }
              />
            </ConfirmIcon>
            <ConfirmTitle>
              {confirm.estado === "Cancelado"
                ? "Cancelar suscripción"
                : confirm.estado === "Pausado"
                  ? "Pausar suscripción"
                  : "Reactivar suscripción"}
            </ConfirmTitle>
            <ConfirmMsg>
              {confirm.estado === "Cancelado"
                ? "Esta acción cancelará la suscripción de forma permanente. El subsidiario perderá acceso a los módulos del plan."
                : confirm.estado === "Pausado"
                  ? "La suscripción será pausada temporalmente. El subsidiario no podrá usar los módulos hasta que se reactive."
                  : "La suscripción se reactivará y el subsidiario recuperará el acceso a los módulos del plan."}
            </ConfirmMsg>
            <ConfirmActions>
              <ConfirmCancelBtn onClick={cancelConfirm}>
                Cancelar
              </ConfirmCancelBtn>
              <ConfirmOkBtn
                $estado={confirm.estado}
                onClick={confirmAction}
                disabled={estadoM.isPending}
              >
                {estadoM.isPending ? (
                  <>
                    <Icon icon="lucide:loader-2" className="animate-spin" />{" "}
                    Procesando...
                  </>
                ) : confirm.estado === "Cancelado" ? (
                  "Sí, cancelar"
                ) : confirm.estado === "Pausado" ? (
                  "Sí, pausar"
                ) : (
                  "Sí, reactivar"
                )}
              </ConfirmOkBtn>
            </ConfirmActions>
          </ConfirmBox>
        </ConfirmOverlay>
      )}

      <GestionModulosDialog
        open={modulosDialog.open}
        empresaId={eId}
        subsidiario={modulosDialog.sub}
        onClose={() => setModulosDialog({ open: false, sub: null })}
      />

      {modal.open && (
        <SuscripcionModal
          mode={modal.mode}
          subsidiario={modal.sub}
          suscripcion={modal.susc}
          planes={planes}
          onClose={() => setModal((prev) => ({ ...prev, open: false }))}
          onCrear={(sid, datos) => crearM.mutate({ sid, datos })}
          onEditar={(sid, datos) => editarM.mutate({ sid, datos })}
          isLoading={crearM.isPending || editarM.isPending}
        />
      )}
    </Container>
  );
}

// ===== Styled Components =====
const Container = styled.div`
  padding: 0;
`;
const LoadingState = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: ${(p) => p.theme.textSecondary};
  svg {
    font-size: 24px;
  }
`;
const ErrorState = styled(LoadingState)`
  color: #ef4444;
`;
const HeaderSection = styled.div`
  margin-bottom: 20px;
`;
const TitleSection = styled.div``;
const Title = styled.h2`
  font-size: 1.25rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  margin: 0;
`;
const Subtitle = styled.p`
  font-size: 0.85rem;
  color: ${(p) => p.theme.textSecondary};
  margin: 4px 0 0;
`;
const ResumenCards = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  @media (max-width: 400px) {
    grid-template-columns: 1fr;
  }
`;
const ResumenCard = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid ${(p) => (p.$active ? p.theme.primary : p.theme.border)};
  background: ${(p) =>
    p.$active ? p.theme.primary + "15" : p.theme.background};
  cursor: pointer;
  transition: all 0.2s;
  min-width: 0;
  overflow: hidden;
  &:hover {
    border-color: ${(p) => p.theme.primary};
  }
  @media (max-width: 768px) {
    padding: 12px;
    gap: 10px;
  }
`;
const ResumenIcon = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: ${(p) => p.$color}20;
  color: ${(p) => p.$color};
  font-size: 20px;
`;
const ResumenInfo = styled.div``;
const ResumenValor = styled.div`
  font-size: 1.5rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  line-height: 1;
  @media (max-width: 768px) {
    font-size: 1.25rem;
  }
`;
const ResumenLabel = styled.div`
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
  margin-top: 2px;
`;
const FiltersSection = styled.div`
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  @media (max-width: 600px) {
    flex-direction: column;
  }
`;
const SearchInput = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.border};
  background: ${(p) => p.theme.background};
  input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    color: ${(p) => p.theme.text};
    outline: none;
    font-size: 0.875rem;
    &::placeholder {
      color: ${(p) => p.theme.textSecondary};
    }
  }
  svg {
    color: ${(p) => p.theme.textSecondary};
    font-size: 18px;
  }
`;
const ClearBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  color: ${(p) => p.theme.textSecondary};
  padding: 4px;
  &:hover {
    color: ${(p) => p.theme.text};
  }
`;
const FilterSelect = styled.select`
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.border};
  background: ${(p) => p.theme.background};
  color: ${(p) => p.theme.text};
  font-size: 0.875rem;
  min-width: 160px;
  outline: none;
`;
const EmptyState = styled.div`
  text-align: center;
  padding: 60px 20px;
  color: ${(p) => p.theme.textSecondary};
  svg {
    font-size: 48px;
    margin-bottom: 12px;
  }
  h3 {
    margin: 0 0 8px;
    color: ${(p) => p.theme.text};
  }
  p {
    margin: 0;
    font-size: 0.875rem;
  }
`;
const TableWrap = styled.div`
  border-radius: 12px;
  border: 1px solid ${(p) => p.theme.border};
  overflow: hidden;

  @media (max-width: 768px) {
    border: none;
    border-radius: 0;
  }
`;
const Table = styled.table`
  width: 100%;
  border-collapse: collapse;

  @media (max-width: 768px) {
    & thead {
      display: none;
    }
    & tbody {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }
`;
const Th = styled.th`
  text-align: ${(p) => (p.$center ? "center" : "left")};
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: ${(p) => p.theme.textSecondary};
  background: ${(p) => p.theme.background};
  border-bottom: 1px solid ${(p) => p.theme.border};
`;
const Tr = styled.tr`
  border-bottom: 1px solid ${(p) => p.theme.border};
  background: ${(p) => (p.$warn ? "#ef444410" : "transparent")};
  &:hover {
    background: ${(p) => p.theme.primary}08;
  }
  &:last-child {
    border-bottom: none;
  }

  @media (max-width: 768px) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid ${(p) => p.theme.border};
    border-radius: 10px;
    background: ${(p) => (p.$warn ? "#ef444410" : p.theme.background)};
  }
`;
const Td = styled.td`
  padding: 12px 16px;
  font-size: 0.875rem;
  color: ${(p) => p.theme.text};
  text-align: ${(p) => (p.$center ? "center" : "left")};
  vertical-align: middle;

  @media (max-width: 768px) {
    display: block;
    padding: 0;
    font-size: 0.82rem;

    &[data-label]:before {
      content: attr(data-label);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      color: ${(p) => p.theme.textSecondary};
      display: block;
      margin-bottom: 2px;
    }
  }
`;
const TdEmpresa = styled.td`
  padding: 12px 16px;
  font-size: 0.875rem;
  color: ${(p) => p.theme.text};
  vertical-align: middle;

  @media (max-width: 768px) {
    display: block;
    padding: 0;
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 4px;
  }
`;
const TdHideMobile = styled.td`
  padding: 12px 16px;
  font-size: 0.875rem;
  color: ${(p) => p.theme.text};
  vertical-align: middle;

  @media (max-width: 768px) {
    display: none;
  }
`;
const TdActions = styled.td`
  padding: 12px 16px;
  font-size: 0.875rem;
  color: ${(p) => p.theme.text};
  text-align: center;
  vertical-align: middle;

  @media (max-width: 768px) {
    display: block;
    padding: 0;
    width: 100%;
    flex-basis: 100%;
    margin-top: 6px;
  }
`;
const EmpNombre = styled.div`
  font-weight: 600;
`;
const EmpRuc = styled.div`
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
`;
const NoData = styled.span`
  color: ${(p) => p.theme.textSecondary};
  font-style: italic;
`;
const TypeBadge = styled.span`
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: ${(p) => (p.$type === "reseller" ? "#8b5cf620" : "#3b82f620")};
  color: ${(p) => (p.$type === "reseller" ? "#8b5cf6" : "#3b82f6")};
`;
const EstadoBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: ${(p) => {
    const m = {
      Activo: "#22c55e20",
      Pausado: "#f59e0b20",
      Cancelado: "#ef444420",
      none: "#6b728020",
    };
    return m[p.$e] || m.none;
  }};
  color: ${(p) => {
    const m = {
      Activo: "#22c55e",
      Pausado: "#f59e0b",
      Cancelado: "#ef4444",
      none: "#6b7280",
    };
    return m[p.$e] || m.none;
  }};
  svg {
    font-size: 14px;
  }
`;
const Actions = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    justify-content: flex-start;
  }
`;
const ActBtn = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  background: ${(p) => {
    const m = {
      primary: "#3b82f6",
      success: "#22c55e",
      warning: "#f59e0b",
      danger: "#ef4444",
    };
    return p.$v ? m[p.$v] + "18" : "transparent";
  }};
  color: ${(p) => {
    const m = {
      primary: "#3b82f6",
      success: "#22c55e",
      warning: "#f59e0b",
      danger: "#ef4444",
    };
    return p.$v ? m[p.$v] : p.theme.textSecondary;
  }};
  border-color: ${(p) => {
    const m = {
      primary: "#3b82f6",
      success: "#22c55e",
      warning: "#f59e0b",
      danger: "#ef4444",
    };
    return p.$v ? m[p.$v] + "40" : p.theme.border;
  }};
  &:hover {
    opacity: 0.8;
    transform: translateY(-1px);
  }
`;
const PaginationWrap = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-top: 12px;
  @media (max-width: 600px) {
    flex-direction: column;
    gap: 12px;
  }
`;
const PaginationInfo = styled.span`
  font-size: 0.8rem;
  color: ${(p) => p.theme.textSecondary};
`;
const PaginationButtons = styled.div`
  display: flex;
  gap: 8px;
`;
const PagBtn = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.border};
  background: ${(p) => p.theme.background};
  color: ${(p) => p.theme.text};
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  &:hover:not(:disabled) {
    border-color: ${(p) => p.theme.primary};
    color: ${(p) => p.theme.primary};
  }
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  svg {
    font-size: 16px;
  }
`;
const ConfirmOverlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;
const ConfirmBox = styled.div`
  background: ${(p) => p.theme.body};
  border: 1px solid ${(p) => p.theme.border};
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.2s ease;
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
`;
const ConfirmIcon = styled.div`
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  background: ${(p) => {
    const m = {
      Cancelado: "#ef444418",
      Pausado: "#f59e0b18",
      Activo: "#22c55e18",
    };
    return m[p.$estado] || "#3b82f618";
  }};
  color: ${(p) => {
    const m = { Cancelado: "#ef4444", Pausado: "#f59e0b", Activo: "#22c55e" };
    return m[p.$estado] || "#3b82f6";
  }};
`;
const ConfirmTitle = styled.h3`
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
`;
const ConfirmMsg = styled.p`
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: ${(p) => p.theme.textSecondary};
  line-height: 1.5;
`;
const ConfirmActions = styled.div`
  display: flex;
  gap: 10px;
  justify-content: center;
`;
const ConfirmCancelBtn = styled.button`
  flex: 1;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid ${(p) => p.theme.border};
  background: transparent;
  color: ${(p) => p.theme.text};
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  &:hover {
    background: ${(p) => p.theme.background};
  }
`;
const ConfirmOkBtn = styled.button`
  flex: 1;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  color: white;
  background: ${(p) => {
    const m = { Cancelado: "#ef4444", Pausado: "#f59e0b", Activo: "#22c55e" };
    return m[p.$estado] || "#3b82f6";
  }};
  &:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  svg {
    font-size: 16px;
  }
`;