@model MemberCenter.Web.Models.Admin.OAuthClientFormViewModel

<h1>Create OAuth Client</h1>
<form method="post">
  <label>Tenant Id</label>
  <select asp-for="TenantId">
    <option value="">Select a tenant</option>
@foreach (var tenant in Model.Tenants)
{
    <option value="@tenant.Id">@tenant.Name</option>
}
  </select>
  <span asp-validation-for="TenantId"></span>

  <label>Name</label>
  <input asp-for="Name" />
  <span asp-validation-for="Name"></span>

  <label>Client Type</label>
  <select asp-for="ClientType">
    <option value="public">public</option>
    <option value="confidential">confidential</option>
  </select>
  <span asp-validation-for="ClientType"></span>

  <label>Usage</label>
  <select asp-for="Usage">
    <option value="tenant_api">tenant_api</option>
    <option value="send_api">send_api</option>
    <option value="web_login">web_login</option>
    <option value="webhook_outbound">webhook_outbound</option>
    <option value="platform_service">platform_service</option>
  </select>
  <span asp-validation-for="Usage"></span>

  <label>Redirect URIs (comma-separated, required for web_login / webhook_outbound)</label>
  <input asp-for="RedirectUris" />
  <span asp-validation-for="RedirectUris"></span>

  <button type="submit">Save</button>
</form>

<script>
  (function () {
    const usage = document.getElementById("Usage");
    const redirect = document.getElementById("RedirectUris");
    const clientType = document.getElementById("ClientType");
    if (!usage || !redirect || !clientType) return;

    function syncRedirectInputState() {
      const usageValue = usage.value;
      const needsRedirect = usageValue === "web_login" || usageValue === "webhook_outbound";
      const requiresConfidential = usageValue === "tenant_api"
        || usageValue === "send_api"
        || usageValue === "platform_service";

      redirect.disabled = !needsRedirect;
      if (!needsRedirect) {
        redirect.value = "";
      }

      if (requiresConfidential) {
        clientType.value = "confidential";
        const publicOption = clientType.querySelector('option[value="public"]');
        if (publicOption) {
          publicOption.disabled = true;
        }
      } else {
        const publicOption = clientType.querySelector('option[value="public"]');
        if (publicOption) {
          publicOption.disabled = false;
        }
      }
    }

    usage.addEventListener("change", syncRedirectInputState);
    syncRedirectInputState();
  })();
</script>