'use client';

import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import IconUser from '@/components/icon/icon-user';
import { useRouter } from 'next/navigation';
import { Eye, EyeOff } from 'lucide-react';
import axios from 'axios';
import React, { useState } from 'react';
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';

const DARK_INPUT =
  'w-full bg-[rgba(7,13,30,0.75)] text-white rounded-lg px-10 py-3 outline-none border border-white/10 placeholder:text-gray-400 focus:border-primary focus:ring-1 focus:ring-primary';

const ComponentsAuthRegisterForm = () => {
  const router = useRouter();

  const [form, setForm] = useState({
    name: '',
    email: '',
    password: '',
    mobileNumber: '',
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showPassword, setShowPassword] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      await axios.post(`${ApiServerBaseUrl}/auth/signup`, form);
      router.push('/login');
    } catch (err: any) {
      setError(err.response?.data?.error || 'Signup failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form className="space-y-5 text-white" onSubmit={submitForm}>
      {error && <p className="text-red-500 text-sm text-center">{error}</p>}

      {/* Name */}
      <div className="relative">
        <input
          name="name"
          type="text"
          placeholder="Full Name"
          className={DARK_INPUT}
          value={form.name}
          onChange={handleChange}
        />
        <span className="absolute start-3 top-1/2 -translate-y-1/2">
          <IconUser fill />
        </span>
      </div>

      {/* Email */}
      <div className="relative">
        <input
          name="email"
          type="email"
          placeholder="Email Address"
          className={DARK_INPUT}
          value={form.email}
          onChange={handleChange}
        />
        <span className="absolute start-3 top-1/2 -translate-y-1/2">
          <IconMail fill />
        </span>
      </div>

      {/* Password */}
      <div className="relative">
        <input
          name="password"
          type={showPassword ? 'text' : 'password'}
          placeholder="Password"
          className={DARK_INPUT}
          value={form.password}
          onChange={handleChange}
        />
        <span className="absolute start-3 top-1/2 -translate-y-1/2">
          <IconLockDots fill />
        </span>

        <button
          type="button"
          onClick={() => setShowPassword(!showPassword)}
          className="absolute end-3 top-1/2 -translate-y-1/2 text-gray-400"
        >
          {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
        </button>
      </div>

      {/* Mobile */}
      <div className="relative">
        <input
          name="mobileNumber"
          type="text"
          placeholder="Mobile Number"
          className={DARK_INPUT}
          value={form.mobileNumber}
          onChange={handleChange}
        />
        <span className="absolute start-3 top-1/2 -translate-y-1/2">📞</span>
      </div>

      {/* ✅ Gradient SIGN UP Button */}
      <button
        type="submit"
        disabled={loading}
        className="
          w-full bg-gradient-to-r from-blue-600 to-pink-500
          text-white py-3 rounded-xl font-semibold shadow-lg
          transition-all hover:opacity-90 hover:scale-[1.01]
          disabled:opacity-50 disabled:cursor-not-allowed
        "
      >
        {loading ? 'Signing up...' : 'SIGN UP'}
      </button>

      {/* Divider */}
      <div className="text-center relative my-6">
        <span className="absolute inset-x-0 top-1/2 h-px bg-white/20"></span>
        <span className="relative bg-[#0b0f1f] px-3 text-xs uppercase text-gray-400">
          or
        </span>
      </div>

      {/* Google */}
     {/* <a
        href={`${ApiServerBaseUrl}/auth/google`}
        className="flex items-center justify-center gap-3 w-full py-3 rounded-lg
        border border-gray-600 hover:bg-white/10 transition"
      >
        <svg className="w-5 h-5" viewBox="0 0 24 24">
          <path fill="#4285F4" d="M22.56 12.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
          <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22z"/>
          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
        </svg>
        Sign up with Google
      </a>*/}

      {/* Facebook */}
      {/*<a
        href={`${ApiServerBaseUrl}/auth/facebook`}
        className="flex items-center justify-center gap-3 w-full py-3 rounded-lg
        border border-gray-600 hover:bg-blue-600/20 transition"
      >
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
          <path d="M22 12A10 10 0 1 0 10.67 21.87v-6.99H7.9V12h2.77V9.8c0-2.74 1.63-4.26 4.13-4.26 1.2 0 2.46.22 2.46.22v2.7h-1.39c-1.37 0-1.8.85-1.8 1.72V12h3.07l-.49 2.88h-2.58v6.99A10 10 0 0 0 22 12z"/>
        </svg>
        Sign up with Facebook
      </a> */}
    </form>
  );
};

export default ComponentsAuthRegisterForm;