import React from 'react';
import { useApp } from '../context/AppContext';
import { 
  Wallet, 
  UserPen, 
  User,
  Users, 
  Award, 
  FileText, 
  Cpu, 
  Share2, 
  LogOut, 
  ChevronRight,
  PlusCircle,
  Gem
} from 'lucide-react';

export const ProfileTab: React.FC = () => {
  const { user, pushView, adminResetMatches } = useApp();

  const handleShareButton = () => {
    if (navigator.share) {
      navigator.share({
        title: 'Ludo Master BD',
        text: `Hey, use my Referral Code: ${user.referralCode} to play Ludo tourneys & make earnings!`,
        url: window.location.href,
      }).catch(() => {});
    } else {
      const shareText = `Ludo Master BD গেম খেলুন এবং জিতে টাকা আয় করুন! আমার রেফারেল কোড: ${user.referralCode}`;
      navigator.clipboard.writeText(shareText);
      alert(`শেয়ার লিঙ্ক কপি করা হয়েছে! বন্ধুদের সাথে শেয়ার করুন:\n\n${shareText}`);
    }
  };

  return (
    <div className="space-y-6 pb-28 pt-2">
      {/* Me profile headers */}
      <div className="flex items-center justify-between bg-slate-900 border border-slate-800 p-5 rounded-2xl shadow-lg relative overflow-hidden">
        <div className="space-y-1.5 relative z-10">
          <p className="text-[10px] text-yellow-400 font-extrabold uppercase font-mono tracking-widest">
            UID: #{user.uid}
          </p>
          <h2 className="text-[#f8fafc] text-xl font-black tracking-tight flex items-center gap-1.5">
            Hi, {user.name}
            <span className="inline-block animate-bounce text-base">👑</span>
          </h2>
          <p className="text-[#94a3b8] text-xs font-bold leading-none">
            {user.phone}
          </p>
          <p className="text-[#94a3b8]/80 text-[11px] font-medium leading-none">
            {user.email}
          </p>
        </div>

        {/* Avatar badge */}
        <div className="w-16 h-16 rounded-full bg-slate-800 border-2 border-slate-700/80 flex items-center justify-center relative shadow-lg">
          <User className="w-9 h-9 text-slate-400" />
          <div className="absolute -bottom-1 -right-1 bg-green-500 w-4 h-4 rounded-full border-2 border-slate-900"></div>
        </div>
        
        {/* Subtle decorative shapes */}
        <div className="absolute right-0 bottom-0 w-32 h-32 bg-yellow-500/5 rounded-full blur-2xl"></div>
      </div>

      {/* Balance capsule widgets */}
      <div className="bg-[#131b2e] border border-slate-800 p-5 rounded-2xl shadow-lg text-center space-y-4">
        <div>
          <span className="text-[11px] text-slate-400 font-bold uppercase tracking-widest block font-mono">
            AVAILABLE BALANCE
          </span>
          <div className="flex items-center justify-center gap-2 mt-1">
            <span className="text-yellow-400 font-extrabold text-lg">BDT</span>
            <span className="text-white font-black text-3xl">
              {user.balance + user.winningBalance}
            </span>
            <button 
              onClick={() => pushView('wallet')}
              className="p-1 text-emerald-400 hover:text-emerald-300 transition-colors"
              title="Add Balance"
            >
              <PlusCircle className="w-6 h-6 stroke-[2.5]" />
            </button>
          </div>
        </div>

        <div className="w-full h-px bg-slate-800/80"></div>

        <div className="flex items-center justify-between text-xs px-2">
          <span className="text-slate-400 font-semibold uppercase">Winning Balance:</span>
          <span className="bg-yellow-400/15 border border-yellow-400/25 text-[#facc15] font-black text-xs px-3.5 py-1 rounded-full font-mono">
            BDT {user.winningBalance}
          </span>
        </div>
      </div>

      {/* User Stats block */}
      <div className="grid grid-cols-3 gap-2 text-center bg-slate-900 border border-slate-850 p-4 rounded-xl shadow-inner">
        <div className="space-y-0.5">
          <span className="text-yellow-400 font-black text-xl font-mono block leading-none">
            {user.matchesPlayed}
          </span>
          <span className="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">
            MATCH WORKED
          </span>
        </div>
        <div className="border-x border-slate-800/80 space-y-0.5">
          <span className="text-emerald-400 font-black text-xl font-mono block leading-none">
            {user.referralsCount}
          </span>
          <span className="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">
            TOTAL REFER
          </span>
        </div>
        <div className="space-y-0.5">
          <span className="text-blue-400 font-black text-xl font-mono block leading-none">
            ৳ {user.totalEarnings}
          </span>
          <span className="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">
            TOTAL WINNING
          </span>
        </div>
      </div>

      {/* Main Options Selection list */}
      <div className="space-y-2 border-t border-slate-800/60 pt-4">
        <span className="text-[10px] text-slate-400 font-black tracking-widest uppercase block mb-3 font-mono">
          ACCOUNT
        </span>
        
        {/* Edit profile link */}
        <div 
          onClick={() => pushView('edit-profile')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-yellow-400/10 flex items-center justify-center">
              <UserPen className="w-5 h-5 text-[#facc15]" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">Edit Profile</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Wallet link */}
        <div 
          onClick={() => pushView('wallet')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-emerald-500/10 flex items-center justify-center">
              <Wallet className="w-5 h-5 text-emerald-400" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">My Wallet</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Refer link */}
        <div 
          onClick={() => pushView('refer-earn')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-orange-500/10 flex items-center justify-center">
              <Users className="w-5 h-5 text-orange-400" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">Refer & Earn</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        <span className="text-[10px] text-slate-400 font-black tracking-widest uppercase block pt-4 mb-3 font-mono">
          ABOUT PLATFORM
        </span>

        {/* Top players link */}
        <div 
          onClick={() => pushView('leaderboard')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-cyan-400/10 flex items-center justify-center">
              <Award className="w-5 h-5 text-cyan-400" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">Top Players</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Terms Conditions */}
        <div 
          onClick={() => pushView('terms-conditions')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-purple-500/10 flex items-center justify-center">
              <FileText className="w-5 h-5 text-purple-400" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">Terms and Conditions</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Dev Control / Admin panel link */}
        <div 
          onClick={() => pushView('developer-panel')}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-sky-500/10 flex items-center justify-center animate-pulse">
              <Cpu className="w-5 h-5 text-sky-400" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight text-sky-400">Developer Profile & Admin Panel</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Share link */}
        <div 
          onClick={handleShareButton}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-[#3b82f6]/10 flex items-center justify-center">
              <Share2 className="w-5 h-5 text-[#3b82f6]" />
            </div>
            <span className="text-white font-bold text-sm tracking-tight">Share App</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>

        {/* Reset / Clean link simulated as reset values */}
        <div 
          onClick={() => {
            if (window.confirm('আপনি কি অ্যাকাউন্ট ডেটা রিসেট করতে চান? আপনার মূল ব্যালেন্স পুনরায় ১৫৫০ টাকা হয়ে যাবে।')) {
              adminResetMatches();
              alert('অ্যাকাউন্টের ব্যালেন্স ও ম্যাচ ডেটা সফলভাবে রিসেট করা হয়েছে!');
            }
          }}
          className="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-red-950/20 rounded-xl cursor-pointer transition-all active:scale-[0.99]"
        >
          <div className="flex items-center gap-3.5">
            <div className="w-9 h-9 rounded-lg bg-red-500/10 flex items-center justify-center">
              <LogOut className="w-5 h-5 text-red-500" />
            </div>
            <span className="text-red-400 font-bold text-sm tracking-tight">Reset Data / Logout</span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-500" />
        </div>
      </div>

      {/* Card version footnotes */}
      <p className="text-center text-slate-600 text-xs font-bold font-mono py-2">
        Version 1.0.2 • Made with ❤️ for Rahul
      </p>
    </div>
  );
};
