import React, { useState, useEffect, useRef } from 'react';
import { 
  LayoutDashboard, 
  DollarSign, 
  Send, 
  Wallet, 
  RefreshCcw, 
  BarChart3, 
  Users, 
  Plus,
  ChevronLeft,
  ChevronRight,
  Home,
  ExternalLink,
  Copy,
  ChevronDown,
  FileText,
  FileSpreadsheet,
  FileBox,
} from 'lucide-react';

// IMPORT YOUR LOGO AND ICON IMAGES
import paylightningLogo from './logo.png';
import paylightningIcon from './Paylighticon.png';

export default function PayLightningDashboard() {
  const [activeTab, setActiveTab] = useState('Dashboard');
  const [showReceivePayments, setShowReceivePayments] = useState(false);
  const [showSendPayments, setShowSendPayments] = useState(false);
  const [showTransaction, setShowTransaction] = useState(false);
  const [showRolesPermission, setShowRolesPermission] = useState(false);
  const [paymentTab, setPaymentTab] = useState('All');
  
  // State for the new profile dropdown menu
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
  const profileMenuRef = useRef(null);

  // Effect to close dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event) {
      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target)) {
        setIsProfileMenuOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [profileMenuRef]);

  const getBreadcrumb = () => {
    let path = activeTab;
    if (activeTab === 'Payments') {
        path = 'Receive Payments / Payments';
    } else if (activeTab === 'Instant Send') {
        path = 'Send Payments / Instant Send';
    } else if (activeTab === 'Balances') {
        path = 'Balance';
    } else if (activeTab === 'Transaction') {
        path = 'Transaction / Transaction';
    } else if (activeTab === 'Transaction Report') {
        path = 'Transaction / Transaction Report';
    } else if (activeTab === 'Roles') {
        path = 'Roles';
    } else if (activeTab === 'Permission') {
        path = 'Permissions';
    } else if (activeTab === 'Create Role') {
        path = 'Roles / Create';
    }
    return path;
  };

  return (
    <div className="flex h-screen bg-gray-900 text-white">
      {/* Sidebar */}
      <div className="w-80 bg-black flex flex-col">
        {/* Header */}
        <div className="p-6 border-b border-gray-800">
          <img src={paylightningLogo} alt="PayLightning Logo" className="h-9" />
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-4 overflow-y-auto">
          <div className="space-y-2">
            <NavItem 
              icon={<LayoutDashboard size={20} />} 
              label="Dashboard" 
              active={activeTab === 'Dashboard'}
              onClick={() => {
                setActiveTab('Dashboard');
                setShowReceivePayments(false);
                setShowSendPayments(false);
                setShowTransaction(false);
                setShowRolesPermission(false);
              }}
            />
            <NavItem 
              icon={<DollarSign size={20} />} 
              label="Receive Payments" 
              active={showReceivePayments}
              hasChevron
              onClick={() => {
                setShowReceivePayments(!showReceivePayments);
                setShowSendPayments(false);
                setShowTransaction(false);
                setShowRolesPermission(false);
                if (!showReceivePayments) setActiveTab('Payments');
              }}
            />
            {showReceivePayments && (
              <div className="ml-8 space-y-2">
                <NavItem 
                  icon={<DollarSign size={16} />} 
                  label="Payments" 
                  active={activeTab === 'Payments'}
                  onClick={() => setActiveTab('Payments')}
                />
              </div>
            )}
            <NavItem 
              icon={<Send size={20} />} 
              label="Send Payments" 
              active={showSendPayments}
              hasChevron
              onClick={() => {
                  setShowSendPayments(!showSendPayments);
                  setShowReceivePayments(false);
                  setShowTransaction(false);
                  setShowRolesPermission(false);
                  if (!showSendPayments) setActiveTab('Instant Send');
              }}
            />
            {showSendPayments && (
                <div className="ml-8 space-y-2">
                    <NavItem 
                        icon={<Send size={16} />} 
                        label="Instant Send" 
                        active={activeTab === 'Instant Send'}
                        onClick={() => setActiveTab('Instant Send')}
                    />
                </div>
            )}
            <NavItem 
              icon={<Wallet size={20} />} 
              label="Balances" 
              active={activeTab === 'Balances'}
              onClick={() => {
                  setActiveTab('Balances');
                  setShowReceivePayments(false);
                  setShowSendPayments(false);
                  setShowTransaction(false);
                  setShowRolesPermission(false);
              }}
            />
             <NavItem 
              icon={<BarChart3 size={20} />} 
              label="Transaction" 
              active={showTransaction}
              hasChevron
              onClick={() => {
                setShowTransaction(!showTransaction);
                setShowReceivePayments(false);
                setShowSendPayments(false);
                setShowRolesPermission(false);
                if (!showTransaction) setActiveTab('Transaction');
              }}
            />
            {showTransaction && (
              <div className="ml-8 space-y-2">
                <NavItem
                  icon={<BarChart3 size={16} />}
                  label="Transaction"
                  active={activeTab === 'Transaction'}
                  onClick={() => setActiveTab('Transaction')}
                />
                <NavItem
                  icon={<FileText size={16} />}
                  label="Transaction Report"
                  active={activeTab === 'Transaction Report'}
                  onClick={() => setActiveTab('Transaction Report')}
                />
              </div>
            )}
            <NavItem 
              icon={<Users size={20} />} 
              label="Roles & Permission" 
              active={showRolesPermission}
              hasChevron
              onClick={() => {
                setShowRolesPermission(!showRolesPermission);
                setShowReceivePayments(false);
                setShowSendPayments(false);
                setShowTransaction(false);
                if (!showRolesPermission) setActiveTab('Roles');
              }}
            />
            {showRolesPermission && (
              <div className="ml-8 space-y-2">
                <NavItem
                  icon={<Users size={16} />}
                  label="Roles"
                  active={activeTab === 'Roles' || activeTab === 'Create Role'}
                  onClick={() => setActiveTab('Roles')}
                />
                <NavItem
                  icon={<LayoutDashboard size={16} />} 
                  label="Permission"
                  active={activeTab === 'Permission'}
                  onClick={() => setActiveTab('Permission')}
                />
              </div>
            )}
            <NavItem 
              icon={<Plus size={20} />} 
              label="Deposit" 
              active={activeTab === 'Deposit'}
              onClick={() => {
                setActiveTab('Deposit');
                setShowReceivePayments(false);
                setShowSendPayments(false);
                setShowTransaction(false);
                setShowRolesPermission(false);
              }}
            />
          </div>
        </nav>

        {/* Copy Link Button */}
        <div className="p-4">
          <button className="w-full bg-[linear-gradient(135deg,#FFD600,#B8860B)] hover:opacity-90 text-white py-3 px-4 rounded-lg flex items-center justify-center gap-2 font-medium transition-colors">
            <span>Copy Link</span>
            <ExternalLink size={16} />
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 bg-gray-100 flex flex-col">
        {/* Header */}
        <div className="bg-white border-b border-gray-200 p-4 flex items-center justify-between flex-shrink-0">
          <div className="flex items-center gap-4">
            <button className="p-2 hover:bg-gray-100 rounded-lg">
              <ChevronLeft size={20} className="text-gray-600" />
            </button>
            <div className="flex items-center gap-2 text-sm">
              <Home size={16} className="text-amber-600" />
              <span className="text-gray-400">/</span>
              <span className="text-gray-900 font-medium">{getBreadcrumb()}</span>
            </div>
          </div>
          
          {/* PROFILE ICON & DROPDOWN - MODIFIED */}
          <div className="relative" ref={profileMenuRef}>
            <button 
              onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
              className="focus:outline-none" // MODIFIED: Removed focus ring and rounded-full classes
            >
              <img src={paylightningIcon} alt="PayLightning Icon" className="w-8 h-8" />
            </button>
            
            {isProfileMenuOpen && (
              <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 z-10">
                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
              </div>
            )}
          </div>
        </div>

        {/* Content Area */}
        <div className="flex-1 overflow-y-auto p-6">
          {activeTab === 'Dashboard' && <DashboardContent setActiveTab={setActiveTab} />}
          {activeTab === 'Payments' && <PaymentsContent paymentTab={paymentTab} setPaymentTab={setPaymentTab} />}
          {activeTab === 'Instant Send' && <InstantSendContent />}
          {activeTab === 'Balances' && <BalanceContent />}
          {activeTab === 'Exchange' && <ExchangeContent />}
          {activeTab === 'Transaction' && <TransactionContent />}
          {activeTab === 'Transaction Report' && <TransactionReportContent />}
          {activeTab === 'Permission' && <PermissionsContent />}
          {activeTab === 'Roles' && <RolesContent setActiveTab={setActiveTab} />}
          {activeTab === 'Create Role' && <CreateRoleContent setActiveTab={setActiveTab} />}
          {activeTab === 'Deposit' && <DepositContent />}
        </div>
      </div>
    </div>
  );
}

function NavItem({ icon, label, active, hasChevron, onClick }) {
    return (
      <div 
        className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
          active 
            ? 'bg-gray-800 text-white' 
            : 'text-gray-300 hover:bg-gray-800 hover:text-white'
        }`}
        onClick={onClick}
      >
        <div className="flex items-center gap-3">
          {icon}
          <span className="font-medium">{label}</span>
        </div>
        {hasChevron && (
          <ChevronRight size={16} className={`text-gray-400 transition-transform ${active ? 'rotate-90' : ''}`} />
        )}
      </div>
    );
}

// --- NEW DEPOSIT CONTENT COMPONENT ---
function DepositContent() {
  const [step, setStep] = useState(1); // 1: GameID, 2: Amount/Network
  const [gameId, setGameId] = useState('');
  const [amount, setAmount] = useState('100');
  const [network, setNetwork] = useState(null); // 'Lightning' or 'Bitcoin'
  const [invoice, setInvoice] = useState('');
  const [timeLeft, setTimeLeft] = useState(0);

  // Timer logic
  useEffect(() => {
    if (timeLeft <= 0) {
      setNetwork(null); // Reset when timer ends
      setInvoice('');
      return;
    }

    const intervalId = setInterval(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [timeLeft]);

  const handleNext = () => {
    if (gameId) {
      setStep(2);
    }
  };

  const handleNetworkSelect = (selectedNetwork) => {
    setNetwork(selectedNetwork);
    setTimeLeft(600); // Start 10-minute timer

    // Generate mock invoice based on network selection
    if (selectedNetwork === 'Lightning') {
      setInvoice('lnbc850790n1p58z39mpp5pq727tncvexn327fqjl'); // Mock from screenshot
    } else {
      setInvoice('bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh'); // Mock Bitcoin address
    }
  };
  
  const formatTime = (seconds) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  };

  // Step 1: Enter Game ID
  if (step === 1) {
    return (
      <div className="flex justify-center items-start pt-10">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 w-full max-w-md text-center text-gray-900">
          <div className="w-24 h-24 bg-black rounded-lg mx-auto mb-6 flex items-center justify-center">
             <img src={paylightningIcon} alt="PayLightning Icon" className="w-16 h-16" />
          </div>
          <h2 className="text-lg font-medium mb-4">Enter Game ID</h2>
          <form onSubmit={(e) => { e.preventDefault(); handleNext(); }}>
            <input
              type="text"
              value={gameId}
              onChange={(e) => setGameId(e.target.value)}
              className="block w-full border-gray-300 rounded-md shadow-sm sm:text-sm p-3 mb-4 text-center focus:ring-amber-500 focus:border-amber-500"
              placeholder="Enter Game ID"
            />
            <button
              type="submit"
              className="bg-gray-800 hover:bg-black text-white font-bold py-2 px-8 rounded-lg"
            >
              Next
            </button>
          </form>
        </div>
      </div>
    );
  }

  // Step 2: Enter Amount and get Invoice
  return (
    <div className="flex justify-center items-start pt-10">
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 w-full max-w-md text-center text-gray-900">
         <div className="w-24 h-24 bg-black rounded-lg mx-auto mb-6 flex items-center justify-center">
            <img src={paylightningIcon} alt="PayLightning Icon" className="w-16 h-16" />
        </div>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Enter Amount</label>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="block w-full border-gray-300 rounded-md shadow-sm sm:text-sm p-3 mb-1 text-center focus:ring-amber-500 focus:border-amber-500"
            />
            <p className="text-gray-600">{amount || 0} USD</p>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Deposit Currency</label>
            <div className="flex items-center justify-center gap-2 border border-gray-300 rounded-md p-3">
              <span className="text-yellow-500 font-bold">₿</span>
              <span>BTC</span>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Select network</label>
            <div className="grid grid-cols-2 gap-4">
              <button
                onClick={() => handleNetworkSelect('Lightning')}
                className={`flex items-center justify-center gap-2 p-3 border rounded-lg transition-colors ${network === 'Lightning' ? 'bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white border-amber-600' : 'bg-white hover:bg-gray-50 border-gray-300'}`}
              >
                <Send size={16} />
                Lightning
              </button>
               <button
                onClick={() => handleNetworkSelect('Bitcoin')}
                className={`flex items-center justify-center gap-2 p-3 border rounded-lg transition-colors ${network === 'Bitcoin' ? 'bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white border-amber-600' : 'bg-white hover:bg-gray-50 border-gray-300'}`}
              >
                <span className="font-bold">₿</span>
                Bitcoin
              </button>
            </div>
          </div>

          {invoice && (
            <div className="space-y-4 pt-4">
              <p className="font-medium text-red-500">Time Left: {formatTime(timeLeft)}</p>
              <div className="w-full bg-gray-100 p-3 rounded-md text-sm break-all">
                {invoice}
              </div>
              <div className="grid grid-cols-2 gap-4">
                  <button className="bg-gray-800 hover:bg-black text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2">
                      <Copy size={16} />
                      Copy
                  </button>
                  <button className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2">
                     <Wallet size={16} />
                      Open Wallet
                  </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}


// --- OTHER COMPONENTS ---

function PermissionsContent() {
  const permissions = [
    { id: 1, title: 'Payments' },
    { id: 2, title: 'Dashboard' },
    { id: 3, title: 'Instant Send' },
    { id: 4, title: 'Balances' },
    { id: 5, title: 'Transactions' },
    { id: 6, title: 'Transactions Report' },
  ];

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-gray-900">
      <h2 className="text-xl font-semibold mb-4">Permissions</h2>
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center gap-2 text-sm">
          <span>Show</span>
          <select className="border border-gray-300 rounded-md px-2 py-1">
            <option>10</option>
            <option>25</option>
            <option>50</option>
          </select>
          <span>entries</span>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <label htmlFor="search">Search:</label>
          <input id="search" type="text" className="border border-gray-300 rounded-md p-1" />
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3">ID</th>
              <th scope="col" className="px-6 py-3">Title</th>
            </tr>
          </thead>
          <tbody>
            {permissions.map((permission) => (
              <tr key={permission.id} className="bg-white border-b hover:bg-gray-50">
                <td className="px-6 py-4 font-medium">{permission.id}</td>
                <td className="px-6 py-4">{permission.title}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex justify-between items-center mt-4 text-sm text-gray-600">
        <div>Showing 1 to 6 of 6 entries</div>
        <div className="flex">
          <button className="px-3 py-1 border rounded-l-md bg-gray-200 text-gray-400 cursor-not-allowed">Previous</button>
          <button className="px-3 py-1 border bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white">1</button>
          <button className="px-3 py-1 border rounded-r-md bg-gray-200 text-gray-400 cursor-not-allowed">Next</button>
        </div>
      </div>
    </div>
  );
}

function RolesContent({ setActiveTab }) {
  const roles = []; 

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-gray-900">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold">Roles</h2>
        <button
          onClick={() => setActiveTab('Create Role')}
          className="bg-gray-800 hover:bg-black text-white font-bold py-2 px-4 rounded-lg flex items-center gap-2 text-sm"
        >
          <Plus size={16} />
          Add Role
        </button>
      </div>
      
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center gap-2 text-sm">
          <span>Show</span>
          <select className="border border-gray-300 rounded-md px-2 py-1">
            <option>10</option>
            <option>25</option>
            <option>50</option>
          </select>
          <span>entries</span>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <label htmlFor="search-roles">Search:</label>
          <input id="search-roles" type="text" className="border border-gray-300 rounded-md p-1" />
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3">ID</th>
              <th scope="col" className="px-6 py-3">Title</th>
              <th scope="col" className="px-6 py-3">Permission</th>
              <th scope="col" className="px-6 py-3">Action</th>
            </tr>
          </thead>
          <tbody>
            {roles.length === 0 ? (
              <tr className="bg-white border-b">
                <td colSpan="4" className="text-center py-10">
                  No data available in table
                </td>
              </tr>
            ) : (
              <></>
            )}
          </tbody>
        </table>
      </div>

       <div className="flex justify-between items-center mt-4 text-sm text-gray-600">
        <div>Showing 0 to 0 of 0 entries</div>
        <div className="flex">
          <button className="px-3 py-1 border rounded-l-md bg-gray-200 text-gray-400 cursor-not-allowed">Previous</button>
          <button className="px-3 py-1 border rounded-r-md bg-gray-200 text-gray-400 cursor-not-allowed">Next</button>
        </div>
      </div>
    </div>
  );
}

function CreateRoleContent({ setActiveTab }) {
  const permissionsOptions = [
    'Payments', 'Dashboard', 'Instant Send', 'Balances', 'Transactions', 'Transactions Report'
  ];

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-gray-900">
      <h2 className="text-xl font-semibold mb-6">Create</h2>
      <form className="max-w-lg space-y-6">
        <div>
          <label htmlFor="roleName" className="block text-sm font-medium text-gray-700 mb-1">
            Role Name
          </label>
          <input
            type="text"
            name="roleName"
            id="roleName"
            className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 sm:text-sm p-3"
          />
        </div>
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
            Email
          </label>
          <input
            type="email"
            name="email"
            id="email"
            className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 sm:text-sm p-3"
          />
        </div>
        <div>
          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
            Password
          </label>
          <input
            type="password"
            name="password"
            id="password"
            className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 sm:text-sm p-3"
          />
        </div>
        <div>
           <label htmlFor="assignPermissions" className="block text-sm font-medium text-gray-700 mb-1">
            Assign Permissions
          </label>
          <select
            id="assignPermissions"
            name="assignPermissions"
            multiple
            className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 sm:text-sm p-3 bg-white"
            size={6}
          >
            {permissionsOptions.map(permission => (
                <option key={permission} value={permission} className="p-2 hover:bg-yellow-50">{permission}</option>
            ))}
          </select>
        </div>
        <div>
          <button
            type="button"
            onClick={() => {
                setActiveTab('Roles');
            }}
            className="bg-gray-800 hover:bg-black text-white font-bold py-2 px-6 rounded-lg text-sm"
          >
            Save
          </button>
        </div>
      </form>
    </div>
  );
}

function TransactionContent() {
    const transactions = [
      { id: 'txn_mcz2glqjsvBkKxxN', type: 'Transfer Out', net: '0.0000329785', amount: '0.0000329785', fee: '0', desc: 'tr_mcz2glqjsvBkKxxN', date: 'Today, 1:04 PM' },
      { id: 'txn_mcz2gh4pjWccjabK', type: 'Payment', net: '0.0008244621', amount: '0.00083279', fee: '0.000008', desc: 'pi_mcz2gh4pjWccjabK', date: 'Today, 1:04 PM' },
      { id: 'txn_mcyzjm0fG7Tg5nCo', type: 'Transfer Out', net: '0.000168482', amount: '0.000168482', fee: '0', desc: 'tr_mcyzjm0fG7Tg5nCo', date: 'Today, 11:42 AM' },
      { id: 'txn_mcyzjexwDczovR86', type: 'Payment', net: '0.0004212054', amount: '0.00042546', fee: '0.000004', desc: 'pi_mcyzjexwDczovR86', date: 'Today, 11:42 AM' },
      { id: 'txn_mcyk9kF0I7Buukp', type: 'Payment', net: '0.0003609144', amount: '0.00036456', fee: '0.000003', desc: 'pi_mcyk9lI5EkYp9yOp', date: 'Today, 4:34 AM' },
      { id: 'txn_mcyiym3tIKaijybV', type: 'Transfer Out', net: '0.000134549', amount: '0.000134549', fee: '0', desc: 'tr_mcyiym3tIKaijybV', date: 'Today, 3:58 AM' },
      { id: 'txn_mcza70nVyeduU6E', type: 'Payment', net: '0.0003417183', amount: '0.00034517', fee: '0.000003', desc: 'pi_mcxz5ot4ONJtNXiy', date: 'Yesterday, 6:47 PM' },
    ];
  
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Transaction</h2>
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left text-gray-600">
            <thead className="text-xs text-gray-700 uppercase bg-gray-50">
              <tr>
                <th scope="col" className="px-6 py-3">Transaction ID</th>
                <th scope="col" className="px-6 py-3">Type</th>
                <th scope="col" className="px-6 py-3">Net (BTC)</th>
                <th scope="col" className="px-6 py-3">Amount (BTC)</th>
                <th scope="col" className="px-6 py-3">Fee (BTC)</th>
                <th scope="col" className="px-6 py-3">Description</th>
                <th scope="col" className="px-6 py-3">Description Date</th>
              </tr>
            </thead>
            <tbody>
              {transactions.map((tx) => (
                <tr key={tx.id} className="bg-white border-b hover:bg-gray-50">
                  <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{tx.id}</td>
                  <td className="px-6 py-4">{tx.type}</td>
                  <td className="px-6 py-4">{tx.net}</td>
                  <td className="px-6 py-4">{tx.amount}</td>
                  <td className="px-6 py-4">{tx.fee}</td>
                  <td className="px-6 py-4">{tx.desc}</td>
                  <td className="px-6 py-4">{tx.date}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
}

function TransactionReportContent() {
    const [filter, setFilter] = useState('All');
    const [isFilterOpen, setIsFilterOpen] = useState(false);
    const filterOptions = ['All', 'Today', 'Yesterday', 'Last Week', 'Last Month', 'Last 3 Months'];
  
    const reportData = [
      { txnId: 'txn_mcz2glqjOqRkGo43', paymentId: 'pi_mcz2gh4pjWccjabK', gameId: 'M-352-496-400', amount: 97.86, date: 'Today, 1:04 PM' },
      { txnId: 'txn_mcyzjm0fLtTVOpc6', paymentId: 'pi_mcyzjexwDczovR8', gameId: 'M-069-672-208', amount: 50.00, date: 'Today, 11:42 AM' },
      { txnId: 'txn_mcyk9kfx9whFIsy', paymentId: 'pi_mcyk9lI5EkYp9yOI', gameId: 'M-183-469-840', amount: 43.00, date: 'Today, 4:34 AM' },
      { txnId: 'txn_mcyiym3fabFECnll', paymentId: 'pi_mcyix2vsKDUr3Xn', gameId: 'M-183-469', amount: 40.00, date: 'Today, 3:57 AM' },
      { txnId: 'txn_mcxa70pyBhPNEqG', paymentId: 'pi_mcybjgtOgpXbQiF', gameId: 'M-094-462-992', amount: 15.00, date: 'Today, 12:30 AM' },
      { txnId: 'txn_mcxa70nAOsqkvLx', paymentId: 'pi_mcxz5ot4ONJtNX', gameId: 'Amy Blevins', amount: 39.98, date: 'Yesterday, 6:43 PM' },
      { txnId: 'txn_mcxy3gyujyohiS1j', paymentId: 'pi_mcxy36slayrA6eV', gameId: 'M109405456', amount: 50.02, date: 'Yesterday, 6:13 PM' },
    ];
  
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 space-y-6">
        <h2 className="text-xl font-semibold text-gray-900">Transactions Report</h2>
        
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-2">
            <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 flex items-center gap-2">
              <Copy size={16}/> Copy
            </button>
            <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 flex items-center gap-2">
              <FileSpreadsheet size={16}/> Excel
            </button>
            <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 flex items-center gap-2">
              <FileText size={16}/> CSV
            </button>
            <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 flex items-center gap-2">
              <FileBox size={16}/> PDF
            </button>
          </div>
  
          <div className="relative">
            <button 
              onClick={() => setIsFilterOpen(!isFilterOpen)}
              className="border border-gray-300 bg-white text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2"
            >
              {filter}
              <ChevronDown size={16} />
            </button>
            {isFilterOpen && (
              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-100 z-10">
                {filterOptions.map(option => (
                  <a 
                    key={option} 
                    href="#" 
                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-yellow-50"
                    onClick={(e) => {
                      e.preventDefault();
                      setFilter(option);
                      setIsFilterOpen(false);
                    }}
                  >
                    {option}
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left text-gray-600">
            <thead className="text-xs text-gray-700 uppercase bg-gray-50">
              <tr>
                <th scope="col" className="px-6 py-3">Transaction ID</th>
                <th scope="col" className="px-6 py-3">Payment ID</th>
                <th scope="col" className="px-6 py-3">Game ID</th>
                <th scope="col" className="px-6 py-3">Amount (USD)</th>
                <th scope="col" className="px-6 py-3">Transaction On</th>
              </tr>
            </thead>
            <tbody>
              {reportData.map((item) => (
                <tr key={item.txnId} className="bg-white border-b hover:bg-gray-50">
                  <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{item.txnId}</td>
                  <td className="px-6 py-4">{item.paymentId}</td>
                  <td className="px-6 py-4">{item.gameId}</td>
                  <td className="px-6 py-4">{item.amount.toFixed(2)}</td>
                  <td className="px-6 py-4">{item.date}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
}

function BalanceContent() {
    return (
      <div className="flex justify-center items-start pt-10">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 w-full max-w-sm text-center">
          <div className="flex justify-center mb-6">
            <div className="w-24 h-24 bg-[linear-gradient(135deg,#FFD600,#B8860B)] rounded-full flex items-center justify-center shadow-lg">
                <span className="text-5xl font-bold text-white" style={{'textShadow': '1px 1px #00000030'}}>₿</span>
            </div>
          </div>
          <h2 className="text-3xl font-bold text-gray-800 tracking-tight">0.0045175414 BTC</h2>
          <p className="text-gray-500 text-lg mt-2">451,754 SATS</p>
          <p className="text-gray-500 text-lg mt-1">(≈ 530.50 USD)</p>
        </div>
      </div>
    );
}
  
function InstantSendContent() {
      const [instantPaymentTab, setInstantPaymentTab] = useState('All');
      const [showSendForm, setShowSendForm] = useState(false);
      const paymentTabs = ['All', 'Paid', 'Unpaid', 'Failed'];
  
      const allInstantPayments = [
          { id: 'is_mcxg9ooyJVj94EHA', type: 'Onchain Address', currency: 'USD', amount: 200, sendTo: 'bc1q0hqndc5gw26x4ws', status: 'Paid', createdOn: 'Yesterday, 10:00 AM' },
          { id: 'is_mcuk2l0l2lE766nD', type: 'Onchain Address', currency: 'USD', amount: 240, sendTo: 'bc1q276ltr4ha79n6exrh', status: 'Paid', createdOn: '08-Jul-2025, 9:18 AM' },
          { id: 'is_mctl2hocTTqv39El', type: 'Lightning Invoice', currency: 'USD', amount: 3136, sendTo: 'lnbc1p5xcdrpp5dz3d6j', status: 'Paid', createdOn: '07-Jul-2025, 4:58 PM' },
          { id: 'is_mctk938x25wX7pc4', type: 'Lightning Invoice', currency: 'USD', amount: 3139, sendTo: 'lnbc1p5xcg7npp5q9lnf6', status: 'Failed', createdOn: '07-Jul-2025, 4:35 PM' },
          { id: 'is_mctk6uv2BICbUMLM', type: 'Lightning Invoice', currency: 'USD', amount: 3139, sendTo: 'lnbc1p5xcg7npp5q9lnf6', status: 'Failed', createdOn: '07-Jul-2025, 4:33 PM' },
          { id: 'is_mctk5t3vlCCixJC3', type: 'Lightning Invoice', currency: 'SATS', amount: 3139, sendTo: 'lnbc1p5xcg7npp5q9lnf6', status: 'Paid', createdOn: '07-Jul-2025, 4:33 PM' },
          { id: 'is_mcm2jrbgeq8dGt4e', type: 'Onchain Address', currency: 'USD', amount: 200, sendTo: 'bc1q3wpusj08np86ach', status: 'Paid', createdOn: '02-Jul-2025, 10:45 AM' },
          { id: 'is_mchqov1oPklSHYkw', type: 'Onchain Address', currency: 'USD', amount: 300, sendTo: '1J1PVqGnFGNuR4SoJfe', status: 'Paid', createdOn: '29-Jun-2025, 10:02 AM' },
          { id: 'is_mcgmad1kugLH2tbf', type: 'Onchain Address', currency: 'USD', amount: 120, sendTo: 'bc1qt28xuxr5wll20237v', status: 'Paid', createdOn: '28-Jun-2025, 3:22 PM' },
      ];
  
      const getFilteredPayments = () => {
          if (instantPaymentTab === 'All') return allInstantPayments;
          return allInstantPayments.filter(p => p.status.toLowerCase() === instantPaymentTab.toLowerCase());
      };
  
      const filteredPayments = getFilteredPayments();
  
      return (
          <div className="space-y-6">
              <div className="flex justify-end items-center">
                     <button
                        onClick={() => setShowSendForm(!showSendForm)}
                        className="bg-gray-800 hover:bg-black text-white font-bold py-2 px-4 rounded-lg flex items-center gap-2"
                      >
                        <Plus size={16} />
                        Send Instantly
                      </button>
              </div>
  
              {showSendForm && (
                  <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                      <h2 className="text-xl font-semibold text-gray-900 mb-4">Send Payment</h2>
                      <div className="space-y-4">
                          <div>
                              <label htmlFor="recipient" className="block text-sm font-medium text-gray-700 mb-1">Recipient</label>
                              <input
                                  type="text"
                                  name="recipient"
                                  id="recipient"
                                  className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 sm:text-sm p-3"
                                  placeholder="Enter Withdraw Request"
                              />
                              <p className="mt-2 text-sm text-red-500">
                                  Note: Lightning Invoice, LNURL, LN address, Bitcoin Address, USDT address, or Tron address
                              </p>
                          </div>
                          <button className="bg-gray-800 hover:bg-black text-white font-bold py-2 px-6 rounded-lg">
                              Send
                          </button>
                      </div>
                  </div>
              )}
  
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 flex p-1">
                  <div className="w-48 bg-gray-50 p-4 rounded-l-lg">
                      <div className="relative space-y-1">
                             {paymentTabs.map(tab => (
                                <button
                                    key={tab}
                                    onClick={() => setInstantPaymentTab(tab)}
                                    className={`w-full text-left p-3 rounded-lg font-medium transition-colors relative block text-sm ${
                                        instantPaymentTab === tab ? 'text-amber-600 bg-yellow-100' : 'text-gray-600 hover:bg-gray-200'
                                    }`}
                                >
                                    {instantPaymentTab === tab && (
                                      <div className="absolute left-0 top-0 h-full w-1 bg-amber-600 rounded-r-full"></div>
                                    )}
                                    <span className="ml-2">{tab}</span>
                                </button>
                            ))}
                      </div>
                  </div>
  
                  <div className="flex-1 overflow-x-auto">
                      <table className="w-full text-sm text-left text-gray-600">
                          <thead className="text-xs text-gray-700 uppercase bg-white">
                              <tr>
                                  <th scope="col" className="px-6 py-3">ID</th>
                                  <th scope="col" className="px-6 py-3">Type</th>
                                  <th scope="col" className="px-6 py-3">Currency</th>
                                  <th scope="col" className="px-6 py-3">Amount</th>
                                  <th scope="col" className="px-6 py-3">Send to</th>
                                  <th scope="col" className="px-6 py-3">Status</th>
                                  <th scope="col" className="px-6 py-3">Created On</th>
                              </tr>
                          </thead>
                          <tbody>
                              {filteredPayments.map((payment) => (
                                  <tr key={payment.id} className="bg-white border-b border-gray-100 hover:bg-gray-50">
                                      <td className="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">{payment.id}</td>
                                      <td className="px-6 py-4">{payment.type}</td>
                                      <td className="px-6 py-4">{payment.currency}</td>
                                      <td className="px-6 py-4 font-bold text-gray-800">{payment.amount}</td>
                                      <td className="px-6 py-4">
                                          <div className="flex items-center gap-2">
                                              <span className="truncate max-w-24">{payment.sendTo}</span>
                                              <Copy size={14} className="text-gray-400 cursor-pointer hover:text-gray-600" />
                                          </div>
                                      </td>
                                      <td className="px-6 py-4">
                                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                              payment.status === 'Paid' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                                          }`}>
                                              {payment.status}
                                          </span>
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap">{payment.createdOn}</td>
                                  </tr>
                              ))}
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      );
}
  
function PaymentsContent({ paymentTab, setPaymentTab }) {
    const paymentTabs = ['All', 'Paid', 'Unpaid', 'Expired', 'Cancelled'];
    
    const allPayments = [
      { id: 'pi_mcyzjf3xdn7jhHzx', gameId: 'M-069-672-208', currency: 'USD', amount: 97.80, status: 'Paid', orderFulfilled: false, method: 'Lightning', receivedOn: 'lnbc832790n1p58z3qzpp5...', description: 'lp58z3qzpp5...', createdOn: 'Today, 1:04 PM' },
      { id: 'pi_mcyzjexwDczovR86', gameId: 'M-069-672-208', currency: 'USD', amount: 50.00, status: 'Paid', orderFulfilled: false, method: 'Lightning', receivedOn: 'lnbc425460n1p58zvxupp5...', description: 'lp58zvxupp5...', createdOn: 'Today, 11:42 AM' },
      { id: 'pi_mcypkI46pOPKLjsh', gameId: 'M-012-213-008', currency: 'USD', amount: 43.00, status: 'Paid', orderFulfilled: false, method: 'Lightning', receivedOn: 'lnbc364560n1p58pnywpp...', description: 'lp58pnywpp...', createdOn: 'Today, 4:34 AM' },
      { id: 'pi_mcyobgw4Okx7KDYi', gameId: 'Joshuro23v', currency: 'USD', amount: 40.00, status: 'Paid', orderFulfilled: false, method: 'Lightning', receivedOn: 'lnbc339770n1p58ps7spp5...', description: 'lp58ps7spp5...', createdOn: 'Today, 3:57 AM' },
      { id: 'pi_mcyk9Il5EkYp9yOp', gameId: 'M-183-469-840', currency: 'USD', amount: 15.00, status: 'Paid', orderFulfilled: false, method: 'Onchain', receivedOn: 'bc1qkxf4nlsgxjdeg1903z4...', description: 'xjdeg1903z4...', createdOn: 'Today, 12:30 AM' },
      { id: 'pi_mcyix2vsKDUr3Xme', gameId: 'M-183-469', currency: 'USD', amount: 39.98, status: 'Paid', orderFulfilled: false, method: 'Onchain', receivedOn: 'bc1qxdlqkvdwxv8qc08kufz...', description: 'wxv8qc08kufz...', createdOn: 'Yesterday, 6:43 PM' }
    ];
  
    const getFilteredPayments = () => {
      if (paymentTab === 'All') return allPayments;
      return allPayments.filter(payment => payment.status === paymentTab);
    };
  
    const filteredPayments = getFilteredPayments();
  
    return (
      <div className="space-y-6">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex space-x-1 mb-6">
            {paymentTabs.map((tab) => (
              <button key={tab} onClick={() => setPaymentTab(tab)} className={`px-6 py-2 rounded-lg font-medium transition-colors ${ paymentTab === tab ? 'bg-[linear-gradient(135deg,#FFD600,#B8860B)] text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100' }`}>
                {tab}
              </button>
            ))}
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Payment ID</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Game ID</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Currency</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Amount</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Status</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Order Fulfilled</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Method</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Received On</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Description</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-600">Created On</th>
                </tr>
              </thead>
              <tbody>
                {filteredPayments.map((payment, index) => (
                  <tr key={index} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="py-3 px-4 text-gray-900 text-sm">{payment.id}</td>
                    <td className="py-3 px-4 text-gray-900 text-sm">{payment.gameId}</td>
                    <td className="py-3 px-4 text-gray-900 text-sm">{payment.currency}</td>
                    <td className="py-3 px-4 text-amber-600 font-medium text-sm">{payment.amount}</td>
                    <td className="py-3 px-4"><span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">{payment.status}</span></td>
                    <td className="py-3 px-4"><div className="w-4 h-4 border-2 border-gray-300 rounded"></div></td>
                    <td className="py-3 px-4 text-gray-900 text-sm">{payment.method}</td>
                    <td className="py-3 px-4 text-gray-600 text-sm"><div className="flex items-center gap-2"><span className="truncate max-w-32">{payment.receivedOn}</span><Copy size={14} className="text-gray-400 cursor-pointer hover:text-gray-600" /></div></td>
                    <td className="py-3 px-4 text-gray-600 text-sm"><div className="flex items-center gap-2"><span className="truncate max-w-24">{payment.description}</span><Copy size={14} className="text-gray-400 cursor-pointer hover:text-gray-600" /></div></td>
                    <td className="py-3 px-4 text-gray-900 text-sm">{payment.createdOn}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
}
  
function DashboardContent({ setActiveTab }) {
    const recentPayments = [
      { amount: '0.00042546', receivedOn: 'Today, 11:42 AM' },
      { amount: '0.00036456', receivedOn: 'Today, 4:34 AM' },
      { amount: '0.00033977', receivedOn: 'Today, 3:58 AM' },
      { amount: '0.00012865', receivedOn: 'Today, 12:58 AM' },
      { amount: '0.00034517', receivedOn: 'Yesterday, 6:47 PM' },
    ];
  
    const recentTransactions = [
      { type: 'Transfer Out', grossAmount: '0.00016848z', netAmount: '0.000016848z', transaction: 'Today, 11:42 AM' },
      { type: 'Payment', grossAmount: '0.00042546', netAmount: '0.000421z054', transaction: 'Today, 11:42 AM' },
      { type: 'Transfer Out', grossAmount: '0.000014366', netAmount: '0.000014366', transaction: 'Today, 4:34 AM' },
      { type: 'Payment', grossAmount: '0.00036456', netAmount: '0.000369144', transaction: 'Today, 4:34 AM' },
      { type: 'Transfer Out', grossAmount: '0.000134549', netAmount: '0.000134549', transaction: 'Today, 3:58 AM' },
      { type: 'Payment', grossAmount: '0.00033977', netAmount: '0.00036372z', transaction: 'Today, 3:58 AM' },
    ];
  
    return (
      <div className="space-y-6">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">Account Balance</h2>
          <p className="text-gray-600 text-lg mb-6">(≈ 530.44 USD)</p>
          <button onClick={() => setActiveTab('Balances')} className="border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors">
            View Balance
          </button>
        </div>
  
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          <div className="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 className="text-xl font-semibold text-gray-900">Recent Payments</h2>
            <button className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors">
              View All
            </button>
          </div>
          <div className="p-6">
            <div className="grid grid-cols-2 gap-8 mb-4">
              <div className="text-gray-600 font-medium">Amount(BTC)</div>
              <div className="text-gray-600 font-medium">Received On</div>
            </div>
            <div className="space-y-4">
              {recentPayments.map((payment, index) => (
                <div key={index} className="grid grid-cols-2 gap-8 py-2 border-b border-gray-100 last:border-b-0">
                  <div className="text-gray-900">{payment.amount}</div>
                  <div className="text-gray-900">{payment.receivedOn}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
  
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          <div className="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 className="text-xl font-semibold text-gray-900">Recent Transactions</h2>
            <button onClick={() => setActiveTab('Transaction')} className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors">
              View All
            </button>
          </div>
          <div className="p-6">
            <div className="grid grid-cols-4 gap-4 mb-4">
              <div className="text-gray-600 font-medium">Type</div>
              <div className="text-gray-600 font-medium">Gross Amount(BTC)</div>
              <div className="text-gray-600 font-medium">Net Amount(BTC)</div>
              <div className="text-gray-600 font-medium">Transaction</div>
            </div>
            <div className="space-y-4">
              {recentTransactions.map((transaction, index) => (
                <div key={index} className="grid grid-cols-4 gap-4 py-3 border-b border-gray-100 last:border-b-0">
                  <div className="text-gray-900">{transaction.type}</div>
                  <div className="text-gray-900">{transaction.grossAmount}</div>
                  <div className="text-gray-900">{transaction.netAmount}</div>
                  <div className="text-gray-900">{transaction.transaction}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
}
  
function ExchangeContent() {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 min-h-96">
        <div className="p-6 border-b border-gray-200 flex items-center justify-between">
          <h2 className="text-xl font-semibold text-gray-900">Exchange</h2>
          <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] hover:opacity-90 text-white px-6 py-2 rounded-lg font-medium transition-colors">
            Create New
          </button>
        </div>
  
        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <h3 className="text-lg font-medium text-gray-900">Swap Out</h3>
              <div className="border border-gray-200 rounded-lg p-4">
                <div className="text-center text-gray-500 py-8">
                  Select currency to swap out
                </div>
              </div>
            </div>
  
            <div className="space-y-4">
              <h3 className="text-lg font-medium text-gray-900">Amount</h3>
              <div className="border border-gray-200 rounded-lg p-4">
                <div className="text-center text-gray-500 py-8">
                  Enter amount
                </div>
              </div>
            </div>
          </div>
  
          <div className="mt-8 flex justify-center">
            <button className="bg-[linear-gradient(135deg,#FFD600,#B8860B)] hover:opacity-90 text-white px-8 py-3 rounded-lg font-medium transition-colors">
              Exchange
            </button>
          </div>
        </div>
      </div>
    );
}