"use client"; import { useCallback, useEffect, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import { Spinner } from "@/src/Components/UI"; import { DriverFormModal } from "@/src/Components/Driver/DriverFormModal"; import { DriverDeleteModal } from "@/src/Components/Driver/DriverDeleteModal"; import { DriverReportPanel } from "@/src/Components/Driver_Report/driverReport"; import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver"; import { DRIVER_STATUS_MAP, DRIVER_CARD_TYPE_MAP, NATIONAL_ID_TYPE_MAP } from "@/src/types/driver"; import { PhotoCard } from "@/src/Components/Driver/DriverPhotos"; import { driverService } from "@/src/services"; import { getStoredToken } from "@/src/lib/auth"; // ── 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}
); } // ── 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); // Reset avatar error when photo changes after an update useEffect(() => { queueMicrotask(() => setAvatarError(false)); }, [driver?.photoUrl]); // Toast shown after edit/delete actions on this page const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null); const [editOpen, setEditOpen] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); const [deleting, setDeleting] = useState(false); const showToast = useCallback((type: "success" | "error", message: string) => { setToast({ type, message }); setTimeout(() => setToast(null), 4000); }, []); // ── 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(() => { queueMicrotask(loadDriver); }, [loadDriver]); // ── Edit submit ─────────────────────────────────────────────────────────── const handleEditSubmit = useCallback( async (payload: CreateDriverPayload | UpdateDriverPayload): Promise => { if (!driver) return false; try { const token = getStoredToken(); const typedPayload = payload as UpdateDriverPayload & { photo?: File; nationalPhoto?: File; driverCardPhoto?: File; }; const hasFiles = typedPayload.photo || typedPayload.nationalPhoto || typedPayload.driverCardPhoto; if (hasFiles) { // Use multipart — JSON.stringify converts File to {} which fails validation await driverService.updateWithImages(driver.id, typedPayload, token); } else { await driverService.update(driver.id, typedPayload, token); } // Re-fetch to reflect updated status, name, photos, etc. await loadDriver(); showToast("success", "تم تحديث بيانات السائق بنجاح."); return true; } catch (err) { const message = err instanceof Error ? err.message : "تعذّر تحديث بيانات السائق."; showToast("error", message); return false; } }, [driver, loadDriver, showToast], ); // ── 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 (err) { const message = err instanceof Error ? err.message : "تعذّر حذف السائق."; showToast("error", message); setDeleting(false); } }, [driver, router, showToast]); 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 ( <>
{/* ── Toast notification ── */} {toast && (
{toast.type === "success" ? "✓ " : "⚠ "}{toast.message}
)} {/* ── Page header ── */}
{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} )}
{/* ── Content grid ── */}
{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)}
); })}
)}
{editOpen && ( setEditOpen(false)} onSubmit={handleEditSubmit} /> )} {deleteOpen && ( setDeleteOpen(false)} onConfirm={handleConfirmDelete} /> )} ); }