import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    CardFooter,
} from "@/components/ui/card"
import { Signal, Router, RefreshCcw, GlobeLock } from "lucide-react"

import { cn } from "@/lib/utils"
import { Layout2 } from "@/components/Layout2"
import { useNavigate, Link } from "react-router-dom"
import { useEffect } from "react"

import { useKeyring } from "../hooks"
import { rpc } from "../api"

import { Logo } from "../../../components"

export const Welcome = () => {
    const navigate = useNavigate()
    const { keyring } = useKeyring()
    const { isLocked, hasPassword } = keyring

    useEffect(() => {
        hasPassword && (isLocked
            ? navigate("/unlock-keyring")
            : navigate("/accounts"))
    }, [hasPassword, isLocked])

    return (
        <Layout2>
            <Card className="flex flex-col flex-grow w-full max-w-md min-h-full shadow-none">
                <CardHeader className="text-center">
                    <CardTitle className="mt-6 mb-6 py-[5px] px-[30px] text-2xl leading-4">
                        <Logo cName="fill-primary" />
                    </CardTitle>
                </CardHeader>
                <CardContent className="items-center content-center flex flex-grow">
                    <ul className="space-y-4">
                        <li className="flex items-center gap-3">
                            <Signal className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
                                Be connected to the GHOST and CASPER networks from your browser
                            </p>
                        </li>
                        <li className="flex items-center gap-3">
                            <RefreshCcw className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
                                Syncs silently in a background without disturbing you
                            </p>
                        </li>
                        <li className="flex items-center gap-3">
                            <Router className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
                                Become self-hosted endpoint for yourself for ghost projects
                            </p>
                        </li>
                        <li className="flex items-center gap-3">
                            <GlobeLock className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
                                Make your browser be part of the GHOST and CASPER networks
                            </p>
                        </li>
                    </ul>
                </CardContent>
                <CardFooter className="flex flex-col flex-grow space-y-4 justify-end">
                    <Button
                        variant="default"
                        size="full"
                        className={cn("text-lg py-3")}
                        onClick={() => navigate("/create-password")}
                    >
                        Create Wallet
                    </Button>
                    <Link
                        data-testid="btnGoToOptions"
                        to="/options"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-full"
                    >
                        <Button
                            type="button"
                            variant="secondary"
                            size="full"
                            className={cn("text-lg py-3")}
                        >
                            Options
                        </Button>
                    </Link>
                </CardFooter>
            </Card>
        </Layout2>
    )
}
