"use client"; import { useCallback, useEffect, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import { Spinner } from "@/Components/UI"; import { DriverFormModal } from "@/Components/Driver/DriverFormModal"; import { DriverDeleteModal } from "@/Components/Driver/DriverDeleteModal"; import { DriverReportPanel } from "@/Components/Driver_Report/driverReport"; import { driverService } from "@/services"; import { getStoredToken } from "@/lib/auth"; import type { Driver, CreateDriverPayload, UpdateDriverPayload, } from "@/types/driver"; import { DRIVER_STATUS_MAP, DRIVER_CARD_TYPE_MAP, NATIONAL_ID_TYPE_MAP, } from "@/types/driver"; // ── Helpers ─────────────────────────────────────────────────────────────────── function fmtDate(iso?: string | null): string { if (!iso) return "—"; return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric", }); } function isExpiringSoon(iso?: string | null): boolean { if (!iso) return false; return (new Date(iso).getTime() - Date.now()) <= 90 * 86_400_000; } // ── Sub-components ──────────────────────────────────────────────────────────── function SectionCard({ title, children, }: { title: string; children: React.ReactNode; }) { return (

{title}

{children}
); } function DetailRow({ label, value, mono = false, warn = false, }: { label: string; value: string; mono?: boolean; warn?: boolean; }) { return (
{label} {warn && value !== "—" ? "⚠ " : ""} {value}
); } function PhotoCard({ url, label }: { url?: string | null; label: string }) { const [imgError, setImgError] = useState(false); return (
{label}
{url && !imgError ? ( // eslint-disable-next-line @next/next/no-img-element {label} setImgError(true)} /> ) : ( )}
{url && !imgError && ( عرض الصورة ↗ )}
); } // ── Page ────────────────────────────────────────────────────────────────────── export default function DriverDetailPage() { const params = useParams(); const router = useRouter(); const driverId = params?.driverId as string; const [driver, setDriver] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [avatarError, setAvatarError] = useState(false); // ── Modal state ─────────────────────────────────────────────────────────── const [editOpen, setEditOpen] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); const [deleting, setDeleting] = useState(false); // ── Load driver ─────────────────────────────────────────────────────────── const loadDriver = useCallback(async () => { if (!driverId) return; setLoading(true); setError(null); try { const token = getStoredToken(); const res = await driverService.getById(driverId, token); setDriver((res as unknown as { data: Driver }).data); } catch (err: unknown) { setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق."); } finally { setLoading(false); } }, [driverId]); useEffect(() => { loadDriver(); }, [loadDriver]); // ── Edit submit ─────────────────────────────────────────────────────────── const handleEditSubmit = useCallback( async ( payload: CreateDriverPayload | UpdateDriverPayload, _isNew: boolean, ): Promise => { if (!driver) return false; try { const token = getStoredToken(); await driverService.update(driver.id, payload as UpdateDriverPayload, token); await loadDriver(); return true; } catch { return false; } }, [driver, loadDriver], ); // ── Delete confirm ──────────────────────────────────────────────────────── const handleConfirmDelete = useCallback(async () => { if (!driver) return; setDeleting(true); try { const token = getStoredToken(); await driverService.delete(driver.id, token); router.push("/dashboard/drivers"); } catch { setDeleting(false); } }, [driver, router]); // ── Status config ───────────────────────────────────────────────────────── const statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null; // ── Render: Loading ─────────────────────────────────────────────────────── if (loading) { return (
جارٍ التحميل…
); } // ── Render: Error ───────────────────────────────────────────────────────── if (error || !driver) { return (

⚠ {error ?? "السائق غير موجود"}

); } // ── Render: Driver detail ───────────────────────────────────────────────── return ( <>
{/* ── Page header ── */}
{/* Back link */}
{/* Avatar + name */}
{driver.photoUrl && !avatarError ? ( // eslint-disable-next-line @next/next/no-img-element {driver.name} setAvatarError(true)} /> ) : ( {driver.name.charAt(0)} )}

ملف السائق

{driver.name}

{driver.userName && ( @{driver.userName} )} {driver.phone} {statusConfig && ( {statusConfig.label} )}
{/* Actions */}
{/* ── Content grid ── */}
{/* Personal Info */} {/* ID & GOSI */} {/* License */} {/* Driver Card */} {/* System Info */} {/* Status History */} {driver.statusHistory && driver.statusHistory.length > 0 && (
{driver.statusHistory.map((h) => { const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active; return (
{s.label} {h.reason && ( — {h.reason} )}
{fmtDate(h.createdAt)}
); })}
)}
{/* ── Photos section (full width) ── */}
{/* ── Report section (full width) ── */}
{/* ── Edit modal ── */} {editOpen && ( setEditOpen(false)} onSubmit={handleEditSubmit} /> )} {/* ── Delete modal ── */} {deleteOpen && ( setDeleteOpen(false)} onConfirm={handleConfirmDelete} /> )} ); }