defmodule SimpleshopTheme.Theme.CSSGeneratorTest do
  use ExUnit.Case, async: true

  alias SimpleshopTheme.Theme.CSSGenerator
  alias SimpleshopTheme.Settings.ThemeSettings

  describe "generate/1" do
    test "generates CSS for default theme settings" do
      settings = %ThemeSettings{}
      css = CSSGenerator.generate(settings)

      assert is_binary(css)
      # CSS targets .themed (used by both shop and preview)
      assert css =~ ".themed {"
      assert css =~ "--t-accent-h:"
      assert css =~ "--t-accent-s:"
      assert css =~ "--t-accent-l:"
      # Should include all theme token categories
      assert css =~ "--t-surface-base:"
      assert css =~ "--t-font-heading:"
      assert css =~ "--t-radius-sm:"
      assert css =~ "--t-density:"
    end

    test "converts hex colors to HSL" do
      settings = %ThemeSettings{accent_color: "#ff0000"}
      css = CSSGenerator.generate(settings)

      # Red should be H=0, S=100%, L=50%
      assert css =~ "--t-accent-h: 0"
      assert css =~ "--t-accent-s: 100%"
      assert css =~ "--t-accent-l: 50%"
    end

    test "handles blue accent color" do
      settings = %ThemeSettings{accent_color: "#0000ff"}
      css = CSSGenerator.generate(settings)

      # Blue should be H=240, S=100%, L=50%
      assert css =~ "--t-accent-h: 240"
      assert css =~ "--t-accent-s: 100%"
      assert css =~ "--t-accent-l: 50%"
    end

    test "handles green accent color" do
      settings = %ThemeSettings{accent_color: "#00ff00"}
      css = CSSGenerator.generate(settings)

      # Green should be H=120, S=100%, L=50%
      assert css =~ "--t-accent-h: 120"
      assert css =~ "--t-accent-s: 100%"
      assert css =~ "--t-accent-l: 50%"
    end

    test "includes secondary colors" do
      settings = %ThemeSettings{
        secondary_accent_color: "#ea580c",
        sale_color: "#dc2626"
      }

      css = CSSGenerator.generate(settings)

      assert css =~ "--t-secondary-accent: #ea580c"
      assert css =~ "--t-sale-color: #dc2626"
    end

    test "generates font size scale for small" do
      settings = %ThemeSettings{font_size: "small"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-font-size-scale: 1.125"
    end

    test "generates font size scale for medium" do
      settings = %ThemeSettings{font_size: "medium"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-font-size-scale: 1.1875"
    end

    test "generates font size scale for large" do
      settings = %ThemeSettings{font_size: "large"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-font-size-scale: 1.25"
    end

    test "generates heading weight override for regular" do
      settings = %ThemeSettings{heading_weight: "regular"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-heading-weight-override: 400"
    end

    test "generates heading weight override for bold" do
      settings = %ThemeSettings{heading_weight: "bold"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-heading-weight-override: 700"
    end

    test "generates layout width for contained" do
      settings = %ThemeSettings{layout_width: "contained"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-layout-max-width: 1100px"
    end

    test "generates layout width for wide" do
      settings = %ThemeSettings{layout_width: "wide"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-layout-max-width: 1400px"
    end

    test "generates layout width for full" do
      settings = %ThemeSettings{layout_width: "full"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-layout-max-width: 100%"
    end

    test "generates button style for filled" do
      settings = %ThemeSettings{button_style: "filled"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-button-style: filled"
    end

    test "generates button style for outline" do
      settings = %ThemeSettings{button_style: "outline"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-button-style: outline"
    end

    test "generates product text alignment" do
      settings = %ThemeSettings{product_text_align: "center"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-product-text-align: center"
    end

    test "generates image aspect ratio for square" do
      settings = %ThemeSettings{image_aspect_ratio: "square"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-image-aspect-ratio: 1 / 1"
    end

    test "generates image aspect ratio for portrait" do
      settings = %ThemeSettings{image_aspect_ratio: "portrait"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-image-aspect-ratio: 3 / 4"
    end

    test "generates image aspect ratio for landscape" do
      settings = %ThemeSettings{image_aspect_ratio: "landscape"}
      css = CSSGenerator.generate(settings)

      assert css =~ "--t-image-aspect-ratio: 4 / 3"
    end
  end
end
