import Link from 'next/link'
import { loginAction } from '@/actions/auth'
import { AuthForm } from '@/components/auth/auth-form'
import { QrLoginButton } from './qr-login-button'

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-sm space-y-6">

        {/* Logo / titel */}
        <div className="text-center space-y-1">
          <h1 className="text-2xl font-medium text-foreground">Scrum4Me</h1>
          <p className="text-sm text-muted-foreground">Inloggen bij je account</p>
        </div>

        {/* Formulier */}
        <div className="bg-surface-container-low rounded-xl p-6 space-y-4 border border-border">
          <AuthForm action={loginAction} submitLabel="Inloggen" />

          {/* M10 — Inloggen via mobiel zonder wachtwoord */}
          <div className="flex items-center gap-2 py-1">
            <div className="border-border h-px flex-1 border-t" />
            <span className="text-muted-foreground text-xs">of</span>
            <div className="border-border h-px flex-1 border-t" />
          </div>
          <QrLoginButton />

          <div className="text-center text-sm text-muted-foreground">
            Nog geen account?{' '}
            <Link href="/register" className="text-primary hover:underline font-medium">
              Registreer hier
            </Link>
          </div>
        </div>

        {/* Demo credentials */}
        <div className="bg-info-container text-info-container-foreground rounded-xl p-4 text-sm space-y-1 border border-border">
          <p className="font-medium">Demo-account (alleen lezen)</p>
          <p>Gebruikersnaam: <span className="font-mono font-medium">demo</span></p>
          <p>Wachtwoord: <span className="font-mono font-medium">demo1234</span></p>
        </div>

      </div>
    </div>
  )
}