<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@organization}
>
  <div class="mb-4">
    <.link
      navigate={~p"/orgs/#{@organization.slug}"}
      class="inline-flex items-center gap-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
    >
      <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Dashboard
    </.link>
  </div>

  <.header>
    Organization Settings
    <:subtitle>
      Manage your organization settings and defaults
    </:subtitle>
  </.header>

  <div class="max-w-2xl">
    <.form for={@form} id="organization-form" phx-change="validate" phx-submit="save">
      <.input field={@form[:name]} type="text" label="Organization Name" required />

      <div class="mt-6 border-t pt-6">
        <h3 class="text-lg font-medium mb-4">SNMP Configuration</h3>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
          Set default SNMP settings for all devices in this organization. These can be overridden at the site or device level.
        </p>

        <.input
          field={@form[:snmp_version]}
          type="select"
          label="SNMP Version"
          prompt="Select SNMP version"
          options={[{"SNMP v1", "1"}, {"SNMP v2c", "2c"}, {"SNMP v3", "3"}]}
        />

        <.input
          field={@form[:snmp_community]}
          type="text"
          label="SNMP Community String"
          placeholder="e.g., public"
        />

        <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400 italic">
          <.icon name="hero-information-circle" class="h-4 w-4 inline" />
          SNMP configuration hierarchy: Device > Site > Organization
        </p>

        <%= if @organization.snmp_community do %>
          <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
            <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
              Force Apply to All Device
            </p>
            <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
              This will override SNMP settings for ALL devices across all sites in this organization.
            </p>
            <.button
              type="button"
              phx-click="apply_snmp_to_all"
              data-confirm="This will replace SNMP settings for ALL devices in this organization. Are you sure?"
              variant="danger"
            >
              <.icon name="hero-arrow-path" class="h-4 w-4" /> Apply SNMP Config to All Device
            </.button>
          </div>
        <% end %>
      </div>

      <%= if @available_agents != [] do %>
        <div class="mt-6 border-t pt-6">
          <h3 class="text-lg font-medium mb-4">Default Agent</h3>
          <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
            Select a default agent for SNMP polling. This will be used for all devices in this organization unless overridden at the site or device level.
          </p>

          <.input
            field={@form[:default_agent_token_id]}
            type="select"
            label="Default Remote Agent"
            prompt="No default agent - cloud polling"
            options={Enum.map(@available_agents, &{&1.name, &1.id})}
          />

          <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg text-sm">
            <p class="font-medium text-zinc-700 dark:text-zinc-300 mb-2">
              Current Device Assignment:
            </p>
            <div class="space-y-1 text-zinc-600 dark:text-zinc-400">
              <div class="flex items-center gap-2">
                <.icon name="hero-server" class="h-4 w-4" />
                <span>
                  <strong>{@assignment_breakdown.direct}</strong> device-level override
                </span>
              </div>
              <div class="flex items-center gap-2">
                <.icon name="hero-building-office" class="h-4 w-4" />
                <span><strong>{@assignment_breakdown.site}</strong> inherited from site</span>
              </div>
              <div class="flex items-center gap-2">
                <.icon name="hero-building-office-2" class="h-4 w-4" />
                <span>
                  <strong>{@assignment_breakdown.organization}</strong>
                  inheriting organization default
                </span>
              </div>
              <div class="flex items-center gap-2">
                <.icon name="hero-cloud" class="h-4 w-4" />
                <span>
                  <strong>{@assignment_breakdown.cloud}</strong> cloud polling (no agent)
                </span>
              </div>
            </div>
          </div>

          <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400 italic">
            <.icon name="hero-information-circle" class="h-4 w-4 inline" />
            Agent assignment hierarchy: Device > Site > Organization
          </p>

          <%= if @organization.default_agent_token_id do %>
            <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
              <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                Force Apply to All Device
              </p>
              <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                This will assign the default agent to ALL devices across all sites in this organization.
              </p>
              <.button
                type="button"
                phx-click="apply_agent_to_all"
                data-confirm="This will replace agent assignments for ALL devices in this organization. Are you sure?"
                variant="danger"
              >
                <.icon name="hero-arrow-path" class="h-4 w-4" /> Apply Default Agent to All Device
              </.button>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="mt-6 border-t pt-6">
          <h3 class="text-lg font-medium mb-2">Default Agent</h3>
          <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
            No agents configured yet.
            <.link
              navigate={~p"/orgs/#{@organization.slug}/agents"}
              class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
            >
              Create an agent
            </.link>
            to enable remote polling.
          </p>
        </div>
      <% end %>

      <div class="flex gap-3 mt-6">
        <.button phx-disable-with="Saving..." variant="primary">Save Settings</.button>
        <.button navigate={~p"/orgs/#{@organization.slug}"}>Cancel</.button>
      </div>
    </.form>
  </div>
</Layouts.authenticated>
