import Image from 'next/image';
import StatCard from '@/components/StatCard';
import BikeCard from '@/components/BikeCard';
import TransactionList from '@/components/TransactionList';
import { bikes, rentals, transactions, stats, users } from '@/data/mockData';
import { Bike, Wallet, Footprints, Clock, Zap, RotateCcw, CreditCard, FileText, Share2 } from 'lucide-react';

export default function Home() {
  const activeRental = rentals.find(r => r.status === 'active');
  const currentBike = bikes.find(b => b.id === activeRental?.bikeId);
  const currentUser = users[0];

  return (
    <div className="p-4 lg:p-6">
      <div className="mb-6">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 rounded-full bg-biker-light flex items-center justify-center text-2xl font-bold text-biker">
            {currentUser.name.charAt(0)}
          </div>
          <div>
            <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Welcome back, {currentUser.name.split(' ')[0]}!</h1>
            <p className="text-sm text-slate-500">Here's your rental status</p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard label="Active Rental" value={stats.biker.activeRental} icon={Bike} color="text-biker" />
        <StatCard label="Wallet Balance" value={`৳${stats.biker.walletBalance}`} icon={Wallet} color="text-green-600" />
        <StatCard label="Total Rides" value={stats.biker.totalRides} icon={Footprints} color="text-purple-600" />
        <StatCard label="Days Remaining" value={stats.biker.daysRemaining} icon={Clock} color="text-amber-600" />
      </div>

      {currentBike && (
        <div className="mb-6">
          <h2 className="text-lg font-bold text-slate-800 mb-3">Current Bike</h2>
          <BikeCard bike={currentBike} />
        </div>
      )}

      <div className="grid lg:grid-cols-2 gap-6 mb-6">
        <div>
          <h2 className="text-lg font-bold text-slate-800 mb-3">Quick Actions</h2>
          <div className="grid grid-cols-2 gap-3">
            <button className="py-3 bg-accent text-white rounded-lg font-semibold hover:bg-accent-dark transition-colors flex items-center justify-center gap-2">
              <Zap className="w-4 h-4" /> Rent Bike
            </button>
            <button className="py-3 bg-biker text-white rounded-lg font-semibold hover:bg-biker-dark transition-colors flex items-center justify-center gap-2">
              <RotateCcw className="w-4 h-4" /> Extend Rental
            </button>
            <button className="py-3 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors flex items-center justify-center gap-2">
              <CreditCard className="w-4 h-4" /> Top Up
            </button>
            <button className="py-3 border-2 border-slate-200 text-slate-600 rounded-lg font-semibold hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
              <FileText className="w-4 h-4" /> End Rental
            </button>
          </div>
        </div>

        <div>
          <h2 className="text-lg font-bold text-slate-800 mb-3">Recent Transactions</h2>
          <TransactionList transactions={transactions.filter(t => t.userId === 'u1')} compact />
        </div>
      </div>

      <div className="bg-gradient-to-r from-accent to-accent-dark rounded-xl p-6 text-white">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm opacity-80">Refer a friend</p>
            <h3 className="text-xl font-bold mt-1">Earn ৳500 Credit</h3>
            <p className="text-xs opacity-80 mt-2">Share your referral link and earn free rides</p>
          </div>
          <button className="px-4 py-2 bg-white text-accent rounded-lg font-semibold text-sm flex items-center gap-2">
            <Share2 className="w-4 h-4" /> Share Link
          </button>
        </div>
      </div>
    </div>
  );
}