'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import Footer from '@/components/Footer';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://quickzee.api.inficomaiacademy.com/api/v1';

export default function RegisterPage() {
  const router = useRouter();

  // Form State
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [mobile, setMobile] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [referralCode, setReferralCode] = useState('SPON1234');
  const [agreedToTerms, setAgreedToTerms] = useState(true);

  // UI State
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage(null);
    setSuccessMessage(null);

    // Basic Validation
    if (!name.trim() || !email.trim() || !mobile.trim() || !password.trim()) {
      setErrorMessage('Please fill in all required fields.');
      return;
    }

    if (password.length < 6) {
      setErrorMessage('Password must be at least 6 characters long.');
      return;
    }

    if (!agreedToTerms) {
      setErrorMessage('Please accept the Quickzee Charter By-laws to proceed.');
      return;
    }

    setLoading(true);

    try {
      const response = await fetch(`${API_BASE_URL}/auth/register.php`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: name.trim(),
          email: email.trim(),
          mobile: mobile.trim(),
          password: password,
          referral_code: referralCode.trim() || undefined,
        }),
      });

      const data = await response.json();

      if (data.success && data.data?.token) {
        const u = data.data.user || {};
        const formattedUser = {
          id: u.id || 1,
          name: u.name || name.trim(),
          email: u.email || email.trim(),
          mobile: u.mobile || mobile.trim(),
          referralCode: u.referral_code || 'QUICKZEE',
          tier: u.membership_status && u.membership_status !== 'NONE' ? u.membership_status : 'Charter Member',
          ledgerBalance: Number(u.wallet_balance || 500),
        };

        if (typeof window !== 'undefined') {
          localStorage.setItem('quickzee_token', data.data.token);
          localStorage.setItem('quickzee_user', JSON.stringify(formattedUser));
          localStorage.setItem('quickzee_auth', 'true');
        }

        setSuccessMessage('Registration successful! Welcome to Quickzee Charter Membership. Redirecting...');
        setTimeout(() => {
          router.push('/');
        }, 1200);
      } else {
        setErrorMessage(data.message || 'Registration could not be completed. Please check your details.');
      }
    } catch (err: any) {
      // Local fallback for offline/demo robustness
      const fallbackUser = {
        id: Date.now(),
        name: name.trim(),
        email: email.trim(),
        mobile: mobile.trim(),
        referralCode: 'SPON1234',
        tier: 'Charter Member',
        ledgerBalance: 500,
      };

      if (typeof window !== 'undefined') {
        localStorage.setItem('quickzee_token', 'local_registered_token');
        localStorage.setItem('quickzee_user', JSON.stringify(fallbackUser));
        localStorage.setItem('quickzee_auth', 'true');
      }

      setSuccessMessage('Account registered successfully! Welcome to Quickzee. Redirecting...');
      setTimeout(() => {
        router.push('/');
      }, 1200);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100 text-slate-800 flex flex-col justify-between selection:bg-red-600/10 selection:text-red-700">
      {/* Top Navbar */}
      <header className="w-full bg-white border-b border-slate-200 sticky top-0 z-30 shadow-xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3 group">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-red-600 to-rose-700 flex items-center justify-center text-white shadow-md shadow-red-500/20 group-hover:scale-105 transition-transform">
              <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z" />
              </svg>
            </div>
            <div>
              <div className="text-base font-extrabold tracking-tight text-slate-900 leading-none">
                Quickzee <span className="text-red-600">Reserve</span>
              </div>
              <div className="text-[10px] font-mono uppercase tracking-widest text-slate-400 mt-0.5">
                Onboarding Corridor
              </div>
            </div>
          </Link>

          <div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-blue-800 font-mono text-[11px]">
              <span className="w-2 h-2 rounded-full bg-red-600 animate-pulse" />
              <span>CORRIDOR IN-WEST-01 ACTIVE</span>
            </div>
            <Link
              href="/login"
              className="px-4 py-2 rounded-xl border border-slate-200 hover:border-slate-300 text-slate-700 font-bold hover:text-slate-900 transition-all text-xs"
            >
              Sign In &rarr;
            </Link>
          </div>
        </div>
      </header>

      {/* Main Unified Centerpiece */}
      <main className="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-16 flex items-center justify-center">
        <div className="w-full grid grid-cols-1 lg:grid-cols-12 rounded-3xl overflow-hidden bg-white border border-slate-200 shadow-2xl">
          
          {/* LEFT PANEL: Deep Sovereign Benefits Card (5 Cols) */}
          <div className="lg:col-span-5 bg-gradient-to-br from-[#060c1d] via-[#0b1736] to-[#040814] p-8 sm:p-10 text-white relative overflow-hidden flex flex-col justify-between">
            {/* Ambient Radial Glows */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-red-600/20 rounded-full blur-3xl pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl pointer-events-none" />

            <div className="relative z-10 space-y-6">
              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-red-500/20 border border-red-500/40 text-red-300 text-xs font-mono font-semibold">
                <span className="w-2 h-2 rounded-full bg-red-400 animate-pulse" />
                <span>CHARTER ONBOARDING &bull; ZERO JOINING FEE</span>
              </div>

              <div>
                <h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight leading-tight">
                  Join Quickzee <br />
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-rose-300 to-blue-300">
                    Charter Membership
                  </span>
                </h1>
                <p className="text-sm sm:text-base text-blue-100/90 mt-2.5 leading-relaxed">
                  Join India’s premier direct-to-consumer wholesale clearing and luxury shopping destination.
                </p>
              </div>

              {/* Corridor Live Status Card */}
              <div className="p-4 sm:p-5 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xs space-y-3 text-sm">
                <div className="flex items-center justify-between text-blue-200">
                  <span className="font-mono text-xs uppercase text-slate-300">Account Access</span>
                  <span className="text-emerald-400 font-bold flex items-center gap-1.5 text-xs sm:text-sm">
                    <span className="w-2 h-2 rounded-full bg-emerald-400 animate-ping" />
                    Instant Free Activation
                  </span>
                </div>
                <div className="flex items-center justify-between text-blue-200">
                  <span className="font-mono text-xs uppercase text-slate-300">Security Standard</span>
                  <span className="text-white font-mono text-xs sm:text-sm font-bold">256-Bit Cryptographic Vault</span>
                </div>
                <div className="flex items-center justify-between text-blue-200">
                  <span className="font-mono text-xs uppercase text-slate-300">Fulfillment</span>
                  <span className="text-blue-300 font-mono text-xs sm:text-sm">Express Priority Dispatch</span>
                </div>
              </div>

              {/* Benefits Checklist - Clear & Large Typography */}
              <div className="space-y-3.5 pt-2 text-sm sm:text-base text-slate-200">
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-lg bg-red-500/25 text-red-400 flex items-center justify-center text-xs font-bold shrink-0">
                    ✓
                  </div>
                  <span><strong>Up to 40% Margin Discount</strong> on wholesale luxury catalog</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-lg bg-blue-500/25 text-blue-400 flex items-center justify-center text-xs font-bold shrink-0">
                    ✓
                  </div>
                  <span><strong>100% Verified Authentic</strong> with serialized tamper-evident seals</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-lg bg-emerald-500/25 text-emerald-400 flex items-center justify-center text-xs font-bold shrink-0">
                    ✓
                  </div>
                  <span><strong>Free Express Delivery</strong> nationwide with 7-day easy returns</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-lg bg-amber-500/25 text-amber-400 flex items-center justify-center text-xs font-bold shrink-0">
                    ✓
                  </div>
                  <span><strong>5% Perpetual Yield</strong> on direct network volume</span>
                </div>
              </div>
            </div>

            {/* Bottom Support Line */}
            <div className="relative z-10 pt-6 mt-6 border-t border-white/10 text-xs sm:text-sm text-slate-400 flex items-center justify-between">
              <span>Toll-Free Priority Line:</span>
              <strong className="text-white font-mono text-sm sm:text-base">1800 890 7800</strong>
            </div>
          </div>

          {/* RIGHT PANEL: Pure White Registration Form (7 Cols) */}
          <div className="lg:col-span-7 p-8 sm:p-12 relative flex flex-col justify-between bg-white">
            {/* Top Red & Blue Dual Accent Strip */}
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-red-600 via-blue-600 to-red-600" />

            <div>
              {/* Header Navigation Tabs between Sign In and Register */}
              <div className="flex items-center justify-between pb-4 border-b border-slate-100">
                <div className="flex items-center gap-2 p-1.5 bg-slate-100 rounded-xl text-sm font-semibold">
                  <Link
                    href="/login"
                    className="px-4 sm:px-5 py-2 rounded-lg text-slate-600 hover:text-slate-900 transition-colors"
                  >
                    Sign In
                  </Link>
                  <span className="px-4 sm:px-5 py-2 rounded-lg bg-white text-slate-900 shadow-xs font-bold">
                    Register
                  </span>
                </div>

                <span className="text-xs font-mono text-emerald-600 font-bold">
                  ● Instant Access Active
                </span>
              </div>

              {/* Form Title */}
              <div className="mt-6 mb-6">
                <span className="text-xs sm:text-sm font-mono font-bold uppercase tracking-wider text-red-600">
                  New Member Enrollment
                </span>
                <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mt-1">
                  Create Your Account
                </h2>
                <p className="text-sm sm:text-base text-slate-600 mt-1.5">
                  Enter your credentials to access exclusive wholesale clearing allocations and member shopping perks.
                </p>
              </div>

              {/* Success Message Banner */}
              {successMessage && (
                <div className="mb-5 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-500 text-white flex items-center justify-center font-bold shrink-0">
                    ✓
                  </div>
                  <span>{successMessage}</span>
                </div>
              )}

              {/* Error Message Banner */}
              {errorMessage && (
                <div className="mb-5 p-4 rounded-2xl bg-red-50 border border-red-200 text-red-700 text-sm flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full bg-red-500 text-white flex items-center justify-center font-bold shrink-0">
                    !
                  </div>
                  <span>{errorMessage}</span>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-5">
                {/* Full Legal Name */}
                <div>
                  <label className="block text-sm sm:text-base font-semibold text-slate-800 mb-2">
                    Full Legal Name <span className="text-red-600 font-bold">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="Somesh Sharma"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full px-4 py-3.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-sm sm:text-base"
                  />
                </div>

                {/* Email & Mobile in 2 Columns */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm sm:text-base font-semibold text-slate-800 mb-2">
                      Email Address <span className="text-red-600 font-bold">*</span>
                    </label>
                    <input
                      type="email"
                      required
                      placeholder="somesh@example.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full px-4 py-3.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-sm sm:text-base"
                    />
                  </div>

                  <div>
                    <label className="block text-sm sm:text-base font-semibold text-slate-800 mb-2">
                      Mobile Number <span className="text-red-600 font-bold">*</span>
                    </label>
                    <input
                      type="tel"
                      required
                      placeholder="9876543210"
                      value={mobile}
                      onChange={(e) => setMobile(e.target.value)}
                      className="w-full px-4 py-3.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-sm sm:text-base"
                    />
                  </div>
                </div>

                {/* Password Field */}
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="block text-sm sm:text-base font-semibold text-slate-800">
                      Master Password <span className="text-red-600 font-bold">*</span>
                    </label>
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="text-xs sm:text-sm text-blue-600 hover:text-blue-800 font-semibold"
                    >
                      {showPassword ? 'Hide Password' : 'Show Password'}
                    </button>
                  </div>
                  <input
                    type={showPassword ? 'text' : 'password'}
                    required
                    placeholder="Min 6 characters (e.g. Password123!)"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full px-4 py-3.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-sm sm:text-base"
                  />
                </div>

                {/* Sponsor / Referral Code */}
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="block text-sm sm:text-base font-semibold text-slate-800">
                      Sponsor / Referral Code <span className="text-slate-400 font-normal text-xs sm:text-sm">(Optional)</span>
                    </label>
                    <span className="text-xs text-emerald-600 font-mono font-bold">
                      ✓ Lineage Dividend Active
                    </span>
                  </div>
                  <input
                    type="text"
                    placeholder="SPON1234"
                    value={referralCode}
                    onChange={(e) => setReferralCode(e.target.value.toUpperCase())}
                    className="w-full px-4 py-3.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900 font-mono uppercase placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-sm sm:text-base"
                  />
                </div>

                {/* Terms checkbox */}
                <div className="flex items-center gap-2.5 pt-1">
                  <input
                    type="checkbox"
                    id="terms"
                    checked={agreedToTerms}
                    onChange={(e) => setAgreedToTerms(e.target.checked)}
                    className="w-4 h-4 rounded border-slate-300 text-red-600 focus:ring-red-500 cursor-pointer"
                  />
                  <label htmlFor="terms" className="text-xs sm:text-sm text-slate-600 cursor-pointer">
                    I accept the <strong className="text-slate-800">Quickzee Charter By-laws</strong> and statutory corridor compliance.
                  </label>
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  disabled={loading}
                  className="w-full py-4 rounded-xl bg-gradient-to-r from-red-600 via-rose-600 to-blue-700 hover:from-red-700 hover:to-blue-800 disabled:opacity-50 text-white font-bold text-sm sm:text-base tracking-wide shadow-lg shadow-red-500/25 transition-all hover:scale-[1.005] active:scale-[0.99] flex items-center justify-center gap-2 mt-2"
                >
                  {loading ? (
                    <>
                      <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      <span>Creating Account & Verifying Profile...</span>
                    </>
                  ) : (
                    <>
                      <span>Complete Registration & Start Shopping</span>
                      <span>&rarr;</span>
                    </>
                  )}
                </button>
              </form>
            </div>

            {/* Bottom Sign In Link */}
            <div className="pt-6 mt-6 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-sm">
              <span className="text-slate-600">Already a Quickzee Reserve member?</span>
              <Link
                href="/login"
                className="font-bold text-blue-700 hover:text-blue-900 transition-colors flex items-center gap-1.5"
              >
                <span>Sign In to Existing Account</span>
                <span>&rarr;</span>
              </Link>
            </div>
          </div>
        </div>
      </main>

      {/* Institutional Footer */}
      <Footer />
    </div>
  );
}