<%= turbo_frame_tag "modal" do %>
  <%= render DS::Dialog.new do |dialog| %>
    <% dialog.with_header(title: t(".title")) %>

    <% dialog.with_body do %>
      <% error_msg = local_assigns[:error_message] || @error_message %>
      <% if error_msg.present? %>
        <div class="p-2 rounded-md bg-destructive/10 text-destructive text-sm overflow-hidden mb-3">
          <p class="line-clamp-3" title="<%= error_msg %>"><%= error_msg %></p>
        </div>
      <% end %>

      <% items = local_assigns[:coinstats_items] || @coinstats_items || Current.family.coinstats_items.where.not(api_key: nil) %>
      <% selected_item = items&.first %>

      <% if selected_item.present? %>
        <% blockchains = local_assigns[:blockchains] || @blockchains || [] %>
        <% exchanges = local_assigns[:exchanges] || @exchanges || [] %>
        <% address_value = local_assigns[:address] || @address %>
        <% blockchain_value = local_assigns[:blockchain] || @blockchain %>
        <% exchange_connection_id = local_assigns[:exchange_connection_id] || @exchange_connection_id %>
        <% exchange_connection_fields = local_assigns[:exchange_connection_fields] || @exchange_connection_fields || {} %>

        <div class="space-y-5">
          <section class="rounded-xl border border-primary bg-container p-4 space-y-3">
            <div class="space-y-1">
              <h3 class="text-sm font-medium text-primary"><%= t(".link_wallet_title") %></h3>
              <p class="text-sm text-secondary"><%= t(".link_wallet_description") %></p>
            </div>

            <%= styled_form_with url: link_wallet_coinstats_items_path,
                                 method: :post,
                                 data: { turbo: true },
                                 class: "space-y-3" do |form| %>
              <%= form.hidden_field :coinstats_item_id, value: selected_item.id %>

              <%= form.text_field :address,
                                  label: t(".address_label"),
                                  placeholder: t(".address_placeholder"),
                                  value: address_value %>

              <% if blockchains.present? %>
                <%= form.select :blockchain,
                                options_for_select(blockchains, blockchain_value),
                                { include_blank: t(".blockchain_select_blank") },
                                label: t(".blockchain_label"),
                                class: "w-full rounded-md border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
              <% else %>
                <%= form.text_field :blockchain,
                                    label: t(".blockchain_label"),
                                    placeholder: t(".blockchain_placeholder"),
                                    value: blockchain_value %>
              <% end %>

              <div class="flex justify-end">
                <%= form.submit t(".link_wallet_submit"),
                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
              </div>
            <% end %>
          </section>

          <section class="rounded-xl border border-primary bg-container p-4 space-y-3"
                   data-controller="coinstats-exchange-fields"
                   data-coinstats-exchange-fields-exchanges-value="<%= html_escape(exchanges.to_json) %>"
                   data-coinstats-exchange-fields-initial-connection-id-value="<%= exchange_connection_id %>"
                   data-coinstats-exchange-fields-initial-fields-value="<%= html_escape(exchange_connection_fields.to_json) %>">
            <div class="space-y-1">
              <h3 class="text-sm font-medium text-primary"><%= t(".link_exchange_title") %></h3>
              <p class="text-sm text-secondary"><%= t(".link_exchange_description") %></p>
              <p class="text-xs text-secondary"><%= t(".link_exchange_note") %></p>
            </div>

            <%= styled_form_with url: link_exchange_coinstats_items_path,
                                 method: :post,
                                 data: { turbo: true },
                                 class: "space-y-3" do |form| %>
              <%= form.hidden_field :coinstats_item_id, value: selected_item.id %>
              <%= form.hidden_field :exchange_connection_name, value: "", data: { coinstats_exchange_fields_target: "connectionName" } %>

              <%= form.select :exchange_connection_id,
                              options_for_select(exchanges.map { |exchange| [ exchange[:name], exchange[:connection_id] ] }, exchange_connection_id),
                              { include_blank: t(".exchange_select_blank") },
                              label: t(".exchange_label"),
                              class: "w-full rounded-md border border-primary px-3 py-2 text-sm bg-container-inset text-primary",
                              data: {
                                coinstats_exchange_fields_target: "select",
                                action: "change->coinstats-exchange-fields#render"
                              } %>

              <div data-coinstats-exchange-fields-target="fields" class="space-y-3"></div>

              <div class="flex justify-end">
                <%= form.submit t(".link_exchange_submit"),
                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
              </div>
            <% end %>
          </section>
        </div>
      <% else %>
        <div class="space-y-4">
          <div class="flex items-start gap-3">
            <%= icon("alert-circle", class: "text-warning w-5 h-5 shrink-0 mt-0.5") %>
            <div class="text-sm text-secondary">
              <p class="font-medium text-primary mb-2"><%= t(".not_configured_title") %></p>
              <p><%= t(".not_configured_message") %></p>
            </div>
          </div>

          <div class="bg-surface rounded-lg p-4 space-y-2 text-sm">
            <ol class="list-decimal list-inside space-y-1 text-secondary">
              <li><%= t(".not_configured_step1_html").html_safe %></li>
              <li><%= t(".not_configured_step2_html").html_safe %></li>
              <li><%= t(".not_configured_step3_html").html_safe %></li>
            </ol>
          </div>

          <div class="mt-4">
            <%= link_to settings_providers_path,
                        class: "w-full inline-flex items-center justify-center rounded-lg font-medium whitespace-nowrap rounded-lg hidden md:inline-flex px-3 py-2 text-sm text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
                        data: { turbo: false } do %>
              <%= t(".go_to_settings") %>
            <% end %>
          </div>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>
