"use client";
// Components/Car/CarDetailPanel.tsx
// Slide-in panel showing full car details with action buttons.

import { useEffect, useState } from "react";
import { Spinner } from "../UI";
import { CarImageGallery } from "./CarImageGallery";
import { carService } from "../../services/car.service";
import { getStoredToken } from "../../lib/auth";
import type { Car, CarStatus, InsuranceStatus } from "../../types/car";

// ── Status config ─────────────────────────────────────────────────────────────
const STATUS_MAP: Record<CarStatus, { label: string; color: string; bg: string; border: string }> = {
  Active:        { label: "نشط",       color: "#166534", bg: "#DCFCE7", border: "#BBF7D0" },
  InMaintenance: { label: "صيانة",     color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A" },
  InTrip:        { label: "في رحلة",   color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE" },
  Inactive:      { label: "غير نشط",  color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0" },
};

const INS_MAP: Record<InsuranceStatus, { label: string; color: string }> = {
  Valid:       { label: "سارٍ",        color: "#16A34A" },
  Expired:     { label: "منتهي",       color: "#DC2626" },
  NotInsured:  { label: "غير مؤمَّن", color: "#D97706" },
};

// ── Helper: format date ───────────────────────────────────────────────────────
function fmtDate(iso?: string | null): string {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("ar-SA", {
    year: "numeric", month: "long", day: "numeric",
  });
}

/** Returns true if the date is within 90 days in the future (or already past) */
function isExpiringSoon(iso?: string | null): boolean {
  if (!iso) return false;
  const diff = new Date(iso).getTime() - Date.now();
  return diff <= 90 * 86_400_000;
}

// ── Props ─────────────────────────────────────────────────────────────────────
interface CarDetailPanelProps {
  carId: string;
  onClose: () => void;
  onEdit: (car: Car) => void;
  onDelete: (car: Car) => void;
}

// ── Row component ─────────────────────────────────────────────────────────────
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.6rem 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,
      }}>
        {warn && value !== "—" ? "⚠ " : ""}{value}
      </span>
    </div>
  );
}

// ── Component ─────────────────────────────────────────────────────────────────
export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) {
  const [car,     setCar]     = useState<Car | null>(null);
  const [loading, setLoading] = useState(true);
  const [error,   setError]   = useState<string | null>(null);
  const [gallery, setGallery] = useState(false);

  useEffect(() => {
    const token = getStoredToken();
    setLoading(true);
    setError(null);
    carService
      .getById(carId, token)
      .then(res => setCar((res as unknown as { data: Car }).data))
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, [carId]);

  useEffect(() => {
    const h = (e: KeyboardEvent) => { if (e.key === "Escape" && !gallery) onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [gallery, onClose]);

  // ── Render ───────────────────────────────────────────────────────────────────
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position: "fixed", inset: 0, zIndex: 40,
          background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)",
        }}
      />

      {/* Panel */}
      <aside
        aria-label="تفاصيل المركبة"
        style={{
          position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 50,
          width: "min(480px, 100vw)",
          background: "var(--color-surface)",
          borderRight: "1px solid var(--color-border)",
          display: "flex", flexDirection: "column",
          boxShadow: "8px 0 40px rgba(0,0,0,.18)",
          overflowY: "hidden",
        }}
      >
        {/* Header */}
        <div style={{
          padding: "1.25rem 1.5rem",
          borderBottom: "1px solid var(--color-border)",
          background: "var(--color-surface-muted)",
          flexShrink: 0,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
                تفاصيل المركبة
              </p>
              {car && (
                <h2 style={{ fontSize: 18, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
                  {car.manufacturer} {car.model} {car.year}
                </h2>
              )}
            </div>
            <button type="button" onClick={onClose} aria-label="إغلاق"
              style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              ×
            </button>
          </div>
        </div>

        {/* Content */}
        <div style={{ flex: 1, overflowY: "auto", padding: "1.5rem" }}>
          {loading && (
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
              <Spinner size="sm" className="text-blue-600" />
              <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
            </div>
          )}

          {error && (
            <div style={{ borderRadius: "var(--radius-md)", background: "#FEF2F2", border: "1px solid #FECACA", padding: "0.75rem 1rem", fontSize: 13, color: "#DC2626" }}>
              ⚠ {error}
            </div>
          )}

          {car && !loading && (
            <>
              {/* Status badges */}
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
                {(() => {
                  const s = STATUS_MAP[car.currentStatus];
                  return (
                    <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: s.color }}>
                      {s.label}
                    </span>
                  );
                })()}
                {car.insuranceStatus && (() => {
                  const ins = INS_MAP[car.insuranceStatus!];
                  return (
                    <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${ins.color}33`, background: `${ins.color}11`, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: ins.color }}>
                      تأمين: {ins.label}
                    </span>
                  );
                })()}
                {!car.isActive && (
                  <span style={{ borderRadius: "var(--radius-full)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: "#DC2626" }}>
                    محذوف
                  </span>
                )}
              </div>

              {/* Section: Basic Info */}
              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, marginBottom: "0.5rem" }}>
                بيانات أساسية
              </p>
              <DetailRow label="الشركة المصنعة" value={car.manufacturer} />
              <DetailRow label="الموديل" value={car.model} />
              <DetailRow label="سنة الصنع" value={String(car.year)} />
              <DetailRow label="اللون" value={car.color ?? "—"} />
              <DetailRow label="الفرع" value={car.branch?.name ?? "—"} />

              {/* Section: Plate */}
              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                بيانات اللوحة
              </p>
              <DetailRow label="رقم اللوحة"   value={`${car.plateLetters} ${car.plateNumber}`} mono />
              <DetailRow label="نوع اللوحة"   value={car.plateType ?? "—"} />
              <DetailRow label="رقم الاستمارة" value={car.registrationNumber ?? "—"} mono />
              <DetailRow label="رقم الهيكل (VIN)" value={car.vinNumber ?? "—"} mono />

              {/* Section: Regulatory */}
              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                الترخيص والتأمين
              </p>
              <DetailRow label="انتهاء الاستمارة"    value={fmtDate(car.registrationExpiryDate)} warn={isExpiringSoon(car.registrationExpiryDate)} />
              <DetailRow label="انتهاء التأمين"       value={fmtDate(car.insuranceExpiryDate)}    warn={isExpiringSoon(car.insuranceExpiryDate)} />
              <DetailRow label="انتهاء الفحص الدوري" value={fmtDate(car.inspectionExpiryDate)}   warn={isExpiringSoon(car.inspectionExpiryDate)} />
              <DetailRow label="رقم بطاقة التشغيل"   value={car.operationCardNumber ?? "—"} mono />
              <DetailRow label="انتهاء بطاقة التشغيل" value={fmtDate(car.operationCardExpiry)} />

              {/* Section: Operational */}
              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                بيانات تشغيلية
              </p>
              <DetailRow label="رقم GPS"             value={car.gpsDeviceId ?? "—"} mono />
              <DetailRow label="الطاقة الاستيعابية"  value={car.capacity != null ? String(car.capacity) : "—"} />
              <DetailRow label="الوزن (كجم)"         value={car.weight != null ? String(car.weight) : "—"} />
              <DetailRow label="حالة الحجز"          value={car.currentImpoundStatus ?? "بدون"} />
              <DetailRow label="تاريخ الإضافة"       value={fmtDate(car.createdAt)} />
              <DetailRow label="آخر تحديث"           value={fmtDate(car.updatedAt)} />

              {/* Status History */}
              {car.statusHistory && car.statusHistory.length > 0 && (
                <>
                  <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.75rem" }}>
                    سجل الحالات
                  </p>
                  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    {car.statusHistory.slice(0, 6).map(h => {
                      const s = STATUS_MAP[h.carStatus] ?? 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",
                        }}>
                          <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>{s.label}</span>
                          <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
                            {fmtDate(h.createdAt)}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </>
              )}
            </>
          )}
        </div>

        {/* Footer actions */}
        {car && (
          <div style={{
            padding: "1rem 1.5rem",
            borderTop: "1px solid var(--color-border)",
            background: "var(--color-surface-muted)",
            display: "flex", gap: "0.75rem",
            flexShrink: 0,
          }}>
            {/* Gallery */}
            <button type="button" onClick={() => setGallery(true)}
              style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <circle cx="8.5" cy="8.5" r="1.5" />
                <polyline points="21 15 16 10 5 21" />
              </svg>
              الصور
            </button>

            {/* Edit */}
            <button type="button" onClick={() => onEdit(car)}
              style={{ flex: 2, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
              </svg>
              تعديل
            </button>

            {/* Delete */}
            <button type="button" onClick={() => onDelete(car)}
              style={{ height: 40, padding: "0 1rem", borderRadius: "var(--radius-md)", border: "1px solid #FECACA", background: "#FEF2F2", fontSize: 13, fontWeight: 700, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
              حذف
            </button>
          </div>
        )}
      </aside>

      {/* Image gallery overlay */}
      {gallery && car && (
        <CarImageGallery car={car} onClose={() => setGallery(false)} />
      )}
    </>
  );
}