defmodule ComponentsElixirWeb.StorageLocationsLive do
  @moduledoc """
  LiveView for managing storage locations and QR codes.
  """
  use ComponentsElixirWeb, :live_view

  alias ComponentsElixir.{Inventory, Auth}
  alias ComponentsElixir.Inventory.StorageLocation
  alias ComponentsElixir.QRCode

  @impl true
  def mount(_params, session, socket) do
    # Check authentication
    unless Auth.authenticated?(session) do
      {:ok, socket |> push_navigate(to: ~p"/login")}
    else
      storage_locations = list_storage_locations()

      {:ok,
       socket
       |> assign(:session, session)
       |> assign(:storage_locations, storage_locations)
       |> assign(:show_add_form, false)
       |> assign(:show_edit_form, false)
       |> assign(:editing_location, nil)
       |> assign(:form, nil)
       |> assign(:qr_scanner_open, false)
       |> assign(:scanned_codes, [])
       |> assign(:page_title, "Storage Location Management")}
    end
  end

  @impl true
  def handle_event("show_add_form", _params, socket) do
    changeset = Inventory.change_storage_location(%StorageLocation{})
    form = to_form(changeset)

    {:noreply,
     socket
     |> assign(:show_add_form, true)
     |> assign(:form, form)}
  end

  def handle_event("hide_add_form", _params, socket) do
    {:noreply,
     socket
     |> assign(:show_add_form, false)
     |> assign(:form, nil)}
  end

  def handle_event("show_edit_form", %{"id" => id}, socket) do
    location = Inventory.get_storage_location!(id)
    # Create a changeset with current values forced into changes for proper form display
    changeset = Inventory.change_storage_location(location, %{
      name: location.name,
      description: location.description,
      parent_id: location.parent_id
    })
    |> Ecto.Changeset.force_change(:parent_id, location.parent_id)

    form = to_form(changeset)

    {:noreply,
     socket
     |> assign(:show_edit_form, true)
     |> assign(:editing_location, location)
     |> assign(:form, form)}
  end

  def handle_event("hide_edit_form", _params, socket) do
    {:noreply,
     socket
     |> assign(:show_edit_form, false)
     |> assign(:editing_location, nil)
     |> assign(:form, nil)}
  end

  def handle_event("save_location", %{"storage_location" => location_params}, socket) do
    case Inventory.create_storage_location(location_params) do
      {:ok, _location} ->
        {:noreply,
         socket
         |> put_flash(:info, "Storage location created successfully")
         |> assign(:show_add_form, false)
         |> assign(:form, nil)
         |> reload_storage_locations()}

      {:error, changeset} ->
        {:noreply, assign(socket, :form, to_form(changeset))}
    end
  end

  def handle_event("save_edit", %{"storage_location" => location_params}, socket) do
    case Inventory.update_storage_location(socket.assigns.editing_location, location_params) do
      {:ok, _location} ->
        {:noreply,
         socket
         |> put_flash(:info, "Storage location updated successfully")
         |> assign(:show_edit_form, false)
         |> assign(:editing_location, nil)
         |> assign(:form, nil)
         |> reload_storage_locations()}

      {:error, changeset} ->
        {:noreply, assign(socket, :form, to_form(changeset))}
    end
  end

  def handle_event("delete_location", %{"id" => id}, socket) do
    location = Inventory.get_storage_location!(id)

    case Inventory.delete_storage_location(location) do
      {:ok, _deleted_location} ->
        {:noreply,
         socket
         |> put_flash(:info, "Storage location deleted successfully")
         |> reload_storage_locations()}

      {:error, _changeset} ->
        {:noreply, put_flash(socket, :error, "Cannot delete storage location - it may have components assigned or child locations")}
    end
  end

  def handle_event("open_qr_scanner", _params, socket) do
    {:noreply, assign(socket, :qr_scanner_open, true)}
  end

  def handle_event("close_qr_scanner", _params, socket) do
    {:noreply, assign(socket, :qr_scanner_open, false)}
  end

  def handle_event("qr_scanned", %{"code" => code}, socket) do
    case QRCode.parse_qr_data(code) do
      {:ok, parsed} ->
        case Inventory.get_storage_location_by_qr_code(parsed.code) do
          nil ->
            {:noreply, put_flash(socket, :error, "Storage location not found for QR code: #{code}")}

          location ->
            scanned_codes = [%{code: code, location: location} | socket.assigns.scanned_codes]

            {:noreply,
             socket
             |> assign(:scanned_codes, scanned_codes)
             |> put_flash(:info, "Scanned: #{location.path}")}
        end

      {:error, reason} ->
        {:noreply, put_flash(socket, :error, "Invalid QR code: #{reason}")}
    end
  end

  def handle_event("clear_scanned", _params, socket) do
    {:noreply, assign(socket, :scanned_codes, [])}
  end

  def handle_event("download_qr", %{"id" => id}, socket) do
    case Inventory.get_storage_location!(id) do
      location ->
        case QRCode.generate_qr_image(location) do
          {:ok, png_data} ->
            filename = "#{location.name |> String.replace(" ", "_")}_QR.png"

            # Send file download to browser
            {:noreply,
             socket
             |> push_event("download_file", %{
               filename: filename,
               data: Base.encode64(png_data),
               mime_type: "image/png"
             })}

          {:error, _reason} ->
            {:noreply, put_flash(socket, :error, "Failed to generate QR code")}
        end
    end
  end

  defp reload_storage_locations(socket) do
    storage_locations = list_storage_locations()
    assign(socket, :storage_locations, storage_locations)
  end

  defp parent_location_options(storage_locations, editing_location_id \\ nil) do
    available_locations =
      storage_locations
      |> Enum.reject(fn loc ->
        loc.id == editing_location_id ||
        (editing_location_id && is_descendant?(storage_locations, loc.id, editing_location_id))
      end)
      |> Enum.map(fn location ->
        {location_display_name(location), location.id}
      end)

    [{"No parent (Root location)", nil}] ++ available_locations
  end

  defp is_descendant?(storage_locations, descendant_id, ancestor_id) do
    # Check if descendant_id is a descendant of ancestor_id
    descendant = Enum.find(storage_locations, fn loc -> loc.id == descendant_id end)

    case descendant do
      nil -> false
      %{parent_id: nil} -> false
      %{parent_id: parent_id} when parent_id == ancestor_id -> true
      %{parent_id: parent_id} -> is_descendant?(storage_locations, parent_id, ancestor_id)
    end
  end

  defp location_display_name(location) do
    if location.path do
      # Convert path from "Shelf A/Drawer 2/Box 1" to "Shelf A > Drawer 2 > Box 1"
      location.path
      |> String.split("/")
      |> Enum.join(" > ")
    else
      location.name
    end
  end

  defp root_storage_locations(storage_locations) do
    Enum.filter(storage_locations, fn loc -> is_nil(loc.parent_id) end)
  end

  defp child_storage_locations(storage_locations, parent_id) do
    Enum.filter(storage_locations, fn loc -> loc.parent_id == parent_id end)
  end

  defp count_components_in_location(location_id) do
    Inventory.count_components_in_storage_location(location_id)
  end

  defp get_qr_image_url(location) do
    QRCode.get_qr_image_url(location)
  end

  # Component for rendering individual storage location items with QR code support
  defp location_item(assigns) do
    # Calculate margin based on depth (0 = no margin, 1+ = incremental margin)
    margin_left = if assigns.depth == 0, do: 0, else: 32 + assigns.depth * 16

    # Determine border style based on depth
    border_class = if assigns.depth > 0, do: "border-l-2 border-gray-200 pl-6", else: ""

    # Icon size and button size based on depth
    {icon_size, button_size, text_size, title_tag} = case assigns.depth do
      0 -> {"w-5 h-5", "p-2", "text-lg", "h3"}
      1 -> {"w-4 h-4", "p-1.5", "text-base", "h4"}
      _ -> {"w-3 h-3", "p-1", "text-sm", "h5"}
    end

    # Different icons based on level - QR code is always present for storage locations
    icon_name = case assigns.depth do
      0 -> "hero-building-office"  # Shelf/Room
      1 -> "hero-archive-box"      # Drawer/Cabinet
      _ -> "hero-cube"             # Box/Container
    end

    assigns = assigns
    |> assign(:margin_left, margin_left)
    |> assign(:border_class, border_class)
    |> assign(:icon_size, icon_size)
    |> assign(:button_size, button_size)
    |> assign(:text_size, text_size)
    |> assign(:title_tag, title_tag)
    |> assign(:icon_name, icon_name)
    |> assign(:children, child_storage_locations(assigns.storage_locations, assigns.location.id))

    ~H"""
    <div class={[@border_class, @depth > 0 && "mt-4"]} style={"margin-left: #{@margin_left}px"}>
      <div class="flex items-center justify-between">
        <div class="flex items-center flex-1 space-x-4">
          <.icon name={@icon_name} class={"#{@icon_size} #{if @depth == 0, do: "text-blue-500", else: "text-gray-400"}"} />
          <div class="flex-1">
            <%= if @title_tag == "h3" do %>
              <h3 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h3>
            <% else %>
              <h4 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h4>
            <% end %>
            <%= if @location.description do %>
              <p class="text-sm text-gray-500 mt-1">{@location.description}</p>
            <% end %>
            <div class="flex items-center space-x-2 mt-1">
              <p class="text-xs text-gray-400">
                {count_components_in_location(@location.id)} components
              </p>
              <%= if @location.qr_code do %>
                <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
                  QR: {@location.qr_code}
                </span>
              <% end %>
            </div>
          </div>
          <%= if @location.qr_code do %>
            <div class="flex items-center space-x-3">
              <%= if get_qr_image_url(@location) do %>
                <div class="qr-code-container flex-shrink-0">
                  <img
                    src={get_qr_image_url(@location)}
                    alt={"QR Code for #{@location.name}"}
                    class="w-16 h-16 border border-gray-200 rounded bg-white"
                    onerror="this.style.display='none'"
                  />
                </div>
              <% else %>
                <div class="w-16 h-16 border border-gray-200 rounded bg-gray-50 flex items-center justify-center flex-shrink-0">
                  <.icon name="hero-qr-code" class="w-8 h-8 text-gray-400" />
                </div>
              <% end %>
              <button
                phx-click="download_qr"
                phx-value-id={@location.id}
                class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 flex-shrink-0"
                title="Download QR Code"
              >
                <.icon name="hero-arrow-down-tray" class="w-4 h-4 mr-1.5" />
                Download
              </button>
            </div>
          <% end %>
        </div>
        <div class="flex items-center space-x-2 ml-4">
          <button
            phx-click="show_edit_form"
            phx-value-id={@location.id}
            class="inline-flex items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700"
          >
            <.icon name="hero-pencil" class="w-4 h-4" />
          </button>
          <button
            phx-click="delete_location"
            phx-value-id={@location.id}
            data-confirm="Are you sure you want to delete this storage location? This action cannot be undone."
            class="inline-flex items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700"
          >
            <.icon name="hero-trash" class="w-4 h-4" />
          </button>
        </div>
      </div>
      <!-- Render children recursively -->
      <%= for child <- @children do %>
        <.location_item location={child} storage_locations={@storage_locations} depth={@depth + 1} />
      <% end %>
    </div>
    """
  end

  defp list_storage_locations do
    Inventory.list_storage_locations()
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div class="min-h-screen bg-gray-50">
      <!-- Header -->
      <div class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between items-center py-6">
            <div class="flex items-center space-x-4">
              <.link
                navigate={~p"/"}
                class="text-gray-500 hover:text-gray-700"
              >
                <.icon name="hero-arrow-left" class="w-5 h-5" />
              </.link>
              <h1 class="text-3xl font-bold text-gray-900">
                Storage Location Management
              </h1>
            </div>
            <div class="flex items-center space-x-4">
              <button
                phx-click="open_qr_scanner"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
              >
                <.icon name="hero-qr-code" class="w-4 h-4 mr-2" /> Scan QR
              </button>
              <button
                phx-click="show_add_form"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                <.icon name="hero-plus" class="w-4 h-4 mr-2" /> Add Location
              </button>
              <.link
                navigate={~p"/"}
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                <.icon name="hero-cube-transparent" class="w-4 h-4 mr-2" /> Components
              </.link>
            </div>
          </div>
        </div>
      </div>

      <!-- Add Location Modal -->
      <%= if @show_add_form do %>
        <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 shadow-lg rounded-md bg-white">
            <div class="mt-3">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Add New Storage Location</h3>
                <button
                  phx-click="hide_add_form"
                  class="text-gray-400 hover:text-gray-600"
                >
                  <.icon name="hero-x-mark" class="w-6 h-6" />
                </button>
              </div>

              <.form for={@form} phx-submit="save_location" class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700">Name</label>
                  <.input field={@form[:name]} type="text" required />
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700">Parent Location</label>
                  <.input
                    field={@form[:parent_id]}
                    type="select"
                    options={parent_location_options(@storage_locations)}
                  />
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700">Description</label>
                  <.input field={@form[:description]} type="textarea" />
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                  <button
                    type="button"
                    phx-click="hide_add_form"
                    class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                  >
                    Save Location
                  </button>
                </div>
              </.form>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Edit Location Modal -->
      <%= if @show_edit_form do %>
        <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 shadow-lg rounded-md bg-white">
            <div class="mt-3">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Edit Storage Location</h3>
                <button
                  phx-click="hide_edit_form"
                  class="text-gray-400 hover:text-gray-600"
                >
                  <.icon name="hero-x-mark" class="w-6 h-6" />
                </button>
              </div>

              <.form for={@form} phx-submit="save_edit" class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700">Name</label>
                  <.input field={@form[:name]} type="text" required />
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700">Parent Location</label>
                  <.input
                    field={@form[:parent_id]}
                    type="select"
                    options={parent_location_options(@storage_locations, @editing_location.id)}
                  />
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700">Description</label>
                  <.input field={@form[:description]} type="textarea" />
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                  <button
                    type="button"
                    phx-click="hide_edit_form"
                    class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                  >
                    Update Location
                  </button>
                </div>
              </.form>
            </div>
          </div>
        </div>
      <% end %>

      <!-- QR Scanner Modal -->
      <%= if @qr_scanner_open do %>
        <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-1/2 shadow-lg rounded-md bg-white">
            <div class="mt-3">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">QR Code Scanner</h3>
                <button
                  phx-click="close_qr_scanner"
                  class="text-gray-400 hover:text-gray-600"
                >
                  <.icon name="hero-x-mark" class="w-6 h-6" />
                </button>
              </div>

              <!-- QR Scanner Interface -->
              <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                <.icon name="hero-qr-code" class="mx-auto h-12 w-12 text-gray-400" />
                <p class="mt-2 text-sm text-gray-600">Camera QR scanner would go here</p>
                <p class="text-xs text-gray-500 mt-1">In a real implementation, this would use JavaScript QR scanning</p>

                <!-- Test buttons for demo -->
                <div class="mt-4 space-y-2">
                  <p class="text-sm font-medium text-gray-700">Test with sample codes:</p>
                  <button
                    phx-click="qr_scanned"
                    phx-value-code="SL:0:1MTKDM:ROOT"
                    class="block w-full px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded"
                  >
                    Scan "Shelf A"
                  </button>
                  <button
                    phx-click="qr_scanned"
                    phx-value-code="SL:1:VDI701:1MTKDM"
                    class="block w-full px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded"
                  >
                    Scan "Drawer 1"
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Scanned Codes Display -->
      <%= if length(@scanned_codes) > 0 do %>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div class="bg-green-50 border border-green-200 rounded-lg p-4">
            <div class="flex justify-between items-center mb-2">
              <h3 class="text-lg font-medium text-green-800">Recently Scanned</h3>
              <button
                phx-click="clear_scanned"
                class="text-sm text-green-600 hover:text-green-800"
              >
                Clear
              </button>
            </div>
            <div class="space-y-2">
              <div :for={scan <- @scanned_codes} class="flex items-center justify-between bg-white p-2 rounded border">
                <div>
                  <span class="font-medium text-gray-900">{location_display_name(scan.location)}</span>
                  <span class="text-sm text-gray-600 ml-2">({scan.code})</span>
                </div>
                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">
                  Level {scan.location.level}
                </span>
              </div>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Storage Locations List -->
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="bg-white shadow overflow-hidden sm:rounded-md">
          <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Storage Location Hierarchy</h2>
            <p class="text-sm text-gray-500 mt-1">Manage your physical storage locations and QR codes</p>
          </div>

          <%= if Enum.empty?(@storage_locations) do %>
            <div class="text-center py-12">
              <.icon name="hero-building-office" class="mx-auto h-12 w-12 text-gray-400" />
              <h3 class="mt-2 text-sm font-medium text-gray-900">No storage locations</h3>
              <p class="mt-1 text-sm text-gray-500">
                Get started by creating your first storage location.
              </p>
              <div class="mt-6">
                <button
                  phx-click="show_add_form"
                  class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                >
                  <.icon name="hero-plus" class="w-4 h-4 mr-2" />
                  Add Location
                </button>
              </div>
            </div>
          <% else %>
            <div class="divide-y divide-gray-200">
              <!-- Recursive Storage Location Tree -->
              <%= for location <- root_storage_locations(@storage_locations) do %>
                <div class="px-6 py-4">
                  <.location_item location={location} storage_locations={@storage_locations} depth={0} />
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>
    </div>
    """
  end
end