import { useState, useEffect } from 'react';
import { Timer, Cpu, Activity, Power, Wallet, ArrowUpRight } from 'lucide-react';

export default function DogecoinMiner() {
  const [hashRate, setHashRate] = useState(0);
  const [dogeMined, setDogeMined] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [cpuUsage, setCpuUsage] = useState(0);
  const [walletAddress, setWalletAddress] = useState('');
  const [withdrawAmount, setWithdrawAmount] = useState('');
  const [showWithdrawModal, setShowWithdrawModal] = useState(false);

  useEffect(() => {
    let interval;
    if (isRunning) {
      interval = setInterval(() => {
        setDogeMined(prev => prev + 0.00001);
        setHashRate(Math.random() * (1000 - 800) + 800);
        setCpuUsage(Math.random() * (30 - 10) + 10);
      }, 50); // Faster mining rate
    }
    return () => clearInterval(interval);
  }, [isRunning]);

  const handleWithdraw = (e) => {
    e.preventDefault();
    alert('This is a simulation. In a real system, this would transfer DOGE to your Trust Wallet.');
    setShowWithdrawModal(false);
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white p-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-yellow-300 to-yellow-500 text-transparent bg-clip-text">
            🐕 Turbo Dogecoin Miner v1.0
          </h1>
          <p className="text-gray-400">Ultra-Fast Dogecoin Mining Simulator</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-gray-800 rounded-xl p-6 shadow-lg">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold flex items-center gap-2">
                <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" className="w-6 h-6" alt="Doge" />
                Mining Stats
              </h2>
              <button
                onClick={() => setIsRunning(!isRunning)}
                className={`px-6 py-2 rounded-lg font-medium transition-all ${
                  isRunning
                    ? 'bg-red-500 hover:bg-red-600'
                    : 'bg-green-500 hover:bg-green-600'
                }`}
              >
                {isRunning ? 'Stop Mining' : 'Start Mining'}
              </button>
            </div>

            <div className="space-y-6">
              <div className="bg-gray-700 rounded-lg p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Timer className="text-blue-400" />
                    <span>Hash Rate</span>
                  </div>
                  <span className="font-mono">{hashRate.toFixed(2)} MH/s</span>
                </div>
              </div>

              <div className="bg-gray-700 rounded-lg p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" className="w-5 h-5" alt="Doge" />
                    <span>DOGE Mined</span>
                  </div>
                  <span className="font-mono">
                    {dogeMined.toFixed(5)} DOGE
                  </span>
                </div>
              </div>

              <button
                onClick={() => setShowWithdrawModal(true)}
                className="w-full bg-yellow-500 hover:bg-yellow-600 py-3 rounded-lg font-medium transition-all flex items-center justify-center gap-2"
              >
                <Wallet />
                Withdraw to Trust Wallet
              </button>
            </div>
          </div>

          <div className="bg-gray-800 rounded-xl p-6 shadow-lg">
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
              <Activity className="text-purple-400" />
              Mining Activity
            </h2>
            <div className="h-[300px] bg-gray-700 rounded-lg p-4 overflow-hidden relative">
              <div className="absolute inset-0 flex items-center justify-center">
                {isRunning ? (
                  <div className="space-y-2 w-full px-4">
                    <div className="animate-pulse bg-gray-600 h-6 rounded w-full" />
                    <div className="animate-pulse bg-gray-600 h-6 rounded w-3/4" />
                    <div className="animate-pulse bg-gray-600 h-6 rounded w-5/6" />
                  </div>
                ) : (
                  <span className="text-gray-500">Mining stopped</span>
                )}
              </div>
            </div>
          </div>
        </div>

        {showWithdrawModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
            <div className="bg-gray-800 rounded-xl p-6 max-w-md w-full">
              <h3 className="text-xl font-semibold mb-4">Withdraw DOGE</h3>
              <form onSubmit={handleWithdraw} className="space-y-4">
                <div>
                  <label className="block text-sm mb-2">Trust Wallet Address</label>
                  <input
                    type="text"
                    value={walletAddress}
                    onChange={(e) => setWalletAddress(e.target.value)}
                    placeholder="Enter your Trust Wallet address"
                    className="w-full bg-gray-700 rounded-lg p-3 text-white"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm mb-2">Amount (DOGE)</label>
                  <input
                    type="number"
                    value={withdrawAmount}
                    onChange={(e) => setWithdrawAmount(e.target.value)}
                    max={dogeMined}
                    placeholder="Enter amount to withdraw"
                    className="w-full bg-gray-700 rounded-lg p-3 text-white"
                    required
                  />
                </div>
                <div className="flex gap-4">
                  <button
                    type="submit"
                    className="flex-1 bg-yellow-500 hover:bg-yellow-600 py-3 rounded-lg font-medium"
                  >
                    Withdraw
                  </button>
                  <button
                    type="button"
                    onClick={() => setShowWithdrawModal(false)}
                    className="flex-1 bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium"
                  >
                    Cancel
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="mt-8 bg-gray-800 rounded-xl p-6 shadow-lg">
          <div className="flex items-center gap-2 mb-4">
            <Power className="text-red-400" />
            <h2 className="text-xl font-semibold">System Performance</h2>
          </div>
          <div className="h-4 bg-gray-700 rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-green-500 to-green-400 transition-all duration-500"
              style={{ width: `${cpuUsage}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}