import { Icon } from "@iconify/react";
import { useEffect, useMemo, useState } from "react";
import styled from "styled-components";
import { toast } from "sonner";
import { EmptyState, MonedaInput } from "../../_standards";
import { hoyISO } from "../../../utils/fecha";
import {
  useAddonsSuscripcionQuery,
  useUpdateAddonsSuscripcionMutation,
} from "../../../tanstack/SuscripcionesAddonsStack";

export function SuscripcionModal({
  mode,
  subsidiario,
  suscripcion,
  planes,
  onClose,
  onCrear,
  onEditar,
  isLoading,
}) {
  const isEdit = mode === "editar";
  const esReseller = subsidiario?.type === "reseller";
  const [planId, setPlanId] = useState(suscripcion?.plan_id || "");
  const [precioVenta, setPrecioVenta] = useState(
    suscripcion?.costo_mensual ? Number(suscripcion.costo_mensual) : "",
  );
  const [comision, setComision] = useState(
    suscripcion?.comision_aplicada ? Number(suscripcion.comision_aplicada) : 0,
  );
  const [dias, setDias] = useState(30);
  const [desc, setDesc] = useState(suscripcion?.descripcion || "");
  const [showComision, setShowComision] = useState(esReseller || comision > 0);
  const todayStr = hoyISO();
  const [fechaInicio, setFechaInicio] = useState(
    suscripcion?.fecha_inicio ? suscripcion.fecha_inicio.split("T")[0] : todayStr,
  );
  const [diaCobro, setDiaCobro] = useState(suscripcion?.dia_cobro ?? "");
  const [notasComerciales, setNotasComerciales] = useState(suscripcion?.notas_comerciales || "");

  const plan = useMemo(
    () => planes.find((p) => p.id === planId),
    [planes, planId],
  );
  const base = plan ? Number(plan.precio) : 0;
  const final =
    precioVenta !== "" && Number(precioVenta) > 0 ? Number(precioVenta) : base;
  const margen = final - base;
  const comisionMonto = comision > 0 ? (final * comision) / 100 : 0;
  const gananciaFinal = margen - comisionMonto;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isEdit) {
      if (!suscripcion?.id) {
        console.error(
          "SuscripcionModal: suscripcion.id es undefined",
          suscripcion,
        );
        return;
      }
      onEditar(suscripcion.id, {
        precio_venta: final,
        descripcion: desc || undefined,
        comision_aplicada: comision,
        fecha_inicio: fechaInicio || undefined,
        dia_cobro: diaCobro ? Number(diaCobro) : null,
        notas_comerciales: notasComerciales || undefined,
      });
    } else {
      if (!planId) return;
      onCrear(subsidiario.id, {
        plan_id: planId,
        precio_venta: final,
        comision_porcentaje: comision,
        descripcion: desc || undefined,
        dias_vigencia: dias,
        fecha_inicio: fechaInicio || undefined,
        dia_cobro: diaCobro ? Number(diaCobro) : undefined,
        notas_comerciales: notasComerciales || undefined,
      });
    }
  };

  const fmtGs = (n) => Number(n).toLocaleString("es-PY") + " Gs.";

  return (
    <Overlay onClick={onClose}>
      <Modal onClick={(e) => e.stopPropagation()}>
        <Header>
          <H3>
            <Icon icon={isEdit ? "lucide:pencil" : "lucide:plus-circle"} />
            {isEdit ? "Editar Suscripción" : "Asignar Plan"}
          </H3>
          <XBtn onClick={onClose}>
            <Icon icon="lucide:x" />
          </XBtn>
        </Header>
        <SubBar>
          <SubIcon $type={subsidiario?.type}>
            <Icon icon={esReseller ? "lucide:users-2" : "lucide:building-2"} />
          </SubIcon>
          <div>
            <b>{subsidiario?.razon_social}</b>
            <SubMeta>
              {subsidiario?.ruc}
              <SubTypeBadge $type={subsidiario?.type}>
                {esReseller ? "Reseller" : "Subsidiario directo"}
              </SubTypeBadge>
            </SubMeta>
          </div>
        </SubBar>
        <Body onSubmit={handleSubmit}>
          {/* === SECCIÓN: Selección de Plan === */}
          {!isEdit && (
            <Section>
              <SectionTitle>
                <Icon icon="lucide:package" />
                Seleccionar Plan <span style={{ color: "#ef4444" }}>*</span>
              </SectionTitle>
              <SectionHelp>
                Elegí el plan que se asignará a esta empresa
              </SectionHelp>
              <PGrid>
                {planes.map((p) => (
                  <PCard
                    key={p.id}
                    $sel={planId === p.id}
                    type="button"
                    onClick={() => {
                      setPlanId(p.id);
                      setPrecioVenta("");
                    }}
                  >
                    <PName>{p.descripcion}</PName>
                    <PPrice>
                      {Number(p.precio).toLocaleString("es-PY")} Gs.
                      <small>/{p.tipo_ciclo || "mes"}</small>
                    </PPrice>
                    <PLimits>
                      <PLimitItem>
                        <Icon icon="lucide:users" /> {Number(p.max_user)}
                      </PLimitItem>
                      <PLimitItem>
                        <Icon icon="lucide:package" /> {Number(p.max_producto)}
                      </PLimitItem>
                      <PLimitItem>
                        <Icon icon="lucide:file-text" />{" "}
                        {Number(p.max_documentos)}
                      </PLimitItem>
                    </PLimits>
                    {planId === p.id && (
                      <Chk>
                        <Icon icon="lucide:check-circle" />
                      </Chk>
                    )}
                  </PCard>
                ))}
              </PGrid>
            </Section>
          )}
          {isEdit && suscripcion?.planes && (
            <EditPlanInfo>
              <Icon icon="lucide:package" />
              <div>
                <span>Plan actual</span>
                <b>
                  {suscripcion.planes.descripcion} — {fmtGs(base)}
                </b>
              </div>
            </EditPlanInfo>
          )}

          {/* === SECCIÓN: Precio y Comisión === */}
          {(plan || isEdit) && (
            <Section>
              <SectionTitle>
                <Icon icon="lucide:banknote" />
                Precio y Condiciones
              </SectionTitle>

              {/* Precio base (solo lectura) */}
              {base > 0 && !isEdit && (
                <BasePrice>
                  <BasePriceLabel>
                    <Icon icon="lucide:tag" />
                    Precio base del plan
                    <Tooltip>
                      <Icon icon="lucide:info" />
                      <TooltipText>
                        Es el costo de referencia del plan. Tu ganancia es la
                        diferencia entre lo que cobrás (precio venta) y este
                        valor.
                      </TooltipText>
                    </Tooltip>
                  </BasePriceLabel>
                  <BasePriceValue>{fmtGs(base)}</BasePriceValue>
                </BasePrice>
              )}

              <Row>
                <FG>
                  <LblRow>
                    <Lbl>Precio venta (Gs.)</Lbl>
                    <Tooltip>
                      <Icon icon="lucide:info" />
                      <TooltipText>
                        {esReseller
                          ? "Lo que le cobrás al reseller por este plan. El reseller luego puede revenderlo a sus subsidiarios."
                          : "Lo que le cobrás al subsidiario por este plan. Si lo dejás vacío se usa el precio base."}
                      </TooltipText>
                    </Tooltip>
                  </LblRow>
                  <Help>
                    {esReseller
                      ? "Monto que el reseller te paga"
                      : "Monto que el subsidiario paga"}
                    {base > 0 && ` (base: ${base.toLocaleString("es-PY")})`}
                  </Help>
                  <Inp
                    type="number"
                    value={precioVenta}
                    onChange={(e) => setPrecioVenta(e.target.value)}
                    placeholder={base || "0"}
                    min="0"
                  />
                  {final !== base && base > 0 && (
                    <PriceDiff $positive={final >= base}>
                      <Icon
                        icon={
                          final >= base
                            ? "lucide:trending-up"
                            : "lucide:trending-down"
                        }
                      />
                      {final >= base ? "+" : ""}
                      {fmtGs(margen)} vs precio base
                    </PriceDiff>
                  )}
                </FG>
                <FG>
                  <LblRow>
                    <Lbl>Comisión reseller (%)</Lbl>
                    <Tooltip>
                      <Icon icon="lucide:info" />
                      <TooltipText>
                        Porcentaje del precio venta que se paga como comisión al
                        reseller que vendió esta suscripción. Solo aplica si hay
                        un reseller en la cadena de venta.
                      </TooltipText>
                    </Tooltip>
                  </LblRow>
                  {!esReseller && !showComision ? (
                    <>
                      <Help>No aplica para subsidiarios directos</Help>
                      <OptionalToggle
                        type="button"
                        onClick={() => setShowComision(true)}
                      >
                        <Icon icon="lucide:plus-circle" /> Agregar comisión
                        manual
                      </OptionalToggle>
                    </>
                  ) : (
                    <>
                      <Help>
                        {esReseller
                          ? "Porcentaje que gana este reseller"
                          : "Porcentaje para el reseller que lo refirió"}
                      </Help>
                      <Inp
                        type="number"
                        value={comision}
                        onChange={(e) => setComision(Number(e.target.value))}
                        min="0"
                        max="100"
                        step="0.5"
                      />
                      {comision > 0 && final > 0 && (
                        <ComisionMonto>
                          <Icon icon="lucide:coins" /> {fmtGs(comisionMonto)}{" "}
                          por ciclo
                        </ComisionMonto>
                      )}
                      {!esReseller && showComision && (
                        <OptionalToggle
                          type="button"
                          onClick={() => {
                            setShowComision(false);
                            setComision(0);
                          }}
                        >
                          <Icon icon="lucide:x" /> Quitar comisión
                        </OptionalToggle>
                      )}
                    </>
                  )}
                </FG>
              </Row>
            </Section>
          )}

          {/* === SECCIÓN: Vigencia === */}
          {(plan || isEdit) && (
            <Section>
              <SectionTitle>
                <Icon icon="lucide:calendar" />
                Vigencia y Facturación
              </SectionTitle>
              <Row>
                <FG>
                  <LblRow>
                    <Lbl>Fecha de inicio</Lbl>
                    <Tooltip>
                      <Icon icon="lucide:info" />
                      <TooltipText>
                        Cuándo empieza a correr el plan. Puede ser hoy, una
                        fecha futura (si aún no arrancó) o una pasada (si ya
                        venció el período de prueba).
                      </TooltipText>
                    </Tooltip>
                  </LblRow>
                  <Help>Independiente de la fecha de registro</Help>
                  <Inp
                    type="date"
                    value={fechaInicio}
                    onChange={(e) => setFechaInicio(e.target.value)}
                  />
                </FG>
                {!isEdit && (
                  <FG>
                    <LblRow>
                      <Lbl>Días de vigencia</Lbl>
                      <Tooltip>
                        <Icon icon="lucide:info" />
                        <TooltipText>
                          Duración del período desde la fecha de inicio.
                        </TooltipText>
                      </Tooltip>
                    </LblRow>
                    <Help>A partir de la fecha de inicio</Help>
                    <Inp
                      type="number"
                      value={dias}
                      onChange={(e) => setDias(Number(e.target.value))}
                      min="1"
                    />
                  </FG>
                )}
                <FG>
                  <LblRow>
                    <Lbl>Día de cobro (opcional)</Lbl>
                    <Tooltip>
                      <Icon icon="lucide:info" />
                      <TooltipText>
                        Día del mes en que se realiza el cobro mensual (1–28).
                        Dejá vacío si no hay día fijo acordado.
                      </TooltipText>
                    </Tooltip>
                  </LblRow>
                  <Help>Ej: día 1, día 15 de cada mes</Help>
                  <Inp
                    type="number"
                    value={diaCobro}
                    onChange={(e) => setDiaCobro(e.target.value)}
                    placeholder="Sin día fijo"
                    min="1"
                    max="28"
                  />
                </FG>
              </Row>
            </Section>
          )}

          {/* === SECCIÓN: Notas y descripción === */}
          {(plan || isEdit) && (
            <Row>
              <FG>
                <Lbl>Descripción interna (opcional)</Lbl>
                <Help>Nota corta, visible en listados (máx. 60 caracteres)</Help>
                <Inp
                  type="text"
                  value={desc}
                  onChange={(e) => setDesc(e.target.value)}
                  placeholder="Ej: Promoción lanzamiento..."
                  maxLength={60}
                />
              </FG>
              <FG>
                <Lbl>Notas comerciales (opcional)</Lbl>
                <Help>Condiciones del trato, descuentos, acuerdos especiales</Help>
                <Inp
                  as="textarea"
                  rows={3}
                  value={notasComerciales}
                  onChange={(e) => setNotasComerciales(e.target.value)}
                  placeholder="Ej: 2 meses gratis, precio especial por volumen..."
                  maxLength={255}
                  style={{ resize: "vertical", minHeight: 72 }}
                />
              </FG>
            </Row>
          )}

          {/* === SECCIÓN: Addons del Plan (solo edición) === */}
          {isEdit && suscripcion?.id && (
            <AddonsSection suscripcionId={suscripcion.id} />
          )}

          {/* === RESUMEN FINANCIERO === */}
          {(plan || isEdit) && final > 0 && (
            <Resumen>
              <ResumenHeader>
                <Icon icon="lucide:calculator" />
                Resumen financiero
              </ResumenHeader>
              <RRow>
                <RLabel>
                  <Icon icon="lucide:tag" /> Precio base del plan
                </RLabel>
                <span>{fmtGs(base)}</span>
              </RRow>
              <RRow $highlight>
                <RLabel>
                  <Icon icon="lucide:receipt" /> Precio venta{" "}
                  {esReseller ? "al reseller" : "al subsidiario"}
                </RLabel>
                <b>{fmtGs(final)}</b>
              </RRow>
              {margen !== 0 && (
                <RRow>
                  <RLabel>
                    <Icon
                      icon={
                        margen >= 0
                          ? "lucide:trending-up"
                          : "lucide:trending-down"
                      }
                    />{" "}
                    Margen sobre precio base
                  </RLabel>
                  <MargenValue $positive={margen >= 0}>
                    {margen >= 0 ? "+" : ""}
                    {fmtGs(margen)}
                  </MargenValue>
                </RRow>
              )}
              {comision > 0 && (
                <RRow>
                  <RLabel>
                    <Icon icon="lucide:users" /> Comisión reseller ({comision}%)
                  </RLabel>
                  <span style={{ color: "#f59e0b" }}>
                    -{fmtGs(comisionMonto)}
                  </span>
                </RRow>
              )}
              <RDivider />
              <RRow $total>
                <RLabel>
                  <Icon icon="lucide:wallet" /> Tu ganancia neta por ciclo
                </RLabel>
                <GananciaValue $positive={gananciaFinal >= 0}>
                  {gananciaFinal >= 0 ? "+" : ""}
                  {fmtGs(gananciaFinal)}
                </GananciaValue>
              </RRow>
            </Resumen>
          )}

          <Footer>
            <CBtn type="button" onClick={onClose}>
              Cancelar
            </CBtn>
            <SBtn type="submit" disabled={isLoading || (!isEdit && !planId)}>
              {isLoading ? (
                <>
                  <Icon icon="lucide:loader-2" className="animate-spin" />
                  Guardando...
                </>
              ) : isEdit ? (
                <>
                  <Icon icon="lucide:save" />
                  Guardar cambios
                </>
              ) : (
                <>
                  <Icon icon="lucide:plus" />
                  Asignar plan
                </>
              )}
            </SBtn>
          </Footer>
        </Body>
      </Modal>
    </Overlay>
  );
}

// ===== Sub-componente: Addons del Plan =====
function AddonsSection({ suscripcionId }) {
  const { data, isLoading, isError, error, refetch } =
    useAddonsSuscripcionQuery(suscripcionId, true);
  const updateM = useUpdateAddonsSuscripcionMutation();

  const serverAddons = data?.addons || [];
  const [open, setOpen] = useState(true);
  const [localAddons, setLocalAddons] = useState([]);

  // Sincronizar copia local cuando llega/cambia la data del server
  useEffect(() => {
    if (Array.isArray(serverAddons)) {
      setLocalAddons(
        serverAddons.map((a) => ({
          submodulo_id: a.submodulo_id,
          codigo: a.codigo,
          descripcion: a.descripcion,
          icono: a.icono,
          modulo_descripcion: a.modulo_descripcion,
          precio_default: Number(a.precio_default ?? 0),
          precio_plan:
            a.precio_plan != null ? Number(a.precio_plan) : null,
          precio_override:
            a.precio_override != null ? Number(a.precio_override) : null,
          precio_efectivo: Number(a.precio_efectivo ?? 0),
          active: !!a.active,
        })),
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  const serverById = useMemo(() => {
    const m = new Map();
    serverAddons.forEach((a) => m.set(a.submodulo_id, a));
    return m;
  }, [serverAddons]);

  const isModificado = (item) => {
    const s = serverById.get(item.submodulo_id);
    if (!s) return false;
    if (!!s.active !== !!item.active) return true;
    const serverOverride =
      s.precio_override != null ? Number(s.precio_override) : null;
    const localOverride =
      item.precio_override != null ? Number(item.precio_override) : null;
    return serverOverride !== localOverride;
  };

  const cambios = useMemo(
    () => localAddons.filter(isModificado),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [localAddons, serverById],
  );

  const handleToggle = (submoduloId, value) => {
    setLocalAddons((prev) =>
      prev.map((a) =>
        a.submodulo_id === submoduloId ? { ...a, active: value } : a,
      ),
    );
  };

  const handlePrecio = (submoduloId, value) => {
    setLocalAddons((prev) =>
      prev.map((a) =>
        a.submodulo_id === submoduloId
          ? {
              ...a,
              precio_override:
                value == null || value === "" ? null : Number(value),
            }
          : a,
      ),
    );
  };

  const handleReset = (submoduloId) => {
    setLocalAddons((prev) =>
      prev.map((a) =>
        a.submodulo_id === submoduloId
          ? { ...a, precio_override: null }
          : a,
      ),
    );
  };

  const handleGuardar = () => {
    if (!cambios.length) {
      toast.info("No hay cambios para guardar");
      return;
    }
    const payload = cambios.map((a) => ({
      submodulo_id: a.submodulo_id,
      active: a.active,
      precio: a.precio_override,
    }));
    updateM.mutate(
      { suscripcionId, addons: payload },
      {
        onSuccess: () => {
          toast.success("Addons actualizados");
        },
        onError: (e) =>
          toast.error(
            e?.response?.data?.message || "Error al actualizar addons",
          ),
      },
    );
  };

  const fmtGs = (n) => Number(n || 0).toLocaleString("es-PY") + " Gs.";

  return (
    <Section>
      <AddonHeader type="button" onClick={() => setOpen((v) => !v)}>
        <SectionTitle as="span">
          <Icon icon="lucide:puzzle" />
          Addons del Plan
          {cambios.length > 0 && (
            <ModifBadge>
              {cambios.length} modificado{cambios.length > 1 ? "s" : ""}
            </ModifBadge>
          )}
        </SectionTitle>
        <Icon icon={open ? "lucide:chevron-up" : "lucide:chevron-down"} />
      </AddonHeader>

      {open && (
        <>
          {isLoading && (
            <Help>
              <Icon icon="lucide:loader-2" className="animate-spin" />{" "}
              Cargando addons...
            </Help>
          )}
          {isError && (
            <AddonError>
              <Icon icon="lucide:alert-triangle" />
              <span>
                {error?.response?.data?.message ||
                  "Error al cargar addons"}
              </span>
              <button type="button" onClick={() => refetch()}>
                Reintentar
              </button>
            </AddonError>
          )}
          {!isLoading && !isError && localAddons.length === 0 && (
            <EmptyState
              icon="lucide:puzzle"
              title="Sin addons configurados"
              description="Este plan no tiene addons (submódulos opcionales) configurados."
            />
          )}
          {!isLoading && !isError && localAddons.length > 0 && (
            <>
              <SectionHelp>
                Activá los addons disponibles y, opcionalmente, definí un
                precio override para esta suscripción.
              </SectionHelp>
              <AddonList>
                {localAddons.map((a) => {
                  const modificado = isModificado(a);
                  const tieneOverride = a.precio_override != null;
                  return (
                    <AddonRow key={a.submodulo_id} $modificado={modificado}>
                      <AddonInfo>
                        <AddonTitleRow>
                          {a.icono && <Icon icon={a.icono} />}
                          <b>{a.descripcion}</b>
                          {modificado && <ModifDot title="Modificado" />}
                        </AddonTitleRow>
                        <AddonMeta>
                          {a.modulo_descripcion}
                          {tieneOverride ? (
                            <>
                              {" • "}
                              <s>{fmtGs(a.precio_default)}</s>{" "}
                              <b>{fmtGs(a.precio_override)}</b>
                            </>
                          ) : (
                            <>
                              {" • base "}
                              {fmtGs(a.precio_default)}
                            </>
                          )}
                        </AddonMeta>
                      </AddonInfo>
                      <AddonControls>
                        <SwitchWrap>
                          <input
                            type="checkbox"
                            checked={a.active}
                            onChange={(e) =>
                              handleToggle(a.submodulo_id, e.target.checked)
                            }
                            id={`addon-sw-${a.submodulo_id}`}
                          />
                          <label htmlFor={`addon-sw-${a.submodulo_id}`}>
                            {a.active ? "Activo" : "Inactivo"}
                          </label>
                        </SwitchWrap>
                        <AddonPriceWrap>
                          <MonedaInput
                            value={a.precio_override ?? ""}
                            onChange={(v) =>
                              handlePrecio(a.submodulo_id, v)
                            }
                            moneda="PYG"
                            disabled={!a.active}
                            placeholder={String(a.precio_default ?? 0)}
                            size="small"
                            sx={{ width: 140 }}
                          />
                          {tieneOverride && (
                            <ResetBtn
                              type="button"
                              title="Quitar override"
                              onClick={() => handleReset(a.submodulo_id)}
                            >
                              <Icon icon="lucide:rotate-ccw" />
                            </ResetBtn>
                          )}
                        </AddonPriceWrap>
                      </AddonControls>
                    </AddonRow>
                  );
                })}
              </AddonList>
              <AddonFooter>
                <span>
                  {cambios.length === 0
                    ? "Sin cambios"
                    : `${cambios.length} cambio${cambios.length > 1 ? "s" : ""} pendiente${cambios.length > 1 ? "s" : ""}`}
                </span>
                <SaveAddonsBtn
                  type="button"
                  disabled={cambios.length === 0 || updateM.isPending}
                  onClick={handleGuardar}
                >
                  {updateM.isPending ? (
                    <>
                      <Icon
                        icon="lucide:loader-2"
                        className="animate-spin"
                      />
                      Guardando...
                    </>
                  ) : (
                    <>
                      <Icon icon="lucide:save" />
                      Guardar addons
                    </>
                  )}
                </SaveAddonsBtn>
              </AddonFooter>
            </>
          )}
        </>
      )}
    </Section>
  );
}

// ===== Styled Components =====
const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
`;
const Modal = styled.div`
  background: ${(p) => p.theme.body};
  border-radius: 16px;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid ${(p) => p.theme.border};
`;
const H3 = styled.h3`
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  margin: 0;
  svg {
    color: ${(p) => p.theme.primary};
  }
`;
const XBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: ${(p) => p.theme.textSecondary};
  border-radius: 8px;
  &:hover {
    background: ${(p) => p.theme.background};
  }
`;
const SubBar = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: ${(p) => p.theme.background};
  border-bottom: 1px solid ${(p) => p.theme.border};
  b {
    display: block;
    color: ${(p) => p.theme.text};
  }
`;
const SubIcon = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: ${(p) =>
    p.$type === "reseller" ? "#8b5cf618" : p.theme.primary + "18"};
  color: ${(p) => (p.$type === "reseller" ? "#8b5cf6" : p.theme.primary)};
`;
const SubMeta = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: ${(p) => p.theme.textSecondary};
  margin-top: 2px;
`;
const SubTypeBadge = styled.span`
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  background: ${(p) => (p.$type === "reseller" ? "#8b5cf620" : "#3b82f620")};
  color: ${(p) => (p.$type === "reseller" ? "#8b5cf6" : "#3b82f6")};
`;
const Body = styled.form`
  padding: 24px;
`;
const Section = styled.div`
  margin-bottom: 20px;
`;
const SectionTitle = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  margin-bottom: 4px;
  svg {
    font-size: 16px;
    color: ${(p) => p.theme.primary};
  }
`;
const SectionHelp = styled.p`
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
  margin: 0 0 12px;
`;
const FG = styled.div`
  margin-bottom: 16px;
`;
const Row = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
`;
const LblRow = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
`;
const Lbl = styled.label`
  font-size: 0.85rem;
  font-weight: 600;
  color: ${(p) => p.theme.text};
`;
const Help = styled.p`
  font-size: 0.72rem;
  color: ${(p) => p.theme.textSecondary};
  margin: 0 0 8px;
`;
const Tooltip = styled.span`
  position: relative;
  display: inline-flex;
  cursor: help;
  svg {
    font-size: 14px;
    color: ${(p) => p.theme.textSecondary};
    opacity: 0.6;
  }
  &:hover > span {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
`;
const TooltipText = styled.span`
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: ${(p) => p.theme.text};
  color: ${(p) => p.theme.body};
  font-size: 0.72rem;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 8px;
  width: 220px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
`;
const Inp = styled.input`
  width: 100%;
  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;
  outline: none;
  box-sizing: border-box;
  &:focus {
    border-color: ${(p) => p.theme.primary};
  }
`;
const BasePrice = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: ${(p) => p.theme.primary}10;
  border: 1px dashed ${(p) => p.theme.primary}40;
  border-radius: 8px;
  margin-bottom: 16px;
`;
const BasePriceLabel = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: ${(p) => p.theme.textSecondary};
  svg:first-child {
    color: ${(p) => p.theme.primary};
    font-size: 16px;
  }
`;
const BasePriceValue = styled.div`
  font-size: 0.9rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
`;
const PriceDiff = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 6px;
  color: ${(p) => (p.$positive ? "#22c55e" : "#ef4444")};
  svg {
    font-size: 14px;
  }
`;
const ComisionMonto = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 6px;
  color: #f59e0b;
  svg {
    font-size: 14px;
  }
`;
const OptionalToggle = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: ${(p) => p.theme.primary};
  padding: 4px 0;
  &:hover {
    text-decoration: underline;
  }
  svg {
    font-size: 14px;
  }
`;
const PGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
`;
const PCard = styled.button`
  position: relative;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid ${(p) => (p.$sel ? p.theme.primary : p.theme.border)};
  background: ${(p) => (p.$sel ? p.theme.primary + "10" : p.theme.background)};
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    border-color: ${(p) => p.theme.primary};
  }
`;
const PName = styled.div`
  font-weight: 700;
  font-size: 0.85rem;
  color: ${(p) => p.theme.text};
  margin-bottom: 4px;
`;
const PPrice = styled.div`
  color: ${(p) => p.theme.primary};
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  small {
    font-weight: 400;
    font-size: 0.68rem;
    opacity: 0.7;
  }
`;
const PLimits = styled.div`
  display: flex;
  gap: 10px;
`;
const PLimitItem = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: ${(p) => p.theme.textSecondary};
  svg {
    font-size: 13px;
  }
`;
const Chk = styled.div`
  position: absolute;
  top: 8px;
  right: 8px;
  color: ${(p) => p.theme.primary};
  font-size: 20px;
`;
const EditPlanInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: ${(p) => p.theme.background};
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid ${(p) => p.theme.border};
  svg {
    font-size: 20px;
    color: ${(p) => p.theme.primary};
  }
  span {
    font-size: 0.75rem;
    color: ${(p) => p.theme.textSecondary};
    display: block;
  }
  b {
    font-size: 0.9rem;
    color: ${(p) => p.theme.text};
  }
`;
const Resumen = styled.div`
  padding: 16px;
  background: ${(p) => p.theme.background};
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid ${(p) => p.theme.border};
`;
const ResumenHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  margin-bottom: 12px;
  svg {
    color: ${(p) => p.theme.primary};
    font-size: 18px;
  }
`;
const RRow = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  padding: 6px 0;
  color: ${(p) => p.theme.text};
  ${(p) =>
    p.$highlight &&
    `background: ${p.theme.primary}08; margin: 0 -8px; padding: 6px 8px; border-radius: 6px;`}
  ${(p) => p.$total && `font-weight: 700; font-size: 0.9rem; padding-top: 8px;`}
`;
const RLabel = styled.span`
  display: flex;
  align-items: center;
  gap: 6px;
  svg {
    font-size: 15px;
    opacity: 0.6;
  }
`;
const RDivider = styled.hr`
  border: none;
  border-top: 1px dashed ${(p) => p.theme.border};
  margin: 6px 0;
`;
const MargenValue = styled.span`
  font-weight: 600;
  color: ${(p) => (p.$positive ? "#22c55e" : "#ef4444")};
`;
const GananciaValue = styled.span`
  font-weight: 700;
  font-size: 1rem;
  color: ${(p) => (p.$positive ? "#22c55e" : "#ef4444")};
`;
const Footer = styled.div`
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid ${(p) => p.theme.border};
`;
const CBtn = styled.button`
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.border};
  background: transparent;
  color: ${(p) => p.theme.text};
  cursor: pointer;
  font-size: 0.875rem;
  &:hover {
    background: ${(p) => p.theme.background};
  }
`;
const SBtn = styled.button`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

// ===== Styled: Addons =====
const AddonHeader = styled.button`
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
  cursor: pointer;
  color: ${(p) => p.theme.text};
`;
const ModifBadge = styled.span`
  font-size: 0.7rem;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 6px;
`;
const AddonError = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  color: #991b1b;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  button {
    margin-left: auto;
    background: transparent;
    border: 1px solid #991b1b;
    color: #991b1b;
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.75rem;
  }
`;
const AddonList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
`;
const AddonRow = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid
    ${(p) => (p.$modificado ? "#f59e0b" : p.theme.border)};
  background: ${(p) =>
    p.$modificado ? "rgba(245,158,11,0.06)" : "transparent"};
  border-radius: 10px;
  @media (max-width: 540px) {
    flex-direction: column;
    align-items: stretch;
  }
`;
const AddonInfo = styled.div`
  flex: 1;
  min-width: 0;
`;
const AddonTitleRow = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  color: ${(p) => p.theme.text};
  font-size: 0.9rem;
  svg {
    font-size: 16px;
    color: ${(p) => p.theme.primary};
  }
`;
const AddonMeta = styled.div`
  font-size: 0.72rem;
  color: ${(p) => p.theme.textSecondary};
  margin-top: 2px;
`;
const ModifDot = styled.span`
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  display: inline-block;
  margin-left: 4px;
`;
const AddonControls = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;
const SwitchWrap = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
  input {
    cursor: pointer;
  }
  label {
    cursor: pointer;
    user-select: none;
  }
`;
const AddonPriceWrap = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
`;
const ResetBtn = styled.button`
  background: transparent;
  border: 0;
  cursor: pointer;
  color: ${(p) => p.theme.textSecondary};
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  &:hover {
    background: ${(p) => p.theme.border};
  }
`;
const AddonFooter = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
`;
const SaveAddonsBtn = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  background: ${(p) => p.theme.primary};
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;