import React from 'react';
import { DollarSign, Package, Fuel, Users, Gauge, AlertTriangle, TrendingUp, MapPin } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';

const positions = [
  { x: 22, y: 38, status: 'transit' }, { x: 45, y: 28, status: 'transit' }, { x: 38, y: 62, status: 'idle' },
  { x: 68, y: 45, status: 'transit' }, { x: 78, y: 70, status: 'idle' }, { x: 55, y: 52, status: 'available' },
  { x: 30, y: 72, status: 'transit' }, { x: 82, y: 35, status: 'available' },
];

const Dashboard: React.FC = () => {
  const { loads, drivers, trucks } = useFleetData();
  const activeLoads = loads.filter((l) => ['Assigned', 'In Transit'].includes(l.status)).length;
  const inTransit = loads.filter((l) => l.status === 'In Transit').length;
  const available = drivers.filter((d) => d.status === 'Available').length;
  const onDuty = drivers.filter((d) => d.status === 'On Duty').length;
  const todayRev = loads.filter((l) => l.status === 'In Transit').reduce((s, l) => s + l.rate, 0);
  const activeTrucks = trucks.filter((t) => t.status === 'Active').length;
  const util = trucks.length ? Math.round((activeTrucks / trucks.length) * 100) : 0;

  const metrics = [
    { label: "In-Transit Revenue", value: '$' + todayRev.toLocaleString(), change: `${inTransit} in transit`, icon: DollarSign, color: 'bg-[#00C853]' },
    { label: 'Active Loads', value: String(activeLoads), change: `${inTransit} in transit`, icon: Package, color: 'bg-[#0B3D91]' },
    { label: 'Total Loads', value: String(loads.length), change: 'in database', icon: Fuel, color: 'bg-[#FF9800]' },
    { label: 'Drivers Available', value: `${available} / ${drivers.length}`, change: `${onDuty} on duty`, icon: Users, color: 'bg-[#5A6673]' },
    { label: 'Truck Utilization', value: util + '%', change: `${activeTrucks} active`, icon: Gauge, color: 'bg-[#0B3D91]' },
    { label: 'In Shop', value: String(trucks.filter((t) => t.status === 'In Shop').length), change: 'needs service', icon: AlertTriangle, color: 'bg-[#D32F2F]' },
  ];

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
        {metrics.map((m) => {
          const Icon = m.icon;
          return (
            <div key={m.label} className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
              <div className={`w-10 h-10 rounded-lg ${m.color} flex items-center justify-center mb-3`}><Icon className="w-5 h-5 text-white" /></div>
              <p className="text-2xl font-bold text-slate-900">{m.value}</p>
              <p className="text-xs text-slate-500 mt-0.5">{m.label}</p>
              <p className="text-[11px] font-medium text-[#00C853] mt-1">{m.change}</p>
            </div>
          );
        })}
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-2 bg-white rounded-xl border border-slate-200 overflow-hidden">
          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
            <div><h2 className="font-semibold text-slate-900">Live Fleet Map</h2><p className="text-xs text-slate-500">GPS positions · {trucks.length} trucks</p></div>
            <div className="flex items-center gap-3 text-[11px]">
              <span className="flex items-center gap-1"><i className="w-2 h-2 rounded-full bg-[#FF9800] inline-block" />In Transit</span>
              <span className="flex items-center gap-1"><i className="w-2 h-2 rounded-full bg-[#00C853] inline-block" />Available</span>
              <span className="flex items-center gap-1"><i className="w-2 h-2 rounded-full bg-[#5A6673] inline-block" />Idle</span>
            </div>
          </div>
          <div className="relative h-[340px] bg-gradient-to-br from-slate-100 to-blue-50">
            <svg className="absolute inset-0 w-full h-full opacity-40" xmlns="http://www.w3.org/2000/svg">
              <defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cbd5e1" strokeWidth="1" /></pattern></defs>
              <rect width="100%" height="100%" fill="url(#grid)" />
              <path d="M 0 200 Q 200 120 400 220 T 800 180" stroke="#94a3b8" strokeWidth="2" fill="none" />
            </svg>
            {positions.map((p, i) => (
              <div key={i} className="absolute -translate-x-1/2 -translate-y-1/2 group cursor-pointer" style={{ left: `${p.x}%`, top: `${p.y}%` }}>
                <div className={`p-1.5 rounded-full shadow-lg ${p.status === 'transit' ? 'bg-[#FF9800]' : p.status === 'available' ? 'bg-[#00C853]' : 'bg-[#5A6673]'}`}><MapPin className="w-3.5 h-3.5 text-white" fill="white" /></div>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200">
          <div className="px-5 py-4 border-b border-slate-100"><h2 className="font-semibold text-slate-900">Driver Status</h2><p className="text-xs text-slate-500">Live roster</p></div>
          <div className="p-4 space-y-3 max-h-[340px] overflow-y-auto">
            {drivers.map((d) => (
              <div key={d.id} className="flex items-center gap-3">
                <span className="w-8 h-8 rounded-full bg-[#0B3D91] text-white text-xs flex items-center justify-center font-bold">{d.name.split(' ').map((n) => n[0]).join('')}</span>
                <div className="flex-1"><p className="text-sm text-slate-700 leading-tight">{d.name}</p><p className="text-[11px] text-slate-400">{d.location}</p></div>
                <span className="text-[11px] text-slate-500">{d.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200">
        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
          <h2 className="font-semibold text-slate-900">Recent Loads</h2>
          <span className="flex items-center gap-1 text-xs text-[#00C853] font-medium"><TrendingUp className="w-4 h-4" /> live from database</span>
        </div>
        <div className="divide-y divide-slate-100">
          {loads.slice(0, 5).map((l) => (
            <div key={l.id} className="flex items-center gap-4 px-5 py-3 hover:bg-slate-50">
              <span className="font-mono text-xs font-semibold text-[#0B3D91] w-20">{l.loadNumber}</span>
              <span className="flex-1 text-sm text-slate-700 truncate">{l.pickup} <span className="text-slate-400">→</span> {l.delivery}</span>
              <span className="hidden sm:block text-xs text-slate-500 w-28 truncate">{l.broker}</span>
              <span className="text-sm font-semibold text-slate-900 w-20 text-right">${l.rate.toLocaleString()}</span>
            </div>
          ))}
          {loads.length === 0 && <div className="px-5 py-8 text-center text-slate-400 text-sm">Loading…</div>}
        </div>
      </div>
    </div>
  );
};
export default Dashboard;