defmodule BerrypodWeb.BlockThumbnails do
  @moduledoc """
  Tiny SVG wireframe thumbnails for each block type.

  Used in the block picker to give a visual hint of what each block looks like.
  Each thumbnail is an 80x48 SVG with simple geometric shapes.
  """

  use Phoenix.Component

  attr :type, :string, required: true

  def block_thumbnail(assigns) do
    ~H"""
    <svg
      viewBox="0 0 80 48"
      class="block-picker-thumb"
      role="img"
      aria-hidden="true"
    >
      <.thumb_shapes type={@type} />
    </svg>
    """
  end

  # ── Hero banner ──────────────────────────────────────────────────
  defp thumb_shapes(%{type: "hero"} = assigns) do
    ~H"""
    <rect x="0" y="0" width="80" height="48" rx="2" fill="currentColor" opacity="0.08" />
    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.35" />
    <rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="28" y="30" width="24" height="7" rx="2" fill="currentColor" opacity="0.25" />
    """
  end

  # ── Featured products ────────────────────────────────────────────
  defp thumb_shapes(%{type: "featured_products"} = assigns) do
    ~H"""
    <rect x="2" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="22" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="42" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="62" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="4" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="24" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="44" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="64" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="4" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="24" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="44" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="64" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
    """
  end

  # ── Image + text ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "image_text"} = assigns) do
    ~H"""
    <rect x="2" y="4" width="34" height="40" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="42" y="8" width="32" height="4" rx="1" fill="currentColor" opacity="0.3" />
    <rect x="42" y="16" width="28" height="3" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="42" y="22" width="30" height="3" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="42" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="42" y="36" width="16" height="5" rx="2" fill="currentColor" opacity="0.2" />
    """
  end

  # ── Category navigation ──────────────────────────────────────────
  defp thumb_shapes(%{type: "category_nav"} = assigns) do
    ~H"""
    <rect x="4" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
    <rect x="23" y="18" width="18" height="12" rx="6" fill="currentColor" opacity="0.15" />
    <rect x="44" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.15" />
    <rect x="61" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
    """
  end

  # ── Newsletter signup ────────────────────────────────────────────
  defp thumb_shapes(%{type: "newsletter_card"} = assigns) do
    ~H"""
    <rect
      x="4"
      y="4"
      width="72"
      height="40"
      rx="3"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.12"
      stroke-width="1"
    />
    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.3" />
    <rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.15" />
    <rect
      x="14"
      y="28"
      width="36"
      height="8"
      rx="2"
      fill="currentColor"
      opacity="0.1"
      stroke="currentColor"
      stroke-opacity="0.15"
      stroke-width="0.5"
    />
    <rect x="52" y="28" width="16" height="8" rx="2" fill="currentColor" opacity="0.2" />
    """
  end

  # ── Social links ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "social_links_card"} = assigns) do
    ~H"""
    <rect
      x="4"
      y="4"
      width="72"
      height="40"
      rx="3"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.12"
      stroke-width="1"
    />
    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.25" />
    <circle cx="24" cy="30" r="5" fill="currentColor" opacity="0.15" />
    <circle cx="36" cy="30" r="5" fill="currentColor" opacity="0.15" />
    <circle cx="48" cy="30" r="5" fill="currentColor" opacity="0.15" />
    <circle cx="60" cy="30" r="5" fill="currentColor" opacity="0.15" />
    """
  end

  # ── Info card ────────────────────────────────────────────────────
  defp thumb_shapes(%{type: "info_card"} = assigns) do
    ~H"""
    <rect
      x="4"
      y="4"
      width="72"
      height="40"
      rx="3"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.12"
      stroke-width="1"
    />
    <rect x="10" y="10" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="10" y="18" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="40" y="18" width="28" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="10" y="24" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="40" y="24" width="22" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="10" y="30" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="40" y="30" width="26" height="2" rx="1" fill="currentColor" opacity="0.12" />
    """
  end

  # ── Trust badges ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "trust_badges"} = assigns) do
    ~H"""
    <circle cx="16" cy="18" r="7" fill="currentColor" opacity="0.1" />
    <circle cx="40" cy="18" r="7" fill="currentColor" opacity="0.1" />
    <circle cx="64" cy="18" r="7" fill="currentColor" opacity="0.1" />
    <rect x="8" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="32" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="56" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
    """
  end

  # ── Customer reviews ─────────────────────────────────────────────
  defp thumb_shapes(%{type: "reviews_section"} = assigns) do
    ~H"""
    <rect
      x="2"
      y="2"
      width="24"
      height="44"
      rx="2"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect
      x="28"
      y="2"
      width="24"
      height="44"
      rx="2"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect
      x="54"
      y="2"
      width="24"
      height="44"
      rx="2"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="6" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="32" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="58" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="6" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="32" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="58" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
    """
  end

  # ── Spacer ───────────────────────────────────────────────────────
  defp thumb_shapes(%{type: "spacer"} = assigns) do
    ~H"""
    <line
      x1="40"
      y1="8"
      x2="40"
      y2="16"
      stroke="currentColor"
      stroke-opacity="0.2"
      stroke-width="1"
      stroke-dasharray="2 2"
    />
    <rect
      x="30"
      y="18"
      width="20"
      height="12"
      rx="1"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.15"
      stroke-width="0.5"
      stroke-dasharray="2 2"
    />
    <line
      x1="40"
      y1="32"
      x2="40"
      y2="40"
      stroke="currentColor"
      stroke-opacity="0.2"
      stroke-width="1"
      stroke-dasharray="2 2"
    />
    """
  end

  # ── Divider ──────────────────────────────────────────────────────
  defp thumb_shapes(%{type: "divider"} = assigns) do
    ~H"""
    <line
      x1="8"
      y1="24"
      x2="72"
      y2="24"
      stroke="currentColor"
      stroke-opacity="0.25"
      stroke-width="1.5"
    />
    """
  end

  # ── Button ───────────────────────────────────────────────────────
  defp thumb_shapes(%{type: "button"} = assigns) do
    ~H"""
    <rect x="22" y="16" width="36" height="16" rx="4" fill="currentColor" opacity="0.2" />
    <rect x="28" y="22" width="24" height="4" rx="1" fill="currentColor" opacity="0.3" />
    """
  end

  # ── Video embed ──────────────────────────────────────────────────
  defp thumb_shapes(%{type: "video_embed"} = assigns) do
    ~H"""
    <rect x="4" y="4" width="72" height="40" rx="2" fill="currentColor" opacity="0.08" />
    <polygon points="34,18 34,32 48,25" fill="currentColor" opacity="0.25" />
    """
  end

  # ── Product hero ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "product_hero"} = assigns) do
    ~H"""
    <rect x="2" y="4" width="38" height="40" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="46" y="6" width="28" height="4" rx="1" fill="currentColor" opacity="0.3" />
    <rect x="46" y="14" width="16" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="46" y="24" width="28" height="8" rx="2" fill="currentColor" opacity="0.2" />
    """
  end

  # ── Breadcrumb ───────────────────────────────────────────────────
  defp thumb_shapes(%{type: "breadcrumb"} = assigns) do
    ~H"""
    <rect x="6" y="20" width="14" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="24" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
    <rect x="32" y="20" width="18" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="54" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
    <rect x="62" y="20" width="12" height="3" rx="1" fill="currentColor" opacity="0.3" />
    """
  end

  # ── Product grid ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: t} = assigns) when t in ~w(product_grid related_products) do
    ~H"""
    <rect x="2" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="28" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="54" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="2" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="28" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    <rect x="54" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
    """
  end

  # ── Collection header ────────────────────────────────────────────
  defp thumb_shapes(%{type: "collection_header"} = assigns) do
    ~H"""
    <rect x="16" y="14" width="48" height="6" rx="1" fill="currentColor" opacity="0.3" />
    <rect x="28" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.15" />
    """
  end

  # ── Filter bar ───────────────────────────────────────────────────
  defp thumb_shapes(%{type: "filter_bar"} = assigns) do
    ~H"""
    <rect x="4" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.2" />
    <rect x="21" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.1" />
    <rect x="40" y="18" width="12" height="12" rx="6" fill="currentColor" opacity="0.1" />
    <rect
      x="58"
      y="18"
      width="18"
      height="12"
      rx="2"
      fill="currentColor"
      opacity="0.08"
      stroke="currentColor"
      stroke-opacity="0.15"
      stroke-width="0.5"
    />
    """
  end

  # ── Cart items ───────────────────────────────────────────────────
  defp thumb_shapes(%{type: "cart_items"} = assigns) do
    ~H"""
    <rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="20" y="6" width="30" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="20" y="12" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <line
      x1="4"
      y1="20"
      x2="76"
      y2="20"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="4" y="24" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
    <rect x="20" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="20" y="32" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
    """
  end

  # ── Order summary ────────────────────────────────────────────────
  defp thumb_shapes(%{type: "order_summary"} = assigns) do
    ~H"""
    <rect
      x="4"
      y="4"
      width="72"
      height="40"
      rx="3"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="10" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="50" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="10" y="18" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <rect x="50" y="18" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
    <line
      x1="10"
      y1="24"
      x2="70"
      y2="24"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="10" y="28" width="14" height="3" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="50" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="20" y="36" width="40" height="6" rx="2" fill="currentColor" opacity="0.2" />
    """
  end

  # ── Contact form ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "contact_form"} = assigns) do
    ~H"""
    <rect
      x="8"
      y="4"
      width="64"
      height="8"
      rx="2"
      fill="currentColor"
      opacity="0.08"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect
      x="8"
      y="16"
      width="64"
      height="8"
      rx="2"
      fill="currentColor"
      opacity="0.08"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect
      x="8"
      y="28"
      width="64"
      height="12"
      rx="2"
      fill="currentColor"
      opacity="0.08"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="8" y="43" width="20" height="5" rx="2" fill="currentColor" opacity="0.2" />
    """
  end

  # ── Content body ─────────────────────────────────────────────────
  defp thumb_shapes(%{type: "content_body"} = assigns) do
    ~H"""
    <rect x="4" y="6" width="50" height="4" rx="1" fill="currentColor" opacity="0.25" />
    <rect x="4" y="14" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="4" y="20" width="68" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="4" y="26" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="4" y="32" width="60" height="2" rx="1" fill="currentColor" opacity="0.12" />
    <rect x="4" y="38" width="66" height="2" rx="1" fill="currentColor" opacity="0.12" />
    """
  end

  # ── Fallback for any unmatched type ──────────────────────────────
  defp thumb_shapes(assigns) do
    ~H"""
    <rect
      x="4"
      y="4"
      width="72"
      height="40"
      rx="3"
      fill="currentColor"
      opacity="0.06"
      stroke="currentColor"
      stroke-opacity="0.1"
      stroke-width="0.5"
    />
    <rect x="20" y="16" width="40" height="4" rx="1" fill="currentColor" opacity="0.2" />
    <rect x="26" y="24" width="28" height="3" rx="1" fill="currentColor" opacity="0.12" />
    """
  end
end
