<script lang="ts">
  let {
    isOAuthCallback,
    callbackBusy,
    authBusy,
    authError,
    authMessage,
    onlogin
  }: {
    isOAuthCallback: boolean;
    callbackBusy: boolean;
    authBusy: boolean;
    authError: string;
    authMessage: string;
    onlogin: (username: string, password: string) => void;
  } = $props();

  let username = $state('');
  let password = $state('');

  function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
    onlogin(username, password);
  }
</script>

<div class="rounded-3xl border border-white/10 bg-slate-900 p-6 shadow-xl shadow-slate-950/30 sm:p-8">
  {#if isOAuthCallback}
    <h2 class="text-xl font-semibold text-white">Authorizing operator session</h2>
    <p class="mt-2 text-sm leading-6 text-slate-400">
      Finishing the callback flow and exchanging the returned code for an AMCS token.
    </p>

    <div class="mt-6 rounded-2xl border border-cyan-400/20 bg-cyan-400/5 px-4 py-6 text-sm text-cyan-100">
      {#if callbackBusy}
        Working the callback doohickey…
      {:else if authError}
        Callback failed. Fix the route or try the login run again.
      {:else}
        Callback processed.
      {/if}
    </div>
  {:else}
    <h2 class="text-xl font-semibold text-white">Operator login</h2>
    <p class="mt-1 text-sm text-slate-400">Authenticate to access the AMCS admin interface.</p>

    <form class="mt-6 space-y-4" onsubmit={handleSubmit}>
      <div>
        <label for="username" class="block text-sm font-medium text-slate-300">Username</label>
        <input
          id="username"
          type="text"
          autocomplete="username"
          required
          bind:value={username}
          disabled={authBusy}
          class="mt-1 block w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:border-cyan-400/40 focus:outline-none focus:ring-1 focus:ring-cyan-400/40 disabled:opacity-60"
          placeholder="client ID"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-300">Password</label>
        <input
          id="password"
          type="password"
          autocomplete="current-password"
          required
          bind:value={password}
          disabled={authBusy}
          class="mt-1 block w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:border-cyan-400/40 focus:outline-none focus:ring-1 focus:ring-cyan-400/40 disabled:opacity-60"
          placeholder="client secret"
        />
      </div>

      <button
        type="submit"
        class="inline-flex w-full items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20 disabled:cursor-not-allowed disabled:opacity-60"
        disabled={authBusy}
      >
        {#if authBusy}Signing in…{:else}Sign in{/if}
      </button>

      {#if authError}
        <p class="text-sm text-rose-300">{authError}</p>
      {/if}
      {#if authMessage}
        <p class="text-sm text-emerald-300">{authMessage}</p>
      {/if}
    </form>
  {/if}
</div>
