"use client"

import { useState, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { useTranslations } from 'next-intl'
import { Car, Hash, CarFront, Zap, Gauge, Circle, CheckCircle, AlertCircle, Home, Building2, User, MapPin } from 'lucide-react'
import PlayerInteriors from './PlayerInteriors'
import { authFetch } from '@/lib/fetchAuth'

interface Vehicle {
  id: number
  plate: string
	fuel: number // 0-200 scale
  model: string
	name?: string | null
	owner?: string | null
	posX?: number | null
	posY?: number | null
	posZ?: number | null
	health?: number | null
}

interface CharacterBrief {
	id: number
	name: string
}

interface PlayerVehiclesProps {
  userId: number // account id
	characters?: CharacterBrief[] // optional list of characters for grouping (unused now)
}

export default function PlayerVehicles({ userId, characters = [] }: PlayerVehiclesProps) {
  const t = useTranslations('vehicles')
  const [vehicles, setVehicles] = useState<Vehicle[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState<'vehicles' | 'interiors'>('vehicles')
	const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null)

  useEffect(() => {
    fetchVehicles()
  }, [userId])

	useEffect(() => {
		if (characters.length > 0) {
			fetchVehiclesByCharacters()
		}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [characters.map(c => c.name).join('|')])

  const fetchVehicles = async () => {
    try {
      setLoading(true)
      const response = await authFetch(`/api/user/vehicles?accountId=${userId}`)
      
      if (response.ok) {
        const data = await response.json()
        setVehicles(data.vehicles || [])
      } else {
        setError(t('error'))
      }
    } catch (error) {
      setError(t('error'))
      console.error('Error fetching vehicles:', error)
    } finally {
      setLoading(false)
    }
  }

	const fetchVehiclesByCharacters = async () => {
		try {
			const all: Vehicle[] = []
			for (const c of characters) {
				const owner = c.name
				const res = await authFetch(`/api/user/character-vehicles?owner=${encodeURIComponent(owner)}`)
				if (!res.ok) continue
				const data = await res.json()
				const mapped: Vehicle[] = (data.vehicles || []).map((v: any) => ({
					id: v.id,
					plate: v.plate || '-',
					fuel: Number(v.fuel ?? 0), // keep 0-200
					model: String(v.modelId || ''),
					name: v.name,
					owner: v.owner,
					posX: v.posX,
					posY: v.posY,
					posZ: v.posZ,
					health: v.health != null ? Math.round(Number(v.health)) : null
				}))
				all.push(...mapped)
			}
			setVehicles(all)
		} catch (e) {
			console.error('Error fetching character vehicles', e)
		}
	}

	const getFuelColor = (fuel200: number) => {
		if (fuel200 >= 160) return 'text-emerald-400'
		if (fuel200 >= 120) return 'text-amber-300'
		if (fuel200 >= 60) return 'text-orange-400'
    return 'text-red-400'
  }

	const getFuelIcon = (fuel200: number) => {
		if (fuel200 >= 160) return <CheckCircle className="w-4 h-4 text-emerald-400" />
		if (fuel200 >= 120) return <Circle className="w-4 h-4 text-amber-300" />
		if (fuel200 >= 60) return <AlertCircle className="w-4 h-4 text-orange-400" />
    return <AlertCircle className="w-4 h-4 text-red-400" />
  }

	const getVehicleName = (modelId: number) => `Vehicle ${modelId}`

  if (loading) {
    return (
			<div className="bg-gradient-to-br from-[#0b1422]/90 to-[#0a1120]/90 border border-[#0090ff]/15 rounded-2xl p-4 backdrop-blur-md shadow-[0_0_30px_-12px_rgba(0,135,255,0.35)]">
        <div className="text-center">
					<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#53b1ff] mx-auto mb-3"></div>
					<p className="text-[#b8d8ff] text-sm">{t('loading')}</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
			<div className="bg-gradient-to-br from-[#1a0f14]/90 to-[#160d12]/90 border border-rose-500/30 rounded-2xl p-4 backdrop-blur-md">
        <div className="text-center">
					<p className="text-rose-300 mb-2 text-sm">{t('error')}</p>
          <button
            onClick={fetchVehicles}
						className="text-xs text-[#a9c7ff] hover:text-white transition-colors"
          >
            {t('tryAgain')}
          </button>
        </div>
      </div>
    )
  }

  if (vehicles.length === 0) {
    return (
			<div className="bg-gradient-to-br from-[#0b1422]/90 to-[#0a1120]/90 border border-[#0090ff]/15 rounded-2xl p-4 backdrop-blur-md">
        <div className="text-center">
					<div className="w-12 h-12 bg-[#0e223f]/60 rounded-2xl flex items-center justify-center mx-auto mb-3 border border-[#1c3e6e]/50">
						<CarFront className="w-6 h-6 text-[#94c2ff]" />
          </div>
          <h3 className="text-lg font-semibold text-white mb-2">{t('noVehicles')}</h3>
					<p className="text-[#9cbdf5] text-sm">{t('noVehiclesDesc')}</p>
					<p className="text-[#7aa2df] text-xs mt-1">{t('noVehiclesHint')}</p>
        </div>
      </div>
    )
  }

	// Vehicle Card styled like CharacterCard
	const VehicleCard = ({ v, onClick }: { v: Vehicle, onClick: () => void }) => (
		<button
			type="button"
			onClick={onClick}
			className="group relative bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-5 border border-[#0087FF]/20 hover:border-[#0087FF]/40 transition-all duration-300 hover:shadow-xl hover:shadow-[#0087FF]/20 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#0087FF]/40 w-full text-left"
			aria-label={`Open vehicle ${v.name || getVehicleName(parseInt(v.model))}`}
		>
			<div className="flex items-center gap-4">
				<div className="w-12 h-12 rounded-2xl bg-[#0e223f]/40 border-2 border-[#0087FF]/30 flex items-center justify-center group-hover:border-[#8ab4ff] transition-all">
					<CarFront className="w-6 h-6 text-[#bcd7ff]" />
				</div>
				<div className="min-w-0">
					<h4 className="text-lg font-bold text-white truncate group-hover:text-[#8ab4ff] transition-colors">{v.name || getVehicleName(parseInt(v.model))}</h4>
					<p className="text-xs text-gray-400 flex items-center gap-1"><Hash className="w-3 h-3" /> ID {v.id}</p>
					{v.owner ? (
						<p className="text-[11px] text-gray-400 mt-0.5 inline-flex items-center gap-1"><User className="w-3 h-3" /> {v.owner.replace(/_/g, ' ')}</p>
					) : null}
				</div>
			</div>
			<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#0087FF]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
		</button>
	)

	// Detail modal styled like CharacterDetailModal
	const VehicleDetailModal = ({ vehicle, onClose }: { vehicle: Vehicle, onClose: () => void }) => (
		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
			<div className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-fade-in" onClick={onClose}></div>
			<div className="relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl border border-slate-700 p-6 md:p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto animate-slide-in">
				<button
					onClick={onClose}
					className="absolute top-4 right-4 p-2 text-gray-400 hover:text-white hover:bg-slate-700 rounded-xl transition-colors"
					aria-label="Close"
				>
					×
				</button>
				<div className="flex items-start gap-4 md:gap-6 mb-6">
					<div className="w-16 h-16 rounded-2xl bg-[#0e223f]/40 border-2 border-[#0087FF]/30 flex items-center justify-center">
						<CarFront className="w-8 h-8 text-[#bcd7ff]" />
					</div>
					<div className="min-w-0 flex-1">
						<h2 className="text-2xl md:text-3xl font-bold text-white mb-1 truncate">{vehicle.name || getVehicleName(parseInt(vehicle.model))}</h2>
						<div className="flex items-center gap-3 text-xs text-gray-300 flex-wrap">
							<span className="inline-flex items-center gap-1"><Hash className="w-3 h-3" /> ID #{vehicle.id}</span>
							{vehicle.owner ? <span className="inline-flex items-center gap-1"><User className="w-3 h-3" /> {vehicle.owner.replace(/_/g,' ')}</span> : null}
						</div>
					</div>
				</div>

				<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6">
					<div className="rounded-xl border border-slate-600 bg-slate-700/40 p-4">
						<p className="text-sm text-gray-300 mb-1">{t('details.fuel')}</p>
						<p className={`text-2xl font-bold ${getFuelColor(vehicle.fuel || 0)}`}>{(vehicle.fuel || 0)}/200</p>
					</div>
					<div className="rounded-xl border border-slate-600 bg-slate-700/40 p-4">
						<p className="text-sm text-gray-300 mb-1">{t('details.health')}</p>
						<p className="text-2xl font-bold text-white">{vehicle.health != null ? vehicle.health : '—'}</p>
					</div>
					<div className="rounded-xl border border-slate-600 bg-slate-700/40 p-4">
						<p className="text-sm text-gray-300 mb-1">{t('details.plate')}</p>
						<p className="text-2xl font-bold text-emerald-400">{vehicle.plate || '—'}</p>
					</div>
				</div>

				<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
					<div>
						<div className="flex items-center justify-between text-sm text-gray-300 mb-2">
							<span className="inline-flex items-center gap-2"><Gauge className="w-4 h-4 text-amber-300" /> {t('details.fuel')}</span>
							<span className={`text-white font-semibold`}>{(vehicle.fuel || 0)}/200</span>
						</div>
						<div className="h-2 rounded-full bg-slate-700 overflow-hidden">
							<div className="h-full bg-gradient-to-r from-amber-400 to-red-400" style={{ width: `${Math.min(100, ((vehicle.fuel || 0) / 200) * 100)}%` }}></div>
						</div>
					</div>
					<div>
						<div className="flex items-center justify-between text-sm text-gray-300 mb-2">
							<span className="inline-flex items-center gap-2"><Zap className="w-4 h-4 text-emerald-400" /> {t('details.health')}</span>
							<span className="text-white font-semibold">{vehicle.health != null ? vehicle.health : '—'}</span>
						</div>
						<div className="h-2 rounded-full bg-slate-700 overflow-hidden">
							<div className="h-full bg-gradient-to-r from-emerald-500 to-emerald-300" style={{ width: `${Math.min(100, ((vehicle.health || 0) / 1000) * 100)}%` }}></div>
						</div>
					</div>
				</div>

				<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
					<div className="flex items-center justify-between border-b border-white/10 py-2">
						<span className="text-gray-400 text-sm">{t('details.model')}</span>
						<span className="text-white text-sm font-medium">{vehicle.model}</span>
					</div>
					<div className="flex items-center justify-between border-b border-white/10 py-2">
						<span className="text-gray-400 text-sm">{t('details.owner')}</span>
						<span className="text-white text-sm font-medium">{vehicle.owner ? vehicle.owner.replace(/_/g,' ') : '—'}</span>
					</div>
					<div className="flex items-center justify-between border-b border-white/10 py-2">
						<span className="text-gray-400 text-sm">{t('details.position')}</span>
						<span className="text-white text-sm font-medium inline-flex items-center gap-2"><MapPin className="w-3 h-3" />{typeof vehicle.posX === 'number' && typeof vehicle.posY === 'number' && typeof vehicle.posZ === 'number' ? `${vehicle.posX.toFixed(2)}, ${vehicle.posY.toFixed(2)}, ${vehicle.posZ.toFixed(2)}` : '—'}</span>
					</div>
				</div>
			</div>
		</div>
	)

     return (
		<div className="rounded-2xl p-3 border border-[#0090ff]/20 bg-gradient-to-br from-[#0b1422]/90 to-[#0a1120]/90 backdrop-blur-md shadow-[0_0_40px_-16px_rgba(0,135,255,0.35)]">
			<div className="text-center mb-4">
				<div className="w-11 h-11 bg-[#0e223f]/60 rounded-2xl flex items-center justify-center mx-auto mb-2 border border-[#1c3e6e]/60">
					<Building2 className="w-5 h-5 text-[#72c3ff]" />
         </div>
				<h3 className="text-base font-bold text-white mb-1">{t('title')}</h3>
				<p className="text-[#9cbdf5] text-xs">{t('subtitle')}</p>
				<div className="w-12 h-0.5 bg-gradient-to-r from-[#53b1ff] to-[#64e1ff] rounded-full mx-auto mt-2"></div>
       </div>

			<div className="flex justify-center mb-5">
				<div className="flex gap-2 p-1 rounded-2xl bg-[#0d1a2b]/70 border border-[#1a345d]/60 shadow-[inset_0_0_0_1px_rgba(100,225,255,0.05)]">
           <button
             onClick={() => setActiveTab('vehicles')}
						className={`flex items-center gap-2 py-2.5 px-6 rounded-xl text-sm font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[#64e1ff]/50 ${
               activeTab === 'vehicles'
								? 'bg-gradient-to-r from-[#173b6d] to-[#12345f] text-white shadow-[0_8px_28px_-10px_rgba(0,135,255,0.55)] border border-[#2a5ea1]'
								: 'text-[#9cbdf5] hover:text-white hover:bg-[#0e223f]/60 border border-transparent'
             }`}
           >
						<Car className="w-4 h-4" />
             <span>{t('tabVehicles')}</span>
           </button>
           <button
             onClick={() => setActiveTab('interiors')}
						className={`flex items-center gap-2 py-2.5 px-6 rounded-xl text-sm font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[#64e1ff]/50 ${
               activeTab === 'interiors'
								? 'bg-gradient-to-r from-[#173b6d] to-[#12345f] text-white shadow-[0_8px_28px_-10px_rgba(0,135,255,0.55)] border border-[#2a5ea1]'
								: 'text-[#9cbdf5] hover:text-white hover:bg-[#0e223f]/60 border border-transparent'
             }`}
           >
						<Home className="w-4 h-4" />
             <span>{t('tabInteriors')}</span>
           </button>
         </div>
       </div>

       {activeTab === 'vehicles' ? (
         <>
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
						{vehicles.map((v) => (
							<VehicleCard key={v.id} v={v} onClick={() => setSelectedVehicle(v)} />
        ))}
      </div>
					<div className="mt-4 pt-3 border-t border-[#0f2545]/60">
         <div className="grid grid-cols-3 gap-3 text-center">
							<div className="rounded-xl p-3 border border-[#0f2545]/60 bg-[#0c1627]/60">
             <p className="text-xl font-bold text-white">{vehicles.length}</p>
								<p className="text-[#9cbdf5] text-xs">{t('total')}</p>
           </div>
							<div className="rounded-xl p-3 border border-[#0f2545]/60 bg-[#0c1627]/60">
								<p className="text-xl font-bold text-emerald-400">{vehicles.filter(v => (v.fuel || 0) > 60).length}</p>
								<p className="text-[#9cbdf5] text-xs">{t('ready')}</p>
           </div>
							<div className="rounded-xl p-3 border border-[#0f2545]/60 bg-[#0c1627]/60">
								<p className="text-xl font-bold text-orange-400">{vehicles.filter(v => (v.fuel || 0) <= 60).length}</p>
								<p className="text-[#9cbdf5] text-xs">{t('lowFuel')}</p>
           </div>
         </div>
       </div>

					{selectedVehicle && createPortal(
						<VehicleDetailModal vehicle={selectedVehicle} onClose={() => setSelectedVehicle(null)} />,
						document.body
					)}
        </>
      ) : (
				<PlayerInteriors characters={characters} />
      )}
    </div>
  )
}