'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  ArrowLeft, Building2, Star, Phone, Mail, MapPin, Activity, Wrench,
  Battery, Bike, DollarSign, CheckCircle2, Clock, AlertTriangle, Search,
  SlidersHorizontal, ArrowUpDown, User, Calendar, Shield, Tag, Plus, Eye,
  BarChart3, Percent, ChevronRight, ExternalLink
} from 'lucide-react';
import Link from 'next/link';
import { ServiceCenter } from '../page';

// Interface for Maintenance History Record
interface HistoryRecord {
  id: string;
  date: string;
  assetId: string;
  assetType: 'EV Bike' | 'Battery';
  serviceType: 'Damage' | 'Repair' | 'Service' | 'Battery Swap' | 'Inspection';
  description: string;
  severity: 'critical' | 'major' | 'minor' | 'cosmetic';
  status: 'completed' | 'in_progress' | 'parts_ordered';
  estimatedCost: number;
  actualCost: number;
  partsUsed: { name: string; qty: number; price: number }[];
  laborCost: number;
  technician: string;
}

// Generate realistic mock history data based on Center ID/Name
const getMockHistoryData = (centerName: string): HistoryRecord[] => {
  const baseHistory: HistoryRecord[] = [
    {
      id: 'MNT-101',
      date: '2024-03-21',
      assetId: 'EV-004',
      assetType: 'EV Bike',
      serviceType: 'Damage',
      description: 'Front fender shattered in traffic collision. Replaced brackets and front wheel.',
      severity: 'major',
      status: 'in_progress',
      estimatedCost: 3500,
      actualCost: 3200,
      partsUsed: [
        { name: 'Front fender', qty: 1, price: 1500 },
        { name: 'Mounting brackets', qty: 2, price: 800 },
        { name: 'Brake pads', qty: 1, price: 600 }
      ],
      laborCost: 1200,
      technician: 'Sabbir Ahmed'
    },
    {
      id: 'MNT-102',
      date: '2024-03-18',
      assetId: 'BAT-044',
      assetType: 'Battery',
      serviceType: 'Battery Swap',
      description: 'Internal diagnostic showing rapid voltage degradation. Replaced cells and recalibrated BMS.',
      severity: 'critical',
      status: 'completed',
      estimatedCost: 12000,
      actualCost: 11500,
      partsUsed: [
        { name: 'Battery 60V cell pack', qty: 1, price: 9500 },
        { name: 'BMS Controller Board', qty: 1, price: 2000 }
      ],
      laborCost: 2500,
      technician: 'Kamrul Hasan'
    },
    {
      id: 'MNT-103',
      date: '2024-03-15',
      assetId: 'EV-012',
      assetType: 'EV Bike',
      serviceType: 'Service',
      description: 'Routine 5,000km periodic maintenance. Calibrated drum brakes and greased chassis bearings.',
      severity: 'minor',
      status: 'completed',
      estimatedCost: 1500,
      actualCost: 1450,
      partsUsed: [
        { name: 'Brake Cable', qty: 1, price: 250 },
        { name: 'Sprocket kit', qty: 1, price: 450 }
      ],
      laborCost: 750,
      technician: 'Sabbir Ahmed'
    },
    {
      id: 'MNT-104',
      date: '2024-03-10',
      assetId: 'BAT-021',
      assetType: 'Battery',
      serviceType: 'Inspection',
      description: 'Thermal warning flag during hyper-charging cycle. Terminals cleaned and thermal gel reapplied.',
      severity: 'cosmetic',
      status: 'completed',
      estimatedCost: 500,
      actualCost: 400,
      partsUsed: [
        { name: 'Thermal paste', qty: 1, price: 150 }
      ],
      laborCost: 250,
      technician: 'Kamrul Hasan'
    },
    {
      id: 'MNT-105',
      date: '2024-03-05',
      assetId: 'EV-009',
      assetType: 'EV Bike',
      serviceType: 'Repair',
      description: 'Throttle failure reported by delivery driver. Replaced magnetic sensor assembly.',
      severity: 'major',
      status: 'completed',
      estimatedCost: 1800,
      actualCost: 2100,
      partsUsed: [
        { name: 'Throttle control assembly', qty: 1, price: 800 },
        { name: 'Wiring loom adapter', qty: 1, price: 450 }
      ],
      laborCost: 850,
      technician: 'Rafiqul Islam'
    },
    {
      id: 'MNT-106',
      date: '2024-02-28',
      assetId: 'EV-017',
      assetType: 'EV Bike',
      serviceType: 'Damage',
      description: 'Rear tire blowout due to road debris. Replacement and alignment completed.',
      severity: 'minor',
      status: 'completed',
      estimatedCost: 2800,
      actualCost: 2750,
      partsUsed: [
        { name: 'Rear Tire tubeless', qty: 1, price: 2200 },
        { name: 'Chain replacement', qty: 1, price: 400 }
      ],
      laborCost: 500,
      technician: 'Sabbir Ahmed'
    },
    {
      id: 'MNT-107',
      date: '2024-02-20',
      assetId: 'BAT-089',
      assetType: 'Battery',
      serviceType: 'Battery Swap',
      description: 'Dead module replacement under premium warranty. Replaced sub-assemblies.',
      severity: 'critical',
      status: 'parts_ordered',
      estimatedCost: 15000,
      actualCost: 0,
      partsUsed: [
        { name: 'Battery 48V cell pack', qty: 1, price: 8000 }
      ],
      laborCost: 1500,
      technician: 'Kamrul Hasan'
    }
  ];

  // Variations in records based on Center's specialty & size to make data dynamic
  if (centerName.includes('Gulshan') || centerName.includes('Center A')) {
    return baseHistory;
  } else if (centerName.includes('Banani') || centerName.includes('Center B')) {
    return baseHistory.filter(h => h.serviceType === 'Battery Swap' || h.serviceType === 'Service' || h.serviceType === 'Inspection').map(h => ({
      ...h,
      id: h.id.replace('10', '20'),
      technician: 'Tanvir Rahman'
    }));
  } else {
    // Uttara / Authorized
    return baseHistory.filter(h => h.serviceType === 'Inspection' || h.serviceType === 'Repair').map(h => ({
      ...h,
      id: h.id.replace('10', '30'),
      technician: 'Arif Chowdhury'
    }));
  }
};

export default function ServiceCenterDetailsPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [isMounted, setIsMounted] = useState(false);
  const [center, setCenter] = useState<ServiceCenter | null>(null);
  const [history, setHistory] = useState<HistoryRecord[]>([]);

  // Filtering / Sorting / Search states for history
  const [searchQuery, setSearchQuery] = useState('');
  const [assetFilter, setAssetFilter] = useState('all');
  const [typeFilter, setTypeFilter] = useState('all');
  const [severityFilter, setSeverityFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  
  const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'cost-desc' | 'cost-asc' | 'urgency-desc' | 'urgency-asc'>('date-desc');

  // Map Interactive detail popup state
  const [mapPopup, setMapPopup] = useState<string | null>(null);

  useEffect(() => {
    setIsMounted(true);
    
    // Load Service Centers from localStorage
    const stored = localStorage.getItem('jaiben_service_centers');
    let foundCenter: ServiceCenter | null = null;

    if (stored) {
      try {
        const centers: ServiceCenter[] = JSON.parse(stored);
        foundCenter = centers.find(c => c.id === id) || null;
      } catch (e) {}
    }

    if (foundCenter) {
      setCenter(foundCenter);
      setHistory(getMockHistoryData(foundCenter.name));
    } else {
      router.push('/admin/service-centers');
    }
  }, [id, router]);

  if (!isMounted || !center) return null;

  // Filter History records
  const filteredHistory = history.filter(h => {
    const matchesSearch = h.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      h.assetId.toLowerCase().includes(searchQuery.toLowerCase()) ||
      h.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      h.technician.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesAsset = assetFilter === 'all' || h.assetType === assetFilter;
    const matchesType = typeFilter === 'all' || h.serviceType === typeFilter;
    const matchesSeverity = severityFilter === 'all' || h.severity === severityFilter;
    const matchesStatus = statusFilter === 'all' || h.status === statusFilter;

    return matchesSearch && matchesAsset && matchesType && matchesSeverity && matchesStatus;
  });

  // Sort History records
  const severityWeights = { cosmetic: 1, minor: 2, major: 3, critical: 4 };
  const sortedHistory = [...filteredHistory].sort((a, b) => {
    switch (sortBy) {
      case 'date-desc':
        return new Date(b.date).getTime() - new Date(a.date).getTime();
      case 'date-asc':
        return new Date(a.date).getTime() - new Date(b.date).getTime();
      case 'cost-desc':
        return (b.actualCost || b.estimatedCost) - (a.actualCost || a.estimatedCost);
      case 'cost-asc':
        return (a.actualCost || a.estimatedCost) - (b.actualCost || b.estimatedCost);
      case 'urgency-desc':
        return severityWeights[b.severity] - severityWeights[a.severity];
      case 'urgency-asc':
        return severityWeights[a.severity] - severityWeights[b.severity];
      default:
        return 0;
    }
  });

  // Financial & Aggregate calculations
  const totalRepairs = history.length;
  const completedRepairs = history.filter(h => h.status === 'completed');
  
  const totalEstimatedCost = completedRepairs.reduce((sum, h) => sum + h.estimatedCost, 0);
  const totalActualCost = completedRepairs.reduce((sum, h) => sum + h.actualCost, 0);
  const costVariance = totalActualCost - totalEstimatedCost;
  
  const totalPartsCost = completedRepairs.reduce((sum, h) => sum + h.partsUsed.reduce((s, p) => s + (p.price * p.qty), 0), 0);
  const totalLaborCost = completedRepairs.reduce((sum, h) => sum + h.laborCost, 0);
  const totalSpend = totalPartsCost + totalLaborCost;

  // Aggregate Parts Utilized Log
  const partsAggregated: { name: string; totalQty: number; totalCost: number }[] = [];
  history.forEach(h => {
    h.partsUsed.forEach(part => {
      const existing = partsAggregated.find(p => p.name === part.name);
      if (existing) {
        existing.totalQty += part.qty;
        existing.totalCost += part.price * part.qty;
      } else {
        partsAggregated.push({
          name: part.name,
          totalQty: part.qty,
          totalCost: part.price * part.qty
        });
      }
    });
  });
  const topParts = partsAggregated.sort((a, b) => b.totalQty - a.totalQty).slice(0, 5);

  const statusColors = {
    active: 'bg-emerald-100 text-emerald-700',
    busy: 'bg-amber-100 text-amber-700',
    inactive: 'bg-slate-100 text-slate-700'
  };

  const severityColors = {
    critical: 'bg-red-100 text-red-700',
    major: 'bg-orange-100 text-orange-700',
    minor: 'bg-amber-100 text-amber-700',
    cosmetic: 'bg-slate-100 text-slate-700'
  };

  const statusHistoryColors = {
    completed: 'bg-emerald-100 text-emerald-700',
    in_progress: 'bg-blue-100 text-blue-700',
    parts_ordered: 'bg-purple-100 text-purple-700'
  };

  return (
    <div className="p-4 lg:p-6 mb-6 lg:mb-0 space-y-6 max-w-8xl mx-auto">
      
      {/* Navigation Top - standard layout of other detail profiles */}
      <div className="flex items-center justify-between border-b border-slate-100 pb-4 mb-4">
        <button
          onClick={() => router.push('/admin/service-centers')}
          className="flex items-center gap-2 text-slate-600 hover:text-slate-900 text-sm font-semibold transition-colors duration-200"
        >
          <ArrowLeft className="w-4 h-4 text-slate-400" /> Back to Service Centers
        </button>

        <span className="text-xs font-bold text-slate-400">
          Node Registry: {center.id}
        </span>
      </div>

      {/* Main Profile Info Header - rounded-xl alignment matching maintenance page */}
      <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm space-y-6 relative overflow-hidden">
        
        {/* Glow effect decorative */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none" />

        <div className="flex flex-col lg:flex-row lg:items-start justify-between gap-6 relative z-10">
          
          <div className="space-y-4 flex-1">
            
            <div className="flex flex-wrap items-center gap-3">
              <div className="w-14 h-14 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center flex-shrink-0">
                <Building2 className="w-7 h-7 text-slate-600" />
              </div>
              <div>
                <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800 leading-tight">{center.name}</h1>
                <div className="flex flex-wrap items-center gap-2 mt-1">
                  <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent ${statusColors[center.status]}`}>
                    {center.status}
                  </span>
                  <div className="flex items-center gap-1 text-yellow-500 font-bold text-sm bg-yellow-50 px-2 py-0.5 rounded border border-yellow-100">
                    <Star className="w-3.5 h-3.5 fill-yellow-500" />
                    <span>{center.rating.toFixed(1)}</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Profile items - clean, consistent spacing */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-6 text-sm text-slate-600 pt-2">
              
              <div className="flex items-center gap-2">
                <MapPin className="w-4 h-4 text-slate-400" />
                <div className="flex flex-wrap items-center gap-x-2">
                  <span>{center.address}</span>
                  {center.googleMapLink && (
                    <a
                      href={center.googleMapLink}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-accent hover:underline flex items-center gap-0.5 font-bold"
                    >
                      Map Link <ExternalLink className="w-3 h-3" />
                    </a>
                  )}
                </div>
              </div>

              <div className="flex items-center gap-2">
                <Phone className="w-4 h-4 text-slate-400" />
                <span>{center.phone}</span>
              </div>

              <div className="flex items-center gap-2">
                <Mail className="w-4 h-4 text-slate-400" />
                <span>{center.email}</span>
              </div>

              <div className="flex items-center gap-2">
                <Shield className="w-4 h-4 text-slate-400" />
                <span>Staff: <strong className="font-semibold text-slate-800">{center.staffCount} technicians</strong></span>
              </div>

              <div className="flex items-center gap-2">
                <Wrench className="w-4 h-4 text-slate-400" />
                <span>Capacity: <strong className="font-semibold text-slate-800">{center.capacity}</strong> total slots</span>
              </div>

            </div>

            {/* Specialization List Header */}
            <div className="space-y-1.5 pt-2">
              <span className="text-[10px] font-extrabold uppercase text-slate-400 tracking-wider">Node Specializations</span>
              <div className="flex flex-wrap gap-1.5">
                {center.specialization.map(spec => (
                  <span key={spec} className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded-lg text-xs font-bold text-slate-600">
                    {spec}
                  </span>
                ))}
              </div>
            </div>

          </div>

          {/* Quick Stats Header Summary - simplified matching maintenance specs, occupancy not needed */}
          <div className="grid grid-cols-2 gap-4 bg-slate-50 p-5 rounded-xl border border-slate-100 w-full lg:max-w-xs flex-shrink-0">
            
            <div className="space-y-1">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wide">Repairs Logs</p>
              <p className="text-2xl font-extrabold text-slate-800">{totalRepairs}</p>
              <p className="text-[10px] text-slate-500">{completedRepairs.length} completed</p>
            </div>

            <div className="space-y-1">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wide">Capacity</p>
              <p className="text-2xl font-extrabold text-slate-800">{center.capacity}</p>
              <p className="text-[10px] text-slate-500">Service slots registered</p>
            </div>

          </div>

        </div>

      </div>

      {/* Analytics: Map Mockup & Cost Breakdown Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* INTERACTIVE STYLIZED MAP CONTAINER - aligned clean white rounded-xl styles */}
        <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm space-y-4 flex flex-col justify-between lg:col-span-1 min-h-[380px]">
          
          <div className="space-y-1">
            <h3 className="font-extrabold text-slate-800 text-lg">Node Location Map</h3>
            <p className="text-xs text-slate-400">Dhaka city arterial coverage grid mockup</p>
          </div>

          {/* Map canvas container */}
          <div className="flex-1 bg-slate-900 rounded-xl relative overflow-hidden border border-slate-850 shadow-inner flex items-center justify-center min-h-[220px]">
            
            {/* Pulsating target coordinate representing the Center */}
            <div
              className="absolute w-8 h-8 flex items-center justify-center cursor-pointer group z-20"
              style={{ top: '45%', left: '50%', transform: 'translate(-50%, -50%)' }}
              onClick={() => setMapPopup(center.name)}
            >
              <span className="absolute inline-flex h-full w-full rounded-full bg-accent opacity-75 animate-ping" />
              <div className="relative w-4 h-4 bg-accent border-2 border-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-125 transition-transform">
                <div className="w-1.5 h-1.5 bg-white rounded-full" />
              </div>
            </div>

            {/* Stylized Dhaka grids & landmarks using SVGs */}
            <svg className="w-full h-full absolute inset-0 opacity-40 select-none pointer-events-none" viewBox="0 0 100 100" preserveAspectRatio="none">
              {/* Arterial Highways */}
              <line x1="20" y1="0" x2="20" y2="100" stroke="#475569" strokeWidth="0.75" strokeDasharray="2" />
              <line x1="50" y1="0" x2="50" y2="100" stroke="#475569" strokeWidth="1.5" />
              <line x1="80" y1="0" x2="80" y2="100" stroke="#475569" strokeWidth="0.75" />
              
              <line x1="0" y1="30" x2="100" y2="30" stroke="#475569" strokeWidth="0.75" />
              <line x1="0" y1="50" x2="100" y2="50" stroke="#475569" strokeWidth="1.5" />
              <line x1="0" y1="80" x2="100" y2="80" stroke="#475569" strokeWidth="0.75" />

              {/* Waterway (Gulshan Lake) */}
              <path d="M 50,0 Q 52,25 48,50 T 54,100" fill="none" stroke="#1e3a8a" strokeWidth="3" opacity="0.3" />
              <path d="M 47,40 Q 70,45 80,42" fill="none" stroke="#1e3a8a" strokeWidth="2.5" opacity="0.3" />

              {/* Other hubs mockup dots */}
              <circle cx="20" cy="30" r="1.5" fill="#4f46e5" />
              <circle cx="80" cy="30" r="1.5" fill="#4f46e5" />
              <circle cx="20" cy="80" r="1.5" fill="#4f46e5" />
              <circle cx="80" cy="80" r="1.5" fill="#4f46e5" />
            </svg>

            {/* Scale watermark */}
            <div className="absolute bottom-2 left-2 text-[9px] text-slate-500 font-bold bg-slate-950/75 px-1.5 py-0.5 rounded border border-slate-800">
              GPS: {center.latitude.toFixed(4)}°N, {center.longitude.toFixed(4)}°E
            </div>

            {/* Stylized popup when clicked */}
            {mapPopup && (
              <div className="absolute top-2 right-2 left-2 bg-slate-950/90 border border-slate-800 rounded-lg p-2.5 text-xs text-white z-30 animate-fadeIn space-y-1">
                <div className="flex items-center justify-between">
                  <span className="font-extrabold text-accent">{center.name}</span>
                  <button onClick={() => setMapPopup(null)} className="text-slate-400 hover:text-white font-bold">×</button>
                </div>
                <p className="text-[10px] text-slate-400">{center.address}</p>
                <div className="flex justify-between pt-1 border-t border-slate-800 text-[9px] text-slate-400 font-bold">
                  <span>Capacity: {center.capacity} slots</span>
                  <span>Rating: {center.rating.toFixed(1)}</span>
                </div>
              </div>
            )}

            {/* Custom street labels */}
            <div className="absolute top-4 left-[53%] text-[8px] font-bold text-slate-600 tracking-widest uppercase origin-center rotate-90 select-none">
              Gulshan Lake Road
            </div>
            <div className="absolute top-[52%] left-4 text-[8px] font-bold text-slate-600 tracking-widest uppercase select-none">
              Tejgaon-Gulshan Link Road
            </div>

          </div>

          <div className="text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest pt-1">
            📍 Click GPS coordinate node for telemetry details
          </div>

        </div>

        {/* FINANCIAL PERFORMANCE & EXPENSE TRACKING */}
        <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm space-y-6 lg:col-span-2">
          
          <div className="space-y-1">
            <h3 className="font-extrabold text-slate-800 text-lg">Financial Performance & Cost Margins</h3>
            <p className="text-xs text-slate-400">Aggregated historical metrics from completed maintenance invoices</p>
          </div>

          {/* Financial details panel */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            
            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl flex flex-col justify-between">
              <span className="text-xs font-bold text-slate-400 uppercase tracking-wider block">Estimated Spend</span>
              <div className="mt-2">
                <p className="text-2xl font-extrabold text-slate-800">৳{totalEstimatedCost.toLocaleString()}</p>
                <p className="text-[10px] text-slate-500 mt-0.5">Budgeted repairs cost</p>
              </div>
            </div>

            <div className="bg-indigo-50/50 border border-indigo-100/50 p-4 rounded-xl flex flex-col justify-between">
              <span className="text-xs font-bold text-slate-400 uppercase tracking-wider block">Actual Invoice Spend</span>
              <div className="mt-2">
                <p className="text-2xl font-extrabold text-indigo-700">৳{totalActualCost.toLocaleString()}</p>
                <p className="text-[10px] text-indigo-500 mt-0.5">Billed repair totals</p>
              </div>
            </div>

            <div className={`p-4 rounded-xl border flex flex-col justify-between ${costVariance > 0 ? 'bg-rose-50 border-rose-100' : 'bg-emerald-50 border-emerald-100'}`}>
              <span className="text-xs font-bold text-slate-400 uppercase tracking-wider block">Cost Variance</span>
              <div className="mt-2">
                <p className={`text-2xl font-extrabold ${costVariance > 0 ? 'text-rose-700' : 'text-emerald-700'}`}>
                  {costVariance > 0 ? `+৳${costVariance.toLocaleString()}` : `-৳${Math.abs(costVariance).toLocaleString()}`}
                </p>
                <p className="text-[10px] text-slate-500 mt-0.5">
                  {costVariance > 0 ? 'Over budget invoices' : 'Under budget savings!'}
                </p>
              </div>
            </div>

          </div>

          {/* Parts Used Aggregates & Labor Breakdown */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
            
            {/* Margins */}
            <div className="space-y-4">
              <h4 className="text-xs font-extrabold uppercase text-slate-400 tracking-wider">Expense Margin Distribution</h4>
              
              <div className="space-y-3">
                
                {/* Parts Spend Bar */}
                <div className="space-y-1">
                  <div className="flex items-center justify-between text-xs font-bold text-slate-600">
                    <span className="flex items-center gap-1"><Battery className="w-3.5 h-3.5 text-indigo-500" /> Spare Parts Cost</span>
                    <span>৳{totalPartsCost.toLocaleString()} ({totalSpend > 0 ? Math.round((totalPartsCost/totalSpend)*100) : 0}%)</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2">
                    <div
                      className="bg-indigo-650 h-full rounded-full"
                      style={{ width: `${totalSpend > 0 ? (totalPartsCost/totalSpend)*100 : 0}%` }}
                    />
                  </div>
                </div>

                {/* Labor Spend Bar */}
                <div className="space-y-1">
                  <div className="flex items-center justify-between text-xs font-bold text-slate-600">
                    <span className="flex items-center gap-1"><Wrench className="w-3.5 h-3.5 text-emerald-500" /> Labor Costs</span>
                    <span>৳{totalLaborCost.toLocaleString()} ({totalSpend > 0 ? Math.round((totalLaborCost/totalSpend)*100) : 0}%)</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2">
                    <div
                      className="bg-emerald-550 h-full rounded-full"
                      style={{ width: `${totalSpend > 0 ? (totalLaborCost/totalSpend)*100 : 0}%` }}
                    />
                  </div>
                </div>

              </div>

              {/* General Health Tip */}
              <div className="p-3 bg-slate-50 border border-slate-100 rounded-lg text-xs text-slate-500 flex items-start gap-2">
                <AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
                <span>
                  <strong>Cost Ratio Notice:</strong> This node maintains a healthy parts-to-labor ratio of {totalSpend > 0 ? Math.round((totalPartsCost/totalSpend)*100) : 0}:{totalSpend > 0 ? Math.round((totalLaborCost/totalSpend)*100) : 0}. Lower labor ratios reflect technician efficiency.
                </span>
              </div>

            </div>

            {/* Parts utilized list */}
            <div className="space-y-3">
              <h4 className="text-xs font-extrabold uppercase text-slate-400 tracking-wider">Top Spare Parts Log</h4>
              
              <div className="divide-y divide-slate-100 border border-slate-100 rounded-xl overflow-hidden bg-slate-50/50">
                {topParts.length === 0 ? (
                  <p className="text-xs text-slate-400 p-4 text-center">No spare parts recorded yet</p>
                ) : topParts.map(part => (
                  <div key={part.name} className="p-2.5 flex items-center justify-between text-xs text-slate-600">
                    <span className="font-semibold text-slate-700">{part.name}</span>
                    <div className="flex items-center gap-4 text-right">
                      <span className="font-bold text-slate-500">Qty: {part.totalQty}</span>
                      <span className="font-extrabold text-slate-800">৳{part.totalCost.toLocaleString()}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

          </div>

        </div>

      </div>

      {/* Interactive History Log - aligned standard filters and table headers */}
      <div className="bg-white rounded-xl p-6 border border-slate-100 shadow-sm space-y-6">
        
        {/* Section title */}
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 border-b border-slate-100 pb-4">
          <div className="space-y-1">
            <h3 className="font-extrabold text-slate-800 text-lg flex items-center gap-2">
              <Activity className="w-5 h-5 text-indigo-500" />
              <span>Serviced Fleet History Log</span>
            </h3>
            <p className="text-xs text-slate-400">Integrated audit list for EV bikes and Battery Swap maintenance nodes</p>
          </div>

          {/* Quick Counter */}
          <span className="px-3 py-1 bg-indigo-50 border border-indigo-100/50 rounded-lg text-xs font-extrabold text-indigo-700 self-start lg:self-auto">
            {sortedHistory.length} Matches Found
          </span>
        </div>

        {/* Filter Controls Panel */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 bg-slate-50 p-4 rounded-lg border border-slate-100">
          
          {/* Search bar */}
          <div className="relative col-span-1 lg:col-span-2">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              placeholder="Search by ID, tech, description..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 pr-3 py-2 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all bg-white"
            />
          </div>

          {/* Filter 1: Asset Type */}
          <select
            value={assetFilter}
            onChange={(e) => setAssetFilter(e.target.value)}
            className="py-2 px-3 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
          >
            <option value="all">All Asset Types</option>
            <option value="EV Bike">EV Bike</option>
            <option value="Battery">Battery</option>
          </select>

          {/* Filter 2: Service Type */}
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className="py-2 px-3 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
          >
            <option value="all">All Service Types</option>
            <option value="Damage">Damage</option>
            <option value="Repair">Repair</option>
            <option value="Service">Service</option>
            <option value="Battery Swap">Battery Swap</option>
            <option value="Inspection">Inspection</option>
          </select>

          {/* Sorting Dropdown */}
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value as any)}
            className="py-2 px-3 border border-slate-200 rounded-lg text-xs font-bold text-indigo-600 bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
          >
            <option value="date-desc">📆 Date: Newest First</option>
            <option value="date-asc">📆 Date: Oldest First</option>
            <option value="cost-desc">৳ Cost: Highest First</option>
            <option value="cost-asc">৳ Cost: Lowest First</option>
            <option value="urgency-desc">⚠️ Severity: Critical First</option>
            <option value="urgency-asc">⚠️ Severity: Cosmetic First</option>
          </select>

        </div>

        {/* Table / List representation */}
        {sortedHistory.length === 0 ? (
          <div className="text-center py-12 bg-slate-50 rounded-lg border border-dashed border-slate-200">
            <Activity className="w-12 h-12 text-slate-300 mx-auto mb-3" />
            <p className="text-sm font-semibold text-slate-500">No matching service records</p>
            <p className="text-xs text-slate-400 mt-0.5">Try clearing filters or search variables</p>
          </div>
        ) : (
          <div className="overflow-x-auto border border-slate-100 rounded-lg">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100 text-xs font-semibold uppercase tracking-wider text-slate-500">
                  <th className="py-3 px-4">Record ID</th>
                  <th className="py-3 px-4">Asset Code</th>
                  <th className="py-3 px-4">Service Type</th>
                  <th className="py-3 px-4">Description</th>
                  <th className="py-3 px-4 text-center">Severity</th>
                  <th className="py-3 px-4 text-center">Status</th>
                  <th className="py-3 px-4 text-right">Invoice cost</th>
                  <th className="py-3 px-4 text-right">Details</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm text-slate-700">
                {sortedHistory.map(record => (
                  <tr key={record.id} className="hover:bg-slate-50/50 transition-colors">
                    <td className="py-4 px-4 font-bold text-slate-400">{record.id}</td>
                    
                    <td className="py-4 px-4">
                      <div className="flex items-center gap-1.5">
                        {record.assetType === 'EV Bike' ? (
                          <Bike className="w-4 h-4 text-purple-600 flex-shrink-0" />
                        ) : (
                          <Battery className="w-4 h-4 text-green-600 flex-shrink-0" />
                        )}
                        <div className="space-y-0.5">
                          <span className="font-extrabold text-slate-800">{record.assetId}</span>
                          <span className="text-[10px] text-slate-400 uppercase font-semibold block">{record.assetType}</span>
                        </div>
                      </div>
                    </td>

                    <td className="py-4 px-4 font-semibold text-slate-700">{record.serviceType}</td>
                    
                    <td className="py-4 px-4 max-w-sm">
                      <div className="space-y-1">
                        <p className="text-xs text-slate-600 line-clamp-2 leading-relaxed">{record.description}</p>
                        <div className="flex items-center gap-3 text-[10px] text-slate-400 font-semibold">
                          <span className="flex items-center gap-0.5"><User className="w-3 h-3" /> Tech: {record.technician}</span>
                          <span className="flex items-center gap-0.5"><Calendar className="w-3 h-3" /> {record.date}</span>
                        </div>
                      </div>
                    </td>

                    <td className="py-4 px-4 text-center">
                      <span className={`px-2 py-0.5 text-xs font-semibold rounded-full border inline-block ${severityColors[record.severity]}`}>
                        {record.severity}
                      </span>
                    </td>

                    <td className="py-4 px-4 text-center">
                      <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full border inline-block ${statusHistoryColors[record.status]}`}>
                        {record.status.replace('_', ' ')}
                      </span>
                    </td>

                    <td className="py-4 px-4 text-right font-extrabold text-slate-800">
                      {record.actualCost > 0 ? (
                        <span>৳{record.actualCost.toLocaleString()}</span>
                      ) : (
                        <span className="text-slate-400 font-normal italic text-xs">Pending invoice</span>
                      )}
                    </td>

                    <td className="py-4 px-4 text-right">
                      {/* Deep link details */}
                      <Link
                        href={`/admin/maintenance/${record.id}`}
                        className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-slate-700 transition-colors inline-block"
                        title="Open full maintenance record"
                      >
                        <Eye className="w-4 h-4" />
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

      </div>

    </div>
  );
}