import StatCard from '@/components/StatCard';
import { stats, deliveries, bikes } from '@/data/mockData';
import { Package, Bike, Play, CheckCircle, MapPin, Battery, Phone, Settings } from 'lucide-react';

export default function ShopPage() {
  const activeBikes = bikes.filter(b => b.status === 'rented');
  const pendingDeliveries = deliveries.filter(d => d.status === 'pending');
  const inProgressDeliveries = deliveries.filter(d => d.status === 'in_progress');
  const completedDeliveries = deliveries.filter(d => d.status === 'completed');

  return (
    <div className="p-4 lg:p-6">
      <div className="mb-6">
        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Shop Dashboard</h1>
        <p className="text-sm text-slate-500">Manage deliveries and fleet</p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard label="Today's Deliveries" value={stats.shop.todayDeliveries} icon={Package} color="text-shop" />
        <StatCard label="Active Riders" value={stats.shop.activeRiders} icon={Bike} color="text-green-600" />
        <StatCard label="In Progress" value={inProgressDeliveries.length} icon={Play} color="text-amber-600" />
        <StatCard label="Completed Today" value={completedDeliveries.length} icon={CheckCircle} color="text-purple-600" />
      </div>

      <div className="grid lg:grid-cols-2 gap-6 mb-6">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-bold text-slate-800">Active Deliveries</h2>
            <span className="text-xs font-semibold px-2 py-1 bg-amber-100 text-amber-700 rounded-full">
              {inProgressDeliveries.length + pendingDeliveries.length} active
            </span>
          </div>
          <div className="space-y-3">
            {deliveries.filter(d => d.status !== 'completed').map(delivery => (
              <div key={delivery.id} className="p-3 bg-slate-50 rounded-lg">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs font-semibold text-slate-500">{delivery.id}</span>
                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
                    delivery.status === 'in_progress' ? 'bg-blue-100 text-blue-700' :
                    'bg-amber-100 text-amber-700'
                  }`}>
                    {delivery.status.replace('_', ' ')}
                  </span>
                </div>
                <p className="text-sm text-slate-700 flex items-center gap-1"><MapPin className="w-3 h-3" /> {delivery.pickupLocation}</p>
                <p className="text-xs text-slate-400 flex items-center gap-1 ml-4">→ {delivery.dropoffLocation}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <h2 className="font-bold text-slate-800 mb-4">Fleet Status</h2>
          <div className="space-y-3">
            {activeBikes.map(bike => (
              <div key={bike.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                <div>
                  <p className="font-medium text-slate-700">{bike.model}</p>
                  <p className="text-xs text-slate-400">{bike.plateNumber}</p>
                </div>
                <div className="text-right">
                  <p className="text-xs font-medium text-green-600 flex items-center gap-1"><Battery className="w-3 h-3" /> {bike.batteryLevel}%</p>
                  <p className="text-xs text-slate-400 flex items-center gap-1"><MapPin className="w-3 h-3" /> {bike.location}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="px-5 py-3 border-b border-slate-100">
          <h2 className="font-bold text-slate-800">Delivery History</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">Delivery ID</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">Pickup</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Dropoff</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {deliveries.map(delivery => (
                <tr key={delivery.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3 text-sm font-medium text-slate-700">{delivery.id}</td>
                  <td className="px-4 py-3 text-sm text-slate-600">{delivery.riderId}</td>
                  <td className="px-4 py-3 text-sm text-slate-600">{delivery.pickupLocation}</td>
                  <td className="px-4 py-3 text-sm text-slate-600">{delivery.dropoffLocation}</td>
                  <td className="px-4 py-3">
                    <span className={`text-xs font-medium px-2 py-1 rounded-full ${
                      delivery.status === 'completed' ? 'bg-green-100 text-green-700' :
                      delivery.status === 'in_progress' ? 'bg-blue-100 text-blue-700' :
                      'bg-amber-100 text-amber-700'
                    }`}>
                      {delivery.status.replace('_', ' ')}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}