import { Package, Truck, MapPin, Clock, Check, Play, Phone } from 'lucide-react';
import { deliveries } from '@/data/mockData';

const statusColors: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-700',
  in_progress: 'bg-blue-100 text-blue-700',
  completed: 'bg-green-100 text-green-700',
};

export default function ShopDeliveriesPage() {
  const pending = deliveries.filter(d => d.status === 'pending').length;
  const inProgress = deliveries.filter(d => d.status === 'in_progress').length;
  const completed = deliveries.filter(d => d.status === 'completed').length;

  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">Deliveries</h1>
          <p className="text-sm text-slate-500 mt-1">Track and manage deliveries</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">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
              <Clock className="w-6 h-6 text-amber-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{pending}</p>
              <p className="text-sm text-slate-500">Pending</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
              <Play className="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{inProgress}</p>
              <p className="text-sm text-slate-500">In Progress</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
              <Check className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{completed}</p>
              <p className="text-sm text-slate-500">Completed</p>
            </div>
          </div>
        </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">All Deliveries</h2>
        </div>
        <div className="divide-y divide-slate-50">
          {deliveries.map(delivery => (
            <div key={delivery.id} className="p-5 hover:bg-slate-50 transition-colors">
              <div className="flex flex-col lg:flex-row lg:items-center gap-4">
                <div className="flex items-center gap-4 lg:w-48">
                  <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
                    <Truck className="w-5 h-5 text-slate-600" />
                  </div>
                  <div>
                    <p className="font-semibold text-slate-800">{delivery.id}</p>
                    <p className="text-xs text-slate-400">{delivery.createdAt}</p>
                  </div>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 text-sm text-slate-600">
                    <MapPin className="w-4 h-4 text-green-500" />
                    <span>{delivery.pickupLocation}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-400 mt-1">
                    <span>→</span>
                    <span>{delivery.dropoffLocation}</span>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[delivery.status]}`}>
                    {delivery.status.replace('_', ' ')}
                  </span>
                  {delivery.status !== 'completed' && (
                    <button className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                      <Phone className="w-4 h-4" />
                    </button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}