import { MapPin, Truck, Clock, ShoppingBag, CheckCircle2 } from "lucide-react";

const steps = [
  { icon: ShoppingBag, label: "Pembelian Bahan", time: "06:00", desc: "Bahan dibeli dari pasar/supplier lokal", color: "bg-blue-100 text-blue-600", dot: "bg-blue-400" },
  { icon: Truck, label: "Pengiriman Bahan", time: "07:30", desc: "Bahan dikirim ke dapur SPPG", color: "bg-amber-100 text-amber-600", dot: "bg-amber-400" },
  { icon: Clock, label: "Proses Memasak", time: "08:00", desc: "Masak di dapur sentral SPPG", color: "bg-purple-100 text-purple-600", dot: "bg-purple-400" },
  { icon: MapPin, label: "Distribusi ke Sekolah", time: "10:30", desc: "Dikirim menggunakan omprengan", color: "bg-orange-100 text-orange-600", dot: "bg-orange-400" },
  { icon: CheckCircle2, label: "Selesai Disajikan", time: "11:00", desc: "Makanan diterima dan dicatat validator", color: "bg-emerald-100 text-emerald-600", dot: "bg-emerald-400" },
];

export default function DistribusiTimeline({ sppg }) {
  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <div className="flex items-center gap-2 mb-5">
        <Truck className="w-5 h-5 text-primary" />
        <h3 className="font-bold text-foreground">Tracking Distribusi Harian</h3>
      </div>

      <div className="relative">
        {/* Vertical line */}
        <div className="absolute left-4 top-4 bottom-4 w-0.5 bg-border" />

        <div className="space-y-4">
          {steps.map((step, i) => (
            <div key={i} className="flex items-start gap-4 pl-2">
              <div className={`w-5 h-5 rounded-full ${step.dot} flex-shrink-0 mt-0.5 ring-2 ring-white relative z-10`} />
              <div className={`flex-1 rounded-xl p-3 border ${step.color.includes("blue") ? "border-blue-100" : step.color.includes("amber") ? "border-amber-100" : step.color.includes("purple") ? "border-purple-100" : step.color.includes("orange") ? "border-orange-100" : "border-emerald-100"} ${step.color.includes("emerald") ? "bg-emerald-50" : step.color.includes("blue") ? "bg-blue-50" : step.color.includes("amber") ? "bg-amber-50" : step.color.includes("purple") ? "bg-purple-50" : "bg-orange-50"}`}>
                <div className="flex items-center justify-between mb-0.5">
                  <div className="flex items-center gap-1.5">
                    <step.icon className={`w-3.5 h-3.5 ${step.color.split(" ")[1]}`} />
                    <p className={`text-xs font-bold ${step.color.split(" ")[1]}`}>{step.label}</p>
                  </div>
                  <span className="text-xs font-mono text-muted-foreground">{step.time}</span>
                </div>
                <p className="text-xs text-muted-foreground">{step.desc}{sppg?.lokasi ? ` — ${sppg.lokasi}` : ""}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}