<template>
  <section class="auth-cover">
    <div class="auth-cover-art">
      <img src="/generated/poshmanager-auth-cover.png" alt="" />
      <div class="auth-cover-overlay">
        <div class="auth-brand-lockup">
          <div class="brand-mark">PS</div>
          <div>
            <strong>POSHManager</strong>
            <span>REMOTE SCRIPT OPERATIONS</span>
          </div>
        </div>
        <div class="auth-story">
          <span class="eyebrow">POWERSHELL, ORCHESTRATED</span>
          <h1>Execute with confidence across every system.</h1>
          <p>Build scripts, target trusted hosts, launch RunPlans, and inspect every byte of output from one API-first operations console.</p>
        </div>
        <div class="trust-row">
          <span><ShieldCheck :size="16" /> Encrypted credentials</span>
          <span><Sparkles :size="16" /> Full execution logs</span>
        </div>
      </div>
    </div>

    <div class="auth-form-panel">
      <div class="auth-form-wrap glass-panel">
        <span class="eyebrow">WELCOME BACK</span>
        <h2>Sign in to POSHManager</h2>
        <p>Use your operator account to continue.</p>
        <form @submit.prevent="$emit('login')">
          <label>
            <span>Email address</span>
            <input v-model="loginForm.email" type="email" autocomplete="username" required />
          </label>
          <label>
            <span>Password</span>
            <div class="password-input">
              <input v-model="loginForm.password" :type="showPassword ? 'text' : 'password'" autocomplete="current-password" required />
              <button type="button" @click="$emit('update:showPassword', !showPassword)">
                <component :is="showPassword ? EyeOff : Eye" :size="17" />
              </button>
            </div>
          </label>
          <div class="auth-options">
            <label class="checkbox"><input type="checkbox" checked /><span>Remember this device</span></label>
            <a href="#">Forgot password?</a>
          </div>
          <small v-if="error" class="form-error">{{ error }}</small>
          <button class="primary-action auth-submit" type="submit">
            <LockKeyhole :size="17" />
            Sign in securely
            <ArrowRight :size="17" />
          </button>
        </form>
        <template v-if="entraEnabled">
          <div class="auth-divider"><span>or</span></div>
          <a class="entra-button" href="/api/auth/entra/login">
            <Building2 :size="17" />
            Sign in with Microsoft
          </a>
        </template>
        <div class="demo-note"><strong>LOCAL DEFAULT</strong><span>admin@posh.local / change-me-now</span></div>
      </div>
      <footer>Protected by encrypted sessions · API-first by design</footer>
    </div>
  </section>
</template>

<script setup>
import { ArrowRight, Building2, Eye, EyeOff, LockKeyhole, ShieldCheck, Sparkles } from '@lucide/vue';

defineProps({
  loginForm: { type: Object, required: true },
  error: { type: String, default: '' },
  showPassword: Boolean,
  entraEnabled: Boolean
});

defineEmits(['login', 'update:showPassword']);
</script>
