<Layouts.app flash={@flash}>
  <.header>
    Providers
    <:actions>
      <.button navigate={~p"/admin/providers/new"}>
        <.icon name="hero-plus" class="size-4 mr-1" /> Connect Printify
      </.button>
    </:actions>
  </.header>

  <div id="connections" phx-update="stream" class="mt-6 space-y-4">
    <div class="hidden only:block text-center py-12">
      <.icon name="hero-cube" class="size-16 mx-auto mb-4 text-base-content/30" />
      <h2 class="text-xl font-medium">Connect your Printify account</h2>
      <p class="mt-2 text-base-content/60 max-w-md mx-auto">
        Printify handles printing and shipping for you. Connect your account
        to import your products and start selling.
      </p>
      <.button navigate={~p"/admin/providers/new"} class="mt-6">
        Connect to Printify
      </.button>
    </div>

    <div
      :for={{dom_id, connection} <- @streams.connections}
      id={dom_id}
      class="card bg-base-100 shadow-sm border border-base-200"
    >
      <div class="card-body">
        <div class="flex items-start justify-between gap-4">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
              <.status_indicator status={connection.sync_status} enabled={connection.enabled} />
              <h3 class="font-semibold text-lg">
                {String.capitalize(connection.provider_type)}
              </h3>
            </div>
            <p class="text-base-content/70 mt-1">{connection.name}</p>
            <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-sm text-base-content/60">
              <.connection_info connection={connection} />
            </div>
          </div>

          <div class="flex items-center gap-2">
            <.link
              navigate={~p"/admin/providers/#{connection.id}/edit"}
              class="btn btn-ghost btn-sm"
            >
              Settings
            </.link>
            <button
              phx-click="delete"
              phx-value-id={connection.id}
              data-confirm="Disconnect from Printify? Your synced products will remain in your shop."
              class="btn btn-ghost btn-sm text-error"
            >
              Disconnect
            </button>
          </div>
        </div>

        <div class="card-actions justify-end mt-4 pt-4 border-t border-base-200">
          <button
            phx-click="sync"
            phx-value-id={connection.id}
            disabled={connection.sync_status == "syncing"}
            class="btn btn-outline btn-sm"
          >
            <.icon
              name="hero-arrow-path"
              class={
                if connection.sync_status == "syncing", do: "size-4 animate-spin", else: "size-4"
              }
            />
            {if connection.sync_status == "syncing", do: "Syncing...", else: "Sync products"}
          </button>
        </div>
      </div>
    </div>
  </div>
</Layouts.app>
