"use client";

import { useCallback, useState } from "react";
import { Spinner, Alert, ArchiveButton, ConfirmDialog, Toast, EmptyState, Button } from "@/src/Components/UI";
import { CarFormModal,CarDetailPanel }      from "@/src/Components/car";
import { ArchivedCarsModal } from "@/src/Components/car/archive/Archivedcarsmodal";
import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
import { useCars, useCarMutations, useToast } from "@/src/hooks/useCars";
import { useCarMaintenanceMutations } from "@/src/hooks/UseCarsMaintanance";
import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
import type { Car, CreateCarPayload, UpdateCarPayload } from "@/src/types/car";
import type { CreateMaintenancePayload, UpdateMaintenancePayload } from "@/src/types/carMaintanance";
import Header from "@/src/Components/UI/Header";

// ── CarCard ───────────────────────────────────────────────────────────────────

function CarCard({
  car,
  onClick,
  onSendToMaintenance,
}: {
  car: Car;
  onClick: () => void;
  onSendToMaintenance: (car: Car) => void;
}) {
  const status = STATUS_MAP[car.currentStatus];
  const ins    = car.insuranceStatus ? INS_MAP[car.insuranceStatus] : null;
  const regWarn = isExpiringSoon(car.registrationExpiryDate);

  // Maintenance status can ONLY be set via this button's flow (POST
  // cars/:carId/maintenance flips it on the backend). Disable rather than
  // hide it once the car is already in maintenance or inactive, and explain why.
  const maintenanceDisabled = car.currentStatus === "InMaintenance" || car.currentStatus === "Inactive";
  const maintenanceDisabledReason =
    car.currentStatus === "InMaintenance"
      ? "المركبة في الصيانة بالفعل"
      : car.currentStatus === "Inactive"
        ? "لا يمكن إرسال مركبة غير نشطة للصيانة"
        : undefined;

  return (
    <article
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") onClick(); }}
      aria-label={`${car.manufacturer} ${car.model} — ${car.plateLetters} ${car.plateNumber}`}
      style={{
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--color-border)",
        background: "var(--color-surface)",
        overflow: "hidden",
        boxShadow: "var(--shadow-card)",
        cursor: "pointer",
        transition: "box-shadow 200ms, transform 200ms",
      }}
      onMouseEnter={e => {
        (e.currentTarget as HTMLElement).style.boxShadow = "0 8px 24px rgba(37,99,235,.12)";
        (e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
      }}
      onMouseLeave={e => {
        (e.currentTarget as HTMLElement).style.boxShadow = "var(--shadow-card)";
        (e.currentTarget as HTMLElement).style.transform = "translateY(0)";
      }}
    >
      {/* Colour accent bar by status */}
      <div style={{
        height: 4,
        background: status.dot,
        borderRadius: "var(--radius-xl) var(--radius-xl) 0 0",
      }} />

      <div style={{ padding: "1.25rem" }}>
        {/* Manufacturer + model */}
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
          <div>
            <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
              {car.manufacturer} {car.model}
            </p>
            <p style={{ fontSize: 12, color: "var(--color-text-muted)", marginTop: 2 }}>
              {car.year}{car.color ? ` · ${car.color}` : ""}
            </p>
          </div>
          {/* Status badge */}
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            borderRadius: "var(--radius-full)",
            border: `1px solid ${status.border}`,
            background: status.bg,
            padding: "0.2rem 0.625rem",
            fontSize: 11, fontWeight: 700, color: status.color,
            whiteSpace: "nowrap", flexShrink: 0,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: status.dot }} />
            {status.label}
          </span>
        </div>

        {/* Plate number */}
        <div style={{
          marginTop: "0.875rem",
          background: "var(--color-surface-muted)",
          border: "1px solid var(--color-border)",
          borderRadius: "var(--radius-md)",
          padding: "0.5rem 0.75rem",
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <span style={{ fontSize: 11, color: "var(--color-text-muted)", fontWeight: 600 }}>رقم اللوحة</span>
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 14, fontWeight: 700, letterSpacing: "0.1em",
            color: "var(--color-brand-700)",
          }}>
            {car.plateLetters} {car.plateNumber}
          </span>
        </div>

        {/* Key attributes grid */}
        <div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
          <div style={{ fontSize: 11 }}>
            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الفرع</span>
            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>
              {car.branch?.name ?? "—"}
            </span>
          </div>
          <div style={{ fontSize: 11 }}>
            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التأمين</span>
            <span style={{ color: ins?.color ?? "var(--color-text-muted)", marginTop: 2, display: "block", fontWeight: 600 }}>
              {ins?.label ?? "—"}
            </span>
          </div>
          <div style={{ fontSize: 11 }}>
            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>انتهاء الاستمارة</span>
            <span style={{ color: regWarn ? "#D97706" : "var(--color-text-secondary)", marginTop: 2, display: "block", fontWeight: regWarn ? 600 : 400 }}>
              {regWarn && "⚠ "}{fmtDateShort(car.registrationExpiryDate)}
            </span>
          </div>
          <div style={{ fontSize: 11 }}>
            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الطاقة</span>
            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>
              {car.capacity != null ? car.capacity : "—"}
            </span>
          </div>
        </div>

        {/* Send to Maintenance quick action — kept custom (amber accent isn't
            one of Button's variants: primary/secondary/ghost/danger). Same
            rationale as IconBtn: forcing it into an existing variant would
            misrepresent this as a routine action rather than the
            maintenance-triggering one it is. */}
        <button
          type="button"
          title={maintenanceDisabledReason}
          disabled={maintenanceDisabled}
          onClick={(e) => {
            e.stopPropagation();
            onSendToMaintenance(car);
          }}
          style={{
            marginTop: "0.875rem",
            width: "100%",
            height: 34,
            borderRadius: "var(--radius-md)",
            border: `1px solid ${maintenanceDisabled ? "var(--color-border)" : "#FDE68A"}`,
            background: maintenanceDisabled ? "var(--color-surface-muted)" : "#FFFBEB",
            fontSize: 12, fontWeight: 700,
            color: maintenanceDisabled ? "var(--color-text-hint)" : "#854D0E",
            cursor: maintenanceDisabled ? "not-allowed" : "pointer",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
            fontFamily: "var(--font-sans)",
          }}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
          </svg>
          إرسال للصيانة
        </button>

        {/* Footer CTA hint */}
        <p style={{ marginTop: "0.75rem", fontSize: 11, color: "var(--color-brand-600)", fontWeight: 600, textAlign: "left" }}>
          اضغط لعرض التفاصيل ←
        </p>
      </div>
    </article>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function CarsPage() {
  const [search,  setSearch]  = useState("");
  const [page,    setPage]    = useState(1);

  // Modal state
  const [detailId,     setDetailId]     = useState<string | null>(null);
  const [formTarget,   setFormTarget]   = useState<Car | null | false>(false); // false = closed
  const [deleteTarget, setDeleteTarget] = useState<Car | null>(null);
  const [archiveOpen,  setArchiveOpen]  = useState(false);
  const [maintenanceTarget, setMaintenanceTarget] = useState<Car | null>(null);

  const { toast, notify } = useToast();

  const { cars, loading, error, total, pages, loadCars, removeCar, setError } =
    useCars(page, search);

  // Need a stable ref to the current edit target for the mutation hook
  const getEditTarget = useCallback(() =>
    formTarget instanceof Object && formTarget !== null ? formTarget as Car : null,
  [formTarget]);

  const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMutations({
    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadCars(); },
    onError:   (msg) =>   notify({ type: "error",   message: msg }),
    onDeleted: (id) => { removeCar(id); setDeleteTarget(null); },
    getEditTarget,
  });

  const handleDelete = async () => {
    if (!deleteTarget) return;
    await handleDeleteConfirm(deleteTarget);
  };

  // "Send to Maintenance" mutation — carId is bound to whichever car the
  // person just clicked. Errors surface inline inside the modal's own
  // apiError state (its default behavior), not through the outer toast —
  // onError is intentionally a no-op here.
  const { handleFormSubmit: handleMaintenanceSubmit } = useCarMaintenanceMutations({
    carId: maintenanceTarget?.id ?? "",
    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadCars(); },
    onError: () => {},
    onDeleted: () => {},
    getEditTarget: () => null,
  });

  // ── Render ──────────────────────────────────────────────────────────────────
  return (
    <>
      <Toast notification={toast} />

      {detailId && (
        <CarDetailPanel
          carId={detailId}
          onClose={() => setDetailId(null)}
          onEdit={(car) => { setDetailId(null); setFormTarget(car); }}
          onDelete={(car) => { setDetailId(null); setDeleteTarget(car); }}
        />
      )}

      {formTarget !== false && (
        <CarFormModal
          editCar={formTarget}
          branches={[]}
          onClose={() => setFormTarget(false)}
          onSubmit={(payload: CreateCarPayload | UpdateCarPayload, isNew: boolean) =>
            handleFormSubmit(payload, isNew).then((ok) => { if (ok) setFormTarget(false); return ok; })
          }
        />
      )}

      <ConfirmDialog
        open={!!deleteTarget}
        loading={deleting}
        onCancel={() => setDeleteTarget(null)}
        onConfirm={handleDelete}
        title="حذف المركبة"
        description={`هل أنت متأكد من حذف ${deleteTarget?.manufacturer ?? ""} ${deleteTarget?.model ?? ""} (${deleteTarget?.plateLetters ?? ""} ${deleteTarget?.plateNumber ?? ""})؟ لا يمكن التراجع عن هذا الإجراء.`}
      />

      {maintenanceTarget && (
        <CarMaintenanceFormModal
          editRecord={null}
          carLabel={`${maintenanceTarget.manufacturer} ${maintenanceTarget.model} — ${maintenanceTarget.plateLetters} ${maintenanceTarget.plateNumber}`}
          onClose={() => setMaintenanceTarget(null)}
          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
            handleMaintenanceSubmit(payload, isNew)
          }
        />
      )}

      {archiveOpen && (
        <ArchivedCarsModal onClose={() => setArchiveOpen(false)} />
      )}

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

        {/* ── Header ── */}
        <Header state={{ total }} search={search} setSearch={setSearch} module="" setModule={() => {}} setPage={setPage} title="المركبات" mainTitle="إدارة المركبات" name="مركبة" isAudit={false} onAdd={() => setFormTarget(null)}/>
        {/* Error alert */}
        {error && <Alert type="error" message={error} onClose={() => setError(null)} />}

        {/* ── Loading ── */}
        {loading ? (
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "5rem 0", color: "var(--color-text-muted)" }}>
            <Spinner size="md" className="text-blue-600" />
            <span style={{ fontSize: 14 }}>جارٍ تحميل المركبات…</span>
          </div>
        ) : cars.length === 0 ? (
          <EmptyState
            icon="🚗"
            title={search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
            description='اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.'
            action={!search && (
              <Button variant="primary" onClick={() => setFormTarget(null)}>
                إضافة مركبة
              </Button>
            )}
          />
        ) : (
          /* ── Card grid ── */
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
            gap: "1rem",
          }}>
            {cars.map((car) => (
              <CarCard
                key={car.id}
                car={car}
                onClick={() => setDetailId(car.id)}
                onSendToMaintenance={(c) => setMaintenanceTarget(c)}
              />
            ))}
          </div>
        )}

        {/* ── Pagination ── */}
        {pages > 1 && (
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            borderRadius: "var(--radius-xl)",
            border: "1px solid var(--color-border)",
            background: "var(--color-surface)",
            padding: "0.875rem 1.5rem",
            boxShadow: "var(--shadow-card)",
          }}>
            <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
              صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من{" "}
              <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
              {" · "}
              <span style={{ color: "var(--color-text-hint)" }}>{total} مركبة</span>
            </span>
            <div style={{ display: "flex", gap: "0.5rem" }}>
              {[
                { label: "← السابق", action: () => setPage(p => Math.max(1, p - 1)),    disabled: page === 1     },
                { label: "التالي →", action: () => setPage(p => Math.min(pages, p + 1)), disabled: page === pages },
              ].map((btn) => (
                <Button
                  key={btn.label}
                  variant="secondary"
                  size="sm"
                  onClick={btn.action}
                  disabled={btn.disabled}
                >
                  {btn.label}
                </Button>
              ))}
            </div>
          </div>
        )}
      </section>

      {/* Floating button to open the archive browser */}
      <ArchiveButton onClick={() => setArchiveOpen(true)} />
    </>
  );
}