<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Languages"
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Modules
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">Languages</h1>
        <p class="text-lg text-base-content">Configure and manage language module</p>
      </div>
    </header>

    <%!-- System Toggle Section --%>
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="text-3xl mr-4">🌐</div>
            <div>
              <h3 class="card-title text-xl">Languages</h3>
              <p class="text-base-content/70">
                Enable language module for your application
              </p>
            </div>
          </div>
          <div class="form-control">
            <label class="label cursor-pointer">
              <input
                type="checkbox"
                class="toggle toggle-primary toggle-lg"
                checked={@ml_enabled}
                phx-click="toggle_languages"
              />
            </label>
          </div>
        </div>
      </div>
    </div>

    <%= if @ml_enabled do %>
      <%!-- Languages Management Section --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <div class="mb-4">
            <h3 class="card-title text-xl">Language Configuration</h3>
          </div>

          <%!-- Add Language Dropdown --%>
          <%= if not Enum.empty?(@available_languages_for_selection) do %>
            <div class="mb-4">
              <form phx-submit="add_language">
                <div class="flex items-center gap-3">
                  <div class="form-control flex-1">
                    <select
                      name="language_code"
                      class="select select-bordered"
                      required
                    >
                      <option value="" disabled selected>Select a language to add...</option>
                      <%= for language <- @available_languages_for_selection do %>
                        <option value={language.code}>
                          {language.flag} {language.name} ({language.native})
                        </option>
                      <% end %>
                    </select>
                  </div>
                  <button type="submit" class="btn btn-primary btn-sm">
                    <PhoenixKitWeb.Components.Core.Icons.icon_plus class="w-4 h-4 mr-1" />
                    Add Language
                  </button>
                </div>
              </form>
            </div>
          <% end %>

          <%!-- Languages List --%>
          <%= if Enum.empty?(@languages) do %>
            <div class="text-center py-8 text-base-content/50">
              <div class="text-4xl mb-4">🌐</div>
              <p>No languages configured yet.</p>
              <p class="text-sm">Enable the system to add your first language.</p>
            </div>
          <% else %>
            <div class="space-y-3">
              <%= for {language, index} <- Enum.with_index(@languages) do %>
                <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
                  <div class="flex items-center flex-1">
                    <div class="text-2xl mr-3">
                      <%= case language["code"] do %>
                        <% "en" -> %>
                          🇺🇸
                        <% "es" -> %>
                          🇪🇸
                        <% "fr" -> %>
                          🇫🇷
                        <% "de" -> %>
                          🇩🇪
                        <% "pt" -> %>
                          🇵🇹
                        <% "it" -> %>
                          🇮🇹
                        <% "nl" -> %>
                          🇳🇱
                        <% "ru" -> %>
                          🇷🇺
                        <% "zh-CN" -> %>
                          🇨🇳
                        <% "ja" -> %>
                          🇯🇵
                        <% _ -> %>
                          🌐
                      <% end %>
                    </div>
                    <div class="flex-1">
                      <div class="flex items-center gap-2">
                        <span class="font-medium">{language["name"]}</span>
                        <span class="badge badge-outline badge-sm">{language["code"]}</span>
                        <%= if language["is_default"] do %>
                          <span class="badge badge-primary badge-sm">Default</span>
                        <% end %>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="btn-group">
                          <button
                            class="btn btn-outline btn-xs"
                            phx-click="move_up"
                            phx-value-code={language["code"]}
                            disabled={index == 0}
                            title="Move up"
                          >
                            ↑
                          </button>
                          <button
                            class="btn btn-outline btn-xs"
                            phx-click="move_down"
                            phx-value-code={language["code"]}
                            disabled={index == @language_count - 1}
                            title="Move down"
                          >
                            ↓
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center gap-2">
                    <%!-- Enable/Disable Toggle --%>
                    <div class="form-control">
                      <label class="label cursor-pointer">
                        <span class="label-text mr-2 text-sm">Enabled</span>
                        <input
                          type="checkbox"
                          class="toggle toggle-sm toggle-primary"
                          checked={language["is_enabled"]}
                          phx-click="toggle_language"
                          phx-value-code={language["code"]}
                          disabled={language["is_default"]}
                        />
                      </label>
                    </div>

                    <%!-- Set Default Button --%>
                    <%= if not language["is_default"] do %>
                      <button
                        class="btn btn-outline btn-xs"
                        phx-click="set_default"
                        phx-value-code={language["code"]}
                      >
                        Set Default
                      </button>
                    <% end %>

                    <%!-- Remove Button --%>
                    <%= if not language["is_default"] and @language_count > 1 do %>
                      <button
                        class="btn btn-error btn-xs"
                        phx-click="remove_language"
                        phx-value-code={language["code"]}
                        onclick="return confirm('Are you sure you want to remove this language?')"
                      >
                        <PhoenixKitWeb.Components.Core.Icons.icon_trash class="w-3 h-3" />
                      </button>
                    <% end %>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>

      <%!-- Help Section --%>
      <div class="alert alert-info mt-6">
        <PhoenixKitWeb.Components.Core.Icons.icon_info class="w-5 h-5" />
        <div>
          <h3 class="font-bold">Language Configuration</h3>
          <div class="text-sm space-y-1">
            <p>• Use standard language codes like 'en', 'es', 'fr', or 'zh-CN' for regions</p>
            <p>• The default language cannot be disabled and serves as the fallback</p>
            <p>• Use the arrow buttons to reorder languages in the list</p>
            <p>• At least one language must remain configured at all times</p>
          </div>
        </div>
      </div>
    <% else %>
      <%!-- System Disabled Message --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body text-center py-12">
          <div class="text-6xl mb-4 opacity-50">🌐</div>
          <h3 class="text-xl font-semibold text-base-content/60 mb-2">
            Languages Disabled
          </h3>
          <p class="text-base-content/50 mb-4">
            Enable the language module above to start configuring languages for your application.
            The module will automatically create English as the default language when enabled.
          </p>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
