"use client"

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { Car, Fuel, Hash, CarFront, Search, User, Filter } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useMemo } from 'react'

interface Vehicle {
  id: number
  plate: string
  fuel: number
  owner: number
  model: string
  owner_username?: string
  photo_data?: string
  photo_type?: string
}

export default function AdminVehicles() {
  const t = useTranslations('vehicles')
  const [vehicles, setVehicles] = useState<Vehicle[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [filterFuel, setFilterFuel] = useState<string>('all')
  const [page, setPage] = useState(1)
  const pageSize = 20

  useEffect(() => {
    fetchAllVehicles()
  }, [])

  const fetchAllVehicles = async () => {
    try {
      setLoading(true)
      const response = await fetch('/api/admin/vehicles')
      
      if (response.ok) {
        const data = await response.json()
        console.log('Vehicles data:', data.vehicles)
        setVehicles(data.vehicles || [])
      } else {
        setError(t('error'))
      }
    } catch (error) {
      setError(t('error'))
      console.error('Error fetching vehicles:', error)
    } finally {
      setLoading(false)
    }
  }

  const getFuelColor = (fuel: number) => {
    if (fuel >= 80) return 'text-green-400'
    if (fuel >= 50) return 'text-yellow-400'
    if (fuel >= 20) return 'text-orange-400'
    return 'text-red-400'
  }

  const getFuelIcon = (fuel: number) => {
    if (fuel >= 80) return '🟢'
    if (fuel >= 50) return '🟡'
    if (fuel >= 20) return '🟠'
    return '🔴'
  }

  const getFuelStatus = (fuel: number) => {
    if (fuel >= 80) return 'Full'
    if (fuel >= 50) return 'Good'
    if (fuel >= 20) return 'Low'
    return 'Critical'
  }

  const getVehicleName = (modelId: number) => {
    const vehicleNames: { [key: number]: string } = {
      // Airplanes
      592: 'Andromada', 577: 'AT-400', 511: 'Beagle', 512: 'Cropduster', 593: 'Dodo',
      520: 'Hydra', 553: 'Nevada', 476: 'Rustler', 519: 'Shamal', 460: 'Skimmer',
      513: 'Stuntplane',
      
      // Helicopters
      548: 'Cargobob', 425: 'Hunter', 417: 'Leviathan', 487: 'Maverick', 488: 'News Chopper',
      497: 'Police Maverick', 563: 'Raindance', 447: 'Seasparrow', 469: 'Sparrow',
      
      // Boats
      472: 'Coastguard', 473: 'Dinghy', 493: 'Jetmax', 595: 'Launch', 484: 'Marquis',
      430: 'Predator', 453: 'Reefer', 452: 'Speeder', 446: 'Squalo', 454: 'Tropic',
      
      // Bikes
      581: 'BF-400', 509: 'Bike', 481: 'BMX', 462: 'Faggio', 521: 'FCR-900',
      463: 'Freeway', 510: 'Mountain Bike', 522: 'NRG-500', 461: 'PCJ-600',
      448: 'Pizzaboy', 468: 'Sanchez', 586: 'Wayfarer',
      
      // 2-Door & Compact Cars
      602: 'Alpha', 496: 'Blista Compact', 401: 'Bravura', 518: 'Buccaneer', 527: 'Cadrona',
      589: 'Club', 419: 'Esperanto', 587: 'Euros', 533: 'Feltzer', 526: 'Fortune',
      474: 'Hermes', 545: 'Hustler', 517: 'Majestic', 410: 'Manana', 600: 'Picador',
      436: 'Previon', 439: 'Stallion', 549: 'Tampa', 491: 'Virgo',
      
      // 4-Door & Luxury Cars
      445: 'Admiral', 604: 'Glendale Damaged', 507: 'Elegant', 585: 'Emperor', 466: 'Glendale',
      492: 'Greenwood', 546: 'Intruder', 551: 'Merit', 516: 'Nebula', 467: 'Oceanic',
      426: 'Premier', 547: 'Primo', 405: 'Sentinel', 580: 'Stafford', 409: 'Stretch',
      550: 'Sunrise', 566: 'Tahoma', 540: 'Vincent', 421: 'Washington', 529: 'Willard',
      
      // Civil Service
      485: 'Baggage', 431: 'Bus', 438: 'Cabbie', 437: 'Coach', 574: 'Sweeper',
      420: 'Taxi', 525: 'Towtruck', 408: 'Trashmaster', 552: 'Utility Van',
      
      // Government Vehicles
      416: 'Ambulance', 433: 'Barracks', 427: 'Enforcer', 490: 'FBI Rancher', 528: 'FBI Truck',
      407: 'Fire Truck', 544: 'Fire Truck Ladder', 523: 'HPV1000', 470: 'Patriot',
      596: 'Police LS', 598: 'Police LV', 599: 'Police Ranger', 597: 'Police SF',
      432: 'Rhino', 601: 'S.W.A.T.', 428: 'Securicar',
      
      // Heavy & Utility Trucks
      499: 'Benson', 609: 'Boxville Mission', 498: 'Boxville', 524: 'Cement Truck',
      532: 'Combine Harvester', 578: 'DFT-30', 486: 'Dozer', 406: 'Dumper',
      573: 'Dune', 455: 'Flatbed', 588: 'Hotdog', 403: 'Linerunner', 423: 'Mr. Whoopee',
      414: 'Mule', 443: 'Packer', 515: 'Roadtrain', 514: 'Tanker', 531: 'Tractor',
      456: 'Yankee',
      
      // Light Trucks & Vans
      459: 'Berkley\'s RC Van', 422: 'Bobcat', 482: 'Burrito', 605: 'Sadler Damaged',
      530: 'Forklift', 418: 'Moonbeam', 572: 'Mower', 582: 'Newsvan', 413: 'Pony',
      440: 'Rumpo', 543: 'Sadler', 583: 'Tug', 478: 'Walton', 554: 'Yosemite',
      
      // SUVs & Wagons
      579: 'Huntley', 400: 'Landstalker', 404: 'Perennial', 489: 'Rancher',
      505: 'Rancher Lure', 479: 'Regina', 442: 'Romero', 458: 'Solair',
      
      // Lowriders
      536: 'Blade', 575: 'Broadway', 534: 'Remington', 567: 'Savanna',
      535: 'Slamvan', 576: 'Tornado', 412: 'Voodoo',
      
      // Muscle Cars
      402: 'Buffalo', 542: 'Clover', 603: 'Phoenix', 475: 'Sabre',
      
      // Street Racers
      429: 'Banshee', 541: 'Bullet', 415: 'Cheetah', 480: 'Comet', 562: 'Elegy',
      565: 'Flash', 434: 'Hotknife', 494: 'Hotring Racer', 502: 'Hotring Racer 3',
      503: 'Hotring Racer 2', 411: 'Infernus', 559: 'Jester', 561: 'Stratum',
      560: 'Sultan', 506: 'Super GT', 451: 'Turismo', 558: 'Uranus', 555: 'Windsor',
      477: 'ZR-350',
      
      // RC Vehicles
      441: 'RC Bandit', 464: 'RC Baron', 594: 'RC Cam', 501: 'RC Goblin',
      465: 'RC Raider', 564: 'RC Tiger',
      
      // Trailers
      606: 'Baggage Trailer (covered)', 607: 'Baggage Trailer (uncovered)', 610: 'Farm Trailer',
      584: 'Trailer (Tanker Commando)', 611: 'Street Clean Trailer', 435: 'Trailer 1',
      450: 'Trailer 2', 591: 'Trailer 3',
      
      // Trains & Railroad Cars
      590: 'Box Freight', 538: 'Streak', 570: 'Streak Train Trailer', 569: 'Freight Train Flatbed',
      537: 'Freight', 449: 'Tram',
      
      // Recreational
      568: 'Bandito', 424: 'BF Injection', 504: 'Bloodring Banger', 457: 'Caddy',
      483: 'Camper', 508: 'Journey', 571: 'Kart', 500: 'Mesa', 444: 'Monster',
      556: 'Monster 2', 557: 'Monster 3', 471: 'Quadbike', 495: 'Sandking', 539: 'Vortex'
    }
    
    return vehicleNames[modelId] || `Vehicle ${modelId}`
  }

     const filteredVehicles = vehicles.filter(vehicle => {
     const vehicleName = getVehicleName(parseInt(vehicle.model)).toLowerCase()
     const matchesSearch = 
       vehicle.plate.toLowerCase().includes(searchQuery.toLowerCase()) ||
       vehicle.owner_username?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       vehicle.id.toString().includes(searchQuery) ||
       vehicleName.includes(searchQuery.toLowerCase()) ||
       vehicle.model.toString().includes(searchQuery)
    
    const matchesFuel = filterFuel === 'all' || 
      (filterFuel === 'low' && vehicle.fuel <= 20) ||
      (filterFuel === 'good' && vehicle.fuel > 20 && vehicle.fuel <= 80) ||
      (filterFuel === 'full' && vehicle.fuel > 80)

    return matchesSearch && matchesFuel
  })

  const filtered = useMemo(() => filteredVehicles, [filteredVehicles])
  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize))
  const currentPage = Math.min(page, totalPages)
  const paged = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)

  if (loading) {
    return (
      <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
          <p className="text-gray-400">{t('loading')}</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-6 border border-red-500/30">
        <div className="text-center">
          <p className="text-red-400 mb-2">Error loading vehicles</p>
          <button
            onClick={fetchAllVehicles}
            className="text-sm text-gray-400 hover:text-white transition-colors"
          >
            Try again
          </button>
        </div>
      </div>
    )
  }

     return (
     <div className="bg-black/60 rounded-2xl p-4 border border-gray-700/50">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold text-white">Server Vehicles</h3>
         <p className="text-sm text-gray-400">{vehicles.length} vehicles found</p>
       </div>

             {/* Search and Filters */}
       <div className="mb-4 space-y-3">
         <div className="flex flex-col md:flex-row gap-4">
           {/* Search */}
           <div className="flex-1 flex items-center bg-gray-800/60 rounded-xl border border-gray-700 px-3">
             <Search className="w-4 h-4 text-gray-400 mr-2" />
             <input
               value={searchQuery}
               onChange={(e) => { setSearchQuery(e.target.value); setPage(1) }}
               placeholder="Search by vehicle name, plate, owner, or ID..."
               className="bg-transparent text-gray-200 w-full px-2 py-3 outline-none text-sm"
             />
           </div>

           {/* Fuel Filter */}
           <div className="flex items-center bg-gray-800/60 rounded-xl border border-gray-700 px-3">
             <Filter className="w-4 h-4 text-gray-400 mr-2" />
             <select
               value={filterFuel}
               onChange={(e) => { setFilterFuel(e.target.value); setPage(1) }}
               className="bg-transparent text-gray-200 outline-none cursor-pointer text-sm"
             >
               <option value="all">All Fuel Levels</option>
               <option value="full">Full (80%+)</option>
               <option value="good">Good (21-79%)</option>
               <option value="low">Low (≤20%)</option>
             </select>
           </div>

           {/* Refresh Button */}
           <Button
             onClick={fetchAllVehicles}
             size="sm"
             className="bg-green-600/20 text-green-400 border border-green-600/30 hover:bg-green-600/30"
           >
             Refresh
           </Button>
         </div>

         {/* Results Count */}
         <div className="text-xs text-gray-400">
           <span>{filtered.length} vehicles found</span>
         </div>
       </div>

      {/* Vehicles Table */}
      {paged.length > 0 ? (
        <div className="overflow-x-auto">
                   <table className="w-full text-left">
           <thead>
             <tr className="text-gray-400 text-xs border-b border-gray-700/50">
               <th className="py-2 px-2 font-medium">Vehicle ID</th>
               <th className="py-2 px-2 font-medium">Vehicle Name</th>
               <th className="py-2 px-2 font-medium">License Plate</th>
               <th className="py-2 px-2 font-medium">Fuel Level</th>
               <th className="py-2 px-2 font-medium">Owner ID</th>
               <th className="py-2 px-2 font-medium">Owner Username</th>
               <th className="py-2 px-2 font-medium">Status</th>
             </tr>
           </thead>
            <tbody>
              {paged.map((vehicle) => (
                                 <tr key={vehicle.id} className="text-gray-200 text-sm border-b border-gray-800/30 hover:bg-gray-800/20 transition-colors duration-200">
                   {/* Vehicle ID */}
                   <td className="py-2 px-2">
                     <div className="flex items-center space-x-2">
                       <div className="w-5 h-5 bg-gray-700/40 rounded-xl flex items-center justify-center">
                         <Hash className="w-2.5 h-2.5 text-gray-400" />
                       </div>
                       <span className="font-mono font-semibold text-sm">{vehicle.id}</span>
                     </div>
                   </td>

                                      {/* Vehicle Name */}
                   <td className="py-2 px-2">
                     <div className="flex items-center space-x-2">
                       {/* Vehicle Image */}
                       <div className="w-12 h-12 rounded-xl overflow-hidden border border-gray-700/30 bg-gray-800/40 flex-shrink-0 relative">
                         <img
                           src={`/vehicles/Vehicle_${vehicle.model}.jpg`}
                           alt={getVehicleName(parseInt(vehicle.model))}
                           className="w-full h-full object-cover"
                           onError={(e) => {
                             const target = e.target as HTMLImageElement;
                             target.style.display = 'none';
                             // Show a car icon as fallback
                             const fallbackDiv = target.parentElement?.querySelector('.fallback-icon');
                             if (fallbackDiv) {
                               fallbackDiv.classList.remove('hidden');
                             }
                           }}
                         />
                         {/* Fallback Icon */}
                         <div className="fallback-icon hidden absolute inset-0 w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-700/60 to-gray-800/60">
                           <Car className="w-4 h-4 text-gray-400" />
                         </div>
                       </div>
                       <div className="flex flex-col">
                         <span className="font-semibold text-white text-sm">
                           {getVehicleName(parseInt(vehicle.model))}
                         </span>
                         <span className="text-xs text-gray-400">
                           Model: {vehicle.model}
                         </span>
                       </div>
                     </div>
                   </td>

                   {/* License Plate */}
                   <td className="py-2 px-2">
                     <div className="bg-green-600/20 border border-green-600/30 rounded-xl px-2 py-1 inline-block">
                       <span className="text-green-400 font-mono font-bold tracking-wider text-xs">
                         {vehicle.plate}
                       </span>
                     </div>
                   </td>

                   {/* Fuel Level */}
                   <td className="py-2 px-2">
                     <div className="flex items-center space-x-2">
                       <Fuel className="w-3 h-3 text-orange-400" />
                       <div className="text-center">
                         <span className={`font-bold text-sm ${getFuelColor(vehicle.fuel)}`}>
                           {vehicle.fuel}%
                         </span>
                         <div className="text-xs text-gray-400">{getFuelStatus(vehicle.fuel)}</div>
                       </div>
                       <div className={`w-2.5 h-2.5 rounded-full ${
                         vehicle.fuel >= 80 ? 'bg-green-400' : 
                         vehicle.fuel >= 50 ? 'bg-yellow-400' : 
                         vehicle.fuel >= 20 ? 'bg-orange-400' : 'bg-red-400'
                       }`}></div>
                     </div>
                   </td>

                   {/* Owner ID */}
                   <td className="py-2 px-2">
                     <div className="flex items-center space-x-2">
                       {/* Player Profile Photo */}
                       <div className="w-6 h-6 rounded-xl overflow-hidden border border-gray-700/30 bg-gray-800/40 flex-shrink-0 relative">
                         {vehicle.photo_data && vehicle.photo_type ? (
                           <img
                             src={`data:${vehicle.photo_type.includes('image/') ? vehicle.photo_type : `image/${vehicle.photo_type}`};base64,${vehicle.photo_data.trim()}`}
                             alt={`Player ${vehicle.owner}`}
                             className="w-full h-full object-cover"
                             onError={(e) => {
                               console.log('Image error for vehicle:', vehicle.id, 'owner:', vehicle.owner, 'type:', vehicle.photo_type)
                               const target = e.target as HTMLImageElement;
                               target.style.display = 'none';
                               // Show a user icon as fallback
                               const fallbackDiv = target.parentElement?.querySelector('.fallback-icon');
                               if (fallbackDiv) {
                                 fallbackDiv.classList.remove('hidden');
                               }
                             }}
                             onLoad={() => {
                               console.log('Image loaded successfully for vehicle:', vehicle.id, 'owner:', vehicle.owner)
                             }}
                           />
                         ) : null}
                         {/* Fallback Icon */}
                         <div className={`fallback-icon ${vehicle.photo_data && vehicle.photo_type ? 'hidden' : ''} absolute inset-0 w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-700/60 to-gray-800/60`}>
                           <User className="w-3 h-3 text-gray-400" />
                         </div>
                       </div>
                       <span className="font-mono font-semibold text-sm">{vehicle.owner}</span>
                     </div>
                   </td>

                   {/* Owner Username */}
                   <td className="py-2 px-2">
                     {vehicle.owner_username ? (
                       <span className="px-2 py-1 rounded-xl text-xs font-medium bg-blue-600/20 text-blue-400 border border-blue-600/30">
                         {vehicle.owner_username}
                       </span>
                     ) : (
                       <span className="px-2 py-1 rounded-xl text-xs font-medium bg-gray-600/20 text-gray-400 border border-gray-600/30">
                         Unknown
                       </span>
                     )}
                   </td>

                   {/* Status */}
                   <td className="py-2 px-2">
                     <div className="flex items-center space-x-2">
                       <div className={`w-2 h-2 rounded-full ${
                         vehicle.fuel > 20 ? 'bg-green-400' : 'bg-red-400'
                       }`}></div>
                       <span className={`text-xs font-medium ${
                         vehicle.fuel > 20 ? 'text-green-400' : 'text-red-400'
                       }`}>
                         {vehicle.fuel > 20 ? 'Operational' : 'Low Fuel'}
                       </span>
                     </div>
                   </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="text-center py-8">
          <div className="w-16 h-16 bg-gray-700/40 rounded-full flex items-center justify-center mx-auto mb-4">
            <Car className="w-8 h-8 text-gray-400" />
          </div>
          <h4 className="text-lg font-semibold text-white mb-2">{t('noVehicles')}</h4>
          <p className="text-gray-400 text-sm">No vehicles match your search criteria</p>
        </div>
      )}

      {/* Pagination */}
      <div className="flex items-center justify-between mt-3 text-xs text-gray-400">
        <span>Page {currentPage} of {totalPages}</span>
        <div className="space-x-2">
          <Button size="sm" variant="outline" className="border-gray-700 text-gray-300 hover:text-white" onClick={() => setPage(p => Math.max(1, p - 1))}>
            Previous
          </Button>
          <Button size="sm" variant="outline" className="border-gray-700 text-gray-300 hover:text-white" onClick={() => setPage(p => Math.min(totalPages, p + 1))}>
            Next
          </Button>
        </div>
      </div>

                                 {/* Summary Stats */}
           <div className="mt-4 pt-3 border-t border-gray-700/50">
             <div className="grid grid-cols-4 gap-3 text-center">
               <div className="bg-gray-800/40 rounded-xl p-3 border border-gray-700/30">
                 <p className="text-xl font-bold text-white">{vehicles.length}</p>
                 <p className="text-gray-400 text-xs">Total Vehicles</p>
               </div>
               <div className="bg-gray-800/40 rounded-xl p-3 border border-gray-700/30">
                 <p className="text-xl font-bold text-green-400">
                   {vehicles.filter(v => v.fuel > 80).length}
                 </p>
                 <p className="text-gray-400 text-xs">Full Tank</p>
               </div>
               <div className="bg-gray-800/40 rounded-xl p-3 border border-gray-700/30">
                 <p className="text-xl font-bold text-yellow-400">
                   {vehicles.filter(v => v.fuel > 20 && v.fuel <= 80).length}
                 </p>
                 <p className="text-gray-400 text-xs">Good Fuel</p>
               </div>
               <div className="bg-gray-800/40 rounded-xl p-3 border border-gray-700/30">
                 <p className="text-xl font-bold text-red-400">
                   {vehicles.filter(v => v.fuel <= 20).length}
                 </p>
                 <p className="text-gray-400 text-xs">Low Fuel</p>
               </div>
             </div>
           </div>
    </div>
  )
}