<script>
  import { startEmail } from '$lib/auth.svelte.js';

  let { onclose } = $props();
  let email = $state('');
  let status = $state('idle'); // idle | sending | sent | error
  let error = $state('');

  async function submit(e) {
    e.preventDefault();
    if (!email || status === 'sending') return;
    status = 'sending';
    error = '';
    try {
      await startEmail(email);
      status = 'sent';
    } catch (err) {
      status = 'error';
      error = err?.message || 'Something went wrong — try again in a moment.';
    }
  }

  function onkey(e) {
    if (e.key === 'Escape') onclose?.();
  }
</script>

<svelte:window onkeydown={onkey} />

<!-- Backdrop: clicking it closes; keyboard users close with Escape (window). -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="overlay" role="presentation" onclick={(e) => e.target === e.currentTarget && onclose?.()}>
  <div class="sheet rise" role="dialog" aria-modal="true" aria-label="Sign in" tabindex="-1">
    <button class="x" onclick={onclose} aria-label="Close">×</button>

    {#if status === 'sent'}
      <h2>Check your inbox</h2>
      <p class="sub">
        We've sent a one-time sign-in link to <strong>{email}</strong>. It works once and
        expires in 15 minutes.
      </p>
      <button class="primary" onclick={onclose}>Done</button>
    {:else}
      <h2>Sign in to Upbeat Bytes</h2>
      <p class="sub">
        Save articles and keep your history across devices.
      </p>

      <a class="google" href="/api/auth/google/start">
        <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
          <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.71-1.57 2.68-3.89 2.68-6.62z"/>
          <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/>
          <path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/>
          <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/>
        </svg>
        Continue with Google
      </a>

      <div class="or"><span>or email me a one-time link — no password</span></div>

      <form onsubmit={submit}>
        <input
          type="email"
          bind:value={email}
          placeholder="you@example.com"
          autocomplete="email"
          required
        />
        <button class="primary" type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending…' : 'Email me a link'}
        </button>
      </form>

      {#if status === 'error'}<p class="err">{error}</p>{/if}
      <p class="fine">No account needed to browse — signing in just saves your stuff.</p>
    {/if}
  </div>
</div>

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 38, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 40;
  }
  .sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    padding: 28px 26px 22px;
    position: relative;
  }
  .x {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
  }
  h2 {
    font-size: 1.5rem;
    margin: 0 0 8px;
  }
  .sub {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.95rem;
  }
  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  input {
    font: inherit;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
  }
  input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .primary {
    font: inherit;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.14s ease;
  }
  .primary:hover {
    background: var(--accent-deep);
  }
  .primary:disabled {
    opacity: 0.6;
    cursor: default;
  }
  .google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
  }
  .google:hover {
    background: #f7f7f5;
    border-color: #d9d3c6;
  }
  .or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--muted);
    font-size: 0.78rem;
  }
  .or::before,
  .or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .err {
    margin: 10px 0 0;
    color: #9a3b3b;
    font-size: 0.86rem;
  }
  .fine {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
  }
</style>
