<script>
  import { goto } from '$app/navigation';
  import { login } from '$lib/stores/auth';
  import { addToast } from '$lib/stores/toast';

  let username = '';
  let password = '';
  let totpCode = '';
  let needsTotp = false;
  let loading = false;
  let error = '';

  async function handleLogin() {
    error = '';
    loading = true;
    try {
      await login(username, password, needsTotp ? totpCode : undefined);
      goto('/');
    } catch (err) {
      if (err.detail?.includes('TOTP')) {
        needsTotp = true;
        error = 'TOTP 코드를 입력하세요';
      } else {
        error = err.detail || '로그인 실패';
      }
    } finally {
      loading = false;
    }
  }
</script>

<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <h1 class="text-2xl font-bold mb-1">hyungi Document Server</h1>
    <p class="text-[var(--text-dim)] text-sm mb-8">로그인</p>

    <form onsubmit={(e) => { e.preventDefault(); handleLogin(); }} class="space-y-4">
      <div>
        <label for="username" class="block text-sm text-[var(--text-dim)] mb-1">아이디</label>
        <input
          id="username"
          type="text"
          bind:value={username}
          class="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none"
          autocomplete="username"
        />
      </div>

      <div>
        <label for="password" class="block text-sm text-[var(--text-dim)] mb-1">비밀번호</label>
        <input
          id="password"
          type="password"
          bind:value={password}
          class="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none"
          autocomplete="current-password"
        />
      </div>

      {#if needsTotp}
        <div>
          <label for="totp" class="block text-sm text-[var(--text-dim)] mb-1">TOTP 코드</label>
          <input
            id="totp"
            type="text"
            bind:value={totpCode}
            maxlength="6"
            inputmode="numeric"
            pattern="[0-9]*"
            class="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none tracking-widest text-center text-lg"
            autocomplete="one-time-code"
          />
        </div>
      {/if}

      {#if error}
        <p class="text-[var(--error)] text-sm">{error}</p>
      {/if}

      <button
        type="submit"
        disabled={loading}
        class="w-full py-2.5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white rounded-lg font-medium disabled:opacity-50 transition-colors"
      >
        {loading ? '로그인 중...' : '로그인'}
      </button>
    </form>
  </div>
</div>
