"use client"

import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { EyeIcon, EyeOffIcon, GithubIcon, LockIcon, MailIcon } from "lucide-react"
import { useState } from "react"

export function LoginSection() {
  return (
    <div className="space-y-8">
      <SectionHeading
        title="Login"
        description="Different variants of login forms and authentication interfaces for various use cases."
      />

      <div className="space-y-8">
        {/* Simple Login */}
        <ComponentContainer title="Simple Login" description="Basic email/password form with remember me option">
          <SimpleLogin />
        </ComponentContainer>

        {/* Social Login */}
        <ComponentContainer title="Social Login" description="Login form with social media authentication options">
          <SocialLogin />
        </ComponentContainer>

        {/* Modern Login */}
        <ComponentContainer title="Modern Login" description="Clean, contemporary design with larger inputs">
          <ModernLogin />
        </ComponentContainer>

        {/* Split Layout */}
        <ComponentContainer title="Split Layout" description="Two-column design with promotional content">
          <SplitLogin />
        </ComponentContainer>

        {/* Minimal Login */}
        <ComponentContainer title="Minimal Login" description="Ultra-clean design with minimal elements">
          <MinimalLogin />
        </ComponentContainer>

        {/* Secure Login */}
        <ComponentContainer title="Secure Login" description="Enterprise-grade with 2FA verification">
          <SecureLogin />
        </ComponentContainer>
      </div>
    </div>
  )
}

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

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle className="text-xl">Sign in to your account</CardTitle>
        <CardDescription>Enter your email and password to access your account</CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4">
          <div className="space-y-1.5">
            <Label htmlFor="simple-email">Email</Label>
            <Input id="simple-email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-1.5">
            <div className="flex items-center justify-between">
              <Label htmlFor="simple-password">Password</Label>
              <a href="#" className="text-sm text-primary hover:underline">
                Forgot password?
              </a>
            </div>
            <div className="relative">
              <Input id="simple-password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
                ) : (
                  <EyeIcon className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
              </Button>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox id="simple-remember" />
            <label
              htmlFor="simple-remember"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Remember me
            </label>
          </div>
        </form>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Sign in</Button>
      </CardFooter>
      <div className="px-8 pb-6 text-center text-sm">
        Don't have an account?{" "}
        <a href="#" className="text-primary hover:underline">
          Sign up
        </a>
      </div>
    </Card>
  )
}

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

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle className="text-xl">Welcome back</CardTitle>
        <CardDescription>Sign in to your account using any of these methods</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <Button variant="outline" className="w-full">
            <GithubIcon className="mr-2 h-4 w-4" />
            GitHub
          </Button>
          <Button variant="outline" className="w-full">
            <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
              <path
                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                fill="#4285F4"
              />
              <path
                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                fill="#34A853"
              />
              <path
                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                fill="#FBBC05"
              />
              <path
                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                fill="#EA4335"
              />
            </svg>
            Google
          </Button>
          <Button variant="outline" className="w-full">
            <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
              <path
                d="M16.365 1.43c0 1.14-.493 2.27-1.177 3.08-.744.9-1.99 1.57-2.987 1.57-.12 0-.23-.02-.3-.03-.01-.06-.04-.22-.04-.39 0-1.15.572-2.27 1.206-2.98.804-.94 2.142-1.64 3.248-1.68.03.13.05.28.05.43zm4.565 15.71c-.03.07-.463 1.58-1.518 3.12-.945 1.34-1.94 2.71-3.43 2.71-1.517 0-1.9-.88-3.63-.88-1.698 0-2.302.91-3.67.91-1.377 0-2.332-1.26-3.428-2.8-1.287-1.82-2.323-4.63-2.323-7.28 0-4.28 2.797-6.55 5.552-6.55 1.448 0 2.675.95 3.6.95.865 0 2.222-1.01 3.902-1.01.613 0 2.886.06 4.374 2.19-.13.09-2.383 1.37-2.383 4.19 0 3.26 2.854 4.42 2.955 4.45z"
                fill="currentColor"
              />
            </svg>
            Apple
          </Button>
        </div>
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t" />
          </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>
        <form className="space-y-4">
          <div className="space-y-1.5">
            <Label htmlFor="social-email">Email</Label>
            <Input id="social-email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-1.5">
            <div className="flex items-center justify-between">
              <Label htmlFor="social-password">Password</Label>
              <a href="#" className="text-sm text-primary hover:underline">
                Forgot password?
              </a>
            </div>
            <div className="relative">
              <Input id="social-password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
                ) : (
                  <EyeIcon className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
              </Button>
            </div>
          </div>
          <Button className="w-full">Sign in</Button>
        </form>
      </CardContent>
      <div className="px-8 pb-6 text-center text-sm">
        Don't have an account?{" "}
        <a href="#" className="text-primary hover:underline">
          Sign up
        </a>
      </div>
    </Card>
  )
}

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

  return (
    <div className="w-full max-w-md mx-auto">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold tracking-tight">Welcome back</h2>
        <p className="text-muted-foreground mt-2">Enter your credentials to access your account</p>
      </div>
      <form className="space-y-4">
        <div className="space-y-1.5">
          <Label htmlFor="modern-email" className="text-sm font-medium">
            Email address
          </Label>
          <div className="relative">
            <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input id="modern-email" type="email" placeholder="name@example.com" className="pl-10 py-6" />
          </div>
        </div>
        <div className="space-y-1.5">
          <div className="flex items-center justify-between">
            <Label htmlFor="modern-password" className="text-sm font-medium">
              Password
            </Label>
            <a href="#" className="text-sm font-medium text-primary hover:underline">
              Forgot password?
            </a>
          </div>
          <div className="relative">
            <LockIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              id="modern-password"
              type={showPassword ? "text" : "password"}
              placeholder="••••••••"
              className="pl-10 py-6"
            />
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
              onClick={() => setShowPassword(!showPassword)}
            >
              {showPassword ? (
                <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
              ) : (
                <EyeIcon className="h-4 w-4 text-muted-foreground" />
              )}
              <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
            </Button>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="modern-remember" />
          <label
            htmlFor="modern-remember"
            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          >
            Remember me for 30 days
          </label>
        </div>
        <Button className="w-full py-6 text-base">Sign in</Button>
      </form>
      <div className="mt-6 text-center text-sm">
        Don't have an account?{" "}
        <a href="#" className="font-medium text-primary hover:underline">
          Create an account
        </a>
      </div>
    </div>
  )
}

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

  return (
    <div className="w-full max-w-5xl mx-auto overflow-hidden rounded-xl border bg-background shadow">
      <div className="grid md:grid-cols-2">
        <div className="p-8 md:p-12">
          <div className="mb-8">
            <h2 className="text-2xl font-bold">Sign in to your account</h2>
            <p className="text-muted-foreground mt-2">Welcome back! Please enter your details.</p>
          </div>
          <form className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="split-email">Email</Label>
              <Input id="split-email" type="email" placeholder="name@example.com" />
            </div>
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor="split-password">Password</Label>
                <a href="#" className="text-sm text-primary hover:underline">
                  Forgot password?
                </a>
              </div>
              <div className="relative">
                <Input id="split-password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <EyeIcon className="h-4 w-4 text-muted-foreground" />
                  )}
                  <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                </Button>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="split-remember" />
              <label
                htmlFor="split-remember"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Remember me
              </label>
            </div>
            <Button className="w-full">Sign in</Button>
          </form>
          <div className="mt-6 text-center text-sm">
            Don't have an account?{" "}
            <a href="#" className="text-primary hover:underline">
              Sign up
            </a>
          </div>
        </div>
        <div className="bg-muted p-8 md:p-12 flex items-center justify-center">
          <div className="max-w-sm">
            <div className="mb-6 inline-block rounded-lg bg-primary/10 p-3 text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
              >
                <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
              </svg>
            </div>
            <h3 className="text-xl font-bold">Join thousands of satisfied users</h3>
            <p className="mt-2 text-muted-foreground">
              "This platform has transformed how we manage our projects. The interface is intuitive and the features are
              exactly what we needed."
            </p>
            <div className="mt-6 flex items-center">
              <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
                JD
              </div>
              <div className="ml-3">
                <p className="text-sm font-medium">Jane Doe</p>
                <p className="text-xs text-muted-foreground">Product Manager, Acme Inc.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

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

  return (
    <div className="w-full max-w-sm mx-auto">
      <div className="mb-8 flex justify-center">
        <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-6 w-6 text-primary"
          >
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
        </div>
      </div>
      <form className="space-y-4">
        <Input type="email" placeholder="Email" />
        <div className="relative">
          <Input type={showPassword ? "text" : "password"} placeholder="Password" />
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
            onClick={() => setShowPassword(!showPassword)}
          >
            {showPassword ? (
              <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
            ) : (
              <EyeIcon className="h-4 w-4 text-muted-foreground" />
            )}
            <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
          </Button>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Checkbox id="minimal-remember" />
            <label
              htmlFor="minimal-remember"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Remember me
            </label>
          </div>
          <a href="#" className="text-sm text-primary hover:underline">
            Forgot password?
          </a>
        </div>
        <Button className="w-full">Sign in</Button>
      </form>
      <div className="mt-6 text-center text-sm">
        Don't have an account?{" "}
        <a href="#" className="text-primary hover:underline">
          Sign up
        </a>
      </div>
    </div>
  )
}

function SecureLogin() {
  const [showPassword, setShowPassword] = useState(false)
  const [step, setStep] = useState(1)

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle className="text-xl">Secure Login</CardTitle>
        <CardDescription>
          {step === 1
            ? "Enter your credentials to access your account"
            : "Enter the verification code sent to your device"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {step === 1 ? (
          <form className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="secure-email">Email</Label>
              <Input id="secure-email" type="email" placeholder="name@example.com" />
            </div>
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor="secure-password">Password</Label>
                <a href="#" className="text-sm text-primary hover:underline">
                  Forgot password?
                </a>
              </div>
              <div className="relative">
                <Input id="secure-password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOffIcon className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <EyeIcon className="h-4 w-4 text-muted-foreground" />
                  )}
                  <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                </Button>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="secure-remember" />
              <label
                htmlFor="secure-remember"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Remember this device
              </label>
            </div>
          </form>
        ) : (
          <div className="space-y-4">
            <div className="text-center mb-4">
              <p className="text-sm text-muted-foreground">
                We've sent a 6-digit verification code to your registered device
              </p>
            </div>
            <div className="flex justify-between gap-2">
              {[1, 2, 3, 4, 5, 6].map((i) => (
                <Input
                  key={i}
                  className="h-12 w-12 text-center text-lg"
                  maxLength={1}
                  inputMode="numeric"
                  pattern="[0-9]*"
                />
              ))}
            </div>
            <div className="text-center">
              <a href="#" className="text-sm text-primary hover:underline">
                Didn't receive a code? Resend
              </a>
            </div>
          </div>
        )}
      </CardContent>
      <CardFooter>
        {step === 1 ? (
          <Button className="w-full" onClick={() => setStep(2)}>
            Continue
          </Button>
        ) : (
          <div className="flex w-full gap-2">
            <Button variant="outline" className="w-1/2" onClick={() => setStep(1)}>
              Back
            </Button>
            <Button className="w-1/2">Verify</Button>
          </div>
        )}
      </CardFooter>
      {step === 1 && (
        <div className="px-8 pb-6 text-center text-sm">
          Don't have an account?{" "}
          <a href="#" className="text-primary hover:underline">
            Sign up
          </a>
        </div>
      )}
    </Card>
  )
}