"use client";

import { useState, useEffect, useCallback } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import ReCAPTCHA from "react-google-recaptcha";
import Navbar from "@/components/layout/Navbar";
import MobileNav from "@/components/layout/MobileNav";
import { Lock, Mail, Eye, EyeOff, Shield, User, Loader2 } from "lucide-react";
import { IconBrandGoogle } from "@tabler/icons-react";
import { useAuth } from "@/lib/auth";

const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || "";

export default function RegisterPage() {
  const { login } = useAuth();
  const [showPassword, setShowPassword] = useState(false);
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!username || !email || !password) return;
    if (password.length < 6) { setError("Password minimal 6 karakter"); return; }
    if (!recaptchaToken) { setError("Validasi reCAPTCHA diperlukan."); return; }
    setError("");
    setLoading(true);
    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL }/api/auth/register`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, email, password, recaptchaToken }),
      });
      const data = await res.json();
      if (data.success && data.token) {
        login(data.token);
        window.location.href = "/dashboard";
      } else {
        setError(data.message || "Registrasi gagal");
      }
    } catch {
      setError("Terjadi kesalahan, coba lagi.");
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleLogin = () => {
    window.location.href = `${process.env.NEXT_PUBLIC_API_URL }/api/auth/google`;
  };

  return (
    <>
      <Navbar />
      <main className="min-h-screen flex items-center justify-center pt-16 pb-24 px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full max-w-md rounded-2xl border border-dark-border bg-dark-surface shadow-2xl p-8 md:p-10"
        >
          {/* Header */}
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 rounded-xl overflow-hidden">
              <img src="/images/logo.webp" alt={process.env.NEXT_PUBLIC_APP_NAME as string} className="w-full h-full object-cover" />
            </div>
            <div>
              <h1 className="font-heading text-xl font-bold text-white">Daftar Akun</h1>
              <p className="text-xs text-muted">Buat akun baru {process.env.NEXT_PUBLIC_APP_NAME}</p>
            </div>
          </div>

          <form className="mt-8 space-y-4" onSubmit={handleSubmit}>
            {/* Username */}
            <div>
              <label className="text-xs font-medium text-muted mb-1.5 block">Username</label>
              <div className="relative group">
                <User size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted group-focus-within:text-primary transition-colors" />
                <input
                  type="text"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="Nama tampilan kamu"
                  className="input-field pl-10"
                />
              </div>
            </div>

            {/* Email */}
            <div>
              <label className="text-xs font-medium text-muted mb-1.5 block">Email</label>
              <div className="relative group">
                <Mail size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted group-focus-within:text-primary transition-colors" />
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@example.com"
                  className="input-field pl-10"
                />
              </div>
            </div>

            {/* Password */}
            <div>
              <label className="text-xs font-medium text-muted mb-1.5 block">Kata sandi</label>
              <div className="relative group">
                <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted group-focus-within:text-primary transition-colors" />
                <input
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Minimal 6 karakter"
                  className="input-field pl-10 pr-10"
                />
                <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3.5 top-1/2 -translate-y-1/2 text-muted hover:text-white transition-colors">
                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                </button>
              </div>
            </div>

            {/* reCAPTCHA v2 */}
            <div className="flex justify-center mb-4 overflow-hidden rounded-xl border border-dark-border">
              {SITE_KEY ? (
                <ReCAPTCHA
                  sitekey={SITE_KEY}
                  theme="dark"
                  onChange={(token) => setRecaptchaToken(token)}
                />
              ) : (
                <div className="p-3 text-xs text-red-400">Site key reCAPTCHA tidak ditemukan</div>
              )}
            </div>

            {error && (
              <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-xs text-center font-medium">
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={loading || !username || !email || !password || !recaptchaToken}
              className="w-full btn-primary flex items-center justify-center gap-2 text-sm py-3 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? <Loader2 size={14} className="animate-spin" /> : <Shield size={14} />}
              {loading ? "Memproses..." : "Daftar Sekarang"}
            </button>
          </form>

          {/* Divider */}
          <div className="flex items-center gap-3 my-6">
            <div className="flex-1 h-px bg-dark-border" />
            <span className="text-xs text-muted">Atau lanjutkan dengan</span>
            <div className="flex-1 h-px bg-dark-border" />
          </div>

          {/* Google */}
          <button
            onClick={handleGoogleLogin}
            className="w-full flex items-center justify-center gap-3 py-3 rounded-xl bg-dark-surface2 border border-dark-border text-white text-sm font-medium hover:border-primary/50 hover:bg-dark-surface2/80 transition-all"
          >
            <IconBrandGoogle size={18} />
            Google
          </button>

          <p className="text-center text-xs text-muted mt-6">
            Sudah punya akun?{" "}
            <Link href="/login" className="text-primary hover:text-primary-hover font-semibold transition-colors">
              Masuk disini
            </Link>
          </p>
        </motion.div>
      </main>
      <MobileNav />
    </>
  );
}