defmodule ZoeyscomputerWeb.CodeBlock do
  use Phoenix.Component
  alias Phoenix.LiveView.JS

  @moduledoc """
  A code block component with syntax highlighting using Shiki.

  ## Features:
  - Syntax highlighting with Shiki
  - Optional line numbers
  - Optional highlighted lines
  - Optional title
  - Copy button
  - Catppuccin theme styling
  """

  @doc """
  Renders a code block with syntax highlighting.

  ## Examples

      <.code_block
        code="def hello, do: :world"
        language="elixir"
        title="Example Code"
        line_numbers={true}
        highlighted_lines={[1, 3]}
      />

  ## Options
    * `:code` - Required. The code string to highlight
    * `:language` - Required. Programming language for syntax highlighting
    * `:title` - Optional. Title displayed above the code block
    * `:line_numbers` - Optional. Show line numbers (default: false)
    * `:highlighted_lines` - Optional. List of line numbers to highlight
  """
  attr :code, :string, required: true
  attr :language, :string, required: true
  attr :title, :string, default: nil
  attr :line_numbers, :boolean, default: false
  attr :highlighted_lines, :list, default: []

  def code_block(assigns) do
    # Calculate the number of lines for line numbers
    assigns = assign(assigns, :num_lines, String.split(assigns.code, "\n") |> length())

    ~H"""
    <div class="relative ctp-bg-base rounded-lg overflow-hidden">
      <%= if @title do %>
        <div class="ctp-bg-mantle px-4 py-2 border-b ctp-border-surface0">
          <h3 class="ctp-text-text text-sm font-medium"><%= @title %></h3>
        </div>
      <% end %>

      <div class="relative">
        <%= if @line_numbers do %>
          <div class="absolute left-0 top-0 bottom-0 ctp-bg-crust w-12 flex flex-col items-end pr-2 py-4 ctp-text-surface2 select-none">
            <%= for line_num <- 1..@num_lines do %>
              <span class={[
                "text-sm leading-6",
                line_num in @highlighted_lines && "ctp-text-mauve font-medium"
              ]}>
                <%= line_num %>
              </span>
            <% end %>
          </div>
        <% end %>

        <div class={["overflow-x-auto", @line_numbers && "pl-12"]}>
          <pre
            class="p-4"
            id={"code-block-#{System.unique_integer()}"}
            phx-hook="CodeBlockHook"
            data-code={@code}
            data-language={@language}
            data-highlighted-lines={Jason.encode!(@highlighted_lines)}
          ><code class="text-sm"><%= @code %></code></pre>
        </div>
      </div>

      <div class="ctp-bg-mantle px-4 py-2 border-t ctp-border-surface0 flex justify-end">
        <button
          type="button"
          class="ctp-text-subtext0 hover:ctp-text-text text-sm"
          phx-click={JS.dispatch("clipcopy", detail: %{text: @code})}
        >
          Copy code
        </button>
      </div>
    </div>
    """
  end
end