<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@organization}
>
  <div class="mb-4">
    <.link
      navigate={
        if @live_action == :edit,
          do: ~p"/orgs/#{@current_organization.slug}/sites/#{@site.id}",
          else: ~p"/orgs/#{@current_organization.slug}/sites"
      }
      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" />
      {if @live_action == :edit, do: "Back to Site", else: "Back to Sites"}
    </.link>
  </div>

  <.header>
    {@page_title}
    <:subtitle>
      {if @live_action == :new,
        do: "Add a new site to your organization",
        else: "Update site details"}
    </:subtitle>
  </.header>

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

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
            Parent Site
            <span class="text-zinc-400 dark:text-zinc-500 font-normal">(optional)</span>
          </span>
          <select
            id={@form[:parent_site_id].id}
            name={@form[:parent_site_id].name}
            class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
          >
            <option value="">No parent site</option>
            {Phoenix.HTML.Form.options_for_select(
              Enum.map(@available_parent_sites, &{&1.name, &1.id}),
              @form[:parent_site_id].value
            )}
          </select>
        </label>
      </div>

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
            Location <span class="text-zinc-400 dark:text-zinc-500 font-normal">(optional)</span>
          </span>
          <input
            type="text"
            id={@form[:location].id}
            name={@form[:location].name}
            value={@form[:location].value}
            class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
          />
        </label>
      </div>

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
            Description
            <span class="text-zinc-400 dark:text-zinc-500 font-normal">(optional)</span>
          </span>
          <textarea
            id={@form[:description].id}
            name={@form[:description].name}
            class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
          >{Phoenix.HTML.Form.normalize_value("textarea", @form[:description].value)}</textarea>
        </label>
      </div>

      <%= if @available_agents != [] do %>
        <div class="mt-6 border-t pt-6">
          <h3 class="text-base font-medium mb-4">
            Agent Configuration
            <span class="text-zinc-400 dark:text-zinc-500 font-normal">(optional)</span>
          </h3>
          <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
            Set a default agent for SNMP polling at this site. This will override the organization default for all devices at this site. Leave blank to inherit from organization.
          </p>

          <.input
            field={@form[:agent_token_id]}
            type="select"
            label="Default Agent for Site"
            prompt="Inherit from organization"
            options={Enum.map(@available_agents, &{&1.name, &1.id})}
          />

          <%= if @live_action == :edit and @site.agent_token_id do %>
            <p class="mt-1 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
              <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
              <strong>Overriding</strong> organization default -
              all devices at this site will use this agent
            </p>

            <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 Site Device
              </p>
              <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                This will assign this agent to ALL devices at this site.
              </p>
              <.button
                type="button"
                phx-click="apply_agent_to_all"
                data-confirm="This will replace agent assignments for ALL devices at this site. Are you sure?"
                variant="danger"
              >
                <.icon name="hero-arrow-path" class="h-4 w-4" /> Apply Agent to All Device
              </.button>
            </div>
          <% else %>
            <%= if Map.get(assigns, :org_agent) do %>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400 flex items-center gap-1">
                <.icon name="hero-building-office-2" class="h-4 w-4" />
                Currently inheriting organization default: <strong>{@org_agent.name}</strong>
              </p>
            <% else %>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                Set a default agent for all devices at this site. Device can override this setting individually.
              </p>
            <% end %>
          <% end %>
        </div>
      <% end %>

      <div class="mt-6 border-t pt-6">
        <h3 class="text-base font-medium mb-4">
          SNMP Configuration
          <span class="text-zinc-400 dark:text-zinc-500 font-normal">(optional)</span>
        </h3>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
          Override organization SNMP defaults for all devices at this site. Leave blank to inherit from organization.
        </p>

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

        <.input
          field={@form[:snmp_community]}
          type="text"
          label="SNMP Community String"
          placeholder="Leave blank to inherit from organization"
        />

        <%= if @live_action == :edit and @site.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 Site Device
            </p>
            <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
              This will override SNMP settings for ALL devices at this site.
            </p>
            <.button
              type="button"
              phx-click="apply_snmp_to_all"
              data-confirm="This will replace SNMP settings for ALL devices at this site. 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>

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

    <%= if @live_action == :edit do %>
      <div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
        <h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">Danger Zone</h3>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
          Once you delete a site, there is no going back. This will also delete all devices at this site.
        </p>
        <.button
          phx-click="delete"
          data-confirm="Are you sure you want to delete this site? This will also delete all devices at this site."
          variant="danger"
        >
          <.icon name="hero-trash" class="h-4 w-4" /> Delete Site
        </.button>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>
