1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { Badge } from "@/components/ui/badge";
14import { Separator } from "@/components/ui/separator";
15import {
16  Eye,
17  EyeOff,
18  Mail,
19  Lock,
20  Smartphone,
21  ArrowRight,
22  Shield,
23} from "lucide-react";
24import { useState } from "react";
25
26export function LoginBlock7() {
27  const [step, setStep] = useState<"login" | "2fa">("login");
28  const [showPassword, setShowPassword] = useState(false);
29  const [code, setCode] = useState(["", "", "", "", "", ""]);
30
31  const handleCodeChange = (index: number, value: string) => {
32    if (value.length <= 1) {
33      const newCode = [...code];
34      newCode[index] = value;
35      setCode(newCode);
36
37      // Auto-focus next input
38      if (value && index < 5) {
39        const nextInput = document.getElementById(`code-${index + 1}`);
40        nextInput?.focus();
41      }
42    }
43  };
44
45  const handleLogin = (e: React.FormEvent) => {
46    e.preventDefault();
47    setStep("2fa");
48  };
49
50  if (step === "2fa") {
51    return (
52      <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
53        <Card className="w-full max-w-md border-2 shadow-xl">
54          <CardHeader className="space-y-4 text-center">
55            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
56              <Shield className="h-8 w-8 text-green-600 dark:text-green-400" />
57            </div>
58            <div className="space-y-2">
59              <div className="flex items-center justify-center gap-2">
60                <CardTitle className="text-2xl font-bold">
61                  Two-Factor Authentication
62                </CardTitle>
63                <Badge variant="secondary" className="text-xs">
64                  Required
65                </Badge>
66              </div>
67              <CardDescription className="text-muted-foreground">
68                Enter the 6-digit code from your authenticator app
69              </CardDescription>
70            </div>
71          </CardHeader>
72
73          <CardContent className="space-y-6">
74            <form className="space-y-6">
75              <div className="space-y-4">
76                <Label className="text-center block">Authentication Code</Label>
77                <div className="flex gap-2 justify-center">
78                  {code.map((digit, index) => (
79                    <Input
80                      key={index}
81                      id={`code-${index}`}
82                      type="text"
83                      inputMode="numeric"
84                      maxLength={1}
85                      value={digit}
86                      onChange={(e) => handleCodeChange(index, e.target.value)}
87                      className="w-12 h-12 text-center text-lg font-bold"
88                    />
89                  ))}
90                </div>
91              </div>
92
93              <Button type="submit" className="w-full gap-2">
94                Verify & Sign In
95                <ArrowRight className="h-4 w-4" />
96              </Button>
97            </form>
98
99            <Separator />
100
101            <div className="space-y-3 text-center">
102              <p className="text-sm text-muted-foreground">
103                Didn't receive a code?
104              </p>
105              <div className="flex gap-2 justify-center">
106                <Button variant="outline" size="sm">
107                  Resend Code
108                </Button>
109                <Button variant="outline" size="sm">
110                  Use Backup Code
111                </Button>
112              </div>
113            </div>
114
115            <div className="text-center">
116              <Button variant="ghost" onClick={() => setStep("login")}>
117                Back to Login
118              </Button>
119            </div>
120          </CardContent>
121        </Card>
122      </section>
123    );
124  }
125
126  return (
127    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
128      <Card className="w-full max-w-md border-2 shadow-xl">
129        <CardHeader className="space-y-4 text-center">
130          <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
131            <Smartphone className="h-8 w-8 text-blue-600 dark:text-blue-400" />
132          </div>
133          <div className="space-y-2">
134            <div className="flex items-center justify-center gap-2">
135              <CardTitle className="text-2xl font-bold">
136                Secure Sign In
137              </CardTitle>
138              <Badge variant="outline" className="text-xs gap-1">
139                <Shield className="h-3 w-3" />
140                2FA
141              </Badge>
142            </div>
143            <CardDescription className="text-muted-foreground">
144              Enhanced security with two-factor authentication
145            </CardDescription>
146          </div>
147        </CardHeader>
148
149        <CardContent className="space-y-6">
150          <form onSubmit={handleLogin} className="space-y-4">
151            <div className="space-y-2">
152              <Label htmlFor="email">Email Address</Label>
153              <div className="relative">
154                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
155                <Input
156                  id="email"
157                  type="email"
158                  placeholder="Enter your email"
159                  className="pl-10"
160                  required
161                />
162              </div>
163            </div>
164
165            <div className="space-y-2">
166              <Label htmlFor="password">Password</Label>
167              <div className="relative">
168                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
169                <Input
170                  id="password"
171                  type={showPassword ? "text" : "password"}
172                  placeholder="Enter your password"
173                  className="pl-10 pr-10"
174                  required
175                />
176                <Button
177                  type="button"
178                  variant="ghost"
179                  size="icon"
180                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
181                  onClick={() => setShowPassword(!showPassword)}
182                >
183                  {showPassword ? (
184                    <EyeOff className="h-4 w-4 text-muted-foreground" />
185                  ) : (
186                    <Eye className="h-4 w-4 text-muted-foreground" />
187                  )}
188                </Button>
189              </div>
190            </div>
191
192            <Button type="submit" className="w-full gap-2">
193              Continue to 2FA
194              <ArrowRight className="h-4 w-4" />
195            </Button>
196          </form>
197
198          <div className="bg-muted/50 rounded-lg p-4">
199            <div className="flex items-start gap-3">
200              <Shield className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
201              <div className="space-y-1">
202                <p className="text-sm font-medium">Enhanced Security</p>
203                <p className="text-xs text-muted-foreground">
204                  Your account is protected with two-factor authentication for
205                  maximum security.
206                </p>
207              </div>
208            </div>
209          </div>
210
211          <div className="text-center text-sm text-muted-foreground">
212            Need help?{" "}
213            <Button variant="link" className="px-0 font-medium">
214              Contact Support
215            </Button>
216          </div>
217        </CardContent>
218      </Card>
219    </section>
220  );
221}