'use client'; import { useState, useEffect, useCallback } from 'react'; import Link from 'next/link'; import { Skeleton } from 'primereact/skeleton'; import DashboardShell from '../../components/DashboardShell'; import { useApi } from '@/hooks/useApi'; import { useAuthStore } from '@/store/authStore'; import 'primereact/resources/themes/lara-light-blue/theme.css'; import 'primereact/resources/primereact.min.css'; // ─── Types ──────────────────────────────────────────────────────────────────── interface ApiTripBusType { id: number; name: string } interface ApiTripBusBrand { id: number; name: string } interface ApiTripBusModel { id: number; name: string } interface ApiTripBus { id: number; display_code: string; plate: string; plate_letters: string; plate_numbers: number; capacity: number; occupancy_percent: number; boarded_count: number; type: ApiTripBusType; brand?: ApiTripBusBrand; model?: ApiTripBusModel; } interface ApiTripCaptain { id: number; display_code: string; name: string; phone: string; image?: string; country_code: string; } interface ApiTripPath { id: number; description: string; } interface ApiTripStation { id: number; path_station_id: number; order_index: number; name: string; address: string; planned_arrival: string; actual_arrival: string | null; closed_at: string | null; status: 'pending' | 'open' | 'closed'; boarded_count: number; } interface ApiTripBoardingSummary { expected_subscribers: number; boarded_total: number; absent_total: number; pending_total: number; occupancy_percent: number; } interface ApiTripDetail { id: number; display_code: string; path_id: number; path: ApiTripPath; trip_date: string; status: string; trip_leg: 'go' | 'return'; shift_label: string; planned_start: string; planned_end: string; actual_start: string | null; actual_end: string | null; bus: ApiTripBus | null; captain: ApiTripCaptain | null; boarding_summary: ApiTripBoardingSummary | null; stations: ApiTripStation[]; } interface ApiTripDetailResponse { key: string; msg: string; data: ApiTripDetail; } // ─── Status config ──────────────────────────────────────────────────────────── const STATUS_CONFIG: Record = { in_progress: { label: 'جارية', color: '#7C3AED', bg: '#EDE9FE' }, completed: { label: 'مكتملة', color: '#059669', bg: '#DCFCE7' }, scheduled: { label: 'مجدولة', color: '#0891B2', bg: '#ECFEFF' }, cancelled: { label: 'ملغاة', color: '#EF4444', bg: '#FEE2E2' }, late: { label: 'متأخرة', color: '#D97706', bg: '#FEF3C7' }, ongoing: { label: 'جارية', color: '#7C3AED', bg: '#EDE9FE' }, }; const STATION_STATUS: Record = { closed: { label: 'مغلقة', color: '#059669', bg: '#DCFCE7' }, open: { label: 'مفتوحة', color: '#7C3AED', bg: '#EDE9FE' }, pending: { label: 'قادمة', color: '#94a3b8', bg: '#F1F5F9' }, }; // ─── Helpers ────────────────────────────────────────────────────────────────── function formatTime(iso: string | null): string { if (!iso) return '—'; try { return new Date(iso).toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit', hour12: true }); } catch { return iso; } } function formatDate(dateStr: string): string { try { return new Date(dateStr).toLocaleDateString('ar-SA', { weekday: 'long', day: 'numeric', month: 'long' }); } catch { return dateStr; } } function getStatus(status: string) { return STATUS_CONFIG[status] ?? { label: status, color: '#64748B', bg: '#F1F5F9' }; } // ─── Skeleton ───────────────────────────────────────────────────────────────── function DetailSkeleton() { return ( <> {/* Header Card */}
{/* Stats Row */}
{[1,2,3,4].map(i => (
))}
{/* Body */}
{[1,2,3].map(i => (
))}
{[1,2,3].map(i => (
))}
); } // ─── Main Component ─────────────────────────────────────────────────────────── export default function TripDetailsClient({ tripId }: { tripId: string }) { const [activeTab, setActiveTab] = useState<'stops' | 'passengers'>('stops'); const [trip, setTrip] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const hasHydrated = useAuthStore((s) => s._hasHydrated); const token = useAuthStore((s) => s.token); const { request } = useApi(); const fetchTrip = useCallback(async () => { setLoading(true); setError(null); const res = await request(`trips/${tripId}`); if (res?.data) { setTrip(res.data); } else { setError('تعذّر تحميل بيانات الرحلة'); } setLoading(false); }, [request, tripId]); useEffect(() => { if (!hasHydrated || !token) return; void fetchTrip(); }, [hasHydrated, token, fetchTrip]); const sc = trip ? getStatus(trip.status) : { label: '', color: '#64748B', bg: '#F1F5F9' }; const summary = trip?.boarding_summary; const stations = trip?.stations ?? []; return ( {/* Back */}
{/* Loading */} {loading && } {/* Error */} {!loading && error && (

{error}

)} {/* Content */} {!loading && trip && ( <> {/* Header Card */}

{trip.path?.description ?? '—'}

{sc.label}
{trip.display_code} {formatDate(trip.trip_date)} {trip.shift_label} {trip.trip_leg === 'go' ? <>ذهاب : <>عودة}
{/* Stats Row */}
{[ { label: 'وقت الانطلاق المخطط', value: formatTime(trip.planned_start), icon: 'ri-arrow-right-up-line', color: '#1E3A8A', bg: '#EEF2FF' }, { label: 'وقت الانطلاق الفعلي', value: formatTime(trip.actual_start), icon: 'ri-map-pin-time-line', color: '#7C3AED', bg: '#EDE9FE' }, { label: 'الراكبات الحاضرات', value: `${summary?.boarded_total ?? 0} / ${summary?.expected_subscribers ?? 0}`, icon: 'ri-user-follow-fill', color: '#059669', bg: '#DCFCE7' }, { label: 'الغائبات', value: summary?.absent_total ?? 0, icon: 'ri-user-unfollow-fill', color: '#EF4444', bg: '#FEE2E2' }, ].map((s, i) => (

{s.value}

{s.label}

))}
{/* Left col: Driver + Bus */}
{/* Driver Card */}

السائق

{trip.captain ? ( <>
{trip.captain.image ? ( {trip.captain.name} ) : (
{trip.captain.name.charAt(0)}
)}

{trip.captain.name}

{trip.captain.country_code} {trip.captain.phone}

{trip.captain.display_code}

) : (

لم يُحدد سائق

)}
{/* Bus Card */}

الحافلة

{trip.bus ? (
{[ { label: 'رقم الحافلة', value: trip.bus.display_code }, { label: 'رقم اللوحة', value: trip.bus.plate }, { label: 'النوع', value: trip.bus.type?.name ?? '—' }, { label: 'الماركة', value: trip.bus.brand?.name ?? '—' }, { label: 'الموديل', value: trip.bus.model?.name ?? '—' }, { label: 'السعة', value: `${trip.bus.capacity} راكبة` }, ].map((item, i) => (
{item.label} {item.value}
))}
نسبة الامتلاء {Math.round(trip.bus.occupancy_percent ?? 0)}%
= 90 ? '#059669' : '#1E3A8A', }} />
) : (

لم تُحدد حافلة

)}
{/* Right: Tabs */}
{/* Tab Header */}
{[ { key: 'stops', label: 'المحطات', icon: 'ri-map-pin-2-line' }, { key: 'passengers', label: 'الراكبات', icon: 'ri-group-line' }, ].map(tab => ( ))}
{/* Stops Tab */} {activeTab === 'stops' && (
{stations.length === 0 ? (

لا توجد محطات

) : (
{stations.map((station, i) => { const ssc = STATION_STATUS[station.status] ?? { label: station.status, color: '#64748B', bg: '#F1F5F9' }; const isFirst = i === 0; const isLast = i === stations.length - 1; return (
{/* Timeline */}
{!isLast && (
)}
{/* Content */}

{station.name}

{station.address}

{isFirst ? 'نقطة الانطلاق' : isLast ? 'نقطة الوصول' : `محطة ${i}`}

{ssc.label}
{station.boarded_count} راكبة

الوقت المخطط

{formatTime(station.planned_arrival)}

الوصول الفعلي

{formatTime(station.actual_arrival)}
); })}
)}
)} {/* Passengers Tab — boarding summary */} {activeTab === 'passengers' && (

إجمالي: {summary?.expected_subscribers ?? 0} راكبة

حاضرة ({summary?.boarded_total ?? 0})
غائبة ({summary?.absent_total ?? 0}) {(summary?.pending_total ?? 0) > 0 && (
قيد الانتظار ({summary?.pending_total}) )}
{/* Summary cards per station */}
{stations.map((station) => { const ssc = STATION_STATUS[station.status] ?? { label: station.status, color: '#64748B', bg: '#F1F5F9' }; return (
{station.name}
{ssc.label}

{station.address}

{station.boarded_count}

ركبوا

{formatTime(station.planned_arrival)}

مخطط

{formatTime(station.actual_arrival)}

فعلي

); })}
)}
)} ); }