"use client"

import React, { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/lib/auth-context"
import { Mail, Lock, LogIn, AlertCircle } from "lucide-react"

// Defines props for the LoginForm component
interface LoginFormProps {
  onSwitchToRegister: () => void // Function to switch to the registration form
}

// LoginForm component for user authentication
export function LoginForm({ onSwitchToRegister }: LoginFormProps) {
  // Access authentication context for login functionality
  const { login } = useAuth()
  // State variables for form inputs and UI feedback
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  // Handles form submission for user login
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault() // Prevent default form submission behavior
    setError("") // Clear previous errors
    setIsLoading(true) // Show loading indicator

    // Attempt to log in the user
    const success = await login(email, password)
    if (!success) {
      setError("Ungültige E-Mail oder Passwort") // Set error message on failure
    }
    setIsLoading(false) // Hide loading indicator
  }

  return (
    <Card className="w-full max-w-md border-border/60 shadow-lg">
      <CardHeader className="space-y-1 pb-6">
        <CardTitle className="text-2xl font-semibold tracking-tight">Willkommen zurück</CardTitle>
        <CardDescription className="text-muted-foreground">
          Bitte melden Sie sich an
        </CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          {/* Display error message if present */}
          {error && (
            <div className="flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
              <AlertCircle className="h-4 w-4" />
              {error}
            </div>
          )}
          {/* Email input field */}
          <div className="space-y-2">
            <Label htmlFor="email" className="text-sm font-medium">
              E-Mail
            </Label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="email"
                type="email"
                placeholder="name@schule.de"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>
          {/* Password input field */}
          <div className="space-y-2">
            <Label htmlFor="password" className="text-sm font-medium">
              Kennwort
            </Label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="password"
                type="password"
                placeholder="Kennwort eingeben"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>
          {/* Informational message for users */}
          <div className="rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground">
            <p className="font-medium text-foreground mb-1">Hinweis:</p>
            <p>Nutzen Sie Ihre registrierten Zugangsdaten.</p>
          </div>
        </CardContent>
        <CardFooter className="flex flex-col gap-4 pt-2">
          {/* Submit button with loading state */}
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? (
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
                Anmelden...
              </span>
            ) : (
              <span className="flex items-center gap-2">
                <LogIn className="h-4 w-4" />
                Anmelden
              </span>
            )}
          </Button>
          {/* Link to switch to registration form */}
          <p className="text-sm text-muted-foreground">
            {"Noch kein Konto? "}
            <button
              type="button"
              onClick={onSwitchToRegister}
              className="font-medium text-primary underline-offset-4 hover:underline"
            >
              Registrieren
            </button>
          </p>
        </CardFooter>
      </form>
    </Card>
  )
}