"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { motion } from "framer-motion";
import Link from "next/link";
import {
  ArrowLeft,
  Loader2,
  Leaf,
  ShieldCheck,
  Users,
} from "lucide-react";

export default function LoginPage() {
  const [loading, setLoading] = useState(false);

  const handleGoogleLogin = async () => {
    try {
      setLoading(true);

      await signIn("google", {
        callbackUrl: "/",
        prompt: "select_account",
      });
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  };

  return (
    // <div className="min-h-screen overflow-hidden relative bg-linear-to-br from-green-100 via-emerald-50 to-lime-100 flex items-center justify-center p-6">
  <div className="min-h-dvh overflow-hidden relative 
      bg-linear-to-br from-green-100 via-emerald-50 to-lime-100 flex items-start md:items-center 
      justify-center p-6 py-1 md:py-6">
      {/* =======================================
      BACKGROUND DECORATION
      ======================================= */}
      <div className="absolute top-0 left-0 w-96 h-96 bg-green-400/20 blur-[140px] rounded-full" />
      <div className="absolute bottom-0 right-0 w-md h-112 bg-lime-400/20 blur-[160px] rounded-full" />
      <div className="absolute top-1/2 left-1/2 w-80 h-80 bg-emerald-300/10 blur-[120px] rounded-full -translate-x-1/2 -translate-y-1/2" />

      {/* =======================================
      MAIN CARD
      ======================================= */}
      <motion.div
        initial={{ opacity: 0, y: 30, scale: 0.96 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        transition={{ duration: 0.45 }}
        className="relative w-full max-w-md rounded-[34px] overflow-hidden"
      >
        {/* CARD BG */}
        <div className="absolute inset-0 bg-linear-to-br from-green-500 via-emerald-400 to-lime-400" />

        {/* texture */}
        <div className="absolute inset-0 opacity-[0.07] bg-[url('https://www.transparenttextures.com/patterns/soil.png')]" />

        {/* glass */}
        <div className="absolute inset-0 bg-white/20 backdrop-blur-3xl" />

        {/* glow */}
        <div className="absolute -top-20 -left-10 w-72 h-72 bg-white/20 blur-[120px]" />
        <div className="absolute bottom-0 right-0 w-72 h-72 bg-lime-200/20 blur-[120px]" />

        {/* CONTENT */}
        <div className="relative z-10 p-8 rounded-[34px] border border-white/40 bg-white/30 backdrop-blur-3xl shadow-[0_30px_90px_rgba(0,0,0,0.18)]">

          {/* BACK */}
          {/* <Link
            href="/users"
            className="inline-flex items-center gap-2 text-sm text-green-900 font-medium mb-6 hover:translate-x-[-2px] transition"
          >
            <ArrowLeft size={16} />
            Kembali
          </Link> */}

          {/* ICON */}
          <div className="flex items-center justify-center mb-5">
            <div className="w-20 h-20 rounded-3xl bg-white/70 shadow-[0_20px_40px_rgba(0,0,0,0.12)] flex items-center justify-center border border-white/60">
              <Leaf className="w-10 h-10 text-green-700" />
            </div>
          </div>

          {/* TITLE */}
          <h1 className="text-3xl font-bold text-center text-green-950 tracking-tight">
            🌾 Register User
          </h1>

          <p className="text-sm text-center text-green-950/70 mt-3 leading-relaxed">
            Daftarkan user baru ke sistem inventory agriculture menggunakan akun Google.
          </p>

          {/* FEATURES */}
          <div className="grid grid-cols-3 gap-3 mt-6 mb-7">

            <div className="rounded-2xl bg-white/55 border border-white/50 p-3 text-center shadow">
              <ShieldCheck className="w-5 h-5 mx-auto text-green-700 mb-1" />
              <p className="text-[11px] font-medium text-green-900">
                Secure
              </p>
            </div>

            <div className="rounded-2xl bg-white/55 border border-white/50 p-3 text-center shadow">
              <Users className="w-5 h-5 mx-auto text-green-700 mb-1" />
              <p className="text-[11px] font-medium text-green-900">
                Team Access
              </p>
            </div>

            <div className="rounded-2xl bg-white/55 border border-white/50 p-3 text-center shadow">
              <Leaf className="w-5 h-5 mx-auto text-green-700 mb-1" />
              <p className="text-[11px] font-medium text-green-900">
                Agriculture
              </p>
            </div>

          </div>

          {/* BUTTON */}
          <button
            onClick={handleGoogleLogin}
            disabled={loading}
            className="w-full py-4 rounded-2xl bg-white text-gray-800 font-semibold shadow-[0_18px_40px_rgba(0,0,0,0.12)] border border-gray-200 hover:scale-[1.02] active:scale-[0.99] transition flex items-center justify-center gap-3 disabled:opacity-70 disabled:cursor-not-allowed"
          >
            {loading ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" />
                Connecting Google...
              </>
            ) : (
              <>
                <img
                  src="https://www.svgrepo.com/show/475656/google-color.svg"
                  alt="Google"
                  className="w-5 h-5"
                />
                Continue with Google
              </>
            )}
          </button>

          {/* FOOTER */}
          <p className="text-xs text-center text-green-950/65 mt-6 leading-relaxed">
            Role default setelah registrasi:
            <span className="font-bold text-green-900"> OPERATOR</span>
          </p>

          <p className="text-[11px] text-center text-green-950/50 mt-2">
            Setelah login berhasil, data user otomatis tersimpan ke database.
          </p>

        </div>
      </motion.div>
    </div>
  );
}