"use client"

import { useState } from "react"
import { Eye, EyeOff, Mail, Lock, User, Github, Chrome, Apple, ArrowRight, Shield, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import { LoginSection } from "@/components/sections/login-section"

interface LoginVariantProps {
  variant: "simple" | "social" | "modern" | "split" | "minimal" | "secure"
}

function SimpleLogin() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">Sign In</CardTitle>
        <CardDescription className="text-center">Enter your email and password to access your account</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <div className="relative">
            <Input id="password" type={showPassword ? "text" : "password"} placeholder="Enter your password" />
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
              onClick={() => setShowPassword(!showPassword)}
            >
              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
          </div>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Checkbox id="remember" />
            <Label htmlFor="remember" className="text-sm">
              Remember me
            </Label>
          </div>
          <Button variant="link" className="px-0 text-sm">
            Forgot password?
          </Button>
        </div>
      </CardContent>
      <CardFooter className="flex flex-col space-y-4">
        <Button className="w-full">Sign In</Button>
        <p className="text-center text-sm text-muted-foreground">
          Don't have an account?{" "}
          <Button variant="link" className="px-0">
            Sign up
          </Button>
        </p>
      </CardFooter>
    </Card>
  )
}

function SocialLogin() {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">Welcome Back</CardTitle>
        <CardDescription className="text-center">Sign in to your account using your preferred method</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <Button variant="outline" className="w-full">
            <Github className="h-4 w-4" />
          </Button>
          <Button variant="outline" className="w-full">
            <Chrome className="h-4 w-4" />
          </Button>
          <Button variant="outline" className="w-full">
            <Apple className="h-4 w-4" />
          </Button>
        </div>
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <Separator className="w-full" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="email-social">Email</Label>
          <div className="relative">
            <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input id="email-social" type="email" placeholder="Enter your email" className="pl-10" />
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="password-social">Password</Label>
          <div className="relative">
            <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input id="password-social" type="password" placeholder="Enter your password" className="pl-10" />
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex flex-col space-y-4">
        <Button className="w-full">
          Sign In
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
        <p className="text-center text-sm text-muted-foreground">
          New to our platform?{" "}
          <Button variant="link" className="px-0">
            Create account
          </Button>
        </p>
      </CardFooter>
    </Card>
  )
}

function ModernLogin() {
  return (
    <Card className="w-full max-w-md mx-auto border-0 shadow-lg">
      <CardHeader className="space-y-1 pb-8">
        <div className="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mx-auto mb-4">
          <User className="h-6 w-6 text-primary-foreground" />
        </div>
        <CardTitle className="text-2xl font-bold text-center">Sign In</CardTitle>
        <CardDescription className="text-center">Access your dashboard and manage your account</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email-modern" className="text-sm font-medium">
              Email Address
            </Label>
            <Input id="email-modern" type="email" placeholder="you@example.com" className="h-11" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password-modern" className="text-sm font-medium">
              Password
            </Label>
            <Input id="password-modern" type="password" placeholder="••••••••" className="h-11" />
          </div>
        </div>
        <Button className="w-full h-11 text-base">Continue</Button>
        <div className="text-center">
          <Button variant="link" className="text-sm text-muted-foreground">
            Forgot your password?
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

function SplitLogin() {
  return (
    <div className="w-full max-w-4xl mx-auto grid lg:grid-cols-2 min-h-[500px]">
      <div className="bg-primary text-primary-foreground p-8 flex flex-col justify-center">
        <div className="space-y-6">
          <h1 className="text-3xl font-bold">Welcome Back!</h1>
          <p className="text-lg opacity-90">
            Sign in to access your personalized dashboard and continue where you left off.
          </p>
          <div className="space-y-4">
            <div className="flex items-center space-x-3">
              <CheckCircle className="h-5 w-5" />
              <span>Secure authentication</span>
            </div>
            <div className="flex items-center space-x-3">
              <CheckCircle className="h-5 w-5" />
              <span>24/7 customer support</span>
            </div>
            <div className="flex items-center space-x-3">
              <CheckCircle className="h-5 w-5" />
              <span>Advanced analytics</span>
            </div>
          </div>
        </div>
      </div>
      <div className="p-8 flex flex-col justify-center bg-background">
        <div className="space-y-6">
          <div className="space-y-2">
            <h2 className="text-2xl font-bold">Sign In</h2>
            <p className="text-muted-foreground">Enter your credentials to continue</p>
          </div>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email-split">Email</Label>
              <Input id="email-split" type="email" placeholder="Enter your email" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password-split">Password</Label>
              <Input id="password-split" type="password" placeholder="Enter your password" />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="remember-split" />
              <Label htmlFor="remember-split" className="text-sm">
                Keep me signed in
              </Label>
            </div>
          </div>
          <Button className="w-full">Sign In</Button>
          <div className="text-center">
            <span className="text-sm text-muted-foreground">Don't have an account? </span>
            <Button variant="link" className="px-0 text-sm">
              Sign up here
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

function MinimalLogin() {
  return (
    <div className="w-full max-w-sm mx-auto space-y-8">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold tracking-tight">Sign In</h1>
        <p className="text-muted-foreground">Welcome back to your account</p>
      </div>
      <div className="space-y-4">
        <Input type="email" placeholder="Email address" className="h-12" />
        <Input type="password" placeholder="Password" className="h-12" />
        <Button className="w-full h-12">Sign In</Button>
      </div>
      <div className="text-center space-y-2">
        <Button variant="link" className="text-sm">
          Forgot password?
        </Button>
        <div className="text-sm text-muted-foreground">
          New here?{" "}
          <Button variant="link" className="px-0 text-sm">
            Create account
          </Button>
        </div>
      </div>
    </div>
  )
}

function SecureLogin() {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="space-y-1">
        <div className="flex items-center justify-center mb-4">
          <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center">
            <Shield className="h-6 w-6 text-emerald-600" />
          </div>
        </div>
        <CardTitle className="text-2xl font-bold text-center">Secure Login</CardTitle>
        <CardDescription className="text-center">Protected by enterprise-grade security</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-lg">
          <div className="flex items-center space-x-2 text-sm text-emerald-700">
            <Shield className="h-4 w-4" />
            <span>SSL encrypted connection</span>
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="email-secure">Email Address</Label>
          <Input id="email-secure" type="email" placeholder="Enter your email" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password-secure">Password</Label>
          <Input id="password-secure" type="password" placeholder="Enter your password" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="code-secure">Verification Code</Label>
          <Input id="code-secure" type="text" placeholder="Enter 6-digit code" maxLength={6} />
          <p className="text-xs text-muted-foreground">Check your authenticator app for the verification code</p>
        </div>
      </CardContent>
      <CardFooter className="flex flex-col space-y-4">
        <Button className="w-full">
          <Shield className="mr-2 h-4 w-4" />
          Secure Sign In
        </Button>
        <p className="text-center text-xs text-muted-foreground">
          Having trouble?{" "}
          <Button variant="link" className="px-0 text-xs">
            Contact support
          </Button>
        </p>
      </CardFooter>
    </Card>
  )
}

export function LoginBlock() {
  return <LoginSection />
}