<Layouts.app flash={@flash}>
  <.header>
    {if @live_action == :new, do: "Connect to Printify", else: "Printify settings"}
  </.header>

  <div class="max-w-xl mt-6">
    <%= if @live_action == :new do %>
      <div class="prose prose-sm mb-6">
        <p>
          Printify is a print-on-demand service that prints and ships products for you.
          Connect your account to automatically import your products into your shop.
        </p>
      </div>

      <div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
        <p class="font-medium mb-2">Get your connection key from Printify:</p>
        <ol class="list-decimal list-inside space-y-1 text-base-content/80">
          <li>
            <a
              href="https://printify.com/app/auth/login"
              target="_blank"
              rel="noopener"
              class="link"
            >
              Log in to Printify
            </a>
            (or <a
              href="https://printify.com/app/auth/register"
              target="_blank"
              rel="noopener"
              class="link"
            >create a free account</a>)
          </li>
          <li>Click <strong>Account</strong> (top right)</li>
          <li>Select <strong>Connections</strong> from the dropdown</li>
          <li>Find <strong>API tokens</strong> and click <strong>Generate</strong></li>
          <li>
            Enter a name (e.g. "My Shop"), keep <strong>all scopes</strong>
            selected, and click <strong>Generate token</strong>
          </li>
          <li>Click <strong>Copy to clipboard</strong> and paste it below</li>
        </ol>
      </div>
    <% end %>

    <.form for={@form} id="provider-form" phx-change="validate" phx-submit="save">
      <input type="hidden" name="provider_connection[provider_type]" value="printify" />

      <.input
        field={@form[:api_key]}
        type="password"
        label="Printify connection key"
        placeholder={
          if @live_action == :edit,
            do: "Leave blank to keep current key",
            else: "Paste your key here"
        }
        autocomplete="off"
      />

      <div class="flex items-center gap-3 mb-6">
        <button
          type="button"
          class="btn btn-outline btn-sm"
          phx-click="test_connection"
          disabled={@testing}
        >
          <.icon
            name={if @testing, do: "hero-arrow-path", else: "hero-signal"}
            class={if @testing, do: "size-4 animate-spin", else: "size-4"}
          />
          {if @testing, do: "Checking...", else: "Check connection"}
        </button>

        <div :if={@test_result} class="text-sm">
          <%= case @test_result do %>
            <% {:ok, info} -> %>
              <span class="text-success flex items-center gap-1">
                <.icon name="hero-check-circle" class="size-4" /> Connected to {info.shop_name}
              </span>
            <% {:error, reason} -> %>
              <span class="text-error flex items-center gap-1">
                <.icon name="hero-x-circle" class="size-4" />
                {format_error(reason)}
              </span>
          <% end %>
        </div>
      </div>

      <%= if @live_action == :edit do %>
        <.input field={@form[:enabled]} type="checkbox" label="Connection enabled" />
      <% end %>

      <div class="flex gap-2 mt-6">
        <.button type="submit" disabled={@testing}>
          {if @live_action == :new, do: "Connect to Printify", else: "Save changes"}
        </.button>
        <.link navigate={~p"/admin/providers"} class="btn btn-ghost">
          Cancel
        </.link>
      </div>
    </.form>
  </div>
</Layouts.app>
