"use client";

import { useEffect, useMemo, useState } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext, resolveCompanyPublicProfileId } from "@/lib/company-context";
import { Switch } from "@/components/ui/switch";
import {
  Loader2,
  Plus,
  Trash2,
  ArrowUp,
  ArrowDown,
  Link as LinkIcon,
  Store,
  Truck,
  CreditCard,
  ShieldCheck,
  Package,
  Clock,
  BadgeCheck,
  MapPin,
  Headphones,
} from "lucide-react";
import Image from "next/image";
import ImageUpload from "@/components/image-upload";
import { CustomSelect } from "@/components/ui/custom-select";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";

type LinkType = "none" | "product" | "url";

interface ProductOption {
  id: string;
  name: string;
}

interface BannerRow {
  id: string;
  user_id: string;
  type: string;
  image_url: string;
  link_type: LinkType | null;
  product_id: string | null;
  link_url: string | null;
  open_in_new_tab: boolean | null;
  position: number | null;
  active: boolean | null;
  created_at: string;
}

interface InfoStripItem {
  icon: string;
  title: string;
  subtitle: string;
}

interface ProductTrustItem {
  icon: string;
  title: string;
}

const passthroughLoader = ({ src }: { src: string }) => src;

const DEFAULT_INFO_STRIP_ITEMS: InfoStripItem[] = [
  { icon: "truck", title: "Envio Nacional e Internacional", subtitle: "Frete econômico para todo Brasil" },
  { icon: "creditCard", title: "Parcele suas compras", subtitle: "Em até 3x sem juros no cartão" },
  { icon: "shieldCheck", title: "Compra 100% Segura", subtitle: "Seus dados protegidos" },
];

const DEFAULT_PRODUCT_TRUST_ITEMS: ProductTrustItem[] = [
  { icon: "truck", title: "Entrega Rápida e Segura" },
  { icon: "shieldCheck", title: "Garantia de Qualidade" },
];

const INFO_ICON_OPTIONS = [
  { value: "truck", label: "Caminhão", Icon: Truck },
  { value: "creditCard", label: "Cartão", Icon: CreditCard },
  { value: "shieldCheck", label: "Segurança", Icon: ShieldCheck },
  { value: "package", label: "Pacote", Icon: Package },
  { value: "clock", label: "Relógio", Icon: Clock },
  { value: "badgeCheck", label: "Garantia", Icon: BadgeCheck },
  { value: "mapPin", label: "Localização", Icon: MapPin },
  { value: "headphones", label: "Suporte", Icon: Headphones },
] as const;

function normalizeInfoStripItems(input: unknown): InfoStripItem[] {
  const base = Array.isArray(input) ? input : [];
  const items = base
    .map((x) => {
      const rec = x as Partial<InfoStripItem> | null;
      return {
        icon: typeof rec?.icon === "string" ? rec.icon : "",
        title: typeof rec?.title === "string" ? rec.title : "",
        subtitle: typeof rec?.subtitle === "string" ? rec.subtitle : "",
      };
    })
    .filter((x) => x.icon || x.title || x.subtitle);

  const filled = [...items];
  while (filled.length < 3) filled.push(DEFAULT_INFO_STRIP_ITEMS[filled.length] ?? DEFAULT_INFO_STRIP_ITEMS[0]);
  return filled.slice(0, 3);
}

function normalizeProductTrustItems(input: unknown): ProductTrustItem[] {
  const base = Array.isArray(input) ? input : [];
  const items = base
    .map((x) => {
      const rec = x as Partial<ProductTrustItem> | null;
      return {
        icon: typeof rec?.icon === "string" ? rec.icon : "",
        title: typeof rec?.title === "string" ? rec.title : "",
      };
    })
    .filter((x) => x.icon || x.title);
  const filled = [...items];
  while (filled.length < 2) filled.push(DEFAULT_PRODUCT_TRUST_ITEMS[filled.length] ?? DEFAULT_PRODUCT_TRUST_ITEMS[0]);
  return filled.slice(0, 2);
}

export default function CatalogBannersPage() {
  /* A tela abria para quem tinha `catalog.banners.read` e nao perguntava
     nada na hora de gravar: dava para criar e apagar banner da loja so
     conseguindo abrir a pagina. */
  const { pode } = usePermissoes();
  const podeMexerNosBanners = pode("catalog.banners.write");

  const [loading, setLoading] = useState(true);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [userId, setUserId] = useState<string | null>(null);
  const [slideEnabled, setSlideEnabled] = useState(false);
  const [infoStripEnabled, setInfoStripEnabled] = useState(true);
  const [infoStripItems, setInfoStripItems] = useState<InfoStripItem[]>(DEFAULT_INFO_STRIP_ITEMS);
  const [productTrustItems, setProductTrustItems] = useState<ProductTrustItem[]>(DEFAULT_PRODUCT_TRUST_ITEMS);
  const [activeTab, setActiveTab] = useState<"slide" | "info">("slide");

  const [products, setProducts] = useState<ProductOption[]>([]);
  const [banners, setBanners] = useState<BannerRow[]>([]);

  const [newImageUrl, setNewImageUrl] = useState("");
  const [newLinkType, setNewLinkType] = useState<LinkType>("none");
  const [newProductId, setNewProductId] = useState<string>("");
  const [newLinkUrl, setNewLinkUrl] = useState("");
  const [newOpenInNewTab, setNewOpenInNewTab] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const sortedBanners = useMemo(() => {
    return [...banners].sort((a, b) => {
      const ap = a.position ?? 0;
      const bp = b.position ?? 0;
      if (ap !== bp) return ap - bp;
      return a.created_at.localeCompare(b.created_at);
    });
  }, [banners]);

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

    async function run() {
      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 [productsRes, bannersRes, profileRes] = await Promise.all([
          supabase
            .from("products")
            .select("id,name")
            .in("user_id", tenantIds)
            .order("name", { ascending: true }),
          supabase
            .from("catalog_banners")
            .select("*")
            .in("user_id", tenantIds)
            .eq("type", "slide")
            .order("position", { ascending: true })
            .order("created_at", { ascending: true }),
          supabase
            .from("profiles")
            .select("catalog_slide_enabled,catalog_info_strip_enabled,catalog_info_strip_items,catalog_product_trust_items")
            .eq("id", profileId)
            .single(),
        ]);

        if (cancelled) return;

        if (!productsRes.error) {
          setProducts((productsRes.data || []) as ProductOption[]);
        }

        if (bannersRes.error) {
          setBanners([]);
          setMessage({ type: "error", text: "Não foi possível carregar banners. Rode o SQL apps/admin/update_schema.sql no Supabase." });
        } else {
          setBanners((bannersRes.data || []) as BannerRow[]);
        }

        if (profileRes.error) {
          setSlideEnabled(false);
          setInfoStripEnabled(true);
          setInfoStripItems(DEFAULT_INFO_STRIP_ITEMS);
        } else {
          const data = profileRes.data as {
            catalog_slide_enabled?: boolean | null;
            catalog_info_strip_enabled?: boolean | null;
            catalog_info_strip_items?: unknown;
            catalog_product_trust_items?: unknown;
          } | null;

          setSlideEnabled(Boolean(data?.catalog_slide_enabled));
          setInfoStripEnabled(data?.catalog_info_strip_enabled === null || data?.catalog_info_strip_enabled === undefined ? true : Boolean(data?.catalog_info_strip_enabled));
          setInfoStripItems(normalizeInfoStripItems(data?.catalog_info_strip_items));
          setProductTrustItems(normalizeProductTrustItems(data?.catalog_product_trust_items));
        }
      } catch {
        setMessage({ type: "error", text: "Erro ao carregar banners." });
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

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

  const nextPosition = useMemo(() => {
    if (banners.length === 0) return 1;
    return Math.max(...banners.map((b) => b.position ?? 0)) + 1;
  }, [banners]);

  const resetNewForm = () => {
    setNewImageUrl("");
    setNewLinkType("none");
    setNewProductId("");
    setNewLinkUrl("");
    setNewOpenInNewTab(false);
  };

  const normalizeNewPayload = () => {
    const linkType = newLinkType;
    const payload: Partial<BannerRow> = {
      type: "slide",
      image_url: newImageUrl.trim(),
      link_type: linkType,
      product_id: linkType === "product" ? (newProductId || null) : null,
      link_url: linkType === "url" ? (newLinkUrl.trim() || null) : null,
      open_in_new_tab: newOpenInNewTab,
      position: nextPosition,
      active: true,
    };
    return payload;
  };

  async function handleAddBanner() {
    setMessage(null);
    if (!userId) return;

    const payload = normalizeNewPayload();
    if (!payload.image_url) {
      setMessage({ type: "error", text: "Envie uma imagem para o banner." });
      return;
    }

    if (payload.link_type === "product" && !payload.product_id) {
      setMessage({ type: "error", text: "Selecione um produto ou mude o tipo de link." });
      return;
    }

    if (payload.link_type === "url" && !payload.link_url) {
      setMessage({ type: "error", text: "Informe um link externo ou mude o tipo de link." });
      return;
    }

    try {
      setBusyId("new");
      const supabase = getSupabaseClient();
      const { data, error } = await supabase
        .from("catalog_banners")
        .insert({ ...payload, user_id: userId })
        .select("*")
        .single();

      if (error) throw error;
      setBanners((prev) => [data as BannerRow, ...prev]);
      resetNewForm();
      setMessage({ type: "success", text: "Banner adicionado!" });
    } catch {
      setMessage({ type: "error", text: "Erro ao adicionar banner. Verifique o banco." });
    } finally {
      setBusyId(null);
    }
  }

  async function setSlideEnabledOnServer(next: boolean) {
    if (!userId) return;
    try {
      setBusyId("slide-toggle");
      setMessage(null);
      setSlideEnabled(next);

      const supabase = getSupabaseClient();
      const { error } = await supabase
        .from("profiles")
        .update({ catalog_slide_enabled: next })
        .eq("id", userId);

      if (error) throw error;
      setMessage({ type: "success", text: "Configuração do slide salva!" });
    } catch {
      setSlideEnabled((prev) => !prev);
      setMessage({ type: "error", text: "Erro ao salvar configuração do slide. Rode o SQL apps/admin/update_schema.sql no Supabase." });
    } finally {
      setBusyId(null);
    }
  }

  async function setInfoStripEnabledOnServer(next: boolean) {
    if (!userId) return;
    try {
      setBusyId("info-strip-toggle");
      setMessage(null);
      setInfoStripEnabled(next);

      const supabase = getSupabaseClient();
      const { error } = await supabase
        .from("profiles")
        .update({ catalog_info_strip_enabled: next })
        .eq("id", userId);

      if (error) throw error;
      setMessage({ type: "success", text: "Configuração das informações salva!" });
    } catch {
      setInfoStripEnabled((prev) => !prev);
      setMessage({ type: "error", text: "Erro ao salvar configuração. Rode o SQL apps/admin/update_schema.sql no Supabase." });
    } finally {
      setBusyId(null);
    }
  }

  async function saveInfoStripItemsOnServer() {
    if (!userId) return;
    try {
      setBusyId("info-strip-save");
      setMessage(null);

      const supabase = getSupabaseClient();
      const payload = normalizeInfoStripItems(infoStripItems);
      setInfoStripItems(payload);

      const { error } = await supabase
        .from("profiles")
        .update({ catalog_info_strip_items: payload })
        .eq("id", userId);

      if (error) throw error;
      setMessage({ type: "success", text: "Informações atualizadas!" });
    } catch {
      setMessage({ type: "error", text: "Erro ao salvar informações. Rode o SQL apps/admin/update_schema.sql no Supabase." });
    } finally {
      setBusyId(null);
    }
  }

  async function saveProductTrustItemsOnServer() {
    if (!userId) return;
    try {
      setBusyId("product-trust-save");
      setMessage(null);
      const supabase = getSupabaseClient();
      const payload = normalizeProductTrustItems(productTrustItems);
      setProductTrustItems(payload);
      const { error } = await supabase
        .from("profiles")
        .update({ catalog_product_trust_items: payload })
        .eq("id", userId);
      if (error) throw error;
      setMessage({ type: "success", text: "Informações da página de produto atualizadas!" });
    } catch {
      setMessage({ type: "error", text: "Erro ao salvar informações da página de produto. Rode o SQL apps/admin/update_schema.sql no Supabase." });
    } finally {
      setBusyId(null);
    }
  }

  const updateInfoStripItem = (index: number, patch: Partial<InfoStripItem>) => {
    setInfoStripItems((prev) => prev.map((it, idx) => (idx === index ? { ...it, ...patch } : it)));
  };

  const updateProductTrustItem = (index: number, patch: Partial<ProductTrustItem>) => {
    setProductTrustItems((prev) => prev.map((it, idx) => (idx === index ? { ...it, ...patch } : it)));
  };

  async function updateBanner(id: string, patch: Partial<BannerRow>) {
    try {
      if (!userId) return;
      setBusyId(id);
      setMessage(null);
      setBanners((prev) => prev.map((b) => (b.id === id ? { ...b, ...patch } : b)));

      const supabase = getSupabaseClient();
      const { error } = await supabase
        .from("catalog_banners")
        .update(patch)
        .eq("id", id)
        .eq("user_id", userId);
      if (error) throw error;
      setMessage({ type: "success", text: "Banner atualizado!" });
    } catch {
      setMessage({ type: "error", text: "Erro ao atualizar banner." });
    } finally {
      setBusyId(null);
    }
  }

  async function deleteBanner(id: string) {
    try {
      if (!userId) return;
      setBusyId(id);
      setMessage(null);
      setBanners((prev) => prev.filter((b) => b.id !== id));
      const supabase = getSupabaseClient();
      const { error } = await supabase
        .from("catalog_banners")
        .delete()
        .eq("id", id)
        .eq("user_id", userId);
      if (error) throw error;
      setMessage({ type: "success", text: "Banner removido!" });
    } catch {
      setMessage({ type: "error", text: "Erro ao remover banner." });
    } finally {
      setBusyId(null);
    }
  }

  async function moveBanner(id: string, direction: "up" | "down") {
    const list = sortedBanners;
    const index = list.findIndex((b) => b.id === id);
    if (index < 0) return;

    const swapWith = direction === "up" ? index - 1 : index + 1;
    if (swapWith < 0 || swapWith >= list.length) return;

    const a = list[index];
    const b = list[swapWith];

    const aPos = a.position ?? index + 1;
    const bPos = b.position ?? swapWith + 1;

    await updateBanner(a.id, { position: bPos });
    await updateBanner(b.id, { position: aPos });
  }

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

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Catálogo"
        title="Banners e faixas"
        subtitle="Controle o slide do topo e a faixa de informações do catálogo público."
      />

      <div className="flex p-1 bg-[rgba(244,245,255,0.9)] rounded-xl w-full md:w-fit overflow-x-auto">
        <button
          onClick={() => setActiveTab("slide")}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 whitespace-nowrap ${
            activeTab === "slide"
              ? "bg-white shadow-sm text-[var(--ks-color-text-primary)]"
              : "text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]"
          }`}
        >
          <Store size={16} />
          Slide
        </button>
        <button
          onClick={() => setActiveTab("info")}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 whitespace-nowrap ${
            activeTab === "info"
              ? "bg-white shadow-sm text-[var(--ks-color-text-primary)]"
              : "text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]"
          }`}
        >
          <Truck size={16} />
          Informações
        </button>
      </div>

      {message && (
        <div
          className={`rounded-xl border px-4 py-3 text-sm ${
            message.type === "success"
              ? "border-[var(--ks-color-success-border)] bg-[var(--ks-color-success-light)] text-[var(--ks-color-success)]"
              : "border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] text-[var(--ks-color-text-primary)]"
          }`}
        >
          {message.text}
        </div>
      )}

      {activeTab === "slide" ? (
        <>
          <div className="ks-surface p-6 space-y-4">
            <div className="flex items-center justify-between gap-4">
              <div>
                <div className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                  Habilitar slide
                </div>
                <div className="text-xs text-[var(--ks-color-text-soft)]">
                  Quando desabilitado, o slide não aparece no catálogo público.
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Switch
                  checked={slideEnabled}
                  onCheckedChange={(checked) => setSlideEnabledOnServer(checked)}
                  disabled={busyId === "slide-toggle" || !podeMexerNosBanners}
                />
                <span className="text-sm text-[var(--ks-color-text-muted)]">
                  {slideEnabled ? "Ativo" : "Desativado"}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between gap-4">
              <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)] flex items-center gap-2">
                <LinkIcon className="w-5 h-5 text-[var(--ks-color-primary)]" />
                Slide (Topo do Catálogo)
              </h2>
              <Button
                type="button"
                onClick={handleAddBanner}
                disabled={!slideEnabled || busyId === "new" || !newImageUrl || !podeMexerNosBanners}
              >
                {busyId === "new" ? (
                  <Loader2 className="w-4 h-4 animate-spin" />
                ) : (
                  <Plus size={18} />
                )}
                Adicionar
              </Button>
            </div>

            <div className="text-sm text-[var(--ks-color-text-muted)]">
              <div className="font-medium text-[var(--ks-color-text-primary)]">
                Tamanho da imagem
              </div>
              <div>Envie exatamente 1920 × 540 px (proporção 32:9).</div>
              <div>A imagem é enviada em resolução original (sem reduzir qualidade).</div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="space-y-2 lg:col-span-1">
                <label className="block text-sm font-medium text-[var(--ks-color-text-muted)]">
                  Imagem do banner
                </label>
                <ImageUpload
                  bucket="products"
                  folder={userId ? `banners/${userId}` : "banners"}
                  value={newImageUrl}
                  onChange={setNewImageUrl}
                  disabled={!slideEnabled || !podeMexerNosBanners}
                />
              </div>

              <div className="space-y-4 lg:col-span-2">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-[var(--ks-color-text-muted)]">
                      Tipo de link
                    </label>
                    <CustomSelect
                      options={[
                        { value: "none", label: "Sem link" },
                        { value: "product", label: "Abrir produto do catálogo" },
                        { value: "url", label: "Abrir link externo" },
                      ]}
                      value={newLinkType}
                      onChange={(value) => setNewLinkType(value as LinkType)}
                    />
                  </div>

                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-[var(--ks-color-text-muted)]">
                      Abrir link
                    </label>
                    <div className="flex items-center gap-3 h-10">
                      <label className="flex items-center gap-2 text-sm text-[var(--ks-color-text-muted)]">
                        <input
                          type="checkbox"
                          checked={newOpenInNewTab}
                          onChange={(e) => setNewOpenInNewTab(e.target.checked)}
                          className="h-4 w-4"
                        />
                        Em nova aba
                      </label>
                    </div>
                  </div>
                </div>

                {newLinkType === "product" && (
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-[var(--ks-color-text-muted)]">
                      Produto
                    </label>
                    <CustomSelect
                      options={products
                        .filter((p) => p.id)
                        .map((p) => ({ value: p.id, label: p.name }))}
                      value={newProductId}
                      onChange={setNewProductId}
                      placeholder="Selecione um produto"
                      searchable
                    />
                  </div>
                )}

                {newLinkType === "url" && (
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-[var(--ks-color-text-muted)]">
                      Link externo
                    </label>
                    <input
                      value={newLinkUrl}
                      onChange={(e) => setNewLinkUrl(e.target.value)}
                      placeholder="https://..."
                      className="w-full px-3 py-2 border border-[var(--ks-color-border-subtle)] rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-[var(--ks-color-primary)] focus:border-transparent"
                    />
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="ks-surface p-6 space-y-4">
            <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
              Banners cadastrados
            </h2>

            {sortedBanners.length === 0 ? (
              <div className="text-sm text-[var(--ks-color-text-soft)]">
                Nenhum banner cadastrado ainda.
              </div>
            ) : (
              <div className="space-y-4">
                {sortedBanners.map((banner, idx) => {
                  const linkType: LinkType = (banner.link_type as LinkType) || "none";
                  const isBusy = busyId === banner.id || !podeMexerNosBanners;

                  return (
                    <div
                      key={banner.id}
                      className="ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-xl p-4 flex flex-col gap-4"
                    >
                      <div className="flex items-start gap-4">
                        <div className="w-40 h-20 rounded-lg overflow-hidden bg-[rgba(244,245,255,0.9)] border border-[var(--ks-color-border-subtle)] flex-shrink-0">
                          {banner.image_url ? (
                            <Image
                              src={banner.image_url}
                              alt="Banner"
                              className="w-full h-full object-cover"
                              width={160}
                              height={80}
                              loader={passthroughLoader}
                            />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center text-[var(--ks-color-text-soft)] text-sm">
                              Sem imagem
                            </div>
                          )}
                        </div>

                        <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-3">
                          <div className="space-y-1">
                            <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                              Ativo
                            </label>
                            <CustomSelect
                              options={[
                                { value: "1", label: "Sim" },
                                { value: "0", label: "Não" },
                              ]}
                              value={banner.active ? "1" : "0"}
                              onChange={(value) => updateBanner(banner.id, { active: value === "1" })}
                              disabled={isBusy}
                            />
                          </div>

                          <div className="space-y-1">
                            <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                              Tipo de link
                            </label>
                            <CustomSelect
                              options={[
                                { value: "none", label: "Sem link" },
                                { value: "product", label: "Produto" },
                                { value: "url", label: "Externo" },
                              ]}
                              value={linkType}
                              onChange={(value) => {
                                const next = value as LinkType;
                                updateBanner(banner.id, {
                                  link_type: next,
                                  product_id: next === "product" ? banner.product_id : null,
                                  link_url: next === "url" ? banner.link_url : null,
                                });
                              }}
                              disabled={isBusy}
                            />
                          </div>

                          <div className="space-y-1">
                            <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                              Abrir em nova aba
                            </label>
                            <CustomSelect
                              options={[
                                { value: "0", label: "Não" },
                                { value: "1", label: "Sim" },
                              ]}
                              value={banner.open_in_new_tab ? "1" : "0"}
                              onChange={(value) => updateBanner(banner.id, { open_in_new_tab: value === "1" })}
                              disabled={isBusy}
                            />
                          </div>

                          {linkType === "product" && (
                            <div className="space-y-1 md:col-span-2">
                              <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                                Produto
                              </label>
                              <CustomSelect
                                options={products.map((p) => ({ value: p.id, label: p.name }))}
                                value={banner.product_id || ""}
                                onChange={(value) => updateBanner(banner.id, { product_id: value || null })}
                                disabled={isBusy}
                                placeholder="Selecione um produto"
                                searchable
                              />
                            </div>
                          )}

                          {linkType === "url" && (
                            <div className="space-y-1 md:col-span-2">
                              <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                                Link externo
                              </label>
                              <input
                                value={banner.link_url || ""}
                                onChange={(e) => setBanners((prev) => prev.map((b) => (b.id === banner.id ? { ...b, link_url: e.target.value } : b)))}
                                onBlur={(e) => updateBanner(banner.id, { link_url: e.target.value.trim() || null })}
                                disabled={isBusy}
                                placeholder="https://..."
                                className="w-full px-3 py-2 border border-[var(--ks-color-border-subtle)] rounded-md bg-white text-sm"
                              />
                            </div>
                          )}
                        </div>

                        <div className="flex flex-row md:flex-col gap-2 w-full md:w-auto">
                          <button
                            type="button"
                            onClick={() => moveBanner(banner.id, "up")}
                            disabled={isBusy || idx === 0}
                            className="flex-1 md:flex-none px-3 py-2 rounded-lg border border-[var(--ks-color-border-subtle)] bg-white hover:bg-[rgba(244,245,255,0.9)] disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                          >
                            <ArrowUp size={16} />
                            <span className="md:hidden">Subir</span>
                            <span className="hidden md:inline">Subir</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => moveBanner(banner.id, "down")}
                            disabled={isBusy || idx === sortedBanners.length - 1}
                            className="flex-1 md:flex-none px-3 py-2 rounded-lg border border-[var(--ks-color-border-subtle)] bg-white hover:bg-[rgba(244,245,255,0.9)] disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                          >
                            <ArrowDown size={16} />
                            <span className="md:hidden">Descer</span>
                            <span className="hidden md:inline">Descer</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => deleteBanner(banner.id)}
                            disabled={isBusy}
                            className="flex-1 md:flex-none px-3 py-2 rounded-lg border border-[var(--ks-color-border-subtle)] bg-white hover:bg-[rgba(244,245,255,0.9)] disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                          >
                            <Trash2 size={16} />
                            <span className="md:hidden">Remover</span>
                            <span className="hidden md:inline">Remover</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </>
      ) : (
        <div className="ks-surface p-6 space-y-6">
          <div className="flex items-center justify-between gap-4">
            <div>
              <div className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                Habilitar informações
              </div>
              <div className="text-xs text-[var(--ks-color-text-soft)]">
                Exibe a faixa de informações (ícone + textos) no topo do catálogo.
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Switch
                checked={infoStripEnabled}
                onCheckedChange={(checked) => setInfoStripEnabledOnServer(checked)}
                disabled={busyId === "info-strip-toggle" || !podeMexerNosBanners}
              />
              <span className="text-sm text-[var(--ks-color-text-muted)]">
                {infoStripEnabled ? "Ativo" : "Desativado"}
              </span>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between gap-4">
                <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
                  Itens
                </h2>
                <Button
                  type="button"
                  onClick={saveInfoStripItemsOnServer}
                  disabled={busyId === "info-strip-save" || !podeMexerNosBanners}
                >
                  {busyId === "info-strip-save" ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : null}
                  Salvar
                </Button>
              </div>

              <div className="space-y-4">
                {infoStripItems.map((item, idx) => {
                  const selected = INFO_ICON_OPTIONS.find((x) => x.value === item.icon) ?? INFO_ICON_OPTIONS[0];
                  const SelectedIcon = selected.Icon;

                  return (
                    <div
                      key={idx}
                      className="ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-xl p-4 space-y-3"
                    >
                      <div className="flex items-center justify-between">
                        <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                          Item {idx + 1}
                        </div>
                        <div className="p-2 rounded-lg bg-[rgba(244,245,255,0.9)] border border-[var(--ks-color-border-subtle)]">
                          <SelectedIcon size={18} className="text-[var(--ks-color-success)]" />
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                        <div className="space-y-1">
                          <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                            Ícone
                          </label>
                          <CustomSelect
                            options={INFO_ICON_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label, icon: opt.Icon }))}
                            value={item.icon}
                            onChange={(value) => updateInfoStripItem(idx, { icon: value })}
                          />
                        </div>

                        <div className="space-y-1 md:col-span-2">
                          <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                            Título
                          </label>
                          <input
                            value={item.title}
                            onChange={(e) => updateInfoStripItem(idx, { title: e.target.value })}
                            className="w-full px-3 py-2 border border-[var(--ks-color-border-subtle)] rounded-md bg-white text-sm"
                          />
                        </div>

                        <div className="space-y-1 md:col-span-3">
                          <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                            Texto
                          </label>
                          <input
                            value={item.subtitle}
                            onChange={(e) => updateInfoStripItem(idx, { subtitle: e.target.value })}
                            className="w-full px-3 py-2 border border-[var(--ks-color-border-subtle)] rounded-md bg-white text-sm"
                          />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="space-y-3">
              <div className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
                Pré-visualização
              </div>
              <div className="ks-surface-soft rounded-xl overflow-hidden border border-[var(--ks-color-border-subtle)]">
                <div className="bg-white py-4 border-b border-[var(--ks-color-border-subtle)]">
                  <div className="px-4 sm:px-6">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 divide-y md:divide-y-0 md:divide-x divide-[rgba(226,232,255,0.7)]">
                      {infoStripItems.map((item, idx) => {
                        const selected = INFO_ICON_OPTIONS.find((x) => x.value === item.icon) ?? INFO_ICON_OPTIONS[0];
                        const Icon = selected.Icon;
                        return (
                          <div
                            key={idx}
                            className={`flex items-center justify-center md:justify-start gap-4 p-2 ${
                              idx === 0 ? "" : "md:pl-8"
                            }`}
                          >
                            <div className="p-3 rounded-full bg-[rgba(244,245,255,0.9)] text-[var(--ks-color-text-soft)] shrink-0">
                              <Icon size={24} className="text-[var(--ks-color-success)]" />
                            </div>
                            <div className="text-left">
                              <h3 className="font-bold text-[var(--ks-color-text-primary)] text-sm">
                                {item.title || "Título"}
                              </h3>
                              <p className="text-xs text-[var(--ks-color-text-soft)]">
                                {item.subtitle || "Texto"}
                              </p>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
              <div className="text-xs text-[var(--ks-color-text-soft)]">
                As informações aparecem logo abaixo do slide no catálogo público.
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-2">
            <div className="space-y-4">
              <div className="flex items-center justify-between gap-4">
                <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
                  Página de produto
                </h2>
                <Button
                  type="button"
                  onClick={saveProductTrustItemsOnServer}
                  disabled={busyId === "product-trust-save" || !podeMexerNosBanners}
                >
                  {busyId === "product-trust-save" ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : null}
                  Salvar
                </Button>
              </div>

              <div className="text-xs text-[var(--ks-color-text-soft)]">
                Edite os selos exibidos abaixo do botão de compra na página pública do produto.
              </div>

              <div className="space-y-4">
                {productTrustItems.map((item, idx) => {
                  const selected = INFO_ICON_OPTIONS.find((x) => x.value === item.icon) ?? INFO_ICON_OPTIONS[0];
                  const SelectedIcon = selected.Icon;
                  return (
                    <div
                      key={`trust-${idx}`}
                      className="ks-surface-soft border border-[var(--ks-color-border-subtle)] rounded-xl p-4 space-y-3"
                    >
                      <div className="flex items-center justify-between">
                        <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                          Selo {idx + 1}
                        </div>
                        <div className="p-2 rounded-lg bg-[rgba(244,245,255,0.9)] border border-[var(--ks-color-border-subtle)]">
                          <SelectedIcon size={18} className="text-[var(--ks-color-success)]" />
                        </div>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                        <div className="space-y-1">
                          <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                            Ícone
                          </label>
                          <CustomSelect
                            options={INFO_ICON_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label, icon: opt.Icon }))}
                            value={item.icon}
                            onChange={(value) => updateProductTrustItem(idx, { icon: value })}
                          />
                        </div>
                        <div className="space-y-1 md:col-span-2">
                          <label className="block text-xs font-medium text-[var(--ks-color-text-muted)]">
                            Texto
                          </label>
                          <input
                            value={item.title}
                            onChange={(e) => updateProductTrustItem(idx, { title: e.target.value })}
                            className="w-full px-3 py-2 border border-[var(--ks-color-border-subtle)] rounded-md bg-white text-sm"
                          />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="space-y-3">
              <div className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
                Pré-visualização da página de produto
              </div>
              <div className="ks-surface-soft rounded-xl border border-[var(--ks-color-border-subtle)] p-4 bg-white">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 border-t border-[var(--ks-color-border-subtle)]">
                  {productTrustItems.map((item, idx) => {
                    const selected = INFO_ICON_OPTIONS.find((x) => x.value === item.icon) ?? INFO_ICON_OPTIONS[0];
                    const Icon = selected.Icon;
                    return (
                      <div key={`preview-trust-${idx}`} className="flex items-center gap-3">
                        <Icon className="text-gray-400 shrink-0" size={20} />
                        <span className="text-xs font-bold text-gray-700">
                          {item.title || "Texto do selo"}
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="text-xs text-[var(--ks-color-text-soft)]">
                Esses selos aparecem no final do card de compra da página de produto.
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}