"use client";

import { useEffect, useMemo, useState } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext, resolveCompanyPublicProfileId } from "@/lib/company-context";
import { PageHeader } from "@/components/ui/page-header";
import { Switch } from "@/components/ui/switch";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { CustomSelect } from "@/components/ui/custom-select";
import { Loader2, Megaphone, BellRing, Save, Timer, Sparkles, Copy } from "lucide-react";

type CouponType = "percent" | "value";
type SocialProofPosition = "left" | "right";
type AnnouncementButtonTargetType = "custom" | "product" | "category" | "subcategory";

type CatalogCoupon = {
  id: string;
  code: string;
  type: CouponType;
  value: number;
  active: boolean;
  starts_at?: string | null;
  ends_at?: string | null;
};

type CatalogProductOption = {
  id: string;
  name: string;
  image_url?: string | null;
};

type CatalogCategoryOption = {
  id: string;
  name: string;
  slug?: string | null;
  parent_id?: string | null;
  is_visible?: boolean | null;
};

const BRAZILIAN_NAMES = [
  "Ana Paula",
  "Carlos Eduardo",
  "Fernanda",
  "João Vitor",
  "Mariana",
  "Rafael",
  "Juliana",
  "Guilherme",
  "Larissa",
  "Bruno",
  "Camila",
  "Felipe",
  "Patrícia",
  "Diego",
  "Aline",
  "Mateus",
  "Vanessa",
  "Thiago",
  "Renata",
  "Leandro",
  "Priscila",
  "Eduardo",
  "Tatiane",
  "Lucas",
  "Natália",
  "Vinícius",
  "Beatriz",
  "Rodrigo",
  "Gabriela",
  "André",
];

function toDatetimeLocalValue(value: string | null | undefined) {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  const timezoneOffset = date.getTimezoneOffset() * 60000;
  return new Date(date.getTime() - timezoneOffset).toISOString().slice(0, 16);
}

function toIsoOrNull(value: string) {
  if (!value) return null;
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return null;
  return date.toISOString();
}

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

function getContrastTextColor(color: string) {
  const safeColor = /^#[0-9a-f]{6}$/i.test(color) ? color : "#0F172A";
  const hex = safeColor.replace("#", "");
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luminance > 0.62 ? "#0F172A" : "#FFFFFF";
}

function normalizeHexColorInput(value: string, fallback: string) {
  return /^#[0-9a-f]{6}$/i.test(value) ? value : fallback;
}

function formatCouponSummary(coupon: CatalogCoupon | null) {
  if (!coupon) return "";
  if (coupon.type === "percent") {
    return `Use o cupom ${coupon.code} e ganhe ${Number(coupon.value || 0)}% OFF`;
  }
  return `Use o cupom ${coupon.code} e ganhe R$ ${Number(coupon.value || 0).toFixed(2)} OFF`;
}

function inferAnnouncementButtonTarget(
  rawUrl: string,
  categories: CatalogCategoryOption[],
  products: CatalogProductOption[]
) {
  const url = rawUrl.trim();
  if (!url) {
    return {
      type: "custom" as AnnouncementButtonTargetType,
      customUrl: "",
      productId: "",
      categorySlug: "",
      subcategorySlug: "",
    };
  }
  const productMatch = url.match(/^catalog:\/\/product\/([^/?#]+)/i) || url.match(/\/p\/([^/?#]+)/i);
  if (productMatch?.[1]) {
    const productId = decodeURIComponent(productMatch[1]);
    if (products.some((item) => item.id === productId)) {
      return {
        type: "product" as AnnouncementButtonTargetType,
        customUrl: "",
        productId,
        categorySlug: "",
        subcategorySlug: "",
      };
    }
  }
  const categoryMatch = url.match(/^catalog:\/\/(?:category|subcategory)\/([^/?#]+)/i) || url.match(/\/c\/([^/?#]+)/i);
  if (categoryMatch?.[1]) {
    const categorySlug = decodeURIComponent(categoryMatch[1]);
    const category = categories.find((item) => item.slug === categorySlug);
    if (category?.slug) {
      return {
        type: category.parent_id ? ("subcategory" as AnnouncementButtonTargetType) : ("category" as AnnouncementButtonTargetType),
        customUrl: "",
        productId: "",
        categorySlug: category.parent_id ? "" : category.slug,
        subcategorySlug: category.parent_id ? category.slug : "",
      };
    }
  }
  return {
    type: "custom" as AnnouncementButtonTargetType,
    customUrl: url,
    productId: "",
    categorySlug: "",
    subcategorySlug: "",
  };
}

export default function CatalogMarketingPage() {
  const { pode } = usePermissoes();
  const podeMexerNoMarketing = pode("marketing.manage");

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [userId, setUserId] = useState<string | null>(null);
  const [coupons, setCoupons] = useState<CatalogCoupon[]>([]);
  const [products, setProducts] = useState<CatalogProductOption[]>([]);
  const [categories, setCategories] = useState<CatalogCategoryOption[]>([]);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const [announcementEnabled, setAnnouncementEnabled] = useState(false);
  const [announcementText, setAnnouncementText] = useState("");
  const [announcementCountdownEnabled, setAnnouncementCountdownEnabled] = useState(false);
  const [announcementCountdownEndAt, setAnnouncementCountdownEndAt] = useState("");
  const [announcementCouponId, setAnnouncementCouponId] = useState("");
  const [announcementShowCouponBadge, setAnnouncementShowCouponBadge] = useState(true);
  const [announcementCouponBadgeColor, setAnnouncementCouponBadgeColor] = useState("#FB7185");
  const [announcementBackgroundColor, setAnnouncementBackgroundColor] = useState("#111827");
  const [announcementTextColor, setAnnouncementTextColor] = useState("#FFFFFF");
  const [announcementButtonLabel, setAnnouncementButtonLabel] = useState("");
  const [announcementButtonUrl, setAnnouncementButtonUrl] = useState("");
  const [announcementButtonTargetType, setAnnouncementButtonTargetType] = useState<AnnouncementButtonTargetType>("custom");
  const [announcementButtonProductId, setAnnouncementButtonProductId] = useState("");
  const [announcementButtonCategorySlug, setAnnouncementButtonCategorySlug] = useState("");
  const [announcementButtonSubcategorySlug, setAnnouncementButtonSubcategorySlug] = useState("");
  const [announcementSticky, setAnnouncementSticky] = useState(true);

  const [socialProofEnabled, setSocialProofEnabled] = useState(false);
  const [socialProofIntervalSeconds, setSocialProofIntervalSeconds] = useState(18);
  const [socialProofPosition, setSocialProofPosition] = useState<SocialProofPosition>("left");
  const [socialProofDurationSeconds, setSocialProofDurationSeconds] = useState(5);
  const [socialProofMaxVisible, setSocialProofMaxVisible] = useState(2);

  const selectedCoupon = useMemo(
    () => coupons.find((coupon) => coupon.id === announcementCouponId) || null,
    [coupons, announcementCouponId]
  );
  const announcementTextResolved = announcementText.trim();
  const announcementHasCoupon = Boolean(selectedCoupon?.code);
  const announcementButtonResolvedUrl = useMemo(() => {
    if (announcementButtonTargetType === "product") {
      return announcementButtonProductId ? `catalog://product/${announcementButtonProductId}` : "";
    }
    if (announcementButtonTargetType === "category") {
      return announcementButtonCategorySlug ? `catalog://category/${announcementButtonCategorySlug}` : "";
    }
    if (announcementButtonTargetType === "subcategory") {
      return announcementButtonSubcategorySlug ? `catalog://subcategory/${announcementButtonSubcategorySlug}` : "";
    }
    return announcementButtonUrl.trim();
  }, [announcementButtonCategorySlug, announcementButtonProductId, announcementButtonSubcategorySlug, announcementButtonTargetType, announcementButtonUrl]);
  const announcementButtonVisible = Boolean(announcementButtonLabel.trim() && announcementButtonResolvedUrl);
  const announcementCountdownVisible = Boolean(announcementCountdownEnabled && announcementCountdownEndAt);
  const announcementBadgeVisible = Boolean(announcementShowCouponBadge && announcementHasCoupon);
  const announcementHasVisibleContent = Boolean(
    announcementTextResolved || announcementHasCoupon || announcementButtonVisible || announcementCountdownVisible
  );
  const buttonTargetOptions = useMemo(
    () => [
      { value: "custom", label: "Link personalizado", description: "Use qualquer URL manual." },
      { value: "product", label: "Produto específico", description: "Leva para um produto do catálogo." },
      { value: "category", label: "Categoria", description: "Leva para uma categoria principal." },
      { value: "subcategory", label: "Subcategoria", description: "Leva para uma subcategoria." },
    ],
    []
  );
  const productTargetOptions = useMemo(
    () => products.map((product) => ({ value: product.id, label: product.name, image_url: product.image_url || null })),
    [products]
  );
  const categoryById = useMemo(() => {
    const map = new Map<string, CatalogCategoryOption>();
    categories.forEach((item) => map.set(item.id, item));
    return map;
  }, [categories]);
  const categoryTargetOptions = useMemo(
    () =>
      categories
        .filter((item) => !item.parent_id && item.slug)
        .map((item) => ({ value: String(item.slug), label: item.name })),
    [categories]
  );
  const subcategoryTargetOptions = useMemo(
    () =>
      categories
        .filter((item) => item.parent_id && item.slug)
        .map((item) => {
          const parentName = item.parent_id ? categoryById.get(item.parent_id)?.name : "";
          return {
            value: String(item.slug),
            label: parentName ? `${parentName} • ${item.name}` : item.name,
          };
        }),
    [categories, categoryById]
  );

  const socialProofPreview = useMemo(() => {
    const name = BRAZILIAN_NAMES[Math.floor(Math.random() * BRAZILIAN_NAMES.length)] || "Cliente";
    const product = products[Math.floor(Math.random() * Math.max(products.length, 1))];
    const productName = product?.name || "Produto em destaque";
    const minutes = Math.floor(Math.random() * 6) + 1;
    return `${name} comprou ${productName} há ${minutes} min`;
  }, [products]);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        const supabase = getSupabaseClient();
        const {
          data: { user },
        } = await supabase.auth.getUser();
        if (!user) return;
        if (cancelled) return;

        const ctx = await getCompanyContext(supabase, user);
        const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
        /*
          As configuracoes do catalogo moram no perfil do dono. Usar
          `user.id` aqui fazia o funcionario ler e gravar a propria linha,
          que nasce vazia.
        */
        const profileId = resolveCompanyPublicProfileId(ctx, user.id);
        setUserId(profileId);

        const [profileResRaw, couponsRes, productsRes, categoriesRes] = await Promise.all([
          supabase
            .from("profiles")
            .select(
              [
                "catalog_announcement_enabled",
                "catalog_announcement_text",
                "catalog_announcement_countdown_enabled",
                "catalog_announcement_countdown_end_at",
                "catalog_announcement_coupon_id",
                "catalog_announcement_show_coupon_badge",
                "catalog_announcement_coupon_badge_color",
                "catalog_announcement_background_color",
                "catalog_announcement_text_color",
                "catalog_announcement_button_label",
                "catalog_announcement_button_url",
                "catalog_announcement_sticky",
                "catalog_social_proof_enabled",
                "catalog_social_proof_interval_seconds",
                "catalog_social_proof_position",
                "catalog_social_proof_duration_seconds",
                "catalog_social_proof_max_visible",
              ].join(",")
            )
            .eq("id", profileId)
            .single(),
          supabase
            .from("catalog_coupons")
            .select("id,code,type,value,active,starts_at,ends_at")
            .in("user_id", tenantIds)
            .order("created_at", { ascending: false }),
          supabase
            .from("products")
            .select("id,name,image_url")
            .in("user_id", tenantIds)
            .neq("product_kind", "digital")
            .eq("active", true)
            .order("name", { ascending: true }),
          supabase
            .from("categories")
            .select("id,name,slug,parent_id,is_visible")
            .in("user_id", tenantIds)
            .eq("is_visible", true)
            .order("name", { ascending: true }),
        ]);
        const profileRes =
          profileResRaw.error && String(profileResRaw.error.message || "").includes("catalog_announcement_coupon_badge_color")
            ? await supabase
                .from("profiles")
                .select(
                  [
                    "catalog_announcement_enabled",
                    "catalog_announcement_text",
                    "catalog_announcement_countdown_enabled",
                    "catalog_announcement_countdown_end_at",
                    "catalog_announcement_coupon_id",
                    "catalog_announcement_show_coupon_badge",
                    "catalog_announcement_background_color",
                    "catalog_announcement_text_color",
                    "catalog_announcement_button_label",
                    "catalog_announcement_button_url",
                    "catalog_announcement_sticky",
                    "catalog_social_proof_enabled",
                    "catalog_social_proof_interval_seconds",
                    "catalog_social_proof_position",
                    "catalog_social_proof_duration_seconds",
                    "catalog_social_proof_max_visible",
                  ].join(",")
                )
                .eq("id", profileId)
                .single()
            : profileResRaw;
        if (profileRes.error) throw profileRes.error;
        if (couponsRes.error) throw couponsRes.error;
        if (productsRes.error) throw productsRes.error;
        if (categoriesRes.error) throw categoriesRes.error;

        if (cancelled) return;

        const loadedCoupons = (couponsRes.data || []) as CatalogCoupon[];
        const loadedProducts = (productsRes.data || []) as CatalogProductOption[];
        const loadedCategories = (categoriesRes.data || []) as CatalogCategoryOption[];
        setCoupons(loadedCoupons);
        setProducts(loadedProducts);
        setCategories(loadedCategories);

        const data = profileRes.data as {
          catalog_announcement_enabled?: boolean | null;
          catalog_announcement_text?: string | null;
          catalog_announcement_countdown_enabled?: boolean | null;
          catalog_announcement_countdown_end_at?: string | null;
          catalog_announcement_coupon_id?: string | null;
          catalog_announcement_show_coupon_badge?: boolean | null;
          catalog_announcement_coupon_badge_color?: string | null;
          catalog_announcement_background_color?: string | null;
          catalog_announcement_text_color?: string | null;
          catalog_announcement_button_label?: string | null;
          catalog_announcement_button_url?: string | null;
          catalog_announcement_sticky?: boolean | null;
          catalog_social_proof_enabled?: boolean | null;
          catalog_social_proof_interval_seconds?: number | null;
          catalog_social_proof_position?: string | null;
          catalog_social_proof_duration_seconds?: number | null;
          catalog_social_proof_max_visible?: number | null;
        } | null;

        setAnnouncementEnabled(Boolean(data?.catalog_announcement_enabled));
        setAnnouncementText(data?.catalog_announcement_text || "");
        setAnnouncementCountdownEnabled(Boolean(data?.catalog_announcement_countdown_enabled));
        setAnnouncementCountdownEndAt(toDatetimeLocalValue(data?.catalog_announcement_countdown_end_at));
        setAnnouncementCouponId(data?.catalog_announcement_coupon_id || "");
        setAnnouncementShowCouponBadge(
          data?.catalog_announcement_show_coupon_badge === null || data?.catalog_announcement_show_coupon_badge === undefined
            ? true
            : Boolean(data?.catalog_announcement_show_coupon_badge)
        );
        setAnnouncementCouponBadgeColor(data?.catalog_announcement_coupon_badge_color || "#FB7185");
        setAnnouncementBackgroundColor(data?.catalog_announcement_background_color || "#111827");
        setAnnouncementTextColor(data?.catalog_announcement_text_color || "#FFFFFF");
        const rawButtonUrl = data?.catalog_announcement_button_url || "";
        const inferredTarget = inferAnnouncementButtonTarget(rawButtonUrl, loadedCategories, loadedProducts);
        setAnnouncementButtonLabel(data?.catalog_announcement_button_label || "");
        setAnnouncementButtonUrl(inferredTarget.customUrl);
        setAnnouncementButtonTargetType(inferredTarget.type);
        setAnnouncementButtonProductId(inferredTarget.productId);
        setAnnouncementButtonCategorySlug(inferredTarget.categorySlug);
        setAnnouncementButtonSubcategorySlug(inferredTarget.subcategorySlug);
        setAnnouncementSticky(data?.catalog_announcement_sticky === null || data?.catalog_announcement_sticky === undefined ? true : Boolean(data?.catalog_announcement_sticky));

        setSocialProofEnabled(Boolean(data?.catalog_social_proof_enabled));
        setSocialProofIntervalSeconds(clamp(Number(data?.catalog_social_proof_interval_seconds || 18), 5, 120));
        setSocialProofPosition(data?.catalog_social_proof_position === "right" ? "right" : "left");
        setSocialProofDurationSeconds(clamp(Number(data?.catalog_social_proof_duration_seconds || 5), 2, 20));
        setSocialProofMaxVisible(clamp(Number(data?.catalog_social_proof_max_visible || 2), 1, 5));
      } catch {
        if (!cancelled) {
          setMessage({ type: "error", text: "Erro ao carregar configurações de marketing." });
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();
    return () => {
      cancelled = true;
    };
  }, []);

  async function handleSave() {
    if (!userId) return;
    setSaving(true);
    setMessage(null);

    try {
      const supabase = getSupabaseClient();
      const payload = {
        catalog_announcement_enabled: announcementEnabled,
        catalog_announcement_text: announcementText.trim() || null,
        catalog_announcement_countdown_enabled: announcementCountdownEnabled,
        catalog_announcement_countdown_end_at: announcementCountdownEnabled ? toIsoOrNull(announcementCountdownEndAt) : null,
        catalog_announcement_coupon_id: announcementCouponId || null,
        catalog_announcement_show_coupon_badge: announcementShowCouponBadge,
        catalog_announcement_coupon_badge_color: announcementCouponBadgeColor || null,
        catalog_announcement_background_color: announcementBackgroundColor || null,
        catalog_announcement_text_color: announcementTextColor || null,
        catalog_announcement_button_label: announcementButtonLabel.trim() || null,
        catalog_announcement_button_url: announcementButtonResolvedUrl || null,
        catalog_announcement_sticky: announcementSticky,
        catalog_social_proof_enabled: socialProofEnabled,
        catalog_social_proof_interval_seconds: clamp(Number(socialProofIntervalSeconds) || 18, 5, 120),
        catalog_social_proof_position: socialProofPosition,
        catalog_social_proof_duration_seconds: clamp(Number(socialProofDurationSeconds) || 5, 2, 20),
        catalog_social_proof_max_visible: clamp(Number(socialProofMaxVisible) || 2, 1, 5),
      };

      let { error } = await supabase.from("profiles").update(payload).eq("id", userId);
      if (error && String(error.message || "").includes("catalog_announcement_coupon_badge_color")) {
        const fallbackPayload = {
          ...payload,
          catalog_announcement_coupon_badge_color: undefined as unknown,
        };
        ({ error } = await supabase.from("profiles").update(fallbackPayload).eq("id", userId));
      }
      if (error) throw error;
      setMessage({ type: "success", text: "Configurações de marketing salvas com sucesso." });
    } catch (error) {
      const detail = String((error as { message?: string } | null)?.message || "").trim();
      setMessage({ type: "error", text: detail ? `Não foi possível salvar as configurações. ${detail}` : "Não foi possível salvar as configurações." });
    } finally {
      setSaving(false);
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="h-6 w-6 animate-spin text-[var(--ks-color-primary)]" />
      </div>
    );
  }

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        title="Marketing do Catálogo"
        subtitle="Configure barra de aviso e notificações de prova social do catálogo público."
      />

      {message ? (
        <div
          className={`rounded-xl px-4 py-3 text-sm ${
            message.type === "success"
              ? "border border-emerald-200 bg-emerald-50 text-emerald-700"
              : "border border-rose-200 bg-rose-50 text-rose-700"
          }`}
        >
          {message.text}
        </div>
      ) : null}

      <div className="ks-surface p-6 space-y-6">
        <div className="flex items-center justify-between gap-3 pb-1 border-b border-[var(--ks-color-border-subtle)]">
          <div>
            <h2 className="text-xl font-semibold text-[var(--ks-color-text-primary)] flex items-center gap-2">
              <Megaphone className="h-5 w-5 text-[var(--ks-color-primary)]" />
              Barra de Aviso
            </h2>
            <p className="text-sm text-[var(--ks-color-text-muted)]">
              Barra fixa no topo do catálogo com mensagem promocional, contador e cupom.
            </p>
          </div>
          <Switch checked={announcementEnabled} onCheckedChange={setAnnouncementEnabled} />
        </div>

        <div className={`ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-2xl p-4 grid grid-cols-1 lg:grid-cols-2 gap-4 ${announcementEnabled ? "" : "opacity-60"}`}>
          <div className="ks-input-shell">
            <label className="ks-input-label" htmlFor="announcementText">Texto da barra</label>
            <textarea
              id="announcementText"
              value={announcementText}
              onChange={(event) => setAnnouncementText(event.target.value)}
              rows={4}
              placeholder="Ex: 🔥 Promoção relâmpago **hoje** apenas!"
              className="ks-input min-h-[112px] resize-y"
              disabled={!announcementEnabled}
            />
          </div>
          <div className="space-y-3">
            <div className="flex items-center justify-between rounded-xl border border-[var(--ks-color-border-subtle)] p-3">
              <div>
                <p className="text-sm font-medium text-[var(--ks-color-text-primary)]">Contador regressivo</p>
                <p className="text-xs text-[var(--ks-color-text-muted)]">Exibe tempo restante automaticamente.</p>
              </div>
              <Switch checked={announcementCountdownEnabled} onCheckedChange={setAnnouncementCountdownEnabled} disabled={!announcementEnabled} />
            </div>
            <Input
              id="announcementCountdownEndAt"
              type="datetime-local"
              label="Data e hora de término"
              value={announcementCountdownEndAt}
              onChange={(event) => setAnnouncementCountdownEndAt(event.target.value)}
              disabled={!announcementEnabled || !announcementCountdownEnabled}
            />
          </div>
        </div>

        <div className={`ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-2xl p-4 grid grid-cols-1 lg:grid-cols-2 gap-4 ${announcementEnabled ? "" : "opacity-60"}`}>
          <div className="ks-input-shell">
            <label className="ks-input-label" htmlFor="announcementCoupon">Cupom vinculado</label>
            <select
              id="announcementCoupon"
              className="ks-input"
              value={announcementCouponId}
              onChange={(event) => setAnnouncementCouponId(event.target.value)}
              disabled={!announcementEnabled}
            >
              <option value="">Nenhum cupom</option>
              {coupons.map((coupon) => (
                <option key={coupon.id} value={coupon.id}>
                  {coupon.code} {coupon.type === "percent" ? `(${coupon.value}% OFF)` : `(R$ ${coupon.value} OFF)`} {coupon.active ? "" : "- inativo"}
                </option>
              ))}
            </select>
          </div>
          <div className="space-y-3 rounded-xl border border-[var(--ks-color-border-subtle)] p-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-[var(--ks-color-text-primary)]">Badge de cupom clicável</p>
                <p className="text-xs text-[var(--ks-color-text-muted)]">Mostra selo de desconto e permite copiar o cupom.</p>
              </div>
              <Switch checked={announcementShowCouponBadge} onCheckedChange={setAnnouncementShowCouponBadge} disabled={!announcementEnabled || !announcementHasCoupon} />
            </div>
            {announcementHasCoupon ? (
              <label className="block">
                <span className="ks-input-label">Cor do badge do cupom</span>
                <span className="mt-1.5 inline-flex items-center gap-2.5">
                  <span
                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ks-color-border-subtle)]"
                    style={{ backgroundColor: normalizeHexColorInput(announcementCouponBadgeColor, "#FB7185") }}
                  />
                  <input
                    type="color"
                    value={normalizeHexColorInput(announcementCouponBadgeColor, "#FB7185")}
                    onChange={(event) => setAnnouncementCouponBadgeColor(event.target.value)}
                    disabled={!announcementEnabled || !announcementShowCouponBadge}
                    className="h-9 w-14 cursor-pointer rounded-full border border-[var(--ks-color-border-subtle)] bg-white p-1 disabled:cursor-not-allowed disabled:opacity-60"
                  />
                  <span className="text-xs font-semibold text-[var(--ks-color-text-muted)] uppercase">
                    {normalizeHexColorInput(announcementCouponBadgeColor, "#FB7185")}
                  </span>
                </span>
              </label>
            ) : (
              <p className="text-xs text-[var(--ks-color-text-muted)]">Selecione um cupom para configurar a cor do badge.</p>
            )}
          </div>
        </div>

        <div className={`ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-2xl p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 ${announcementEnabled ? "" : "opacity-60"}`}>
          <label className="block">
            <span className="ks-input-label">Cor de fundo</span>
            <span className="mt-1.5 inline-flex items-center gap-2.5">
              <span
                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ks-color-border-subtle)]"
                style={{ backgroundColor: normalizeHexColorInput(announcementBackgroundColor, "#111827") }}
              />
              <input
                type="color"
                value={normalizeHexColorInput(announcementBackgroundColor, "#111827")}
                onChange={(event) => setAnnouncementBackgroundColor(event.target.value)}
                disabled={!announcementEnabled}
                className="h-9 w-14 cursor-pointer rounded-full border border-[var(--ks-color-border-subtle)] bg-white p-1 disabled:cursor-not-allowed disabled:opacity-60"
              />
              <span className="text-xs font-semibold text-[var(--ks-color-text-muted)] uppercase">
                {normalizeHexColorInput(announcementBackgroundColor, "#111827")}
              </span>
            </span>
          </label>
          <label className="block">
            <span className="ks-input-label">Cor do texto</span>
            <span className="mt-1.5 inline-flex items-center gap-2.5">
              <span
                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ks-color-border-subtle)]"
                style={{ backgroundColor: normalizeHexColorInput(announcementTextColor, "#FFFFFF") }}
              />
              <input
                type="color"
                value={normalizeHexColorInput(announcementTextColor, "#FFFFFF")}
                onChange={(event) => setAnnouncementTextColor(event.target.value)}
                disabled={!announcementEnabled}
                className="h-9 w-14 cursor-pointer rounded-full border border-[var(--ks-color-border-subtle)] bg-white p-1 disabled:cursor-not-allowed disabled:opacity-60"
              />
              <span className="text-xs font-semibold text-[var(--ks-color-text-muted)] uppercase">
                {normalizeHexColorInput(announcementTextColor, "#FFFFFF")}
              </span>
            </span>
          </label>
          <Input
            id="announcementButtonLabel"
            label="Texto do botão"
            value={announcementButtonLabel}
            onChange={(event) => setAnnouncementButtonLabel(event.target.value)}
            placeholder="Comprar agora"
            disabled={!announcementEnabled}
          />
          <CustomSelect
            label="Destino do botão"
            options={buttonTargetOptions}
            value={announcementButtonTargetType}
            onChange={(value) => {
              const next = (value as AnnouncementButtonTargetType) || "custom";
              setAnnouncementButtonTargetType(next);
              if (next !== "custom") setAnnouncementButtonUrl("");
            }}
            placeholder="Selecione o destino"
            disabled={!announcementEnabled}
          />
          {announcementButtonTargetType === "custom" ? (
            <Input
              id="announcementButtonUrl"
              label="URL personalizada"
              value={announcementButtonUrl}
              onChange={(event) => setAnnouncementButtonUrl(event.target.value)}
              placeholder="/loja/categoria/ofertas"
              disabled={!announcementEnabled}
            />
          ) : null}
          {announcementButtonTargetType === "product" ? (
            <CustomSelect
              label="Produto de destino"
              options={productTargetOptions}
              value={announcementButtonProductId}
              onChange={setAnnouncementButtonProductId}
              placeholder="Selecione um produto"
              searchable
              disabled={!announcementEnabled}
            />
          ) : null}
          {announcementButtonTargetType === "category" ? (
            <CustomSelect
              label="Categoria de destino"
              options={categoryTargetOptions}
              value={announcementButtonCategorySlug}
              onChange={setAnnouncementButtonCategorySlug}
              placeholder="Selecione uma categoria"
              searchable
              disabled={!announcementEnabled}
            />
          ) : null}
          {announcementButtonTargetType === "subcategory" ? (
            <CustomSelect
              label="Subcategoria de destino"
              options={subcategoryTargetOptions}
              value={announcementButtonSubcategorySlug}
              onChange={setAnnouncementButtonSubcategorySlug}
              placeholder="Selecione uma subcategoria"
              searchable
              disabled={!announcementEnabled}
            />
          ) : null}
        </div>

        <div className={`ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-2xl p-4 flex items-center justify-between ${announcementEnabled ? "" : "opacity-60"}`}>
          <div>
            <p className="text-sm font-medium text-[var(--ks-color-text-primary)]">Fixar barra no topo</p>
            <p className="text-xs text-[var(--ks-color-text-muted)]">Mantém a barra visível enquanto o cliente navega.</p>
          </div>
          <Switch checked={announcementSticky} onCheckedChange={setAnnouncementSticky} disabled={!announcementEnabled} />
        </div>

        <div className="rounded-xl border border-dashed border-[var(--ks-color-border-subtle)] p-3">
          <p className="text-xs uppercase tracking-[0.14em] font-semibold text-[var(--ks-color-text-soft)] mb-2">Pré-visualização</p>
          <div className="rounded-lg px-3 py-2 flex flex-wrap items-center gap-2" style={{ backgroundColor: announcementBackgroundColor, color: announcementTextColor }}>
            {announcementEnabled && announcementHasVisibleContent ? (
              <>
                {announcementTextResolved ? <span className="text-sm font-medium">{announcementTextResolved}</span> : null}
                {announcementHasCoupon ? (
                  <span className="text-xs">{formatCouponSummary(selectedCoupon)}</span>
                ) : null}
                {announcementBadgeVisible ? (
                  <button
                    type="button"
                    className="inline-flex items-center gap-1.5 rounded-md border-2 border-dashed px-2.5 py-1 text-[11px] font-extrabold tracking-wide"
                    style={{
                      backgroundColor: announcementCouponBadgeColor,
                      borderColor: getContrastTextColor(announcementCouponBadgeColor) === "#FFFFFF" ? "rgba(255,255,255,0.45)" : "rgba(15,23,42,0.35)",
                      color: getContrastTextColor(announcementCouponBadgeColor),
                    }}
                  >
                    <span>{selectedCoupon?.code}</span>
                    <span className="inline-flex h-3.5 w-px" style={{ backgroundColor: getContrastTextColor(announcementCouponBadgeColor) === "#FFFFFF" ? "rgba(255,255,255,0.45)" : "rgba(15,23,42,0.35)" }} />
                    <Copy className="h-3.5 w-3.5" />
                  </button>
                ) : null}
                {announcementCountdownVisible ? (
                  <span className="text-xs px-2 py-1 rounded-full bg-black/20 border border-white/20 inline-flex items-center gap-1">
                    <Timer className="h-3 w-3" />
                    Contagem ativa
                  </span>
                ) : null}
                {announcementButtonVisible ? (
                  <span className="text-xs px-2 py-1 rounded-full bg-white/15 border border-white/20">
                    Botão: {announcementButtonLabel.trim()}
                  </span>
                ) : null}
              </>
            ) : (
              <span className="text-xs opacity-85">Barra desativada ou sem conteúdo visível.</span>
            )}
          </div>
        </div>
      </div>

      <div className="ks-surface p-6 space-y-6">
        <div className="flex items-center justify-between gap-3 pb-1 border-b border-[var(--ks-color-border-subtle)]">
          <div>
            <h2 className="text-xl font-semibold text-[var(--ks-color-text-primary)] flex items-center gap-2">
              <BellRing className="h-5 w-5 text-[var(--ks-color-primary)]" />
              Notificações de Compras
            </h2>
            <p className="text-sm text-[var(--ks-color-text-muted)]">
              Popups com prova social usando nomes brasileiros e produtos reais do catálogo.
            </p>
          </div>
          <Switch checked={socialProofEnabled} onCheckedChange={setSocialProofEnabled} />
        </div>

        <div className={`ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-2xl p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 ${socialProofEnabled ? "" : "opacity-60"}`}>
          <Input
            id="socialProofIntervalSeconds"
            type="number"
            min={5}
            max={120}
            label="Intervalo entre notificações (s)"
            value={String(socialProofIntervalSeconds)}
            onChange={(event) => setSocialProofIntervalSeconds(clamp(Number(event.target.value) || 18, 5, 120))}
            disabled={!socialProofEnabled}
          />
          <div className="ks-input-shell">
            <label className="ks-input-label" htmlFor="socialProofPosition">Posição na tela</label>
            <select
              id="socialProofPosition"
              className="ks-input"
              value={socialProofPosition}
              onChange={(event) => setSocialProofPosition(event.target.value === "right" ? "right" : "left")}
              disabled={!socialProofEnabled}
            >
              <option value="left">Esquerda</option>
              <option value="right">Direita</option>
            </select>
          </div>
          <Input
            id="socialProofDurationSeconds"
            type="number"
            min={2}
            max={20}
            label="Tempo de exibição (s)"
            value={String(socialProofDurationSeconds)}
            onChange={(event) => setSocialProofDurationSeconds(clamp(Number(event.target.value) || 5, 2, 20))}
            disabled={!socialProofEnabled}
          />
          <Input
            id="socialProofMaxVisible"
            type="number"
            min={1}
            max={5}
            label="Máximo simultâneo"
            value={String(socialProofMaxVisible)}
            onChange={(event) => setSocialProofMaxVisible(clamp(Number(event.target.value) || 2, 1, 5))}
            disabled={!socialProofEnabled}
          />
        </div>

        <div className="rounded-xl border border-dashed border-[var(--ks-color-border-subtle)] p-3">
          <p className="text-xs uppercase tracking-[0.14em] font-semibold text-[var(--ks-color-text-soft)] mb-2">Pré-visualização</p>
          {socialProofEnabled ? (
            <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2 flex items-center gap-2">
              <div className="h-10 w-10 rounded-lg bg-[var(--ks-color-primary)]/15 text-[var(--ks-color-primary)] flex items-center justify-center">
                <Sparkles className="h-4 w-4" />
              </div>
              <div className="min-w-0">
                <p className="text-sm font-semibold text-[var(--ks-color-text-primary)] line-clamp-1">{socialProofPreview}</p>
                <p className="text-xs text-[var(--ks-color-text-muted)]">
                  {socialProofPosition === "left" ? "Canto esquerdo" : "Canto direito"} • até {socialProofMaxVisible} popup(s)
                </p>
              </div>
            </div>
          ) : (
            <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2 text-xs text-[var(--ks-color-text-muted)]">
              Notificações desativadas.
            </div>
          )}
          <p className="text-xs text-[var(--ks-color-text-muted)] mt-2">
            Base com {BRAZILIAN_NAMES.length} nomes brasileiros e {products.length} produto(s) ativo(s) para simulação.
          </p>
        </div>
      </div>

      <div className="ks-surface p-4 flex justify-end">
        {podeMexerNoMarketing && (<Button onClick={handleSave} disabled={saving} icon={saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}>
          {saving ? "Salvando..." : "Salvar configurações de Marketing"}
        </Button>)}
      </div>
    </div>
  );
}