'use client';

import Link from 'next/link';
import { Skeleton } from 'primereact/skeleton';

interface HomeData {
  top_drivers?: Record<string, unknown>[];
}

function str(obj: Record<string, unknown>, keys: string[]): string {
  for (const k of keys) {
    const v = obj[k];
    if (typeof v === 'string' && v) return v;
    if (typeof v === 'number') return String(v);
  }
  return '';
}

function mapDriver(d: Record<string, unknown>) {
  const name    = str(d, ['name', 'full_name', 'driver_name']);
  const bus     = str(d, ['bus', 'bus_name', 'bus_label', 'vehicle_name']);
  const rating  = (() => { const v = d.rating ?? d.average_rating; return typeof v === 'number' ? v : 0; })();
  const trips   = (() => { const v = d.trips ?? d.trips_count ?? d.total_trips; return typeof v === 'number' ? v : 0; })();
  const avatar  = str(d, ['avatar', 'image', 'photo', 'profile_image', 'image_url']);

  const statusRaw = str(d, ['status', 'employment_status']).toLowerCase();
  const isLeave   = /إجازة|leave|vacation|inactive/.test(statusRaw) || d.is_on_leave === true;
  const status      = isLeave ? 'إجازة' : 'نشط';
  const statusColor = isLeave ? '#D97706' : '#059669';
  const statusBg    = isLeave ? '#FEF3C7' : '#DCFCE7';

  return { name: name || '—', bus: bus || '—', rating, trips, avatar, status, statusColor, statusBg };
}

export default function DriversWidget({ loading, data }: { loading: boolean; data: HomeData }) {
  const header = (
    <div className="flex items-center justify-between px-5 py-4 border-b" style={{ borderColor: '#F1F5F9' }}>
      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ background: '#DCFCE7' }}>
          <i className="ri-steering-2-fill text-base" style={{ color: '#059669' }}></i>
        </div>
        <h3 className="font-bold text-slate-800 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>السائقون</h3>
      </div>
      <Link href="/dashboard/drivers">
        <button className="text-xs font-semibold cursor-pointer whitespace-nowrap" style={{ color: '#1E3A8A', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
          عرض الكل <i className="ri-arrow-left-s-line"></i>
        </button>
      </Link>
    </div>
  );

  if (loading) {
    return (
      <div className="bg-white rounded-2xl overflow-hidden" style={{ border: '1px solid #F1F5F9', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
        {header}
        <div className="p-4 space-y-3">
          {[0,1,2,3].map(i => (
            <div key={i} className="flex items-center gap-3">
              <Skeleton shape="circle" size="2.5rem" className="flex-shrink-0" />
              <div className="flex-1 space-y-2">
                <Skeleton width="60%" height="0.875rem" borderRadius="6px" />
                <Skeleton width="45%" height="0.75rem" borderRadius="6px" />
              </div>
              <Skeleton width="2.5rem" height="1.25rem" borderRadius="8px" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  const drivers = (data.top_drivers ?? []).map(mapDriver);

  return (
    <div className="bg-white rounded-2xl overflow-hidden" style={{ border: '1px solid #F1F5F9', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
      {header}
      <div>
        {drivers.length === 0 ? (
          <p className="px-5 py-6 text-center text-sm text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>لا يوجد سائقون</p>
        ) : drivers.map((d, i) => (
          <div key={i} className="flex items-center gap-3 px-5 py-3.5 border-t hover:bg-slate-50 transition-colors cursor-pointer" style={{ borderColor: '#F8FAFC' }}>
            <div className="w-10 h-10 rounded-xl overflow-hidden flex-shrink-0 bg-slate-100 flex items-center justify-center">
              {d.avatar
                ? <img src={d.avatar} alt={d.name} className="w-full h-full object-cover object-top" />
                : <span className="text-sm font-bold text-slate-500">{d.name.charAt(0)}</span>
              }
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-bold text-slate-800 truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{d.name}</p>
              <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{d.bus} · {d.trips} رحلة</p>
            </div>
            <div className="flex flex-col items-end gap-1">
              <span className="px-2 py-0.5 rounded-full text-[10px] font-bold whitespace-nowrap" style={{ background: d.statusBg, color: d.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                {d.status}
              </span>
              <div className="flex items-center gap-0.5">
                <i className="ri-star-fill text-xs" style={{ color: '#F59E0B' }}></i>
                <span className="text-xs font-bold text-slate-600" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{d.rating}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}