<%= content_for :page_title, "Create New API Key" %>

<%= settings_section title: nil, subtitle: "Generate a new API key to access your Sure data programmatically." do %>
  <%= styled_form_with model: @api_key, url: settings_api_key_path, class: "space-y-4" do |form| %>
    <%= form.text_field :name,
        placeholder: "e.g., My Budget App, Portfolio Tracker",
        label: "API Key Name",
        help_text: "Choose a descriptive name to help you identify this key later." %>

    <div>
      <%= form.label :scopes, "Permissions", class: "block text-sm font-medium text-primary mb-2" %>
      <p class="text-sm text-secondary mb-3">Select the permissions this API key should have:</p>

      <div class="space-y-2">
        <% [
          ["read", "Read Only", "View your accounts, transactions, and balances"],
          ["read_write", "Read/Write", "View your data and create new transactions"]
        ].each do |value, label, description| %>
          <div class="bg-surface-inset rounded-lg p-3 border border-primary">
            <label class="flex items-start gap-3 cursor-pointer">
              <%= radio_button_tag "api_key[scopes]", value, (@api_key&.scopes || []).include?(value),
                  class: "mt-1" %>
              <div class="flex-1">
                <div class="font-medium text-primary"><%= label %></div>
                <div class="text-sm text-secondary mt-1"><%= description %></div>
              </div>
            </label>
          </div>
        <% end %>
      </div>
    </div>

    <%= render DS::Alert.new(title: "Security Warning", variant: :warning) do %>
      <p>
        Your API key will be displayed only once after creation. Make sure to copy and store it securely.
        Anyone with access to this key can access your data according to the permissions you select.
      </p>
    <% end %>

    <div class="flex justify-end gap-3 pt-4 border-t border-primary">
      <%= render DS::Link.new(
        text: "Cancel",
        href: settings_api_key_path,
        variant: "ghost"
      ) %>

      <%= render DS::Button.new(
        text: "Save API Key",
        variant: "primary",
        type: "submit"
      ) %>
    </div>
  <% end %>
<% end %>
