"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { GoogleLogin } from "@react-oauth/google";
import { useAuthStore } from "../store/useAuthStore";

export default function WelcomePage() {
    const { googleLogin } = useAuthStore();
    const router = useRouter();
    const handleGoogleSuccess = async (
        credentialResponse: any
    ) => {
        try {
            const success = await googleLogin(
                credentialResponse.credential
            );

            if (success) {
                const userType = useAuthStore.getState().user?.user_type;

                if (userType === 2) {
                    router.push("/receptionist-dashboard");
                } else {
                    router.push("/dashboard");
                }
            }
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <main className="min-h-screen bg-white flex flex-col font-sans">

            {/* ── Desktop: two-column layout ── */}
            <div className="hidden md:flex flex-1">

                {/* Left – branding panel */}
                <div className="md:w-1/2 bg-[#FBEAF0]/30 flex items-center justify-center p-12">
                    <div className="max-w-md">
                        <div className="flex items-center gap-2 mb-8">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#993556" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" />
                            </svg>
                            <span className="text-2xl font-bold text-gray-900">RxH</span>
                        </div>
                        <h1 className="text-4xl font-serif font-bold text-gray-900 mb-6 leading-tight">
                            Welcome to your <br />
                            <span className="text-[#993556]">modern practice.</span>
                        </h1>
                        <p className="text-gray-500 leading-relaxed">
                            Create and print prescriptions in seconds. Sign in to keep your data safe and synced across devices.
                        </p>
                    </div>
                </div>

                {/* Right – action panel */}
                <div className="flex-1 flex items-center justify-center p-8 md:p-16">
                    <div className="w-full max-w-[400px] flex flex-col gap-4">
                        <div className="mb-6">
                            <h2 className="text-3xl font-bold text-[#993556] mb-2">Get started</h2>
                            <p className="text-gray-500 text-sm">Choose how you'd like to continue.</p>
                        </div>

                        <Link href="/login" className="w-full bg-[#993556] text-white font-semibold py-3.5 rounded-xl hover:bg-[#802a46] transition-colors shadow-lg shadow-[#993556]/10 text-center text-sm">
                            Sign In with Email
                        </Link>

                        <Link href="/register" className="w-full border border-[#993556] text-[#993556] font-semibold py-3.5 rounded-xl hover:bg-[#FBEAF0]/50 transition-colors text-center text-sm">
                            Sign Up with Email
                        </Link>

                        <div className="flex items-center gap-3 my-1">
                            <div className="flex-1 h-px bg-gray-200" />
                            <span className="text-xs text-gray-400 font-medium">Or</span>
                            <div className="flex-1 h-px bg-gray-200" />
                        </div>

                        <GoogleLogin
                            onSuccess={handleGoogleSuccess}
                            onError={() => {
                                console.log("Google Login Failed");
                            }}
                        />

                    </div>
                </div>
            </div>

            {/* ── Mobile: single-column layout ── */}
            <div className="md:hidden flex flex-col flex-1 items-center justify-between px-8 py-12 bg-[#f5f5f5]">

                <div className="flex-1" />

                <div className="flex flex-col items-center text-center mb-10">
                    <div className="w-28 h-28 rounded-full bg-white flex items-center justify-center mb-6 shadow-sm">
                        <RxLogoIllustration />
                    </div>
                    <h1 className="text-[26px] font-bold text-gray-900 leading-tight mb-3">
                        Welcome to Doctor<br />Prescription
                    </h1>
                    <p className="text-sm text-gray-500 leading-relaxed max-w-xs">
                        Create and print prescriptions in seconds. Sign in to keep your data safe and synced across devices.
                    </p>
                </div>

                <div className="w-full flex flex-col gap-3">
                    <Link href="/login" className="w-full bg-[#F06292] text-white font-semibold py-4 rounded-2xl hover:bg-[#e05080] transition-colors text-center text-[15px]">
                        Sign In with Email
                    </Link>

                    <Link href="/register" className="w-full bg-white border border-[#F06292] text-[#993556] font-semibold py-4 rounded-2xl hover:bg-[#FBEAF0]/40 transition-colors text-center text-[15px]">
                        Sign Up with Email
                    </Link>

                    <div className="flex items-center gap-3 my-1">
                        <div className="flex-1 h-px bg-gray-300" />
                        <span className="text-xs text-gray-400 font-medium">Or</span>
                        <div className="flex-1 h-px bg-gray-300" />
                    </div>

                    <button onClick={handleGoogleSuccess} className="w-full flex items-center justify-center gap-3 bg-white border border-gray-200 rounded-2xl py-4 hover:bg-gray-50 transition-colors text-[15px] font-medium text-gray-700">
                        <GoogleIcon />
                        Continue with Google
                    </button>
                </div>

                <div className="flex-1" />
            </div>

        </main>
    );
}

function GoogleIcon() {
    return (
        <svg width="20" height="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path fill="#FFC107" d="M43.6 20H24v8h11.3C33.7 33.4 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.5 29.2 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11 0 19.7-8 19.7-20 0-1.3-.1-2.7-.3-4h.2z" />
            <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.5 16 19 13 24 13c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.5 29.2 4 24 4 16.3 4 9.6 8.3 6.3 14.7z" />
            <path fill="#4CAF50" d="M24 44c5.2 0 9.9-1.9 13.5-5l-6.2-5.2C29.4 35.5 26.8 36 24 36c-5.2 0-9.7-3.5-11.3-8.3l-6.5 5C9.5 39.6 16.2 44 24 44z" />
            <path fill="#1976D2" d="M43.6 20H24v8h11.3c-.9 2.4-2.5 4.5-4.7 5.8l6.2 5.2C40.3 35.6 44 30.2 44 24c0-1.3-.1-2.7-.4-4z" />
        </svg>
    );
}

function RxLogoIllustration() {
    return (
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="40" cy="22" r="16" stroke="#C2185B" strokeWidth="2.5" fill="none" />
            <text x="33" y="27" fontFamily="serif" fontSize="14" fontWeight="700" fill="#C2185B">Rx</text>
            <path d="M24 22 C24 22 16 26 16 38 C16 44 20 48 26 48" stroke="#C2185B" strokeWidth="2.5" strokeLinecap="round" fill="none" />
            <path d="M26 48 C26 48 20 52 20 58 C20 63 25 66 30 63 C35 60 40 52 40 52 C40 52 45 60 50 63 C55 66 60 63 60 58 C60 52 54 48 54 48" stroke="#C2185B" strokeWidth="2" fill="#FBEAF0" />
            <path d="M56 22 C56 22 64 26 64 38 C64 44 60 48 54 48" stroke="#C2185B" strokeWidth="2.5" strokeLinecap="round" fill="none" />
            <rect x="50" y="50" width="20" height="24" rx="3" fill="#FBEAF0" stroke="#C2185B" strokeWidth="1.5" />
            <line x1="54" y1="58" x2="66" y2="58" stroke="#C2185B" strokeWidth="1.5" strokeLinecap="round" />
            <line x1="54" y1="63" x2="66" y2="63" stroke="#C2185B" strokeWidth="1.5" strokeLinecap="round" />
            <line x1="54" y1="68" x2="60" y2="68" stroke="#C2185B" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
    );
}