// [meta] name: Login
// [meta] description: make a login screen with phone and password

import { Alert } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";

const countryCodes = [
    { code: "+1", country: "US" },
    { code: "+44", country: "UK" },
    { code: "+91", country: "IN" },
    { code: "+86", country: "CN" },
];

export default function Login() {
    
    const [phone, setPhone] = useState("");
    const [countryCode, setCountryCode] = useState("+1");
    

    const togglePasswordVisibility = () => setShowPassword(!showPassword);

    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value.replace(/\D/g, "");
        setPhone(value);
    };

    return (
        <div className="flex min-h-screen bg-gray-50 dark:bg-black">
            
            <div className="m-auto w-full max-w-md p-6 bg-white dark:bg-gray-900 shadow rounded-lg">
                <Tabs defaultValue="login" className="w-full">
                    <TabsList className="grid w-full grid-cols-2">
                        <TabsTrigger value="login">Login</TabsTrigger>
                        <TabsTrigger value="signup">Create Account</TabsTrigger>
                    </TabsList>

                    <TabsContent value="login">
                        <div className="space-y-4">
                            <div className="flex gap-2">
                                <Select value={countryCode} onValueChange={setCountryCode}>
                                    <SelectTrigger className="w-[100px]">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {countryCodes.map((country) => (
                                            <SelectItem key={country.code} value={country.code}>
                                                {country.code} {country.country}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Input
                                    type="tel"
                                    value={phone}
                                    onChange={handlePhoneChange}
                                    placeholder="Phone number"
                                    className="flex-1"
                                    maxLength={10}
                                />
                            </div>

                            <div className="flex items-center">
                                <Input
                                    type={showPassword ? "text" : "password"}
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    placeholder="Password"
                                />
                                <button
                                    type="button"
                                    className="ml-2 text-gray-500 hover:text-gray-700"
                                    onClick={togglePasswordVisibility}
                                >
                                    {showPassword ? (
                                        <EyeOff className="w-5 h-5" />
                                    ) : (
                                        <Eye className="w-5 h-5" />
                                    )}
                                </button>
                            </div>

                            <Button className="w-full">Login</Button>
                        </div>
                    </TabsContent>

                    <TabsContent value="signup">
                        <div className="space-y-4">
                            <div className="flex gap-2">
                                <Select value={countryCode} onValueChange={setCountryCode}>
                                    <SelectTrigger className="w-[100px]">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {countryCodes.map((country) => (
                                            <SelectItem key={country.code} value={country.code}>
                                                {country.code} {country.country}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Input
                                    type="tel"
                                    value={phone}
                                    onChange={handlePhoneChange}
                                    placeholder="Phone number"
                                    className="flex-1"
                                    maxLength={10}
                                />
                            </div>

                            <div className="flex items-center">
                                <Input
                                    type={showPassword ? "text" : "password"}
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    placeholder="Password"
                                />
                                <button
                                    type="button"
                                    className="ml-2 text-gray-500 hover:text-gray-700"
                                    onClick={togglePasswordVisibility}
                                >
                                    {showPassword ? (
                                        <EyeOff className="w-5 h-5" />
                                    ) : (
                                        <Eye className="w-5 h-5" />
                                    )}
                                </button>
                            </div>

                            <Button className="w-full">Create Account</Button>
                        </div>
                    </TabsContent>
                </Tabs>

                <div className="mt-4">
                    <Alert>
                        <AlertTitle>Need help?</AlertTitle>
                        <AlertDescription>Contact support for assistance.</AlertDescription>
                    </Alert>
                </div>
            </div>
        </div>
    );
}