<script>
  import { signIn, signUp } from './auth.js';

  let mode = $state('signin'); // signin | signup
  let email = $state('');
  let password = $state('');
  let fullName = $state('');
  let error = $state('');
  let loading = $state(false);
  let signupDone = $state(false);

  async function submit() {
    error = '';
    loading = true;
    try {
      if (mode === 'signup') {
        await signUp(email, password, fullName);
        signupDone = true;
      } else {
        await signIn(email, password);
      }
    } catch (e) {
      error = e.message || 'Something went wrong';
    } finally {
      loading = false;
    }
  }
</script>

<div class="auth-screen">
  <div class="header-brand">
    <div class="brand-line brand-line-first">Nur</div>
    <div class="brand-line brand-line-second">Falah</div>
  </div>
  <span class="header-tagline">ESTATE &amp; WAQF SUITE</span>
  <div class="header-divider"></div>

  {#if signupDone}
    <div class="notice">Account created. Check your email to confirm, then sign in.</div>
    <button class="btn-secondary" onclick={() => { signupDone = false; mode = 'signin'; }}>Back to sign in</button>
  {:else}
    <div class="mode-switch">
      <button class="mode-btn" class:active={mode === 'signin'} onclick={() => mode = 'signin'}>Sign in</button>
      <button class="mode-btn" class:active={mode === 'signup'} onclick={() => mode = 'signup'}>Create account</button>
    </div>

    {#if mode === 'signup'}
      <label class="field"><span>Full name</span><input type="text" bind:value={fullName} /></label>
    {/if}
    <label class="field"><span>Email</span><input type="email" bind:value={email} /></label>
    <label class="field"><span>Password</span><input type="password" bind:value={password} /></label>

    {#if error}<p class="error-text">{error}</p>{/if}

    <button class="btn-primary" disabled={loading || !email || !password} onclick={submit}>
      {loading ? 'Please wait…' : mode === 'signup' ? 'Create account' : 'Sign in'}
    </button>

    <p class="note">Head of family or an assigned estate agent — sign in the same way. What you see next depends on your role.</p>
  {/if}
</div>

<style>
  .auth-screen { max-width: 400px; margin: 60px auto; padding: 24px; text-align: center; }
  .header-brand { display: flex; justify-content: center; gap: 8px; }
  .brand-line { font-family: 'DM Serif Display', serif; font-size: 30px; }
  .brand-line-first { color: #E8E4DC; }
  .brand-line-second { color: #C9A84C; }
  .header-tagline { font-size: 10px; letter-spacing: 2px; color: #8A8478; }
  .header-divider { height: 2px; width: 40px; background: #C9A84C; margin: 10px auto 30px; border-radius: 2px; }
  .mode-switch { display: flex; gap: 8px; margin-bottom: 20px; }
  .mode-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(201,168,76,0.2); background: rgba(255,255,255,0.05); color: #8A8478; cursor: pointer; }
  .mode-btn.active { background: rgba(201,168,76,0.15); color: #C9A84C; font-weight: 600; }
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
  .field span { font-size: 12px; color: #B8B2A6; }
  .field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 12px; color: #E8E4DC; font-size: 15px; }
  .btn-primary { width: 100%; padding: 14px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; background: #C9A84C; color: #070A0D; margin-top: 6px; }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-secondary { width: 100%; padding: 12px; border-radius: 8px; border: none; background: rgba(255,255,255,0.08); color: #E8E4DC; cursor: pointer; margin-top: 12px; }
  .error-text { color: #EF4444; font-size: 12.5px; margin-bottom: 10px; }
  .notice { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.3); border-radius: 10px; padding: 14px; font-size: 13px; color: #E8E4DC; }
  .note { font-size: 11px; color: #8A8478; margin-top: 20px; line-height: 1.5; }
</style>
