'use client'; import { useState, useEffect } from 'react'; import Link from 'next/link'; import LiveMap from './LiveMap'; import StopsTimeline from './StopsTimeline'; import StopPassengersSheet from './StopPassengersSheet'; const stopsPassengers: Record = { 0: [ { id: 1, name: 'سارة أحمد العتيبي', phone: '0501234567', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20smiling%20portrait%20hijab%20neutral%20background%20professional%20photo&width=80&height=80&seq=pax01&orientation=squarish', status: 'pending' }, { id: 2, name: 'نورة محمد الشمري', phone: '0509876543', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20portrait%20hijab%20soft%20background%20professional%20photo&width=80&height=80&seq=pax02&orientation=squarish', status: 'pending' }, { id: 3, name: 'ريم عبدالله القحطاني', phone: '0551122334', avatar: 'https://readdy.ai/api/search-image?query=young%20female%20student%20smiling%20portrait%20hijab%20light%20background&width=80&height=80&seq=pax03&orientation=squarish', status: 'pending' }, ], 1: [ { id: 4, name: 'لمى خالد الدوسري', phone: '0561234567', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20portrait%20hijab%20clean%20background&width=80&height=80&seq=pax04&orientation=squarish', status: 'pending' }, { id: 5, name: 'هند سعد الزهراني', phone: '0571234567', avatar: 'https://readdy.ai/api/search-image?query=young%20female%20student%20smiling%20hijab%20portrait%20neutral%20background&width=80&height=80&seq=pax05&orientation=squarish', status: 'pending' }, { id: 6, name: 'منى فهد الحربي', phone: '0581234567', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20portrait%20soft%20light%20background%20hijab&width=80&height=80&seq=pax06&orientation=squarish', status: 'pending' }, { id: 7, name: 'دانة عمر المطيري', phone: '0591234567', avatar: 'https://readdy.ai/api/search-image?query=young%20female%20student%20portrait%20hijab%20white%20background%20professional&width=80&height=80&seq=pax07&orientation=squarish', status: 'pending' }, ], 2: [ { id: 8, name: 'غدير ناصر العنزي', phone: '0501112233', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20smiling%20portrait%20hijab%20light%20background&width=80&height=80&seq=pax08&orientation=squarish', status: 'pending' }, { id: 9, name: 'شهد يوسف البقمي', phone: '0502223344', avatar: 'https://readdy.ai/api/search-image?query=young%20female%20student%20portrait%20hijab%20neutral%20background%20professional%20photo&width=80&height=80&seq=pax09&orientation=squarish', status: 'pending' }, { id: 10, name: 'رهف علي السبيعي', phone: '0503334455', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20portrait%20soft%20background%20hijab%20smiling&width=80&height=80&seq=pax10&orientation=squarish', status: 'pending' }, ], 3: [ { id: 11, name: 'جواهر طلال الرشيدي', phone: '0504445566', avatar: 'https://readdy.ai/api/search-image?query=young%20female%20student%20portrait%20hijab%20clean%20white%20background&width=80&height=80&seq=pax11&orientation=squarish', status: 'pending' }, { id: 12, name: 'بسمة حمد الغامدي', phone: '0505556677', avatar: 'https://readdy.ai/api/search-image?query=young%20saudi%20female%20student%20smiling%20hijab%20portrait%20neutral%20background&width=80&height=80&seq=pax12&orientation=squarish', status: 'pending' }, ], }; const initialStops = [ { name: 'حي النزهة', time: '7:10 ص', status: 'passed' as const, passengers: 3 }, { name: 'حي الروضة', time: '7:20 ص', status: 'passed' as const, passengers: 4 }, { name: 'حي العليا', time: '7:30 ص', status: 'current' as const, passengers: 3 }, { name: 'حي الملز', time: '7:40 ص', status: 'upcoming' as const, passengers: 2 }, { name: 'جامعة الملك سعود', time: '8:00 ص', status: 'upcoming' as const, passengers: 2 }, ]; interface LiveTripClientProps { tripId: string; } export default function LiveTripClient({ tripId }: LiveTripClientProps) { const [stops, setStops] = useState(initialStops); const [seconds, setSeconds] = useState(0); const [speed, setSpeed] = useState(42); const [showEndConfirm, setShowEndConfirm] = useState(false); const [showPassedToast, setShowPassedToast] = useState(false); const [toastMsg, setToastMsg] = useState(''); const [activeSheetStopIndex, setActiveSheetStopIndex] = useState(null); const [confirmedStops, setConfirmedStops] = useState>(new Set([0, 1])); const currentStopIndex = stops.findIndex(s => s.status === 'current'); const totalPassengers = stops.reduce((a, s) => a + s.passengers, 0); const onBusPassengers = stops.filter(s => s.status === 'passed').reduce((a, s) => a + s.passengers, 0); const isLastStop = currentStopIndex === stops.length - 2; useEffect(() => { const timer = setInterval(() => setSeconds(s => s + 1), 1000); return () => clearInterval(timer); }, []); useEffect(() => { const speedTimer = setInterval(() => { setSpeed(35 + Math.floor(Math.random() * 20)); }, 5000); return () => clearInterval(speedTimer); }, []); const formatTime = (s: number) => { const h = Math.floor(s / 3600).toString().padStart(2, '0'); const m = Math.floor((s % 3600) / 60).toString().padStart(2, '0'); const sec = (s % 60).toString().padStart(2, '0'); return `${h}:${m}:${sec}`; }; const handleOpenSheet = (index: number) => { setActiveSheetStopIndex(index); }; const handleSheetConfirm = (results: { id: number; status: 'boarded' | 'absent' }[]) => { const stopIndex = activeSheetStopIndex!; const boardedCount = results.filter(r => r.status === 'boarded').length; setStops(prev => { const updated = [...prev]; updated[stopIndex] = { ...updated[stopIndex], passengers: boardedCount }; return updated; }); setConfirmedStops(prev => new Set([...prev, stopIndex])); setActiveSheetStopIndex(null); setToastMsg(`تم تسجيل ${boardedCount} راكبة من ${stops[stopIndex].name}`); setShowPassedToast(true); setTimeout(() => setShowPassedToast(false), 3000); }; const handleMarkPassed = (index: number) => { if (!confirmedStops.has(index)) { setActiveSheetStopIndex(index); return; } setStops(prev => { const updated = [...prev]; updated[index] = { ...updated[index], status: 'passed' }; if (index + 1 < updated.length) { updated[index + 1] = { ...updated[index + 1], status: 'current' }; } return updated; }); setToastMsg(`تم تسجيل المرور بـ ${stops[index].name}`); setShowPassedToast(true); setTimeout(() => setShowPassedToast(false), 2500); }; const nextStop = stops.find(s => s.status === 'current') || stops.find(s => s.status === 'upcoming'); return (
{showPassedToast && (
✓ {toastMsg}
)}
رحلة جارية 🟢
{formatTime(seconds)}

السرعة

{speed} كم/س

المحطة الحالية

{stops.find(s => s.status === 'current')?.name || '—'}

الوصول المتوقع

{nextStop?.time || '8:00 ص'}

= 0 ? currentStopIndex : 2} />

المحطة القادمة

{nextStop?.name || 'جامعة الملك سعود'}

{nextStop?.time || '8:00 ص'}
{onBusPassengers} من {totalPassengers} راكبة في الباص
{Math.round((onBusPassengers / totalPassengers) * 100)}%
{isLastStop && ( )} تأكيد التسليم
{showEndConfirm && (

إنهاء الرحلة؟

هل وصلتم إلى جامعة الملك سعود؟

نعم، إنهاء الرحلة
)} {activeSheetStopIndex !== null && stopsPassengers[activeSheetStopIndex] && ( setActiveSheetStopIndex(null)} /> )}
); }