"use client";

import { useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { ConfirmDialog, Spinner, Button, Toast } from "@/src/Components/UI";
import { DriverFormModal , PhotoCard } from "@/src/Components/Driver";
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 { driverService } from "@/src/services";
import { getStoredToken } from "@/src/lib/auth";

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;
}

function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{
      borderRadius: "var(--radius-xl)",
      border: "1px solid var(--color-border)",
      background: "var(--color-surface)",
      overflow: "hidden",
      boxShadow: "var(--shadow-card)",
    }}>
      <div style={{
        padding: "0.875rem 1.5rem",
        borderBottom: "1px solid var(--color-border)",
        background: "var(--color-surface-muted)",
      }}>
        <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: 0 }}>
          {title}
        </p>
      </div>
      <div style={{ padding: "1rem 1.5rem" }}>{children}</div>
    </div>
  );
}

function DetailRow({ label, value, mono = false, warn = false }: {
  label: string; value: string; mono?: boolean; warn?: boolean;
}) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline",
      padding: "0.55rem 0", borderBottom: "1px solid var(--color-border)",
    }}>
      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
      <span style={{
        fontSize: 13,
        fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
        color: warn ? "#D97706" : "var(--color-text-primary)",
        fontWeight: warn ? 600 : 400,
        maxWidth: "60%", textAlign: "left", wordBreak: "break-word",
      }}>
        {warn && value !== "—" ? "⚠ " : ""}{value}
      </span>
    </div>
  );
}

export default function DriverDetailPage() {
  const params   = useParams();
  const router   = useRouter();
  const driverId = params?.driverId as string;

  const [driver, setDriver]           = useState<Driver | null>(null);
  const [loading, setLoading]         = useState(true);
  const [error, setError]             = useState<string | null>(null);
  const [avatarError, setAvatarError] = useState(false);
  useEffect(() => {
    queueMicrotask(() => setAvatarError(false));
  }, [driver?.photoUrl]);
  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);
  }, []);

  const loadDriver = useCallback(async () => {
    if (!driverId) return;
    setLoading(true);
    setError(null);
    try {
      const token = getStoredToken();
      const data = await driverService.getById(driverId, token);
      setDriver(data);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.");
    } finally {
      setLoading(false);
    }
  }, [driverId]);

  useEffect(() => { queueMicrotask(loadDriver); }, [loadDriver]);

  const handleEditSubmit = useCallback(
    async (payload: CreateDriverPayload | UpdateDriverPayload): Promise<boolean> => {
      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) {
          await driverService.updateWithImages(driver.id, typedPayload, token);
        } else {
          await driverService.update(driver.id, typedPayload, token);
        }

        await loadDriver();
        showToast("success", "تم تحديث بيانات السائق بنجاح.");
        return true;
      } catch (err) {
        const message = err instanceof Error ? err.message : "تعذّر تحديث بيانات السائق.";
        showToast("error", message);
        return false;
      }
    },
    [driver, loadDriver, showToast],
  );

  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;

  if (loading) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "6rem 0", color: "var(--color-text-muted)" }}>
        <Spinner size="sm" className="text-blue-600" />
        <span style={{ fontSize: 14 }}>جارٍ التحميل…</span>
      </div>
    );
  }

  if (error || !driver) {
    return (
      <div style={{ maxWidth: 480, margin: "4rem auto", borderRadius: "var(--radius-xl)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "1.5rem", textAlign: "center" }}>
        <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>⚠ {error ?? "السائق غير موجود"}</p>
        <Button variant="secondary" size="sm" onClick={() => router.back()} className="mt-4">
          ← رجوع
        </Button>
      </div>
    );
  }

  return (
    <>
      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>

        <Toast notification={toast} onDismiss={() => setToast(null)} />

        <header style={{
          borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
          background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
        }}>
          <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 !px-0">
            <i className="ti ti-arrow-left" style={{ fontSize: 14 }} aria-hidden="true" />
            العودة إلى قائمة السائقين
          </Button>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <div style={{
                width: 72, height: 72, borderRadius: "50%", overflow: "hidden", flexShrink: 0,
                border: "2px solid var(--color-brand-200)", background: "var(--color-surface-muted)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                {driver.photoUrl && !avatarError ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={driver.photoUrl} alt={driver.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} onError={() => setAvatarError(true)} />
                ) : (
                  <span style={{ fontSize: 28, fontWeight: 700, color: "var(--color-brand-600)" }}>{driver.name.charAt(0)}</span>
                )}
              </div>

              <div>
                <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>ملف السائق</p>
                <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>{driver.name}</h1>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
                  {driver.userName && (
                    <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>@{driver.userName}</span>
                  )}
                  <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>{driver.phone}</span>
                  {statusConfig && (
                    <span style={{
                      borderRadius: "var(--radius-full)", border: `1px solid ${statusConfig.border}`,
                      background: statusConfig.bg, padding: "0.2rem 0.625rem",
                      fontSize: 11, fontWeight: 700, color: statusConfig.color,
                      display: "inline-flex", alignItems: "center", gap: 5,
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig.dot, flexShrink: 0 }} />
                      {statusConfig.label}
                    </span>
                  )}
                </div>
              </div>
            </div>

            <div style={{ display: "flex", gap: "0.75rem" }}>
              <Button variant="danger" onClick={() => setDeleteOpen(true)}>
                حذف السائق
              </Button>
              <Button variant="primary" onClick={() => setEditOpen(true)}>
                <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
                تعديل السائق
              </Button>
            </div>
          </div>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
          <SectionCard title="البيانات الشخصية">
            <DetailRow label="الاسم الكامل"     value={driver.name} />
            <DetailRow label="رقم الجوال"        value={driver.phone} mono />
            <DetailRow label="البريد الإلكتروني" value={driver.email ?? "—"} />
            <DetailRow label="العنوان"           value={driver.address ?? "—"} />
            <DetailRow label="الجنسية"           value={driver.nationality ?? "—"} />
            <DetailRow label="الفرع"             value={driver.branch?.name ?? "—"} />
            <DetailRow label="نوع السائق"        value={driver.driverType ?? "—"} />
          </SectionCard>

          <SectionCard title="الهوية والتأمينات">
            <DetailRow label="نوع الهوية" value={driver.nationalIdType ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType] : "—"} />
            <DetailRow label="رقم الهوية" value={driver.nationalId ?? "—"} mono />
            <DetailRow label="انتهاء الهوية" value={fmtDate(driver.nationalIdExpiry)} warn={isExpiringSoon(driver.nationalIdExpiry)} />
            <DetailRow label="رقم GOSI" value={driver.gosiNumber ?? "—"} mono />
          </SectionCard>

          <SectionCard title="بيانات رخصة القيادة">
            <DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
            <DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
            <DetailRow label="انتهاء الرخصة" value={fmtDate(driver.licenseExpiry)} warn={isExpiringSoon(driver.licenseExpiry)} />
          </SectionCard>

          <SectionCard title="بطاقة السائق">
            <DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
            <DetailRow label="نوع البطاقة" value={driver.driverCardType ? DRIVER_CARD_TYPE_MAP[driver.driverCardType] : "—"} />
            <DetailRow label="انتهاء البطاقة" value={fmtDate(driver.driverCardExpiry)} warn={isExpiringSoon(driver.driverCardExpiry)} />
          </SectionCard>

          <SectionCard title="معلومات النظام">
            <DetailRow label="اسم المستخدم"  value={driver.userName ?? "—"} mono />
            <DetailRow label="تاريخ الإضافة" value={fmtDate(driver.createdAt)} />
            <DetailRow label="آخر تحديث"     value={fmtDate(driver.updatedAt)} />
          </SectionCard>

          {driver.statusHistory && driver.statusHistory.length > 0 && (
            <SectionCard title="سجل الحالات">
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {driver.statusHistory.map((h) => {
                  const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active;
                  return (
                    <div key={h.id} style={{
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                      borderRadius: "var(--radius-md)", border: `1px solid ${s.border}`,
                      background: s.bg, padding: "0.5rem 0.875rem",
                    }}>
                      <div>
                        <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>{s.label}</span>
                        {h.reason && <span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>— {h.reason}</span>}
                      </div>
                      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(h.createdAt)}</span>
                    </div>
                  );
                })}
              </div>
            </SectionCard>
          )}
        </div>

        <SectionCard title="الصور والمستندات">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.25rem" }}>
            <PhotoCard url={driver.photoUrl}           label="صورة السائق" />
            <PhotoCard url={driver.nationalPhotoUrl}   label="صورة الهوية" />
            <PhotoCard url={driver.driverCardPhotoUrl} label="صورة بطاقة السائق" />
          </div>
        </SectionCard>

        <div style={{
          borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
          background: "var(--color-surface)", boxShadow: "var(--shadow-card)", padding: "1.5rem",
        }}>
          <DriverReportPanel driverId={driver.id} />
        </div>
      </section>

      {editOpen && (
        <DriverFormModal
          editDriver={driver}
          branches={[]}
          onClose={() => setEditOpen(false)}
          onSubmit={handleEditSubmit}
        />
      )}

      <ConfirmDialog
        open={deleteOpen}
        loading={deleting}
        onCancel={() => setDeleteOpen(false)}
        onConfirm={handleConfirmDelete}
        title="حذف السائق"
        description={`هل أنت متأكد من حذف ${driver.name} (${driver.phone})؟ لا يمكن التراجع عن هذا الإجراء.`}
      />
    </>
  );
}