"use client";

import {
  Columns3,
  GalleryHorizontalEnd,
  Grid2x2,
  Image as ImageIcon,
  LayoutGrid,
  ListChecks,
  CircleDot,
  Sparkles,
  Tags,
  Tag,
  Zap,
  Ticket,
  Timer,
  Radio,
  TrendingUp,
  PackagePlus,
  History,
  Clapperboard,
  Newspaper,
  MessageCircleQuestion,
  MapPin,
  Megaphone,
  MousePointerClick,
  SquareSplitHorizontal,
  type LucideIcon,
} from "lucide-react";
import type { Modo } from "@/lib/pagina-inicial";

/* O ícone de cada tipo de seção, na mesma família do resto do painel. */
export const ICONE_DO_MODO: Record<Modo, LucideIcon> = {
  manual_products: ListChecks,
  all_products: LayoutGrid,
  category_products: Tag,
  subcategory_products: Tags,
  image_banner: ImageIcon,
  category_navigator: CircleDot,
  image_grid: Columns3,
  banner_carousel: GalleryHorizontalEnd,
  featured_products: Sparkles,
  category_circles: Grid2x2,
  flash_offer: Zap,
  coupon_highlight: Ticket,
  order_cutoff: Timer,
  next_live: Radio,
  auto_list: TrendingUp,
  combo_highlight: PackagePlus,
  recently_viewed: History,
  video_section: Clapperboard,
  text_image: Newspaper,
  faq: MessageCircleQuestion,
  store_location: MapPin,
  marquee: Megaphone,
  shoppable_image: MousePointerClick,
  before_after: SquareSplitHorizontal,
};

/* A cor de acento de cada família (imagem, produto, navegação): só no selo
   pequeno, nunca em superfície inteira. */
export const COR_DO_MODO: Record<Modo, string> = {
  image_banner: "linear-gradient(135deg,#f0526e,#d6304c)",
  banner_carousel: "linear-gradient(135deg,#f0526e,#d6304c)",
  image_grid: "linear-gradient(135deg,#f0526e,#d6304c)",
  manual_products: "linear-gradient(135deg,#7346e8,#5228bd)",
  all_products: "linear-gradient(135deg,#7346e8,#5228bd)",
  category_products: "linear-gradient(135deg,#7346e8,#5228bd)",
  subcategory_products: "linear-gradient(135deg,#7346e8,#5228bd)",
  featured_products: "linear-gradient(135deg,#7346e8,#5228bd)",
  category_navigator: "linear-gradient(135deg,#2f9bf0,#1b7fce)",
  category_circles: "linear-gradient(135deg,#2f9bf0,#1b7fce)",
  /* Os blocos novos: vendas (laranja), conteúdo (verde) e imagens (rosa). */
  shoppable_image: "linear-gradient(135deg,#f0526e,#d6304c)",
  before_after: "linear-gradient(135deg,#f0526e,#d6304c)",
  auto_list: "linear-gradient(135deg,#7346e8,#5228bd)",
  combo_highlight: "linear-gradient(135deg,#7346e8,#5228bd)",
  recently_viewed: "linear-gradient(135deg,#7346e8,#5228bd)",
  flash_offer: "linear-gradient(135deg,#ff8a1f,#e5590b)",
  coupon_highlight: "linear-gradient(135deg,#ff8a1f,#e5590b)",
  order_cutoff: "linear-gradient(135deg,#ff8a1f,#e5590b)",
  next_live: "linear-gradient(135deg,#ff8a1f,#e5590b)",
  marquee: "linear-gradient(135deg,#ff8a1f,#e5590b)",
  video_section: "linear-gradient(135deg,#14b88a,#0b8f6a)",
  text_image: "linear-gradient(135deg,#14b88a,#0b8f6a)",
  faq: "linear-gradient(135deg,#14b88a,#0b8f6a)",
  store_location: "linear-gradient(135deg,#14b88a,#0b8f6a)",
};

export function SeloDoModo({ modo, tamanho = 32 }: { modo: Modo; tamanho?: number }) {
  const Icone = ICONE_DO_MODO[modo];
  return (
    <span
      aria-hidden
      className="flex shrink-0 items-center justify-center rounded-[10px] text-white"
      style={{ width: tamanho, height: tamanho, background: COR_DO_MODO[modo], boxShadow: "0 4px 12px -4px rgba(45,30,105,.35)" }}
    >
      <Icone size={Math.round(tamanho * 0.5)} strokeWidth={2.3} />
    </span>
  );
}

/* O desenho de cada tipo em miniatura, para a pessoa reconhecer antes de pôr. */
export function DesenhoDoModo({ modo, className = "" }: { modo: Modo; className?: string }) {
  const tinta = "currentColor";
  const claro = "color-mix(in srgb, currentColor 22%, transparent)";
  const corpo = (() => {
    switch (modo) {
      case "image_banner":
        return <rect x="4" y="10" width="72" height="24" rx="4" fill={claro} />;
      case "banner_carousel":
        return (
          <>
            <rect x="12" y="8" width="56" height="24" rx="4" fill={claro} />
            <rect x="2" y="12" width="7" height="16" rx="2" fill={claro} opacity=".6" />
            <rect x="71" y="12" width="7" height="16" rx="2" fill={claro} opacity=".6" />
            <circle cx="35" cy="37" r="1.6" fill={tinta} />
            <circle cx="40" cy="37" r="1.6" fill={claro} />
            <circle cx="45" cy="37" r="1.6" fill={claro} />
          </>
        );
      case "image_grid":
        return (
          <>
            <rect x="4" y="8" width="34" height="28" rx="4" fill={claro} />
            <rect x="42" y="8" width="34" height="12" rx="3" fill={claro} />
            <rect x="42" y="24" width="34" height="12" rx="3" fill={claro} />
          </>
        );
      case "flash_offer":
        return (
          <>
            <rect x="2" y="4" width="76" height="34" rx="5" fill={claro} />
            {[44, 54, 64].map((x) => (
              <rect key={x} x={x} y="9" width="8" height="9" rx="2" fill={tinta} opacity=".55" />
            ))}
            {[8, 26].map((x) => (
              <rect key={x} x={x} y="20" width="14" height="14" rx="2.5" fill={tinta} opacity=".3" />
            ))}
            <rect x="8" y="9" width="22" height="4" rx="2" fill={tinta} opacity=".6" />
          </>
        );
      case "coupon_highlight":
        return (
          <>
            <rect x="4" y="9" width="72" height="24" rx="5" fill={claro} />
            <rect x="4" y="9" width="24" height="24" rx="5" fill={tinta} opacity=".45" />
            <rect x="36" y="15" width="22" height="5" rx="2" fill={tinta} opacity=".5" />
            <rect x="36" y="24" width="30" height="4" rx="2" fill={claro} />
          </>
        );
      case "order_cutoff":
        return (
          <>
            <rect x="2" y="13" width="76" height="16" rx="4" fill={claro} />
            <circle cx="11" cy="21" r="5" fill={tinta} opacity=".5" />
            <rect x="20" y="18" width="30" height="5" rx="2" fill={tinta} opacity=".45" />
            <rect x="56" y="16" width="18" height="10" rx="2" fill={tinta} opacity=".6" />
          </>
        );
      case "marquee":
        return (
          <>
            <rect x="0" y="13" width="80" height="16" fill={claro} />
            {[4, 30, 56].map((x) => (
              <rect key={x} x={x} y="19" width="18" height="4" rx="2" fill={tinta} opacity=".55" />
            ))}
          </>
        );
      case "next_live":
      case "video_section":
        return (
          <>
            <rect x="4" y="5" width="40" height="32" rx="4" fill={claro} />
            <path d="M20 15 l9 6 -9 6z" fill={tinta} opacity=".6" />
            <rect x="50" y="11" width="26" height="4" rx="2" fill={tinta} opacity=".5" />
            <rect x="50" y="19" width="20" height="3" rx="1.5" fill={claro} />
            <rect x="50" y="27" width="16" height="6" rx="2" fill={tinta} opacity=".5" />
          </>
        );
      case "text_image":
        return (
          <>
            <rect x="4" y="5" width="32" height="32" rx="4" fill={claro} />
            <rect x="42" y="10" width="30" height="3.5" rx="1.75" fill={tinta} opacity=".5" />
            <rect x="42" y="17" width="34" height="3.5" rx="1.75" fill={claro} />
            <rect x="42" y="24" width="34" height="3.5" rx="1.75" fill={claro} />
            <rect x="42" y="31" width="16" height="5" rx="2" fill={tinta} opacity=".5" />
          </>
        );
      case "faq":
        return (
          <>
            {[5, 16, 27].map((y) => (
              <g key={y}>
                <rect x="4" y={y} width="72" height="9" rx="3" fill={claro} />
                <circle cx="70" cy={y + 4.5} r="2.5" fill={tinta} opacity=".5" />
              </g>
            ))}
          </>
        );
      case "store_location":
        return (
          <>
            <rect x="4" y="5" width="30" height="32" rx="4" fill={claro} />
            <rect x="38" y="5" width="38" height="32" rx="4" fill={claro} />
            <circle cx="57" cy="19" r="5" fill={tinta} opacity=".6" />
            <rect x="9" y="11" width="18" height="3" rx="1.5" fill={tinta} opacity=".5" />
            <rect x="9" y="18" width="20" height="3" rx="1.5" fill={tinta} opacity=".3" />
          </>
        );
      case "shoppable_image":
        return (
          <>
            <rect x="4" y="4" width="72" height="34" rx="4" fill={claro} />
            <circle cx="22" cy="16" r="3.4" fill={tinta} opacity=".6" />
            <circle cx="50" cy="26" r="3.4" fill={tinta} opacity=".6" />
            <circle cx="62" cy="12" r="3.4" fill={tinta} opacity=".6" />
          </>
        );
      case "before_after":
        return (
          <>
            <rect x="4" y="4" width="72" height="34" rx="4" fill={claro} />
            <rect x="40" y="4" width="36" height="34" rx="4" fill={tinta} opacity=".25" />
            <rect x="39" y="4" width="2" height="34" fill={tinta} opacity=".6" />
            <circle cx="40" cy="21" r="5" fill={tinta} opacity=".6" />
          </>
        );
      case "category_navigator":
      case "category_circles":
        return (
          <>
            {[12, 30, 48, 66].map((x) => (
              <g key={x}>
                <circle cx={x} cy="18" r="8" fill={claro} />
                <rect x={x - 6} y="30" width="12" height="3" rx="1.5" fill={claro} />
              </g>
            ))}
          </>
        );
      default:
        return (
          <>
            <rect x="24" y="5" width="32" height="4" rx="2" fill={tinta} opacity=".5" />
            {[4, 23, 42, 61].map((x) => (
              <g key={x}>
                <rect x={x} y="13" width="15" height="15" rx="3" fill={claro} />
                <rect x={x} y="31" width="11" height="2.5" rx="1.2" fill={claro} />
                <rect x={x} y="36" width="7" height="2.5" rx="1.2" fill={tinta} opacity=".45" />
              </g>
            ))}
          </>
        );
    }
  })();
  return (
    <svg viewBox="0 0 80 42" className={className} aria-hidden>
      {corpo}
    </svg>
  );
}