import { Bike, MapPin, Battery, User, MoreVertical } from 'lucide-react';
import { bikes } from '@/data/mockData';

const rentedBikes = bikes.filter(b => b.status === 'rented');

export default function ShopFleetPage() {
  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">Fleet Status</h1>
          <p className="text-sm text-slate-500 mt-1">View assigned bikes and their status</p>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-slate-800">{rentedBikes.length}</p>
          <p className="text-sm text-slate-500">Rented Out</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-slate-800">
            {rentedBikes.filter(b => b.batteryLevel > 50).length}
          </p>
          <p className="text-sm text-slate-500">Good Battery</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-slate-800">
            {rentedBikes.filter(b => b.batteryLevel <= 50).length}
          </p>
          <p className="text-sm text-slate-500">Low Battery</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="px-5 py-4 border-b border-slate-100">
          <h2 className="font-bold text-slate-800">Assigned Bikes</h2>
        </div>
        <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">Bike</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Plate</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Rider</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Location</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Battery</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {rentedBikes.map(bike => (
                <tr key={bike.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-3">
                      <Bike className="w-5 h-5 text-slate-400" />
                      <span className="text-sm font-medium text-slate-700">{bike.model}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-600">{bike.plateNumber}</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">{bike.assignedTo}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-1 text-sm text-slate-600">
                      <MapPin className="w-3 h-3" /> {bike.location}
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <Battery className={`w-4 h-4 ${bike.batteryLevel > 50 ? 'text-green-600' : 'text-amber-600'}`} />
                      <span className={`text-sm font-medium ${bike.batteryLevel > 50 ? 'text-green-600' : 'text-amber-600'}`}>
                        {bike.batteryLevel}%
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <button className="p-2 hover:bg-slate-100 rounded-lg">
                      <MoreVertical className="w-4 h-4 text-slate-400" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}