'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/context/AuthContext';
import api from '@/lib/api';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSiteSettings } from '@/context/SiteSettingsContext';
import { 
  Check, 
  ArrowRight, 
  TrendingUp, 
  Wallet, 
  ShoppingBag, 
  Users, 
  ShieldCheck, 
  Zap,
  Loader2,
  X,
  Lock,
  Mail,
  User,
  Phone
} from 'lucide-react';

interface Package {
  id: number;
  name: string;
  price: number;
  duration_days: number;
  is_active: boolean;
}

export default function ResellerLanding() {
  const router = useRouter();
  const { user, login, logout, checkUser } = useAuth();
  const { settings, formatPrice } = useSiteSettings();
  
  // Base URLs
  const [apiUrl, setApiUrl] = useState('http://localhost:8000');
  const [panelBaseUrl, setPanelBaseUrl] = useState('http://sawdabazar.test');

  // Modals States
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isRegisterOpen, setIsRegisterOpen] = useState(false);
  const [registerSelectedPackageId, setRegisterSelectedPackageId] = useState<number>(1);

  // Form States
  const [packages, setPackages] = useState<Package[]>([]);
  const [loadingPackages, setLoadingPackages] = useState(true);
  const [isHydrated, setIsHydrated] = useState(false);
  
  // Login Form States
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [loginLoading, setLoginLoading] = useState(false);

  // Register Form States
  const [regName, setRegName] = useState('');
  const [regEmail, setRegEmail] = useState('');
  const [regPassword, setRegPassword] = useState('');
  const [regPhone, setRegPhone] = useState('');
  const [regPaymentMethod, setRegPaymentMethod] = useState('bkash');
  const [regTransactionId, setRegTransactionId] = useState('');
  const [regError, setRegError] = useState('');
  const [regSuccess, setRegSuccess] = useState('');
  const [regLoading, setRegLoading] = useState(false);
  const [copied, setCopied] = useState(false);

  // Redirect if already logged in as reseller
  useEffect(() => {
    if (user && user.role === 'reseller') {
      router.push('/reseller/dashboard');
    }
  }, [user, router]);

  useEffect(() => {
    setIsHydrated(true);
    const configApiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
    setApiUrl(configApiUrl);
    try {
      const url = new URL(configApiUrl);
      setPanelBaseUrl(`${url.protocol}//${url.host}`);
    } catch (e) {
      setPanelBaseUrl('http://sawdabazar.test');
    }

    // Try loading packages from localStorage cache first to prevent flicker
    try {
      const cached = localStorage.getItem('reseller_packages_cache');
      if (cached) {
        const parsed = JSON.parse(cached);
        if (Array.isArray(parsed) && parsed.length > 0) {
          setPackages(parsed);
          setRegisterSelectedPackageId(parsed[0].id);
          setLoadingPackages(false);
        }
      }
    } catch (e) {
      console.warn('Failed to load packages cache', e);
    }

    // Fetch packages
    fetch(`${configApiUrl}/api/reseller-packages`)
      .then((res) => res.json())
      .then((payload) => {
        if (payload.success && payload.data) {
          setPackages(payload.data);
          if (payload.data.length > 0) {
            setRegisterSelectedPackageId(payload.data[0].id);
            localStorage.setItem('reseller_packages_cache', JSON.stringify(payload.data));
          } else {
            localStorage.removeItem('reseller_packages_cache');
          }
        }
      })
      .catch((err) => {
        console.error('Failed to load reseller packages', err);
      })
      .finally(() => {
        setLoadingPackages(false);
      });
  }, []);

  // Handlers
  const handleOpenRegister = (packageId: number) => {
    setRegisterSelectedPackageId(packageId);
    setRegError('');
    setRegSuccess('');
    setIsRegisterOpen(true);
  };

  const handleRegisterSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setRegError('');
    setRegSuccess('');
    setRegLoading(true);

    try {
      // 1. Get CSRF Cookie
      await api.get('/sanctum/csrf-cookie');

      // 2. Perform register
      const response = await api.post('/api/reseller/register', {
        name: regName,
        email: regEmail,
        password: regPassword,
        phone: regPhone,
        package_id: registerSelectedPackageId,
        payment_method: regPaymentMethod,
        transaction_id: regTransactionId
      });

      const data = response.data;

      if (!data.success) {
        setRegError(data.message || 'নিবন্ধন করতে ব্যর্থ হয়েছে। সব তথ্য ঠিক আছে কি না চেক করুন।');
        setRegLoading(false);
        return;
      }

      // Success
      setRegSuccess(data.message);
      setRegLoading(false);
      
      // Clear states
      setRegName('');
      setRegEmail('');
      setRegPassword('');
      setRegPhone('');
      setRegTransactionId('');
    } catch (error) {
      console.error(error);
      setRegError('সার্ভারের সাথে কানেক্ট করা যাচ্ছে না। দয়া করে আবার চেষ্টা করুন।');
      setRegLoading(false);
    }
  };

  // Selected package details in register modal
  const selectedPackage = packages.find(p => p.id === registerSelectedPackageId) || packages[0];

  // Dynamic Instructions
  const bkashNumber = settings?.settings?.reseller_bkash_number || '01700000000';
  const nagadNumber = settings?.settings?.reseller_nagad_number || '01800000000';
  const rocketNumber = settings?.settings?.reseller_rocket_number || '01900000000';
  const resellerInstructions = settings?.settings?.reseller_payment_instructions || '';

  const activeNumber = regPaymentMethod === 'bkash' 
    ? bkashNumber 
    : (regPaymentMethod === 'nagad' ? nagadNumber : rocketNumber);

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="min-h-screen flex flex-col bg-slate-50">
      <Header />

      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-teal-900 via-emerald-800 to-teal-950 text-white py-20 lg:py-28 px-4">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(16,185,129,0.1),transparent)]" />
        <div className="max-w-6xl mx-auto relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
              <Zap className="w-3.5 h-3.5 fill-emerald-300 animate-pulse" /> জিরো ইনভেস্টমেন্টে ব্যবসা শুরু করুন
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
              সৌদাবাজারের সাথে ঘরে বসেই <span className="text-emerald-400">রিসেলিং</span> ব্যবসা করুন!
            </h1>
            <p className="text-lg text-emerald-100/90 max-w-2xl">
              কোনো প্রোডাক্ট স্টক বা ডেলিভারির ঝামেলা ছাড়াই প্রতিদিন পার্ট-টাইম কাজ করে আয় করুন আকর্ষণীয় প্রফিট। আমরাই করব প্রোডাক্ট প্যাকিং ও হোম ডেলিভারি।
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-2">
              {(!isHydrated || packages.length > 0) ? (
                <button 
                  onClick={() => isHydrated && handleOpenRegister(packages[0]?.id)}
                  className="inline-flex items-center justify-center px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-teal-950 font-bold rounded-lg shadow-lg hover:shadow-emerald-500/20 transition-all gap-2"
                >
                  রিসেলার হিসেবে জয়েন করুন <ArrowRight className="w-5 h-5" />
                </button>
              ) : (
                <button 
                  disabled
                  className="inline-flex items-center justify-center px-8 py-4 bg-gray-500 text-gray-200 cursor-not-allowed font-bold rounded-lg gap-2"
                >
                  রেজিস্ট্রেশন সাময়িকভাবে বন্ধ আছে
                </button>
              )}
              <button 
                onClick={() => router.push('/login?redirect=/reseller/dashboard')}
                className="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white/30 hover:border-white text-white font-bold rounded-lg transition-all"
              >
                রিসেলার লগইন
              </button>
            </div>
          </div>
          <div className="lg:col-span-5 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 md:p-8 space-y-6">
            <h3 className="text-xl font-semibold border-b border-white/10 pb-4">কেন সৌদাবাজার রিসেলিং বেছে নেবেন?</h3>
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center shrink-0">
                  <TrendingUp className="w-5 h-5 text-emerald-400" />
                </div>
                <div>
                  <h4 className="font-semibold text-white">সর্বোচ্চ ১৫% প্রফিট মার্জিন</h4>
                  <p className="text-sm text-emerald-100/70">রিসেলার কেনা দাম কাস্টমার রেটের চেয়ে অনেক কম থাকবে, যা আপনার লাভ বাড়িয়ে দেবে।</p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center shrink-0">
                  <Wallet className="w-5 h-5 text-emerald-400" />
                </div>
                <div>
                  <h4 className="font-semibold text-white">সহজ পেমেন্ট উইথড্রয়াল</h4>
                  <p className="text-sm text-emerald-100/70">অর্ডার ডেলিভারি নিশ্চিত হতেই ওয়ালেটে প্রফিট জমা হবে, যা বিকাশ/নগদে তুলতে পারবেন।</p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center shrink-0">
                  <ShieldCheck className="w-5 h-5 text-emerald-400" />
                </div>
                <div>
                  <h4 className="font-semibold text-white">১০০% ক্যাশ অন ডেলিভারি</h4>
                  <p className="text-sm text-emerald-100/70">কাস্টমারকে দিন ফুল ক্যাশ অন ডেলিভারি ট্রাস্ট। ডেলিভারি ও রিটার্ন সব আমরা দেখব।</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="py-20 px-4 max-w-6xl mx-auto">
        <div className="text-center space-y-4 mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-800">রিসেলিং কিভাবে কাজ করে?</h2>
          <p className="text-slate-500 max-w-2xl mx-auto">খুবই সহজ ৪টি ধাপে আজই শুরু করুন আপনার ঘরে বসে আয় করার জার্নি</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm relative space-y-4 text-center flex flex-col items-center">
            <span className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-teal-600 text-white font-bold flex items-center justify-center text-sm shadow-md">১</span>
            <div className="w-12 h-12 rounded-lg bg-teal-50 flex items-center justify-center text-teal-600">
              <Users className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">অ্যাকাউন্ট খুলুন</h3>
            <p className="text-sm text-slate-500 leading-relaxed">রিসেলার হিসেবে ফর্মে রেজিস্ট্রেশন করে আপনার পছন্দমতো বাৎসরিক মেম্বারশিপ প্ল্যান একটিভ করুন।</p>
          </div>

          <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm relative space-y-4 text-center flex flex-col items-center">
            <span className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-teal-600 text-white font-bold flex items-center justify-center text-sm shadow-md">২</span>
            <div className="w-12 h-12 rounded-lg bg-teal-50 flex items-center justify-center text-teal-600">
              <ShoppingBag className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">প্রোডাক্ট প্রচার করুন</h3>
            <p className="text-sm text-slate-500 leading-relaxed">আমাদের ক্যাটালগ থেকে ট্রেন্ডিং প্রোডাক্ট সিলেক্ট করে ফেসবুক পেজ বা গ্রুপে কাস্টমারদের কাছে শেয়ার করুন।</p>
          </div>

          <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm relative space-y-4 text-center flex flex-col items-center">
            <span className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-teal-600 text-white font-bold flex items-center justify-center text-sm shadow-md">৩</span>
            <div className="w-12 h-12 rounded-lg bg-teal-50 flex items-center justify-center text-teal-600">
              <TrendingUp className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">অর্ডার প্লেস করুন</h3>
            <p className="text-sm text-slate-500 leading-relaxed">কাস্টমারের অর্ডার ডিটেইলস ও আপনার নির্ধারণ করা খুচরা মূল্যে আমাদের রিসেলার প্যানেল থেকে অর্ডার দিন।</p>
          </div>

          <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm relative space-y-4 text-center flex flex-col items-center">
            <span className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-teal-600 text-white font-bold flex items-center justify-center text-sm shadow-md">৪</span>
            <div className="w-12 h-12 rounded-lg bg-teal-50 flex items-center justify-center text-teal-600">
              <Wallet className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">প্রফিট বুঝে নিন</h3>
            <p className="text-sm text-slate-500 leading-relaxed">অর্ডার কাস্টমারের কাছে ডেলিভারি হতেই আপনার লভ্যাংশ আপনার বিকাশ/নগদে ক্যাশআউট করে নিন।</p>
          </div>
        </div>
      </section>

      {/* Pricing / Membership Packages */}
      <section className="bg-slate-100 py-20 px-4">
        <div className="max-w-6xl mx-auto space-y-12">
          <div className="text-center space-y-4">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800">মেম্বারশিপ প্যাকেজ সমূহ</h2>
            <p className="text-slate-500 max-w-2xl mx-auto">অল্প খরচে বাৎসরিক মেম্বারশিপ নিয়ে আপনার রিসেলিং বিজনেস চালু করুন</p>
          </div>

          {loadingPackages ? (
            <div className="flex justify-center">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl w-full">
                {/* Skeleton Card */}
                <div className="bg-white rounded-2xl border border-slate-200/80 shadow-md p-8 relative flex flex-col justify-between animate-pulse">
                  <div className="space-y-6">
                    <div className="space-y-3">
                      <div className="h-6 w-32 bg-slate-200 rounded"></div>
                      <div className="h-4 w-20 bg-slate-100 rounded"></div>
                    </div>
                    <div className="h-8 w-24 bg-slate-200 rounded"></div>
                    <div className="space-y-2.5 border-t border-slate-100 pt-6">
                      <div className="h-4 bg-slate-100 rounded"></div>
                      <div className="h-4 bg-slate-100 rounded"></div>
                      <div className="h-4 bg-slate-100 rounded"></div>
                    </div>
                  </div>
                  <div className="h-12 bg-slate-200 rounded-xl mt-8"></div>
                </div>

                {/* Additional Call to action box skeleton */}
                <div className="bg-gradient-to-br from-slate-800 to-slate-900 text-white rounded-2xl p-8 flex flex-col justify-between hover:shadow-xl transition-all">
                  <div className="space-y-4">
                    <h3 className="text-xl font-bold">ইতিমধ্যে একাউন্ট আছে?</h3>
                    <p className="text-sm text-slate-300 leading-relaxed">
                      আপনার যদি ইতিমধ্যেই একটি অনুমোদিত রিসেলার একাউন্ট থেকে থাকে, তবে সরাসরি লগইন করে আপনার প্যানেল এক্সেস করুন।
                    </p>
                  </div>
                  <div className="mt-8">
                    <button 
                      onClick={() => router.push('/login?redirect=/reseller/dashboard')}
                      className="block w-full text-center py-3 px-4 rounded-xl bg-white text-slate-800 font-bold hover:bg-slate-100 transition-all"
                    >
                      রিসেলার প্যানেল লগইন
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="flex justify-center">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl w-full">
                {packages.map((pkg) => (
                  <div 
                    key={pkg.id} 
                    className="bg-white rounded-2xl border border-slate-200/80 shadow-md p-8 relative flex flex-col justify-between hover:border-emerald-500 transition-all duration-300 transform hover:-translate-y-1"
                  >
                    <div className="space-y-6">
                      <div className="space-y-2">
                        <h3 className="text-xl font-bold text-slate-800">{pkg.name}</h3>
                        <p className="text-sm text-slate-400">মেয়াদ: {pkg.duration_days} দিন</p>
                      </div>
                      
                      <div className="flex items-baseline gap-1 text-slate-800">
                        <span className="text-4xl font-extrabold">৳{pkg.price}</span>
                        <span className="text-slate-400 text-sm">/ বাৎসরিক</span>
                      </div>

                      <ul className="space-y-3.5 border-t border-slate-100 pt-6">
                        <li className="flex items-center gap-3 text-sm text-slate-600">
                          <span className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center shrink-0">
                            <Check className="w-3 h-3 text-emerald-600" />
                          </span>
                          হাজারো ট্রেন্ডিং প্রোডাক্টের এক্সেস
                        </li>
                        <li className="flex items-center gap-3 text-sm text-slate-600">
                          <span className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center shrink-0">
                            <Check className="w-3 h-3 text-emerald-600" />
                          </span>
                          রিসেলার এক্সক্লুসিভ প্রাইস সুবিধা
                        </li>
                        <li className="flex items-center gap-3 text-sm text-slate-600">
                          <span className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center shrink-0">
                            <Check className="w-3 h-3 text-emerald-600" />
                          </span>
                          ১ ক্লিকের কাস্টমার অর্ডার এন্ট্রি
                        </li>
                        <li className="flex items-center gap-3 text-sm text-slate-600">
                          <span className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center shrink-0">
                            <Check className="w-3 h-3 text-emerald-600" />
                          </span>
                          বিকাশ/নগদে প্রফিট ক্যাশআউট সুবিধা
                        </li>
                      </ul>
                    </div>

                    <div className="mt-8">
                      <button 
                        onClick={() => handleOpenRegister(pkg.id)}
                        className="block w-full text-center py-3 px-4 rounded-xl bg-teal-900 text-white font-bold hover:bg-teal-800 transition-all hover:shadow-lg"
                      >
                        প্যাকেজটি বেছে নিন
                      </button>
                    </div>
                  </div>
                ))}

                {packages.length === 0 && (
                  <div className="bg-white rounded-2xl border border-slate-200/80 shadow-md p-8 flex flex-col justify-center items-center text-center space-y-4">
                    <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-400">
                      <Lock className="w-6 h-6" />
                    </div>
                    <h3 className="text-lg font-bold text-slate-800">রেজিস্ট্রেশন সাময়িকভাবে বন্ধ</h3>
                    <p className="text-xs text-slate-500 leading-relaxed max-w-xs">
                      বর্তমানে নতুন কোনো মেম্বারশিপ প্যাকেজ সক্রিয় নেই। বিস্তারিত জানতে আমাদের সাপোর্টে যোগাযোগ করুন।
                    </p>
                  </div>
                )}

                {/* Additional Call to action box */}
                <div className="bg-gradient-to-br from-slate-800 to-slate-900 text-white rounded-2xl p-8 flex flex-col justify-between hover:shadow-xl transition-all">
                  <div className="space-y-4">
                    <h3 className="text-xl font-bold">ইতিমধ্যে একাউন্ট আছে?</h3>
                    <p className="text-sm text-slate-300 leading-relaxed">
                      আপনার যদি ইতিমধ্যেই একটি অনুমোদিত রিসেলার একাউন্ট থেকে থাকে, তবে সরাসরি লগইন করে আপনার প্যানেল এক্সেস করুন।
                    </p>
                  </div>
                  <div className="mt-8">
                    <button 
                      onClick={() => router.push('/login?redirect=/reseller/dashboard')}
                      className="block w-full text-center py-3 px-4 rounded-xl bg-white text-slate-800 font-bold hover:bg-slate-100 transition-all"
                    >
                      রিসেলার প্যানেল লগইন
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* REGISTER MODAL POPUP */}
      {isRegisterOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-2 md:p-4 overflow-y-auto">
          <div className="bg-white rounded-2xl max-w-4xl w-full shadow-2xl overflow-y-auto max-h-[95vh] lg:max-h-none lg:overflow-hidden relative my-4 md:my-8 transform transition-all border border-slate-100">
            <button 
              onClick={() => setIsRegisterOpen(false)}
              className="absolute top-4 right-4 text-slate-400 hover:text-slate-600 transition-colors z-10"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="grid grid-cols-1 lg:grid-cols-12">
              {/* Left Form Column */}
              <div className="lg:col-span-7 p-6 md:p-8 space-y-6">
                <div className="space-y-1">
                  <h3 className="text-2xl font-bold text-slate-800">রিসেলার রেজিস্ট্রেশন</h3>
                  <p className="text-sm text-slate-500">আপনার একাউন্ট এবং পেমেন্ট সংক্রান্ত তথ্য দিন</p>
                </div>

                {/* Mobile-only Selected Package Summary */}
                <div className="block lg:hidden bg-teal-950 text-white p-4 rounded-xl border border-teal-800 space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-xs font-semibold text-teal-300 uppercase tracking-wider">নির্বাচিত প্ল্যান</span>
                    <span className="text-xs text-teal-300/80">মেয়াদ: {selectedPackage?.duration_days} দিন</span>
                  </div>
                  <div className="flex justify-between items-end">
                    <h4 className="text-lg font-bold">{selectedPackage?.name}</h4>
                    <span className="text-xl font-extrabold text-emerald-400">৳{selectedPackage?.price}</span>
                  </div>
                </div>

                {regError && (
                  <div className="bg-red-50 border-l-4 border-red-500 p-4 text-xs font-semibold text-red-800 rounded-r-md">
                    {regError}
                  </div>
                )}

                {regSuccess && (
                  <div className="bg-emerald-50 border-l-4 border-emerald-500 p-4 text-xs font-semibold text-emerald-800 rounded-r-md">
                    {regSuccess}
                  </div>
                )}

                {!regSuccess && (
                  <form onSubmit={handleRegisterSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">সম্পূর্ণ নাম</label>
                        <div className="flex items-center gap-2 border border-slate-200 rounded-lg px-3.5 py-2.5 bg-slate-50 focus-within:bg-white focus-within:border-teal-500 transition-all">
                          <User className="w-4.5 h-4.5 text-slate-400" />
                          <input 
                            type="text" 
                            required 
                            value={regName}
                            onChange={(e) => setRegName(e.target.value)}
                            placeholder="আপনার নাম" 
                            className="bg-transparent outline-none w-full text-sm text-slate-700" 
                          />
                        </div>
                      </div>

                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">মোবাইল নম্বর</label>
                        <div className="flex items-center gap-2 border border-slate-200 rounded-lg px-3.5 py-2.5 bg-slate-50 focus-within:bg-white focus-within:border-teal-500 transition-all">
                          <Phone className="w-4.5 h-4.5 text-slate-400" />
                          <input 
                            type="text" 
                            required 
                            value={regPhone}
                            onChange={(e) => setRegPhone(e.target.value)}
                            placeholder="যেমন: 017XXXXXXXX" 
                            className="bg-transparent outline-none w-full text-sm text-slate-700" 
                          />
                        </div>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">ইমেইল ঠিকানা</label>
                        <div className="flex items-center gap-2 border border-slate-200 rounded-lg px-3.5 py-2.5 bg-slate-50 focus-within:bg-white focus-within:border-teal-500 transition-all">
                          <Mail className="w-4.5 h-4.5 text-slate-400" />
                          <input 
                            type="email" 
                            required 
                            value={regEmail}
                            onChange={(e) => setRegEmail(e.target.value)}
                            placeholder="email@example.com" 
                            className="bg-transparent outline-none w-full text-sm text-slate-700" 
                          />
                        </div>
                      </div>

                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">পাসওয়ার্ড</label>
                        <div className="flex items-center gap-2 border border-slate-200 rounded-lg px-3.5 py-2.5 bg-slate-50 focus-within:bg-white focus-within:border-teal-500 transition-all">
                          <Lock className="w-4.5 h-4.5 text-slate-400" />
                          <input 
                            type="password" 
                            required 
                            value={regPassword}
                            onChange={(e) => setRegPassword(e.target.value)}
                            placeholder="কমপক্ষে ৬ ডিজিট" 
                            className="bg-transparent outline-none w-full text-sm text-slate-700" 
                          />
                        </div>
                      </div>
                    </div>

                    <div className="border-t border-slate-100 pt-4 space-y-4">
                      <h4 className="text-xs font-extrabold text-slate-400 uppercase tracking-wider">পেমেন্ট ডিটেইলস</h4>
                      
                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">পেমেন্ট মেথড</label>
                        <select 
                          value={regPaymentMethod}
                          onChange={(e) => setRegPaymentMethod(e.target.value)}
                          className="w-full border border-slate-200 rounded-lg px-3 py-2.5 bg-slate-50 text-sm text-slate-700 outline-none focus:bg-white focus:border-teal-500 transition-all"
                        >
                          <option value="bkash">bKash (বিকাশ Personal)</option>
                          <option value="nagad">Nagad (নগদ Personal)</option>
                          <option value="rocket">Rocket (রকেট Personal)</option>
                        </select>
                      </div>

                      <div className="bg-teal-50/50 text-teal-800 p-4 rounded-xl text-xs space-y-3 border border-teal-100">
                        <div className="flex items-center justify-between bg-white px-3 py-2 rounded-lg border border-teal-100">
                          <div className="space-y-0.5">
                            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">পার্সোনাল নম্বর</span>
                            <p className="text-sm font-extrabold text-teal-950">{activeNumber}</p>
                          </div>
                          <button 
                            type="button"
                            onClick={() => handleCopy(activeNumber)}
                            className="px-3 py-1.5 bg-teal-100 hover:bg-teal-200 text-teal-900 font-bold rounded-md transition-all text-[11px] flex items-center gap-1 active:scale-95"
                          >
                            {copied ? 'কপি হয়েছে!' : 'কপি করুন'}
                          </button>
                        </div>
                        <p className="leading-relaxed font-semibold">
                          আমাদের ওপরের পার্সোনাল নম্বরে মেম্বারশিপ ফি <strong className="text-teal-950">৳{selectedPackage?.price}</strong> সেন্ড মানি (Send Money) করুন।
                        </p>
                        {resellerInstructions && (
                          <p className="leading-relaxed text-[11px] text-teal-700/90 pt-1.5 border-t border-teal-100/50">
                            নির্দেশনা: {resellerInstructions}
                          </p>
                        )}
                      </div>

                      <div className="space-y-1">
                        <label className="text-xs font-bold text-slate-600">Transaction ID (টাকা পাঠানোর ট্রানজেকশন আইডি)</label>
                        <input 
                          type="text" 
                          required 
                          value={regTransactionId}
                          onChange={(e) => setRegTransactionId(e.target.value)}
                          placeholder="যেমন: K8B4F9G2" 
                          className="w-full border border-slate-200 rounded-lg px-3.5 py-2.5 bg-slate-50 text-sm text-slate-700 outline-none focus:bg-white focus:border-teal-500 transition-all" 
                        />
                      </div>
                    </div>

                    <button 
                      type="submit" 
                      disabled={regLoading}
                      className="w-full py-3.5 px-4 rounded-xl bg-teal-900 hover:bg-teal-800 text-white font-bold transition-all flex items-center justify-center gap-2 shadow-md mt-6"
                    >
                      {regLoading ? (
                        <>
                          <Loader2 className="w-5 h-5 animate-spin" /> সাবমিট করা হচ্ছে...
                        </>
                      ) : (
                        <>
                          রেজিস্ট্রেশন সম্পূর্ণ করুন <ArrowRight className="w-5 h-5" />
                        </>
                      )}
                    </button>
                  </form>
                )}

                {regSuccess && (
                  <div className="flex flex-col items-center justify-center py-12 text-center space-y-4">
                    <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 animate-bounce">
                      <Check className="w-8 h-8 stroke-[3]" />
                    </div>
                    <h3 className="text-xl font-bold text-slate-800">নিবন্ধন সফল হয়েছে!</h3>
                    <p className="text-sm text-slate-500 max-w-md">
                      আপনার মেম্বারশিপ ফি পেমেন্ট বিবরণ যাচাই করে অ্যাডমিন খুব দ্রুত আপনার রিসেলার অ্যাকাউন্টটি সচল করে দেবেন। প্যানেল সচল হলে আপনাকে ইমেইলের মাধ্যমে জানানো হবে।
                    </p>
                    <button 
                      onClick={() => setIsRegisterOpen(false)}
                      className="px-6 py-2.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold transition-all text-sm"
                    >
                      বন্ধ করুন
                    </button>
                  </div>
                )}
              </div>

              {/* Right Sidebar Package Column */}
              <div className="hidden lg:flex lg:col-span-5 bg-teal-950 text-white p-6 md:p-8 flex-col justify-between border-l border-white/10">
                <div className="space-y-6">
                  <h4 className="text-xs font-extrabold text-teal-400 uppercase tracking-wider">নির্বাচিত প্ল্যান</h4>
                  <div className="space-y-2">
                    <h3 className="text-2xl font-bold">{selectedPackage?.name}</h3>
                    <p className="text-sm text-teal-300/80">মেয়াদ: {selectedPackage?.duration_days} দিন</p>
                  </div>

                  <div className="flex items-baseline gap-1 py-4 border-y border-white/10">
                    <span className="text-4xl font-extrabold">৳{selectedPackage?.price}</span>
                    <span className="text-teal-300 text-sm">/ বাৎসরিক</span>
                  </div>

                  <div className="space-y-4">
                    <h5 className="text-sm font-semibold text-white">মেম্বারশিপ সুবিধা সমূহ:</h5>
                    <ul className="space-y-2.5 text-xs text-teal-200/80">
                      <li className="flex items-center gap-2">
                        <Check className="w-4 h-4 text-emerald-400" /> খুচরা মূল্যের চেয়ে ১৫% কম দামে পাইকারি প্রোডাক্ট ক্রয়
                      </li>
                      <li className="flex items-center gap-2">
                        <Check className="w-4 h-4 text-emerald-400" /> প্যাকিং এবং হোম ডেলিভারি ম্যানেজমেন্ট সুবিধা
                      </li>
                      <li className="flex items-center gap-2">
                        <Check className="w-4 h-4 text-emerald-400" /> ওয়ালেটে লভ্যাংশ জমা ও সহজে টাকা উত্তোলন
                      </li>
                      <li className="flex items-center gap-2">
                        <Check className="w-4 h-4 text-emerald-400" /> রিয়েল-টাইম ক্যাটালগ এবং ইনভেন্টরি ট্র্যাকিং
                      </li>
                    </ul>
                  </div>
                </div>

                <div className="text-center text-xs text-teal-300/60 border-t border-white/10 pt-4 mt-8 lg:mt-0">
                  ইতিমধ্যে রেজিস্টার্ড? <button onClick={() => { setIsRegisterOpen(false); router.push('/login?redirect=/reseller/dashboard'); }} className="text-emerald-400 hover:underline font-bold">লগইন করুন</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

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