'use client'

import { useEffect, useState } from 'react'
import DashboardLayout from '@/components/DashboardLayout'
import { 
  MdPeople, 
  MdPersonAdd, 
  MdGroups, 
  MdContentCopy,
  MdEmail,
  MdPhone,
  MdLock,
  MdCheckCircle,
  MdInfo,
  MdKeyboardArrowDown,
  MdStar
} from 'react-icons/md'

export default function Network() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [memberId, setMemberId] = useState('')
  const [summary, setSummary] = useState<any>(null)
  const [directs, setDirects] = useState<any[]>([])
  
  // Navigation tab state
  const [activeTab, setActiveTab] = useState<'create' | 'directs' | 'levels' | 'royalty'>('create')
  
  // Create member form state
  const [createForm, setCreateForm] = useState({
    introId: '',
    name: '',
    email: '',
    mob: '',
    position: 'L',
    password: '',
    walletAddress: '',
  })
  const [submitting, setSubmitting] = useState(false)
  const [errorMsg, setErrorMsg] = useState('')
  const [successVoucher, setSuccessVoucher] = useState<{ memberId: string; name: string; password: string } | null>(null)
  
  // Level view state
  const [levelData, setLevelData] = useState<any>(null)
  const [loadingLevels, setLoadingLevels] = useState(false)
  const [selectedLevel, setSelectedLevel] = useState<number>(1)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)

  const [copied, setCopied] = useState(false)

  useEffect(() => {
    const session = localStorage.getItem('memberSession')
    if (!session) {
      window.location.href = '/'
      return
    }

    let mId = ''
    try {
      mId = JSON.parse(session).memberId
      setMemberId(mId)
      setCreateForm((prev) => ({ ...prev, introId: mId }))
    } catch (e) {
      console.error(e)
      setError('Invalid user session')
      setLoading(false)
      return
    }

    const fetchNetwork = async () => {
      try {
        const res = await fetch(`/api/network?memberId=${mId}`)
        const json = await res.json()
        if (json.success) {
          setDirects(json.directs)
          setSummary(json.summary)
        } else {
          setError(json.error || 'Failed to fetch team data')
        }
      } catch (err) {
        console.error(err)
        setError('Error fetching downlines')
      } finally {
        setLoading(false)
      }
    }

    fetchNetwork()
  }, [])

  // Fetch levels recursively if Levels tab active
  useEffect(() => {
    if (activeTab === 'levels' && !levelData && memberId) {
      const fetchLevels = async () => {
        setLoadingLevels(true)
        try {
          const res = await fetch(`/api/network?memberId=${memberId}&action=levels`)
          const json = await res.json()
          if (json.success) {
            setLevelData(json.levels)
          }
        } catch (err) {
          console.error('Failed to load level view downlines:', err)
        } finally {
          setLoadingLevels(false)
        }
      }
      fetchLevels()
    }
  }, [activeTab, levelData, memberId])

  const handleCopyLink = () => {
    const origin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3001'
    const link = `${origin}/?ref=${memberId}`
    navigator.clipboard.writeText(link)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleCreateMemberSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setErrorMsg('')
    try {
      const res = await fetch('/api/network', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(createForm),
      })
      const json = await res.json()
      if (json.success) {
        setSuccessVoucher(json)
        setCreateForm({
          introId: memberId,
          name: '',
          email: '',
          mob: '',
          position: 'L',
          password: '',
          walletAddress: '',
        })
        // Refresh connects list
        const resList = await fetch(`/api/network?memberId=${memberId}`)
        const jsonList = await resList.json()
        if (jsonList.success) {
          setDirects(jsonList.directs)
          setSummary(jsonList.summary)
        }
        // Reset level view cache to force refresh when clicked next time
        setLevelData(null)
      } else {
        setErrorMsg(json.error || 'Registration failed.')
      }
    } catch (err) {
      setErrorMsg('Connection error during member creation.')
    } finally {
      setSubmitting(false)
    }
  }

  if (loading) {
    return (
      <DashboardLayout>
        <div className="flex flex-col items-center justify-center h-[60vh] text-slate-400">
          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-violet-500 mb-4"></div>
          <p className="text-sm">Loading network summaries...</p>
        </div>
      </DashboardLayout>
    )
  }

  const stats = [
    { title: 'Total Directs', value: summary?.totalDirects || 0, icon: <MdPersonAdd className="text-violet-400" size={24} />, color: 'bg-violet-400/10 border-violet-400/20' },
    { title: 'Active Directs', value: summary?.activeDirects || 0, icon: <MdPeople className="text-emerald-400" size={24} />, color: 'bg-emerald-400/10 border-emerald-400/20' },
    { title: 'Total Team', value: summary?.totalTeam || 0, icon: <MdGroups className="text-indigo-400" size={24} />, color: 'bg-indigo-400/10 border-indigo-400/20' },
  ]

  return (
    <DashboardLayout>
      {/* Page Header */}
      <div className="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-white tracking-tight">Network & Team</h1>
          <p className="text-slate-400 text-sm mt-1">Manage referrals, register new team members, and view structured level downlines.</p>
        </div>
        
        {/* Copy Referral link card */}
        <div className="flex bg-slate-950/80 rounded-2xl p-2.5 border border-violet-950/40 items-center max-w-sm w-full backdrop-blur-xl">
          <input 
            type="text" 
            readOnly 
            value={typeof window !== 'undefined' ? `${window.location.origin}/?ref=${memberId}` : `http://localhost:3001/?ref=${memberId}`}
            className="bg-transparent border-none w-full text-xs text-slate-300 focus:outline-none px-3 font-mono truncate"
          />
          <button 
            onClick={handleCopyLink}
            className={`inline-flex items-center gap-1.5 text-xs px-4 py-2 rounded-xl transition-all font-semibold whitespace-nowrap ${
              copied 
                ? 'bg-emerald-600 text-white' 
                : 'bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20'
            }`}
          >
            <MdContentCopy size={14} />
            <span>{copied ? 'Copied!' : 'Copy Link'}</span>
          </button>
        </div>
      </div>

      {/* Network Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
        {stats.map((stat, i) => (
          <div key={i} className={`p-5 rounded-2xl border ${stat.color} backdrop-blur-sm flex items-center gap-4`}>
            <div className="p-3 rounded-xl bg-slate-950/50">{stat.icon}</div>
            <div>
              <p className="text-slate-500 text-[10px] font-bold uppercase tracking-wider mb-1">{stat.title}</p>
              <h3 className="text-2xl font-black text-white">{stat.value}</h3>
            </div>
          </div>
        ))}
      </div>

      {/* Tabs Menu */}
      <div className="flex border-b border-violet-950/30 mb-8 overflow-x-auto scrollbar-none gap-2 shrink-0">
        <button 
          onClick={() => setActiveTab('create')}
          className={`px-6 py-3.5 text-sm font-bold border-b-2 transition-all flex items-center gap-2 cursor-pointer whitespace-nowrap ${
            activeTab === 'create' 
              ? 'border-violet-500 text-violet-300 bg-violet-500/5' 
              : 'border-transparent text-slate-400 hover:text-slate-200'
          }`}
        >
          <MdPersonAdd size={16} />
          <span>Create Member</span>
        </button>
        
        <button 
          onClick={() => setActiveTab('directs')}
          className={`px-6 py-3.5 text-sm font-bold border-b-2 transition-all flex items-center gap-2 cursor-pointer whitespace-nowrap ${
            activeTab === 'directs' 
              ? 'border-violet-500 text-violet-300 bg-violet-500/5' 
              : 'border-transparent text-slate-400 hover:text-slate-200'
          }`}
        >
          <MdPeople size={16} />
          <span>Direct Referrals</span>
        </button>

        <button 
          onClick={() => setActiveTab('levels')}
          className={`px-6 py-3.5 text-sm font-bold border-b-2 transition-all flex items-center gap-2 cursor-pointer whitespace-nowrap ${
            activeTab === 'levels' 
              ? 'border-violet-500 text-violet-300 bg-violet-500/5' 
              : 'border-transparent text-slate-400 hover:text-slate-200'
          }`}
        >
          <MdGroups size={16} />
          <span>Level View</span>
        </button>

        <button 
          onClick={() => setActiveTab('royalty')}
          className={`px-6 py-3.5 text-sm font-bold border-b-2 transition-all flex items-center gap-2 cursor-pointer whitespace-nowrap ${
            activeTab === 'royalty' 
              ? 'border-violet-500 text-violet-300 bg-violet-500/5' 
              : 'border-transparent text-slate-400 hover:text-slate-200'
          }`}
        >
          <MdStar size={16} />
          <span>Royalty Rewards</span>
        </button>
      </div>

      {/* Tab Contents */}
      <div className="min-h-[400px]">
        {/* TAB 1: CREATE MEMBER */}
        {activeTab === 'create' && (
          <div className="max-w-2xl mx-auto bg-slate-950/40 border border-violet-950/20 rounded-3xl p-6 md:p-8 backdrop-blur-2xl shadow-xl">
            <h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2">
              <MdPersonAdd className="text-violet-400" />
              <span>Register New Team Member</span>
            </h3>
            <p className="text-xs text-slate-400 mb-6">Create a new downline account directly and receive their Member ID credentials instantly.</p>

            {errorMsg && (
              <div className="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-350 text-xs font-semibold flex items-center gap-2">
                <MdInfo size={16} />
                <span>{errorMsg}</span>
              </div>
            )}

            <form onSubmit={handleCreateMemberSubmit} className="space-y-5">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Referral ID (Sponsor)</label>
                  <input 
                    type="text"
                    required
                    value={createForm.introId}
                    onChange={(e) => setCreateForm({ ...createForm, introId: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white font-mono"
                  />
                </div>



                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Full Name</label>
                  <input 
                    type="text"
                    required
                    placeholder="Enter full name"
                    value={createForm.name}
                    onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Email Address</label>
                  <input 
                    type="email"
                    required
                    placeholder="name@example.com"
                    value={createForm.email}
                    onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Mobile Number</label>
                  <input 
                    type="text"
                    required
                    placeholder="e.g. +919876543210"
                    value={createForm.mob}
                    onChange={(e) => setCreateForm({ ...createForm, mob: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white font-mono"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Wallet Address (BSC)</label>
                  <input 
                    type="text"
                    required
                    placeholder="e.g. 0x71C...3A9"
                    value={createForm.walletAddress}
                    onChange={(e) => setCreateForm({ ...createForm, walletAddress: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white font-mono"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1 uppercase tracking-wider">Sign-in Password</label>
                  <input 
                    type="password"
                    required
                    placeholder="••••••••"
                    value={createForm.password}
                    onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 text-white"
                  />
                </div>
              </div>

              <div className="pt-4 border-t border-violet-950/20">
                <button 
                  type="submit"
                  disabled={submitting}
                  className="w-full py-3.5 rounded-xl bg-gradient-to-r from-violet-600 via-indigo-600 to-purple-600 hover:from-violet-500 hover:to-indigo-500 text-white text-sm font-bold transition-all shadow-lg shadow-indigo-500/20 active:scale-[0.99] disabled:opacity-50 cursor-pointer"
                >
                  {submitting ? 'Creating Downline...' : 'Create Account'}
                </button>
              </div>
            </form>
          </div>
        )}

        {/* TAB 2: DIRECT REFERRALS */}
        {activeTab === 'directs' && (
          <div className="glass-panel rounded-3xl overflow-hidden shadow-xl">
            <div className="p-6 border-b border-violet-950/30 bg-slate-950/20">
              <h2 className="text-base font-bold text-white">Direct Referrals ({directs.length})</h2>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse min-w-[800px]">
                <thead>
                  <tr className="bg-slate-950/60 text-slate-400 text-xs border-b border-violet-950/30 uppercase tracking-wider font-bold">
                    <th className="px-6 py-4">Member ID</th>
                    <th className="px-6 py-4">Wallet Address</th>
                    <th className="px-6 py-4">Name</th>
                    <th className="px-6 py-4">Join Date</th>
                    <th className="px-6 py-4">Tx Hash</th>
                    <th className="px-6 py-4">Total Topup</th>
                    <th className="px-6 py-4">Status</th>
                  </tr>
                </thead>
                <tbody className="text-sm">
                  {directs.length > 0 ? (
                    directs.map((row) => (
                      <tr key={row.memberId} className="border-b border-violet-950/10 hover:bg-violet-950/5 transition-colors">
                        <td className="px-6 py-4 font-mono font-bold text-violet-400">{row.memberId}</td>
                        <td className="px-6 py-4 font-mono text-slate-350 select-all hover:text-violet-300 transition-colors" title={row.walletAddress}>
                          {row.walletAddress.slice(0, 6)}...{row.walletAddress.slice(-4)}
                        </td>
                        <td className="px-6 py-4 text-white font-medium">{row.name}</td>

                        <td className="px-6 py-4 text-slate-400 font-medium">{row.joiningDate}</td>
                        <td className="px-6 py-4 font-mono text-slate-450 text-xs" title={row.txHash}>
                          <a 
                            href={`https://bscscan.com/tx/${row.txHash}`} 
                            target="_blank" 
                            rel="noopener noreferrer"
                            className="hover:text-indigo-400 underline decoration-indigo-500/20"
                          >
                            {row.txHash.slice(0, 6)}...{row.txHash.slice(-4)}
                          </a>
                        </td>
                        <td className="px-6 py-4 text-white font-bold">${row.investment.toFixed(2)}</td>
                        <td className="px-6 py-4">
                          <span className={`px-2.5 py-1 rounded-full text-xs font-semibold border ${
                            row.active 
                              ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' 
                              : 'bg-rose-500/10 text-rose-400 border-rose-500/20'
                          }`}>
                            {row.active ? 'Active' : 'Inactive'}
                          </span>
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={7} className="text-center py-12 text-slate-500 text-xs">No direct referrals found.</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 3: LEVEL VIEW */}
        {activeTab === 'levels' && (
          <div className="glass-panel rounded-3xl p-6 backdrop-blur-2xl shadow-xl">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-6 border-b border-violet-950/20 relative">
              <div>
                <h3 className="text-lg font-bold text-white flex items-center gap-2">
                  <MdGroups className="text-violet-400" />
                  <span>Downline Level Structure</span>
                </h3>
                <p className="text-xs text-slate-400 mt-1">Grouped breakdown of downline partners sorted recursively by level heights (Levels 1 to 30).</p>
              </div>

              {/* Custom Web3-style dropdown selector with proper mobile responsiveness */}
              <div className="flex items-center justify-between sm:justify-end gap-3 w-full sm:w-auto shrink-0 relative z-30">
                <span className="text-xs font-semibold text-slate-400">Select Level:</span>
                
                <div className="relative">
                  <button 
                    type="button"
                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                    className="flex items-center justify-between gap-3 min-w-[130px] px-4 py-2.5 rounded-xl bg-slate-900/60 border border-violet-500/20 hover:border-violet-500/40 text-xs font-bold text-violet-300 transition-all cursor-pointer focus:outline-none active:scale-[0.98] shadow-lg shadow-violet-500/5 backdrop-blur-md"
                  >
                    <span>Level {selectedLevel}</span>
                    <MdKeyboardArrowDown size={18} className={`text-violet-400 transition-transform duration-300 ${isDropdownOpen ? 'rotate-180' : ''}`} />
                  </button>

                  {isDropdownOpen && (
                    <>
                      {/* Transparent backdrop overlay to close dropdown when clicked outside */}
                      <div 
                        className="fixed inset-0 z-40 bg-transparent" 
                        onClick={() => setIsDropdownOpen(false)}
                      />
                      
                      {/* Dropdown list */}
                      <ul className="absolute right-0 mt-2 w-40 max-h-64 overflow-y-auto rounded-xl bg-slate-950/95 border border-violet-500/30 shadow-2xl backdrop-blur-2xl z-50 py-2 custom-scrollbar animate-fadeIn font-semibold">
                        {Array.from({ length: 30 }, (_, i) => i + 1).map((lvl) => (
                          <li key={lvl}>
                            <button
                              type="button"
                              onClick={() => {
                                setSelectedLevel(lvl)
                                setIsDropdownOpen(false)
                              }}
                              className={`w-full text-left px-4 py-2 text-xs font-bold transition-all cursor-pointer flex items-center justify-between ${
                                selectedLevel === lvl 
                                  ? 'text-violet-300 bg-violet-500/15' 
                                  : 'text-slate-400 hover:text-slate-200 hover:bg-violet-950/20'
                              }`}
                            >
                              <span>Level {lvl}</span>
                              {selectedLevel === lvl && (
                                <span className="w-1.5 h-1.5 rounded-full bg-violet-400"></span>
                              )}
                            </button>
                          </li>
                        ))}
                      </ul>
                    </>
                  )}
                </div>
              </div>
            </div>

            {loadingLevels ? (
              <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-violet-500"></div>
                <p className="text-xs">Computing levels statistics...</p>
              </div>
            ) : levelData ? (
              (() => {
                const members = levelData[selectedLevel] || []
                return (
                  <div className="border border-violet-950/20 rounded-2xl bg-slate-950/15 overflow-hidden">
                    {/* Level Heading */}
                    <div className="px-6 py-4 bg-slate-950/40 border-b border-violet-950/20 flex justify-between items-center">
                      <span className="font-extrabold text-base text-rose-400">Level-{selectedLevel} Members</span>
                      <span className="text-xs text-slate-500 font-semibold uppercase tracking-wider">Depth {selectedLevel} downlines</span>
                    </div>

                    {/* Level Table */}
                    <div className="overflow-x-auto">
                      <table className="w-full text-left border-collapse min-w-[700px]">
                        <thead>
                          <tr className="bg-slate-950/25 text-slate-400 text-xs font-bold border-b border-violet-950/20 uppercase tracking-wider">
                            <th className="px-6 py-3 w-16">Sl No.</th>
                            <th className="px-6 py-3">Wallet Address</th>
                            <th className="px-6 py-3">Name</th>
                            <th className="px-6 py-3">Joining Date</th>
                            <th className="px-6 py-3">Tx Hash</th>
                            <th className="px-6 py-3 text-right">Topup Amount</th>
                          </tr>
                        </thead>
                        <tbody className="text-sm font-medium">
                          {members.length > 0 ? (
                            members.map((item: any, idx: number) => (
                              <tr key={item.memberId} className="border-b border-violet-950/5 hover:bg-violet-950/5 text-emerald-400 font-semibold transition-colors">
                                <td className="px-6 py-3.5 text-emerald-450">{idx + 1}</td>
                                <td className="px-6 py-3.5 font-mono select-all hover:text-emerald-300 transition-colors" title={item.walletAddress}>
                                  {item.walletAddress.slice(0, 6)}...{item.walletAddress.slice(-4)}
                                </td>
                                <td className="px-6 py-3.5 text-white">{item.name}</td>
                                <td className="px-6 py-3.5 text-emerald-500">{item.joiningDate}</td>
                                <td className="px-6 py-3.5 font-mono text-emerald-500 hover:text-emerald-350 transition-colors" title={item.txHash}>
                                  <a 
                                    href={`https://bscscan.com/tx/${item.txHash}`} 
                                    target="_blank" 
                                    rel="noopener noreferrer"
                                    className="underline decoration-emerald-500/20"
                                  >
                                    {item.txHash.slice(0, 6)}...{item.txHash.slice(-4)}
                                  </a>
                                </td>
                                <td className="px-6 py-3.5 text-right font-bold text-emerald-350">
                                  $ {item.topupAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                                </td>
                              </tr>
                            ))
                          ) : (
                            <tr>
                              <td colSpan={6} className="text-center py-12 text-slate-500 text-xs font-normal">No members recorded in Level-{selectedLevel}</td>
                            </tr>
                          )}
                        </tbody>
                      </table>
                    </div>
                    
                    {/* Total Count Footnote */}
                    <div className="px-6 py-3 bg-slate-950/10 border-t border-violet-950/10">
                      <p className="text-xs font-bold text-emerald-400">
                        Total Member : <span className="text-sm font-black ml-1">{members.length}</span>
                      </p>
                    </div>
                  </div>
                )
              })()
            ) : (
              <div className="text-center py-10 text-slate-500 text-xs">
                No downline level data found.
              </div>
            )}
          </div>
        )}

        {/* TAB 4: ROYALTY & REWARDS */}
        {activeTab === 'royalty' && (
          <div className="flex flex-col gap-8">
            {/* User progress card */}
            <div className="bg-gradient-to-br from-amber-950/20 via-slate-950 to-slate-950 border border-amber-500/20 rounded-3xl p-6 md:p-8 backdrop-blur-3xl shadow-xl relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-xl pointer-events-none"></div>
              
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
                <div>
                  <h3 className="text-xl font-black text-white flex items-center gap-2">
                    <MdStar className="text-amber-400" />
                    <span>Your Royalty Status</span>
                  </h3>
                  <p className="text-slate-400 text-xs mt-1">Based on recursive total team business in MTC Coin equivalent.</p>
                  
                  <div className="flex flex-wrap gap-4 mt-6">
                    <div className="px-4 py-2 bg-slate-900 border border-violet-950/40 rounded-2xl">
                      <span className="text-[10px] text-slate-500 block uppercase font-bold tracking-wider">Team Business</span>
                      <span className="text-lg font-black text-white font-mono">
                        {(summary?.teamBusinessMtc || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} MTC
                      </span>
                    </div>
                    
                    <div className="px-4 py-2 bg-slate-900 border border-violet-950/40 rounded-2xl">
                      <span className="text-[10px] text-slate-500 block uppercase font-bold tracking-wider">Royalty Rank</span>
                      <span className="text-lg font-black text-amber-400">
                        {summary?.royaltyRank || 'None'}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Progress bar towards next rank */}
                {(() => {
                  const currentBusiness = summary?.teamBusinessMtc || 0
                  const ranks = [
                    { name: 'Silver', target: 100 },
                    { name: 'Gold', target: 350 },
                    { name: '3 Star', target: 1000 },
                    { name: '5 Star', target: 2000 },
                    { name: '7 Star', target: 5000 }
                  ]
                  const nextRank = ranks.find(r => currentBusiness < r.target) || null
                  
                  if (!nextRank) {
                    return (
                      <div className="text-right bg-amber-500/10 border border-amber-500/20 p-4 rounded-2xl">
                        <span className="text-amber-400 font-bold text-sm block">🎉 Max Rank Achieved!</span>
                        <span className="text-xs text-slate-300 mt-1 block">You have reached the elite 7 Star Rank.</span>
                      </div>
                    )
                  }
                  
                  const prevTarget = ranks[ranks.indexOf(nextRank) - 1]?.target || 0
                  const progressPct = Math.min(
                    ((currentBusiness - prevTarget) / (nextRank.target - prevTarget)) * 100,
                    100
                  )

                  return (
                    <div className="w-full md:w-80 flex flex-col gap-2">
                      <div className="flex justify-between text-xs font-bold text-slate-350">
                        <span>Next Rank: {nextRank.name}</span>
                        <span>{progressPct.toFixed(0)}%</span>
                      </div>
                      <div className="w-full h-3.5 bg-slate-900 rounded-full border border-violet-950/30 overflow-hidden p-0.5">
                        <div 
                          className="h-full bg-gradient-to-r from-amber-500 to-yellow-400 rounded-full transition-all duration-500 shadow-md shadow-amber-500/20"
                          style={{ width: `${progressPct}%` }}
                        ></div>
                      </div>
                      <div className="flex justify-between text-[10px] text-slate-500 font-semibold font-mono">
                        <span>{currentBusiness.toFixed(0)} MTC</span>
                        <span>Target: {nextRank.target} MTC</span>
                      </div>
                    </div>
                  )
                })()}
              </div>
            </div>

            {/* Table Matrix */}
            <div className="bg-slate-950/40 border border-violet-950/20 rounded-3xl p-6 md:p-8 backdrop-blur-2xl shadow-xl">
              <h4 className="text-sm font-extrabold text-white mb-6 uppercase tracking-wider">Royalty Income and Rewards Matrix</h4>
              
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse">
                  <thead>
                    <tr className="border-b border-violet-950/20 text-slate-500 uppercase tracking-wider font-extrabold text-[10px]">
                      <th className="py-4 px-4">Rank</th>
                      <th className="py-4 px-4 text-center">Team Business</th>
                      <th className="py-4 px-4 text-center">Daily Royalty</th>
                      <th className="py-4 px-4 text-right">Rewards</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-violet-950/10 font-bold">
                    <tr className="hover:bg-violet-950/5 transition">
                      <td className="py-4 px-4 flex items-center gap-3">
                        <span className="w-7 h-7 rounded-full bg-slate-400/10 border border-slate-400/20 flex items-center justify-center text-slate-350">🥈</span>
                        <span className="text-slate-200">SILVER</span>
                      </td>
                      <td className="py-4 px-4 text-center text-white font-mono">100 MTC COIN</td>
                      <td className="py-4 px-4 text-center text-violet-400">5% (TTO)</td>
                      <td className="py-4 px-4 text-right text-emerald-400">⌚ SMART WATCH</td>
                    </tr>
                    <tr className="hover:bg-violet-950/5 transition">
                      <td className="py-4 px-4 flex items-center gap-3">
                        <span className="w-7 h-7 rounded-full bg-amber-400/10 border border-amber-400/20 flex items-center justify-center text-amber-350">🥇</span>
                        <span className="text-slate-200">GOLD</span>
                      </td>
                      <td className="py-4 px-4 text-center text-white font-mono">350 MTC COIN</td>
                      <td className="py-4 px-4 text-center text-violet-400">3% (TTO)</td>
                      <td className="py-4 px-4 text-right text-emerald-400">📺 LED TV</td>
                    </tr>
                    <tr className="hover:bg-violet-950/5 transition">
                      <td className="py-4 px-4 flex items-center gap-3">
                        <span className="w-7 h-7 rounded-full bg-sky-400/10 border border-sky-400/20 flex items-center justify-center text-sky-350">⭐</span>
                        <span className="text-slate-200">3 STAR</span>
                      </td>
                      <td className="py-4 px-4 text-center text-white font-mono">1000 MTC COIN</td>
                      <td className="py-4 px-4 text-center text-violet-400">2% (TTO)</td>
                      <td className="py-4 px-4 text-right text-emerald-400">📱 IPHONE</td>
                    </tr>
                    <tr className="hover:bg-violet-950/5 transition">
                      <td className="py-4 px-4 flex items-center gap-3">
                        <span className="w-7 h-7 rounded-full bg-teal-400/10 border border-teal-400/20 flex items-center justify-center text-teal-350">⭐⭐</span>
                        <span className="text-slate-200">5 STAR</span>
                      </td>
                      <td className="py-4 px-4 text-center text-white font-mono">2000 MTC COIN</td>
                      <td className="py-4 px-4 text-center text-violet-400">1% (TTO)</td>
                      <td className="py-4 px-4 text-right text-emerald-400">🏍️ ROYAL ENFIELD BIKE</td>
                    </tr>
                    <tr className="hover:bg-violet-950/5 transition">
                      <td className="py-4 px-4 flex items-center gap-3">
                        <span className="w-7 h-7 rounded-full bg-rose-400/10 border border-rose-400/20 flex items-center justify-center text-rose-350">⭐⭐⭐</span>
                        <span className="text-slate-200">7 STAR</span>
                      </td>
                      <td className="py-4 px-4 text-center text-white font-mono">5000 MTC COIN</td>
                      <td className="py-4 px-4 text-center text-violet-400">1% (TTO)</td>
                      <td className="py-4 px-4 text-right text-emerald-400">🚗 SUV CAR</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* Note / Benefits Banner */}
              <div className="grid grid-cols-3 gap-4 mt-8 pt-6 border-t border-violet-950/20 text-center">
                <div className="bg-slate-950/35 border border-violet-950/10 p-3 rounded-2xl">
                  <span className="text-[10px] text-slate-500 uppercase tracking-widest block font-extrabold mb-0.5">Admin Cost</span>
                  <span className="text-xs font-black text-white uppercase">No Admin Fee</span>
                </div>
                <div className="bg-slate-950/35 border border-violet-950/10 p-3 rounded-2xl">
                  <span className="text-[10px] text-slate-500 uppercase tracking-widest block font-extrabold mb-0.5">Request Type</span>
                  <span className="text-xs font-black text-white uppercase">No Withdrawal Request</span>
                </div>
                <div className="bg-slate-950/35 border border-violet-950/10 p-3 rounded-2xl">
                  <span className="text-[10px] text-slate-500 uppercase tracking-widest block font-extrabold mb-0.5">Distribution</span>
                  <span className="text-xs font-black text-amber-400 uppercase">Auto Payout</span>
                </div>
              </div>

              {/* Legs rule disclaimer */}
              <div className="mt-6 p-4 rounded-2xl bg-yellow-500/5 border border-yellow-500/10 text-[10px] text-yellow-250 leading-relaxed font-semibold">
                ⚠️ <span className="uppercase font-bold text-yellow-500 mr-1.5">Disclaimer / Leg Rule:</span>
                Team business should be completed from a minimum of 3 legs, and at least 30% business/income must come from each leg to qualify for the respective rank and royalty rewards.
              </div>
            </div>
          </div>
        )}
      </div>

      {/* MEMBER REGISTRATION SUCCESS VOUCHER MODAL */}
      {successVoucher && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md transition-opacity">
          <div className="bg-slate-950 border border-violet-900/40 rounded-3xl w-full max-w-md flex flex-col shadow-2xl overflow-hidden animate-fadeIn p-6 md:p-8">
            
            {/* Success Animation Banner */}
            <div className="flex flex-col items-center text-center mb-6">
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 mb-4 animate-bounce">
                <MdCheckCircle size={32} />
              </div>
              <h3 className="text-xl font-black text-white">Registration Successful</h3>
              <p className="text-xs text-slate-400 mt-1">Member account has been successfully generated.</p>
            </div>

            {/* Voucher Card */}
            <div className="bg-violet-950/10 border border-violet-500/20 rounded-2xl p-5 mb-6 relative overflow-hidden font-medium">
              <div className="absolute top-0 right-0 w-24 h-24 bg-violet-600/5 rounded-full blur-xl"></div>
              
              <div className="space-y-3.5 text-xs text-slate-300">
                <div className="flex justify-between border-b border-violet-950/20 pb-2.5">
                  <span className="text-slate-400 uppercase tracking-wider font-bold">Member Name</span>
                  <span className="text-white font-bold text-right">{successVoucher.name}</span>
                </div>
                <div className="flex justify-between border-b border-violet-950/20 pb-2.5 items-center">
                  <span className="text-slate-400 uppercase tracking-wider font-bold">New Member ID</span>
                  <span className="text-violet-300 font-mono font-black text-base tracking-wider bg-violet-950/30 px-2 py-0.5 rounded border border-violet-500/10">
                    {successVoucher.memberId}
                  </span>
                </div>
                <div className="flex justify-between pb-1 items-center">
                  <span className="text-slate-400 uppercase tracking-wider font-bold">Temp Password</span>
                  <span className="text-white font-mono font-bold tracking-wider bg-slate-900 px-2 py-0.5 rounded border border-violet-950/40">
                    {successVoucher.password}
                  </span>
                </div>
              </div>
            </div>

            {/* Warning Note */}
            <div className="p-3.5 bg-yellow-500/5 border border-yellow-500/10 rounded-xl text-[10px] text-yellow-250 mb-6 flex items-start gap-2 leading-relaxed">
              <MdInfo className="shrink-0 text-yellow-500" size={14} />
              <span>Please save these credentials safely. The new member can log into their dashboard using this Member ID and Password.</span>
            </div>

            {/* Close Button */}
            <button 
              onClick={() => setSuccessVoucher(null)}
              className="w-full py-3 rounded-xl bg-violet-600 hover:bg-violet-500 text-white font-bold text-xs transition-all shadow-md active:scale-[0.98] cursor-pointer"
            >
              Close Voucher
            </button>
          </div>
        </div>
      )}
    </DashboardLayout>
  )
}