import { FileText, Search, Filter, Bike, User, Calendar, DollarSign, Clock, MoreVertical, Eye } from 'lucide-react';
import { rentals, bikes, users } from '@/data/mockData';

export default function RentalsPage() {
  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Rentals</h1>
          <p className="text-sm text-slate-500 mt-1">View and manage all rental transactions</p>
        </div>
        <div className="flex items-center gap-2">
          <button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
            <Filter className="w-4 h-4" /> Filter
          </button>
          <button className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark">
            Export
          </button>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-4 mb-6">
        {['Active', 'Pending', 'Completed', 'Disputed'].map(status => {
          const count = rentals.filter(r => r.status === status.toLowerCase()).length;
          return (
            <div key={status} className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
              <p className="text-2xl font-extrabold text-slate-800">{count}</p>
              <p className="text-sm text-slate-500">{status} Rentals</p>
            </div>
          );
        })}
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rental ID</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Bike</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Start Date</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Deposit</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Paid</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {rentals.map(rental => {
                const bike = bikes.find(b => b.id === rental.bikeId);
                return (
                  <tr key={rental.id} className="hover:bg-slate-50 transition-colors">
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-slate-700">{rental.id}</span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <Bike className="w-4 h-4 text-slate-400" />
                        <span className="text-sm text-slate-600">{bike?.model}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <User className="w-4 h-4 text-slate-400" />
                        <span className="text-sm text-slate-600">{rental.userId}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm text-slate-600 capitalize">{rental.type}</span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1 text-sm text-slate-600">
                        <Calendar className="w-3 h-3" /> {rental.startDate}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-slate-700">৳{rental.deposit}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm font-semibold text-green-600">৳{rental.totalPaid}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
                        rental.status === 'active' ? 'bg-green-100 text-green-700' :
                        rental.status === 'pending' ? 'bg-amber-100 text-amber-700' :
                        rental.status === 'completed' ? 'bg-blue-100 text-blue-700' :
                        'bg-red-100 text-red-700'
                      }`}>
                        {rental.status}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <button className="p-2 hover:bg-slate-100 rounded-lg">
                        <Eye className="w-4 h-4 text-slate-400" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}