import { login, signup } from './actions'
import Link from 'next/link'
import { use } from 'react'
import GoogleSignInButton from '@/components/GoogleSignInButton'

export default function LoginPage({
    searchParams,
}: {
    searchParams: Promise<{ message: string, error: string }>
}) {
    const params = use(searchParams)

    return (
        <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2 mx-auto min-h-screen">
            <Link
                href="/"
                className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm text-zinc-400 hover:text-white transition-colors"
            >
                <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="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
                >
                    <polyline points="15 18 9 12 15 6" />
                </svg>
                Back
            </Link>

            <div className="flex flex-col gap-6">
                <div className="flex flex-col gap-2 text-center">
                    <h1 className="text-2xl font-bold text-white">Welcome back</h1>
                    <p className="text-zinc-400">Sign in to your account to continue</p>
                </div>

                <div className="w-full">
                    <GoogleSignInButton />
                </div>

                <div className="relative">
                    <div className="absolute inset-0 flex items-center">
                        <span className="w-full border-t border-zinc-800" />
                    </div>
                    <div className="relative flex justify-center text-xs uppercase">
                        <span className="bg-background px-2 text-zinc-500">
                            Or continue with
                        </span>
                    </div>
                </div>

                <form className="animate-in flex-1 flex flex-col w-full justify-center gap-4 text-foreground">
                    <div className="grid gap-2">
                        <label className="text-md text-zinc-300" htmlFor="email">
                            Email
                        </label>
                        <input
                            className="rounded-md px-4 py-2 bg-zinc-900 border border-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                            name="email"
                            placeholder="you@example.com"
                            required
                        />
                    </div>

                    <div className="grid gap-2">
                        <label className="text-md text-zinc-300" htmlFor="password">
                            Password
                        </label>
                        <input
                            className="rounded-md px-4 py-2 bg-zinc-900 border border-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                            type="password"
                            name="password"
                            placeholder="••••••••"
                            required
                        />
                    </div>

                    <button
                        formAction={login}
                        className="bg-indigo-600 rounded-md px-4 py-2 text-white hover:bg-indigo-700 active:scale-95 transition-all mt-2"
                    >
                        Sign In
                    </button>
                    <button
                        formAction={signup}
                        className="border border-zinc-800 rounded-md px-4 py-2 text-zinc-300 hover:bg-zinc-900 hover:text-white transition-all"
                    >
                        Sign Up
                    </button>

                    {params?.message && (
                        <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center bg-zinc-900 rounded-md">
                            {params.message}
                        </p>
                    )}

                    {params?.error && (
                        <p className="mt-4 p-4 text-red-400 text-center bg-red-900/10 border border-red-900/20 rounded-md">
                            {params.error}
                        </p>
                    )}
                </form>
            </div>
        </div>
    )
}