"use client";

import Link from "next/link";
import Cropper, { type Area } from "react-easy-crop";
import {
  ClipboardEvent,
  FormEvent,
  KeyboardEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Bike,
  Camera,
  CalendarClock,
  CarFront,
  CheckCircle2,
  ChevronDown,
  Clock3,
  CreditCard,
  Download,
  Eye,
  Filter,
  Home,
  Loader2,
  LogOut,
  Mail,
  MapPin,
  PackageCheck,
  Pencil,
  Plus,
  ShieldCheck,
  Smartphone,
  Trash2,
  User,
  X,
} from "lucide-react";
import { apiBaseUrl, apiHeaders, apiPath } from "@/lib/api-url";
import { AddressLocationMap } from "@/components/AddressLocationMap";
import { routePath } from "@/lib/route-url";
import { uploadProfileImage } from "@/lib/storage";
import { getUserAuthToken, useUserAuth, type CustomerUser } from "@/lib/user-auth";

type AccountAddress = {
  id: number;
  type: string;
  label: string;
  houseNo: string | null;
  street: string | null;
  locality: string | null;
  landmark: string | null;
  address: string;
  city: string | null;
  state: string | null;
  pincode: string | null;
  latitude: number | null;
  longitude: number | null;
  isDefault: boolean;
};

type AddressDraft = {
  type: string;
  houseNo: string;
  street: string;
  locality: string;
  city: string;
  state: string;
  pincode: string;
  landmark: string;
  latitude: number | null;
  longitude: number | null;
};

type ReverseLocationResponse = {
  address?: Record<string, string | undefined>;
  displayName?: string | null;
  resolvedName?: string | null;
};

type AccountVehicle = {
  id: number;
  vehicleType: "car" | "bike";
  manufacturerName: string;
  manufacturerSlug?: string | null;
  modelName: string;
  modelSlug?: string | null;
  modelImage?: string | null;
  fuelType: string | null;
  engineCc?: number | null;
  registrationNumber: string | null;
  isDefault: boolean;
};

type AccountBooking = {
  id: number;
  vehicleType: string;
  service: string;
  preferredDate: string;
  preferredTime: string;
  address: string;
  status: string;
  createdAt: string;
};

type AccountOrder = {
  id: number;
  orderNumber: string;
  serviceSlug: string;
  packageId: number | null;
  packageType: string;
  packageName: string;
  estimatedDuration: string | null;
  vehicleType: "car" | "bike";
  manufacturerSlug: string;
  manufacturerName: string;
  modelId: number | null;
  modelSlug: string;
  modelName: string;
  fuelType: string | null;
  modelImage: string | null;
  engineCc: number | null;
  basePrice: number;
  discountPercentage: number;
  finalPrice: number;
  paymentMode: string;
  paymentStatus: string;
  razorpayOrderId: string | null;
  razorpayPaymentId: string | null;
  status: string;
  address: AccountAddress;
  orderDetails?: {
    features?: string[];
    highlightedFeatures?: string[];
    source?: string;
  } | null;
  createdAt: string;
  updatedAt: string | null;
  reorderUrl: string;
};

type AccountAmcPackage = {
  id: number;
  packageName: string;
  vehicleType: string;
  vehicleName: string | null;
  startsAt: string | null;
  expiresAt: string | null;
  status: string;
  notes: string | null;
};

type AccountSummary = {
  user: CustomerUser;
  bookings: AccountBooking[];
  orders: AccountOrder[];
  addresses: AccountAddress[];
  vehicles: AccountVehicle[];
  amcPackages: AccountAmcPackage[];
};

type AccountOrderDeepLink = {
  orderNumber?: string;
  orderId?: number;
};

type RazorpayPaymentPayload = {
  provider: "razorpay";
  keyId: string;
  orderId: string;
  amount: number;
  currency: string;
};

type RazorpayRetryResponse = {
  order: AccountOrder;
  payment: RazorpayPaymentPayload;
};

type RazorpayVerifyResponse = {
  order: AccountOrder;
};

type RazorpaySuccessResponse = {
  razorpay_order_id: string;
  razorpay_payment_id: string;
  razorpay_signature: string;
};

type RazorpayCheckoutOptions = {
  key: string;
  amount: number;
  currency: string;
  name: string;
  description: string;
  order_id: string;
  prefill?: {
    name?: string;
    email?: string;
    contact?: string;
  };
  notes?: Record<string, string>;
  theme?: {
    color?: string;
  };
  handler: (response: RazorpaySuccessResponse) => void;
  modal?: {
    ondismiss?: () => void;
  };
};

declare global {
  interface Window {
    Razorpay?: new (options: RazorpayCheckoutOptions) => {
      open: () => void;
      on: (
        event: string,
        handler: (response: { error?: { description?: string } }) => void,
      ) => void;
    };
  }
}

type AccountSession = {
  id: number;
  userId: number;
  fcmToken: string | null;
  deviceName: string | null;
  userAgent: string | null;
  ipAddress: string | null;
  expiresAt: string | null;
  revokedAt: string | null;
  lastUsedAt: string;
  createdAt: string;
};

type AccountSessionsResponse = {
  currentSessionId: number;
  sessions: AccountSession[];
};

type AccountTab = "profile" | "sessions" | "orders" | "addresses" | "vehicles" | "amc";
type ContactType = "email" | "mobile";
type ContactVerificationState = {
  type: ContactType;
  value: string;
};

const tabs: Array<{
  id: AccountTab;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
}> = [
  { id: "profile", label: "Profile", icon: User },
  { id: "sessions", label: "Sessions", icon: Smartphone },
  { id: "orders", label: "Orders", icon: CalendarClock },
  { id: "addresses", label: "Addresses", icon: MapPin },
  { id: "vehicles", label: "Vehicles", icon: CarFront },
  { id: "amc", label: "AMC", icon: ShieldCheck },
];

const emptyAddressDraft: AddressDraft = {
  type: "",
  houseNo: "",
  street: "",
  locality: "",
  city: "",
  state: "",
  pincode: "",
  landmark: "",
  latitude: null,
  longitude: null,
};

async function accountRequest<T>(path: string, init: RequestInit = {}) {
  const token = getUserAuthToken();

  if (!token) {
    throw new Error("Login required");
  }

  const response = await fetch(`${apiBaseUrl}${apiPath(path)}`, {
    ...init,
    headers: apiHeaders({
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
      ...(init.headers ?? {}),
    }),
  });
  const data = (await response.json().catch(() => ({}))) as T & { error?: string };

  if (!response.ok) {
    throw new Error(data.error ?? "Request failed");
  }

  return data;
}

function formatDate(value: string | null) {
  if (!value) {
    return "-";
  }

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return new Intl.DateTimeFormat("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  }).format(date);
}

function formatDateTime(value: string | null) {
  if (!value) {
    return "-";
  }

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return new Intl.DateTimeFormat("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(date);
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
}

function loadRazorpayCheckoutScript() {
  if (typeof window === "undefined") {
    return Promise.resolve(false);
  }

  if (window.Razorpay) {
    return Promise.resolve(true);
  }

  return new Promise<boolean>((resolve) => {
    const existingScript = document.querySelector<HTMLScriptElement>(
      'script[src="https://checkout.razorpay.com/v1/checkout.js"]',
    );

    if (existingScript) {
      existingScript.addEventListener("load", () => resolve(true), { once: true });
      existingScript.addEventListener("error", () => resolve(false), { once: true });
      return;
    }

    const script = document.createElement("script");
    script.src = "https://checkout.razorpay.com/v1/checkout.js";
    script.async = true;
    script.onload = () => resolve(true);
    script.onerror = () => resolve(false);
    document.body.appendChild(script);
  });
}

function formatPaymentMode(value: string) {
  if (value === "cash_after_service") {
    return "Cash after service";
  }

  return formatDisplayText(value);
}

function formatDisplayText(value: string | null | undefined) {
  if (!value) {
    return "-";
  }

  return value
    .replace(/[_-]+/g, " ")
    .trim()
    .split(/\s+/)
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
}

function isElectricFuel(fuelType: string | null | undefined) {
  return fuelType?.trim().toLowerCase().includes("electric") ?? false;
}

function getVehicleDisplayName({
  manufacturerName,
  modelName,
}: {
  manufacturerName?: string | null;
  modelName: string;
}) {
  const cleanManufacturer = (manufacturerName ?? "").trim();
  const cleanModel = modelName.trim();

  if (!cleanManufacturer) {
    return cleanModel;
  }

  return cleanModel.toLowerCase().includes(cleanManufacturer.toLowerCase())
    ? cleanModel
    : `${cleanManufacturer} ${cleanModel}`;
}

function formatAccountAddressLine(address: AccountAddress | null | undefined) {
  if (!address) {
    return "";
  }

  return (
    [
      [address.houseNo, address.street].filter(Boolean).join(", "),
      address.locality,
      address.landmark,
      address.city,
      address.state,
      address.pincode,
    ]
      .filter(Boolean)
      .join(", ") || address.address
  );
}

function getSectorFromDisplayName(displayName: string | null | undefined) {
  const match = displayName?.match(/\bsector\s*[-\w]+/i);

  return match ? match[0].replace(/\s+/g, " ") : undefined;
}

function getDisplayNameParts(displayName: string | null | undefined) {
  return (
    displayName
      ?.split(",")
      .map((part) => part.trim())
      .filter(Boolean) ?? []
  );
}

function getBrowserName(userAgent: string | null | undefined) {
  const value = userAgent ?? "";

  if (/Edg\//i.test(value)) {
    return "Microsoft Edge";
  }

  if (/OPR\/|Opera/i.test(value)) {
    return "Opera";
  }

  if (/CriOS|Chrome\//i.test(value)) {
    return "Google Chrome";
  }

  if (/FxiOS|Firefox\//i.test(value)) {
    return "Mozilla Firefox";
  }

  if (/Safari\//i.test(value)) {
    return "Safari";
  }

  return "Unknown browser";
}

function getPlatformName(userAgent: string | null | undefined) {
  const value = userAgent ?? "";

  if (/Android/i.test(value)) {
    return "Android";
  }

  if (/iPhone|iPad|iPod/i.test(value)) {
    return "iOS";
  }

  if (/Windows/i.test(value)) {
    return "Windows";
  }

  if (/Mac OS X|Macintosh/i.test(value)) {
    return "macOS";
  }

  if (/Linux/i.test(value)) {
    return "Linux";
  }

  return "Unknown device";
}

function getSessionDisplay(session: AccountSession) {
  const deviceName = session.deviceName?.trim() ?? "";
  const isGenericBrowserName = /^(mobile|web)\s+browser$/i.test(deviceName);
  const platform = getPlatformName(session.userAgent);
  const browser = getBrowserName(session.userAgent);
  const isAppSession = Boolean(session.fcmToken) || Boolean(deviceName && !isGenericBrowserName);

  if (isAppSession) {
    return {
      title: deviceName || (platform !== "Unknown device" ? `${platform} app` : "App device"),
      subtitle: platform !== "Unknown device" ? platform : "Mobile app",
      source: "App",
    };
  }

  return {
    title: isGenericBrowserName ? browser : deviceName || browser,
    subtitle: platform,
    source: "Web",
  };
}

export default function AccountPage() {
  const { user, openAuthModal, logout, updateUser } = useUserAuth();
  const [hasMounted, setHasMounted] = useState(false);
  const [summary, setSummary] = useState<AccountSummary | null>(null);
  const [sessionsData, setSessionsData] = useState<AccountSessionsResponse | null>(null);
  const [activeTab, setActiveTab] = useState<AccountTab>("profile");
  const [orderDeepLink, setOrderDeepLink] = useState<AccountOrderDeepLink>({});
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingSessions, setIsLoadingSessions] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
  const [contactUpdateType, setContactUpdateType] = useState<ContactType | null>(null);
  const [contactVerification, setContactVerification] = useState<ContactVerificationState | null>(
    null,
  );
  const [errorMessage, setErrorMessage] = useState("");

  const loadAccount = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage("");

    try {
      const data = await accountRequest<AccountSummary>("/api/account/summary");
      setSummary(data);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load account");
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  useEffect(() => {
    const orderRouteMatch = window.location.pathname.match(/^\/account\/orders\/([^/?#]+)/);
    const params = new URLSearchParams(window.location.search);
    const tab = params.get("tab");
    const orderId = Number(params.get("orderId"));

    if (orderRouteMatch?.[1]) {
      setActiveTab("orders");
      setOrderDeepLink({ orderNumber: decodeURIComponent(orderRouteMatch[1]) });
      return;
    }

    if (tabs.some((item) => item.id === tab)) {
      setActiveTab(tab as AccountTab);
    }

    if (Number.isInteger(orderId) && orderId > 0) {
      setOrderDeepLink({ orderId });
    }
  }, []);

  useEffect(() => {
    if (!hasMounted) {
      return;
    }

    if (!user && !getUserAuthToken()) {
      setIsLoading(false);
      return;
    }

    loadAccount();
  }, [hasMounted, loadAccount, user]);

  const loadSessions = useCallback(async () => {
    setIsLoadingSessions(true);
    setErrorMessage("");

    try {
      const data = await accountRequest<AccountSessionsResponse>("/api/auth/sessions");
      setSessionsData(data);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load sessions");
    } finally {
      setIsLoadingSessions(false);
    }
  }, []);

  useEffect(() => {
    if (activeTab === "sessions" && getUserAuthToken()) {
      loadSessions();
    }
  }, [activeTab, loadSessions]);

  const counts = useMemo(
    () => ({
      orders: summary?.orders.length ?? 0,
      addresses: summary?.addresses.length ?? 0,
      vehicles: summary?.vehicles.length ?? 0,
      amc: summary?.amcPackages.length ?? 0,
    }),
    [summary],
  );

  async function saveAddress(event: FormEvent<HTMLFormElement>): Promise<boolean> {
    event.preventDefault();
    const form = event.currentTarget;
    setIsSaving(true);
    setErrorMessage("");

    const formData = new FormData(form);

    try {
      await accountRequest("/api/account/addresses", {
        method: "POST",
        body: JSON.stringify({
          type: String(formData.get("type") ?? ""),
          houseNo: String(formData.get("houseNo") ?? ""),
          street: String(formData.get("street") ?? ""),
          locality: String(formData.get("locality") ?? ""),
          city: String(formData.get("city") ?? ""),
          state: String(formData.get("state") ?? ""),
          pincode: String(formData.get("pincode") ?? ""),
          landmark: String(formData.get("landmark") ?? ""),
          latitude: String(formData.get("latitude") ?? "") || null,
          longitude: String(formData.get("longitude") ?? "") || null,
          isDefault: formData.get("isDefault") === "on",
        }),
      });
      form.reset();
      await loadAccount();
      return true;
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save address");
      return false;
    } finally {
      setIsSaving(false);
    }
  }

  async function saveVehicle(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    setIsSaving(true);
    setErrorMessage("");

    const formData = new FormData(form);

    try {
      await accountRequest("/api/account/vehicles", {
        method: "POST",
        body: JSON.stringify({
          vehicleType: String(formData.get("vehicleType") ?? "car"),
          manufacturerName: String(formData.get("manufacturerName") ?? ""),
          modelName: String(formData.get("modelName") ?? ""),
          fuelType: String(formData.get("fuelType") ?? ""),
          registrationNumber: String(formData.get("registrationNumber") ?? ""),
          isDefault: formData.get("isDefault") === "on",
        }),
      });
      form.reset();
      await loadAccount();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save vehicle");
    } finally {
      setIsSaving(false);
    }
  }

  async function saveProfile(input: {
    name: string;
    croppedImage?: Blob | null;
  }): Promise<boolean> {
    setIsSaving(true);
    setErrorMessage("");

    try {
      let profileImage: string | undefined;

      if (input.croppedImage) {
        profileImage = await uploadProfileImage(
          input.croppedImage,
          String(summary?.user.id ?? user?.id ?? "user"),
        );
      }

      const data = await accountRequest<{ user: CustomerUser }>("/api/auth/profile", {
        method: "PATCH",
        body: JSON.stringify({
          name: input.name,
          profileImage,
        }),
      });

      updateUser(data.user);
      setSummary((current) => (current ? { ...current, user: data.user } : current));
      setIsProfileModalOpen(false);
      return true;
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not update profile");
      return false;
    } finally {
      setIsSaving(false);
    }
  }

  async function requestContactOtp(input: ContactVerificationState): Promise<boolean> {
    setIsSaving(true);
    setErrorMessage("");

    try {
      const data = await accountRequest<{ user: CustomerUser }>("/api/auth/contact/request-otp", {
        method: "POST",
        body: JSON.stringify(input),
      });
      updateUser(data.user);
      setSummary((current) => (current ? { ...current, user: data.user } : current));
      setContactVerification(input);
      setContactUpdateType(null);
      return true;
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not send OTP");
      return false;
    } finally {
      setIsSaving(false);
    }
  }

  async function verifyContactOtp(otp: string): Promise<boolean> {
    if (!contactVerification) {
      return false;
    }

    setIsSaving(true);
    setErrorMessage("");

    try {
      const data = await accountRequest<{ user: CustomerUser }>("/api/auth/contact/verify", {
        method: "POST",
        body: JSON.stringify({ ...contactVerification, otp }),
      });
      updateUser(data.user);
      setSummary((current) => (current ? { ...current, user: data.user } : current));
      setContactVerification(null);
      return true;
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not verify contact");
      return false;
    } finally {
      setIsSaving(false);
    }
  }

  async function deleteItem(path: string) {
    setIsSaving(true);
    setErrorMessage("");

    try {
      await accountRequest(path, { method: "DELETE" });
      await loadAccount();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not delete item");
    } finally {
      setIsSaving(false);
    }
  }

  async function logoutSession(sessionId: number) {
    setIsSaving(true);
    setErrorMessage("");

    try {
      await accountRequest(`/api/auth/sessions/${sessionId}`, { method: "DELETE" });

      if (sessionId === sessionsData?.currentSessionId) {
        await logout();
        return;
      }

      await loadSessions();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not logout session");
    } finally {
      setIsSaving(false);
    }
  }

  async function logoutOtherSessions() {
    setIsSaving(true);
    setErrorMessage("");

    try {
      await accountRequest("/api/auth/logout-others", { method: "POST" });
      await loadSessions();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not logout other sessions");
    } finally {
      setIsSaving(false);
    }
  }

  async function logoutAllSessions() {
    if (!sessionsData) {
      return;
    }

    setIsSaving(true);
    setErrorMessage("");

    try {
      const sessionIds = sessionsData.sessions
        .filter((session) => !session.revokedAt)
        .map((session) => session.id);

      await Promise.all(
        sessionIds.map((sessionId) =>
          accountRequest(`/api/auth/sessions/${sessionId}`, { method: "DELETE" }),
        ),
      );
      await logout();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not logout all sessions");
    } finally {
      setIsSaving(false);
    }
  }

  if (!hasMounted) {
    return <AccountLoadingShell />;
  }

  if (!user && !getUserAuthToken()) {
    return (
      <main className="min-h-screen bg-slate-50 px-4 pb-16 pt-32 font-['Space_Grotesk']">
        <section className="mx-auto max-w-lg rounded-lg border border-border bg-white p-6 text-center shadow-sm">
          <div className="mx-auto grid h-12 w-12 place-items-center rounded-md bg-primary/10 text-primary">
            <User className="h-6 w-6" />
          </div>
          <h1 className="mt-5 text-2xl font-black tracking-tight text-foreground">
            Login to view your account
          </h1>
          <p className="mt-2 text-sm font-semibold leading-6 text-muted-foreground">
            Your profile, bookings, addresses, vehicles, and AMC details are saved after mobile OTP
            login.
          </p>
          <button
            type="button"
            onClick={openAuthModal}
            className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-primary px-5 text-sm font-black text-primary-foreground"
          >
            Login with mobile
          </button>
        </section>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-[#f7f7f8] px-4 pb-16 pt-28 font-['Space_Grotesk'] text-foreground">
      <section className="mx-auto max-w-7xl space-y-5">
        <div className="overflow-hidden rounded-xl border border-foreground/10 bg-foreground text-background shadow-[0_24px_70px_rgba(0,0,0,0.16)]">
          <div className="grid gap-6 p-5 sm:p-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
            <div className="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
              <ProfileAvatar user={summary?.user ?? user} size="large" />
              <div className="min-w-0">
                <p className="text-xs font-black uppercase tracking-[0.14em] text-primary">
                  My account
                </p>
                <h1 className="mt-2 truncate text-3xl font-black tracking-tight text-background sm:text-4xl">
                  {summary?.user.name && summary.user.name !== "User"
                    ? summary.user.name
                    : "Ride N Revive customer"}
                </h1>
                <div className="mt-3 flex flex-wrap gap-2 text-xs font-black">
                  <span className="rounded-md border border-background/10 bg-background/10 px-2.5 py-1 text-background/80">
                    {formatDisplayText(summary?.user.status ?? user?.status ?? "active")}
                  </span>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2 text-center sm:grid-cols-4">
              <MiniStat label="Orders" value={counts.orders} />
              <MiniStat label="Addresses" value={counts.addresses} />
              <MiniStat label="Vehicles" value={counts.vehicles} />
              <MiniStat label="AMC" value={counts.amc} />
            </div>
          </div>
        </div>

        <div className="sticky top-24 z-20 flex gap-2 overflow-x-auto rounded-xl border border-border bg-white/95 p-2 shadow-sm backdrop-blur-xl">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.id;

            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id)}
                className={`inline-flex h-11 shrink-0 items-center gap-2 rounded-lg px-4 text-sm font-black transition ${
                  isActive
                    ? "bg-primary text-primary-foreground shadow-[0_10px_24px_rgba(211,47,47,0.22)]"
                    : "text-muted-foreground hover:bg-accent hover:text-foreground"
                }`}
              >
                <Icon className="h-4 w-4" />
                {tab.label}
              </button>
            );
          })}
        </div>

        {errorMessage ? (
          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-bold text-destructive">
            {errorMessage}
          </p>
        ) : null}

        {isLoading ? (
          <div className="grid place-items-center rounded-lg border border-border bg-white py-16">
            <Loader2 className="h-6 w-6 animate-spin text-primary" />
          </div>
        ) : null}

        {!isLoading && summary ? (
          <>
            {activeTab === "profile" ? (
              <ProfileSection
                user={summary.user}
                isSaving={isSaving}
                onEditProfile={() => setIsProfileModalOpen(true)}
                onRequestContactOtp={requestContactOtp}
                onUpdateContact={setContactUpdateType}
              />
            ) : null}
            {activeTab === "sessions" ? (
              <SessionsSection
                currentSessionId={sessionsData?.currentSessionId ?? null}
                isLoading={isLoadingSessions}
                isSaving={isSaving}
                sessions={sessionsData?.sessions ?? []}
                onLogoutAll={logoutAllSessions}
                onLogoutOthers={logoutOtherSessions}
                onLogoutSession={logoutSession}
                onRefresh={loadSessions}
              />
            ) : null}
            {activeTab === "orders" ? (
              <OrdersSection deepLink={orderDeepLink} orders={summary.orders} />
            ) : null}
            {activeTab === "addresses" ? (
              <AddressesSection
                addresses={summary.addresses}
                isSaving={isSaving}
                onSave={saveAddress}
                onDelete={(id) => deleteItem(`/api/account/addresses/${id}`)}
              />
            ) : null}
            {activeTab === "vehicles" ? (
              <VehiclesSection
                vehicles={summary.vehicles}
                onDelete={(id) => deleteItem(`/api/account/vehicles/${id}`)}
              />
            ) : null}
            {activeTab === "amc" ? <AmcSection packages={summary.amcPackages} /> : null}
          </>
        ) : null}

        {summary && isProfileModalOpen ? (
          <ProfileEditSheet
            user={summary.user}
            isSaving={isSaving}
            onClose={() => setIsProfileModalOpen(false)}
            onSave={saveProfile}
          />
        ) : null}

        {summary && contactUpdateType ? (
          <ContactUpdateSheet
            type={contactUpdateType}
            user={summary.user}
            isSaving={isSaving}
            onClose={() => setContactUpdateType(null)}
            onRequestOtp={requestContactOtp}
          />
        ) : null}

        {contactVerification ? (
          <ContactVerificationSheet
            type={contactVerification.type}
            value={contactVerification.value}
            isSaving={isSaving}
            onClose={() => setContactVerification(null)}
            onRequestAgain={() => requestContactOtp(contactVerification)}
            onVerify={verifyContactOtp}
          />
        ) : null}
      </section>
    </main>
  );
}

function AccountLoadingShell() {
  return (
    <main className="min-h-screen bg-slate-50 px-4 pb-16 pt-28 font-['Space_Grotesk'] text-foreground">
      <section className="mx-auto max-w-7xl space-y-5">
        <div className="rounded-lg border border-border bg-white p-5 shadow-sm">
          <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
            <div>
              <div className="h-3 w-24 rounded-full bg-primary/10" />
              <div className="mt-3 h-8 w-56 rounded-md bg-slate-100" />
              <div className="mt-3 h-4 w-32 rounded-md bg-slate-100" />
            </div>
            <div className="grid grid-cols-2 gap-2 text-center sm:grid-cols-4">
              {[0, 1, 2, 3].map((item) => (
                <div
                  key={item}
                  className="min-w-20 rounded-md border border-border bg-slate-50 px-3 py-2"
                >
                  <div className="mx-auto h-6 w-6 rounded-md bg-slate-200" />
                  <div className="mx-auto mt-2 h-3 w-14 rounded-md bg-slate-200" />
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="grid place-items-center rounded-lg border border-border bg-white py-16 shadow-sm">
          <Loader2 className="h-6 w-6 animate-spin text-primary" />
        </div>
      </section>
    </main>
  );
}

function MiniStat({ label, value }: { label: string; value: number }) {
  return (
    <div className="min-w-20 rounded-lg border border-background/10 bg-background/10 px-3 py-2 backdrop-blur">
      <p className="text-lg font-black text-background">{value}</p>
      <p className="text-[10px] font-black uppercase tracking-[0.12em] text-background/60">
        {label}
      </p>
    </div>
  );
}

function ProfileSection({
  user,
  isSaving,
  onEditProfile,
  onRequestContactOtp,
  onUpdateContact,
}: {
  user: CustomerUser;
  isSaving: boolean;
  onEditProfile: () => void;
  onRequestContactOtp: (input: ContactVerificationState) => Promise<boolean>;
  onUpdateContact: (type: ContactType) => void;
}) {
  return (
    <section className="grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
      <div className="overflow-hidden rounded-xl border border-border bg-white shadow-sm">
        <div className="h-1.5 bg-primary" />
        <div className="p-5 sm:p-6">
          <div className="flex flex-col gap-5 sm:flex-row sm:items-start">
            <ProfileAvatar user={user} size="xl" />
            <div className="min-w-0 flex-1">
              <p className="text-xs font-black uppercase tracking-[0.14em] text-primary">Profile</p>
              <h2 className="mt-2 text-2xl font-black tracking-tight">
                {user.name && user.name !== "User" ? user.name : "Profile pending"}
              </h2>
              <div className="mt-5 grid gap-3 sm:grid-cols-2">
                <ProfileFact
                  label="Name"
                  value={user.name && user.name !== "User" ? user.name : "-"}
                />
                <ProfileFact label="Status" value={formatDisplayText(user.status ?? "active")} />
              </div>
              <button
                type="button"
                onClick={onEditProfile}
                className="mt-5 inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 sm:w-auto"
              >
                <Pencil className="h-4 w-4" />
                Update profile
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="grid gap-4">
        <ContactDetailCard
          icon={Smartphone}
          title="Mobile"
          value={user.mobile}
          verified={Boolean(user.isMobileVerified)}
          isSaving={isSaving}
          onUpdate={() => onUpdateContact("mobile")}
        />
        <ContactDetailCard
          icon={Mail}
          title="Email"
          value={user.email ?? "No email saved"}
          verified={Boolean(user.isEmailVerified)}
          isSaving={isSaving}
          onUpdate={() => onUpdateContact("email")}
          onVerify={
            !user.isEmailVerified && user.email
              ? () => onRequestContactOtp({ type: "email", value: user.email ?? "" })
              : undefined
          }
        />
      </div>
    </section>
  );
}

function ProfileAvatar({
  user,
  size = "large",
}: {
  user: CustomerUser | null | undefined;
  size?: "large" | "xl";
}) {
  const sizeClass = size === "xl" ? "h-28 w-28 text-3xl" : "h-20 w-20 text-2xl";
  const label = ((user?.name && user.name !== "User" ? user.name : user?.mobile) ?? "R").slice(
    0,
    1,
  );

  return (
    <div
      className={`relative grid shrink-0 place-items-center overflow-hidden rounded-full border border-border bg-primary/10 font-black uppercase text-primary shadow-sm ${sizeClass}`}
    >
      {user?.profileImage ? (
        <img
          src={user.profileImage}
          alt={user.name || "Profile"}
          className="h-full w-full object-cover"
        />
      ) : (
        label
      )}
    </div>
  );
}

function ProfileFact({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-md bg-slate-50 px-3 py-2">
      <p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </p>
      <p className="mt-1 text-sm font-black text-foreground">{value}</p>
    </div>
  );
}

function ContactDetailCard({
  icon: Icon,
  title,
  value,
  verified,
  isSaving,
  onUpdate,
  onVerify,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  value: string;
  verified: boolean;
  isSaving: boolean;
  onUpdate: () => void;
  onVerify?: () => void;
}) {
  return (
    <div className="relative rounded-xl border border-border bg-white p-5 shadow-sm transition hover:border-primary/25 hover:shadow-md">
      <div
        className={`absolute right-4 top-4 inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-black uppercase tracking-[0.12em] ${
          verified ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"
        }`}
      >
        {verified ? <CheckCircle2 className="h-3.5 w-3.5" /> : <Clock3 className="h-3.5 w-3.5" />}
        {verified ? "Verified" : "Unverified"}
      </div>
      <div className="flex items-start justify-between gap-3">
        <div className="flex min-w-0 items-center gap-3 pr-28">
          <div
            className={`grid h-10 w-10 place-items-center rounded-md ${
              verified ? "bg-emerald-100 text-emerald-700" : "bg-primary/10 text-primary"
            }`}
          >
            <Icon className="h-5 w-5" />
          </div>
          <div className="min-w-0">
            <h2 className="font-black">{title}</h2>
            <p className="mt-1 break-all text-sm font-bold text-muted-foreground">{value}</p>
          </div>
        </div>
      </div>
      <div className="mt-4 flex flex-wrap gap-2">
        <button
          type="button"
          onClick={onUpdate}
          disabled={isSaving}
          className="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-border px-3 text-xs font-black text-foreground transition hover:bg-slate-100 disabled:opacity-60"
        >
          <Pencil className="h-3.5 w-3.5" />
          Update {title.toLowerCase()}
        </button>
        {onVerify ? (
          <button
            type="button"
            onClick={onVerify}
            disabled={isSaving}
            className="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-primary/25 px-3 text-xs font-black text-primary transition hover:bg-primary/10 disabled:opacity-60"
          >
            {isSaving ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <ShieldCheck className="h-4 w-4" />
            )}
            Verify
          </button>
        ) : null}
      </div>
    </div>
  );
}

function ResponsiveSheet({
  title,
  onClose,
  children,
}: {
  title: string;
  onClose: () => void;
  children: React.ReactNode;
}) {
  return (
    <div className="fixed inset-0 z-[90] flex items-end bg-foreground/65 p-0 font-['Space_Grotesk'] backdrop-blur-sm sm:items-center sm:justify-center sm:p-4">
      <button
        type="button"
        className="absolute inset-0 cursor-default"
        onClick={onClose}
        aria-label={`Close ${title}`}
      />
      <div className="relative max-h-[88vh] w-full overflow-y-auto rounded-t-2xl border border-border bg-white p-5 shadow-2xl sm:max-w-lg sm:rounded-lg">
        <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-border sm:hidden" />
        <div className="mb-5 flex items-center justify-between gap-3">
          <h2 className="text-xl font-black tracking-tight">{title}</h2>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            aria-label={`Close ${title}`}
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}

function ProfileEditSheet({
  user,
  isSaving,
  onClose,
  onSave,
}: {
  user: CustomerUser;
  isSaving: boolean;
  onClose: () => void;
  onSave: (input: { name: string; croppedImage?: Blob | null }) => Promise<boolean>;
}) {
  const [preview, setPreview] = useState(user.profileImage ?? "");
  const [sourceImage, setSourceImage] = useState("");
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);

  function handleImageChange(file: File | null) {
    if (!file) {
      setPreview(user.profileImage ?? "");
      setSourceImage("");
      return;
    }

    const nextUrl = URL.createObjectURL(file);
    setPreview(nextUrl);
    setSourceImage(nextUrl);
    setCrop({ x: 0, y: 0 });
    setZoom(1);
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const name = String(formData.get("name") ?? "");
    let croppedImage: Blob | null = null;

    if (sourceImage && croppedAreaPixels) {
      croppedImage = await createCroppedWebp(sourceImage, croppedAreaPixels);
      setPreview(URL.createObjectURL(croppedImage));
    }

    await onSave({ name, croppedImage });
  }

  return (
    <ResponsiveSheet title="Update profile" onClose={onClose}>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="flex items-center gap-4 rounded-lg border border-border bg-white p-4 shadow-sm">
          <div className="relative grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-full bg-primary/10 text-2xl font-black uppercase text-primary ring-1 ring-border">
            {preview ? (
              <img src={preview} alt="" className="h-full w-full object-cover" />
            ) : (
              (user.name && user.name !== "User" ? user.name : user.mobile).slice(0, 1)
            )}
          </div>
          <label className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-white px-3 text-xs font-black text-foreground transition hover:border-primary/40 hover:text-primary">
            <Camera className="h-4 w-4" />
            Choose photo
            <input
              hidden
              name="profileImage"
              type="file"
              accept="image/png,image/jpeg,image/webp"
              onChange={(event) => handleImageChange(event.target.files?.[0] ?? null)}
            />
          </label>
        </div>

        {sourceImage ? (
          <div className="rounded-lg border border-border bg-slate-50 p-3">
            <div className="relative aspect-square overflow-hidden rounded-md bg-foreground">
              <Cropper
                image={sourceImage}
                crop={crop}
                zoom={zoom}
                aspect={1}
                cropShape="round"
                showGrid={false}
                onCropChange={setCrop}
                onZoomChange={setZoom}
                onCropComplete={(_area, areaPixels) => setCroppedAreaPixels(areaPixels)}
              />
            </div>
            <label className="mt-3 block">
              <span className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                Zoom
              </span>
              <input
                type="range"
                min={1}
                max={3}
                step={0.05}
                value={zoom}
                onChange={(event) => setZoom(Number(event.target.value))}
                className="w-full accent-primary"
              />
            </label>
          </div>
        ) : null}

        <label className="block">
          <span className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
            Full name
          </span>
          <input
            required
            name="name"
            defaultValue={user.name === "User" ? "" : user.name}
            className={fieldClass}
            placeholder="Enter your name"
          />
        </label>

        <button
          type="submit"
          disabled={isSaving}
          className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 disabled:opacity-60"
        >
          {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          Save profile
        </button>
      </form>
    </ResponsiveSheet>
  );
}

async function createCroppedWebp(imageSrc: string, cropArea: Area) {
  const image = await loadImage(imageSrc);
  const canvas = document.createElement("canvas");
  const size = 512;
  const context = canvas.getContext("2d");

  if (!context) {
    throw new Error("Could not prepare image crop");
  }

  canvas.width = size;
  canvas.height = size;
  context.drawImage(
    image,
    cropArea.x,
    cropArea.y,
    cropArea.width,
    cropArea.height,
    0,
    0,
    size,
    size,
  );

  return new Promise<Blob>((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (blob) {
          resolve(blob);
          return;
        }

        reject(new Error("Could not convert image to WebP"));
      },
      "image/webp",
      0.9,
    );
  });
}

function loadImage(src: string) {
  return new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new window.Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error("Could not load image"));
    image.src = src;
  });
}

function ContactUpdateSheet({
  type,
  user,
  isSaving,
  onClose,
  onRequestOtp,
}: {
  type: ContactType;
  user: CustomerUser;
  isSaving: boolean;
  onClose: () => void;
  onRequestOtp: (input: ContactVerificationState) => Promise<boolean>;
}) {
  const label = type === "mobile" ? "mobile number" : "email address";
  const currentValue = type === "mobile" ? user.mobile : (user.email ?? "");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const value = String(formData.get("value") ?? "").trim();
    await onRequestOtp({ type, value });
  }

  return (
    <ResponsiveSheet title={`Update ${label}`} onClose={onClose}>
      <form onSubmit={handleSubmit} className="space-y-5">
        <label className="block">
          <span className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
            New {label}
          </span>
          <input
            required
            name="value"
            type={type === "email" ? "email" : "tel"}
            inputMode={type === "mobile" ? "tel" : "email"}
            defaultValue={currentValue}
            className={fieldClass}
            placeholder={type === "mobile" ? "Enter mobile number" : "Enter email address"}
          />
        </label>
        <div className="rounded-lg border border-border bg-slate-50 p-4 text-sm font-semibold leading-6 text-muted-foreground">
          We will send an OTP to the new {label}. The change is saved only after verification.
        </div>
        <button
          type="submit"
          disabled={isSaving}
          className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 disabled:opacity-60"
        >
          {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          Send OTP
        </button>
      </form>
    </ResponsiveSheet>
  );
}

function ContactVerificationSheet({
  type,
  value,
  isSaving,
  onClose,
  onRequestAgain,
  onVerify,
}: {
  type: ContactType;
  value: string;
  isSaving: boolean;
  onClose: () => void;
  onRequestAgain: () => void;
  onVerify: (otp: string) => Promise<boolean>;
}) {
  const [otp, setOtp] = useState("");
  const label = type === "mobile" ? "mobile" : "email";

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await onVerify(otp);
  }

  return (
    <ResponsiveSheet title={`Verify ${label}`} onClose={onClose}>
      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="rounded-lg border border-border bg-slate-50 p-4">
          <p className="text-sm font-bold text-foreground">Code sent to</p>
          <p className="mt-1 break-all text-sm font-semibold text-muted-foreground">{value}</p>
        </div>
        <AccountOtpFields value={otp} onChange={setOtp} />
        <button
          type="submit"
          disabled={isSaving || otp.length !== 5}
          className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 disabled:opacity-60"
        >
          {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          Verify {label}
        </button>
        <button
          type="button"
          onClick={onRequestAgain}
          disabled={isSaving}
          className="h-10 w-full rounded-md border border-border text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:opacity-60"
        >
          Send code again
        </button>
      </form>
    </ResponsiveSheet>
  );
}

function AccountOtpFields({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string) => void;
}) {
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
  const digits = Array.from({ length: 5 }, (_, index) => value[index] ?? "");

  function setDigit(index: number, nextValue: string) {
    const digit = nextValue.replace(/\D/g, "").slice(-1);
    const nextDigits = [...digits];
    nextDigits[index] = digit;
    onChange(nextDigits.join(""));

    if (digit && index < inputRefs.current.length - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  }

  function handleKeyDown(index: number, event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Backspace" && !digits[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
  }

  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {
    event.preventDefault();
    const pastedDigits = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, 5);

    if (pastedDigits) {
      onChange(pastedDigits);
      inputRefs.current[Math.min(pastedDigits.length, 5) - 1]?.focus();
    }
  }

  return (
    <div className="grid grid-cols-5 gap-2">
      {digits.map((digit, index) => (
        <input
          key={index}
          ref={(element) => {
            inputRefs.current[index] = element;
          }}
          required
          inputMode="numeric"
          pattern="[0-9]*"
          maxLength={1}
          value={digit}
          onChange={(event) => setDigit(index, event.target.value)}
          onKeyDown={(event) => handleKeyDown(index, event)}
          onPaste={handlePaste}
          className="h-12 rounded-lg border border-border bg-white text-center text-xl font-black text-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20"
          aria-label={`Email OTP digit ${index + 1}`}
        />
      ))}
    </div>
  );
}

function SessionsSection({
  currentSessionId,
  isLoading,
  isSaving,
  sessions,
  onLogoutAll,
  onLogoutOthers,
  onLogoutSession,
  onRefresh,
}: {
  currentSessionId: number | null;
  isLoading: boolean;
  isSaving: boolean;
  sessions: AccountSession[];
  onLogoutAll: () => void;
  onLogoutOthers: () => void;
  onLogoutSession: (sessionId: number) => void;
  onRefresh: () => void;
}) {
  const activeSessions = sessions.filter((session) => !session.revokedAt);

  return (
    <section className="rounded-lg border border-border bg-white shadow-sm">
      <div className="flex flex-col gap-3 border-b border-border px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-3">
          <div className="grid h-9 w-9 place-items-center rounded-md bg-primary/10 text-primary">
            <Smartphone className="h-4 w-4" />
          </div>
          <div>
            <h2 className="font-black">Login sessions</h2>
            <p className="text-xs font-bold text-muted-foreground">
              {activeSessions.length} active, {sessions.length} total
            </p>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={onRefresh}
            disabled={isLoading || isSaving}
            className="h-10 rounded-md border border-border px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:opacity-60"
          >
            Refresh
          </button>
          <button
            type="button"
            onClick={onLogoutOthers}
            disabled={isSaving || activeSessions.length <= 1}
            className="h-10 rounded-md border border-border px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:opacity-60"
          >
            Logout others
          </button>
          <button
            type="button"
            onClick={onLogoutAll}
            disabled={isSaving || activeSessions.length === 0}
            className="inline-flex h-10 items-center gap-2 rounded-md border border-destructive/25 px-3 text-xs font-black text-destructive transition hover:bg-destructive/10 disabled:opacity-60"
          >
            <LogOut className="h-4 w-4" />
            Logout all
          </button>
        </div>
      </div>

      <div className="grid gap-3 p-4">
        {isLoading ? (
          <div className="grid place-items-center rounded-md border border-dashed border-border py-10">
            <Loader2 className="h-5 w-5 animate-spin text-primary" />
          </div>
        ) : null}
        {!isLoading && sessions.length === 0 ? <EmptyState text="No sessions found." /> : null}
        {!isLoading
          ? sessions.map((session) => {
              const isCurrent = session.id === currentSessionId;
              const isRevoked = Boolean(session.revokedAt);
              const sessionDisplay = getSessionDisplay(session);

              return (
                <div key={session.id} className="rounded-md border border-border p-4">
                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-2">
                        <p className="font-black text-foreground">{sessionDisplay.title}</p>
                        {isCurrent ? (
                          <span className="rounded-md bg-primary/10 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-primary">
                            Current
                          </span>
                        ) : null}
                        <span
                          className={`rounded-md px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] ${
                            sessionDisplay.source === "App"
                              ? "bg-sky-100 text-sky-700"
                              : "bg-slate-100 text-muted-foreground"
                          }`}
                        >
                          {sessionDisplay.source}
                        </span>
                        <span
                          className={`rounded-md px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] ${
                            isRevoked
                              ? "bg-slate-100 text-muted-foreground"
                              : "bg-emerald-100 text-emerald-700"
                          }`}
                        >
                          {isRevoked ? "Logged out" : "Active"}
                        </span>
                      </div>
                      <p className="mt-2 text-sm font-bold text-muted-foreground">
                        {sessionDisplay.subtitle}
                      </p>
                      <div className="mt-3 grid gap-2 text-xs font-bold text-muted-foreground sm:grid-cols-3">
                        <span>IP: {session.ipAddress || "-"}</span>
                        <span>Last used: {formatDateTime(session.lastUsedAt)}</span>
                        <span>Created: {formatDateTime(session.createdAt)}</span>
                      </div>
                    </div>
                    {!isRevoked ? (
                      <button
                        type="button"
                        onClick={() => onLogoutSession(session.id)}
                        disabled={isSaving}
                        className="inline-flex h-10 shrink-0 items-center justify-center gap-2 rounded-md border border-destructive/25 px-3 text-xs font-black text-destructive transition hover:bg-destructive/10 disabled:opacity-60"
                      >
                        <LogOut className="h-4 w-4" />
                        Logout
                      </button>
                    ) : null}
                  </div>
                </div>
              );
            })
          : null}
      </div>
    </section>
  );
}

type OrderVehicleFilter = "all" | "car" | "bike";
type OrderSortFilter = "newest" | "oldest";

const orderProgressSteps = ["placed", "confirmed", "in_progress", "completed"];
const paymentPendingStatuses = ["payment_pending", "payment_failed"];

function OrdersSection({
  deepLink,
  orders,
}: {
  deepLink: AccountOrderDeepLink;
  orders: AccountOrder[];
}) {
  const [vehicleFilter, setVehicleFilter] = useState<OrderVehicleFilter>("all");
  const [dateFromFilter, setDateFromFilter] = useState("");
  const [dateToFilter, setDateToFilter] = useState("");
  const [sortFilter, setSortFilter] = useState<OrderSortFilter>("newest");
  const [areFiltersOpen, setAreFiltersOpen] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState<AccountOrder | null>(null);
  const [orderOverrides, setOrderOverrides] = useState<Record<number, AccountOrder>>({});
  const visibleOrders = useMemo(
    () => orders.map((order) => orderOverrides[order.id] ?? order),
    [orderOverrides, orders],
  );
  useEffect(() => {
    if (!deepLink.orderNumber && !deepLink.orderId) {
      return;
    }

    const linkedOrder = visibleOrders.find((order) => {
      if (deepLink.orderNumber) {
        return order.orderNumber.toLowerCase() === deepLink.orderNumber.toLowerCase();
      }

      return order.id === deepLink.orderId;
    });

    if (linkedOrder) {
      setSelectedOrder(linkedOrder);
    }
  }, [deepLink, visibleOrders]);
  const hasActiveFilters =
    vehicleFilter !== "all" ||
    dateFromFilter !== "" ||
    dateToFilter !== "" ||
    sortFilter !== "newest";
  function resetFilters() {
    setVehicleFilter("all");
    setDateFromFilter("");
    setDateToFilter("");
    setSortFilter("newest");
  }

  const filteredOrders = useMemo(() => {
    return visibleOrders
      .filter((order) => vehicleFilter === "all" || order.vehicleType === vehicleFilter)
      .filter((order) => {
        if (!dateFromFilter && !dateToFilter) {
          return true;
        }

        const orderDate = new Date(order.createdAt);

        if (Number.isNaN(orderDate.getTime())) {
          return false;
        }

        const orderDateValue = orderDate.toISOString().slice(0, 10);

        if (dateFromFilter && orderDateValue < dateFromFilter) {
          return false;
        }

        if (dateToFilter && orderDateValue > dateToFilter) {
          return false;
        }

        return true;
      })
      .sort((first, second) => {
        const firstTime = new Date(first.createdAt).getTime();
        const secondTime = new Date(second.createdAt).getTime();
        const direction = sortFilter === "newest" ? -1 : 1;

        return (firstTime - secondTime) * direction;
      });
  }, [dateFromFilter, dateToFilter, sortFilter, vehicleFilter, visibleOrders]);
  const placedCount = filteredOrders.filter((order) => order.status === "placed").length;
  const completedCount = filteredOrders.filter((order) => order.status === "completed").length;
  const totalSpend = filteredOrders
    .filter((order) => order.status !== "cancelled")
    .reduce((total, order) => total + Math.max(order.finalPrice, 0), 0);

  function handleOrderUpdate(order: AccountOrder) {
    setOrderOverrides((current) => ({ ...current, [order.id]: order }));
    setSelectedOrder(order);
  }

  return (
    <section className="overflow-hidden rounded-xl border border-border bg-white shadow-sm">
      <div className="border-b border-border bg-slate-50/80 p-4 sm:p-5">
        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-start">
          <div>
            <div className="flex items-center gap-3">
              <div className="grid h-11 w-11 place-items-center rounded-lg bg-primary text-primary-foreground shadow-[0_12px_24px_rgba(211,47,47,0.22)]">
                <CalendarClock className="h-5 w-5" />
              </div>
              <div>
                <h2 className="text-xl font-black tracking-tight">Order history</h2>
                <p className="text-sm font-bold text-muted-foreground">
                  {filteredOrders.length} of {visibleOrders.length} orders
                </p>
              </div>
            </div>

            <div className="mt-4 grid gap-2 sm:grid-cols-3">
              <OrderSummaryStat label="Placed" value={placedCount} />
              <OrderSummaryStat label="Completed" value={completedCount} />
              <OrderSummaryStat
                label="Total value"
                value={totalSpend > 0 ? formatCurrency(totalSpend) : "-"}
              />
            </div>
          </div>

          <div>
            <div className="lg:hidden">
              <button
                type="button"
                onClick={() => setAreFiltersOpen((isOpen) => !isOpen)}
                className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-border bg-white px-3 text-xs font-black text-muted-foreground shadow-sm transition hover:bg-accent hover:text-foreground"
                aria-expanded={areFiltersOpen}
              >
                <Filter className="h-4 w-4" />
                Filters
                {hasActiveFilters ? (
                  <span className="rounded-md bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-primary">
                    Active
                  </span>
                ) : null}
                <ChevronDown
                  className={`h-4 w-4 transition ${areFiltersOpen ? "rotate-180" : ""}`}
                />
              </button>
            </div>

            <OrderFilters
              areFiltersOpen={areFiltersOpen}
              dateFromFilter={dateFromFilter}
              dateToFilter={dateToFilter}
              hasActiveFilters={hasActiveFilters}
              sortFilter={sortFilter}
              vehicleFilter={vehicleFilter}
              onDateFromChange={setDateFromFilter}
              onDateToChange={setDateToFilter}
              onReset={resetFilters}
              onSortChange={setSortFilter}
              onVehicleChange={setVehicleFilter}
            />
          </div>
        </div>
      </div>

      <div className="grid gap-3 p-4 sm:p-5">
        {visibleOrders.length === 0 ? <EmptyState text="No orders saved yet." /> : null}
        {visibleOrders.length > 0 && filteredOrders.length === 0 ? (
          <EmptyState text="No orders match these filters." />
        ) : null}
        {filteredOrders.map((order) => (
          <CompactOrderCard
            key={order.id}
            order={order}
            onOpenDetails={() => setSelectedOrder(order)}
          />
        ))}
      </div>

      {selectedOrder ? (
        <OrderDetailsModal
          order={selectedOrder}
          onClose={() => setSelectedOrder(null)}
          onOrderUpdate={handleOrderUpdate}
        />
      ) : null}
    </section>
  );
}

function OrderSummaryStat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="rounded-lg border border-border bg-white px-4 py-3 shadow-sm">
      <p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </p>
      <p className="mt-1 text-lg font-black text-foreground">{value}</p>
    </div>
  );
}

function OrderFilters({
  areFiltersOpen,
  dateFromFilter,
  dateToFilter,
  hasActiveFilters,
  sortFilter,
  vehicleFilter,
  onDateFromChange,
  onDateToChange,
  onReset,
  onSortChange,
  onVehicleChange,
}: {
  areFiltersOpen: boolean;
  dateFromFilter: string;
  dateToFilter: string;
  hasActiveFilters: boolean;
  sortFilter: OrderSortFilter;
  vehicleFilter: OrderVehicleFilter;
  onDateFromChange: (value: string) => void;
  onDateToChange: (value: string) => void;
  onReset: () => void;
  onSortChange: (value: OrderSortFilter) => void;
  onVehicleChange: (value: OrderVehicleFilter) => void;
}) {
  return (
    <div
      className={`grid gap-2 ${
        areFiltersOpen ? "grid" : "hidden"
      } mt-3 border-t border-border pt-3 sm:grid-cols-2 lg:mt-0 lg:grid lg:min-w-[760px] lg:grid-cols-[minmax(0,1fr)_auto_auto_auto_auto] lg:border-t-0 lg:pt-0`}
    >
      <label className="relative">
        <Filter className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <select
          value={vehicleFilter}
          onChange={(event) => onVehicleChange(event.target.value as OrderVehicleFilter)}
          className="h-11 w-full rounded-lg border border-border bg-white pl-9 pr-3 text-xs font-black text-muted-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
        >
          <option value="all">All vehicles</option>
          <option value="car">Car orders</option>
          <option value="bike">Bike orders</option>
        </select>
      </label>

      <label className="relative">
        <Clock3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <input
          type="date"
          value={dateFromFilter}
          max={dateToFilter || undefined}
          onChange={(event) => onDateFromChange(event.target.value)}
          aria-label="Orders from date"
          className="h-11 w-full rounded-lg border border-border bg-white pl-9 pr-3 text-xs font-black text-muted-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 lg:w-40"
        />
      </label>

      <label className="relative">
        <Clock3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <input
          type="date"
          value={dateToFilter}
          min={dateFromFilter || undefined}
          onChange={(event) => onDateToChange(event.target.value)}
          aria-label="Orders to date"
          className="h-11 w-full rounded-lg border border-border bg-white pl-9 pr-3 text-xs font-black text-muted-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 lg:w-40"
        />
      </label>

      <select
        value={sortFilter}
        onChange={(event) => onSortChange(event.target.value as OrderSortFilter)}
        className="h-11 rounded-lg border border-border bg-white px-3 text-xs font-black text-muted-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
      >
        <option value="newest">Newest time</option>
        <option value="oldest">Oldest time</option>
      </select>

      <button
        type="button"
        onClick={onReset}
        disabled={!hasActiveFilters}
        className="h-11 rounded-lg border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
      >
        Reset
      </button>
    </div>
  );
}

function CompactOrderCard({
  order,
  onOpenDetails,
}: {
  order: AccountOrder;
  onOpenDetails: () => void;
}) {
  const VehicleIcon = order.vehicleType === "bike" ? Bike : CarFront;
  const vehicleName = getVehicleDisplayName(order);
  const amount = order.finalPrice > 0 ? formatCurrency(order.finalPrice) : "To confirm";

  return (
    <div className="group overflow-hidden rounded-xl border border-border bg-white shadow-sm transition hover:border-primary/30 hover:shadow-md">
      <div className="grid gap-4 p-4 lg:grid-cols-[112px_minmax(0,1fr)_220px] lg:items-center">
        <div className="grid aspect-[4/3] w-full place-items-center overflow-hidden rounded-lg border border-border bg-slate-50 sm:w-32 lg:h-24 lg:w-28">
          {order.modelImage ? (
            <img
              src={order.modelImage}
              alt={order.modelName}
              className="h-full w-full object-contain p-3"
            />
          ) : (
            <VehicleIcon className="h-6 w-6 text-muted-foreground" />
          )}
        </div>

        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-1.5">
            <OrderStatusPill status={order.status} />
            <span className="rounded-md bg-slate-100 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
              {formatDisplayText(order.vehicleType)}
            </span>
            <span className="rounded-md bg-primary/10 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-primary">
              {order.orderNumber}
            </span>
          </div>
          <p className="mt-3 line-clamp-1 text-lg font-black leading-6 text-foreground">
            {order.packageName}
          </p>
          <p className="mt-1 truncate text-sm font-black text-muted-foreground">{vehicleName}</p>
          <div className="mt-3 grid gap-2 text-xs sm:grid-cols-2 xl:grid-cols-3">
            <OrderFact label="Ordered" value={formatDateTime(order.createdAt)} />
            <OrderFact label="Payment mode" value={formatPaymentMode(order.paymentMode)} />
            <div className="flex min-w-0 items-center gap-2">
              <span className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
                Payment
              </span>
              <PaymentStatusPill status={order.paymentStatus} />
            </div>
          </div>
        </div>

        <div className="rounded-lg border border-border bg-slate-50 p-3 lg:text-right">
          <p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
            Amount
          </p>
          <p className="mt-1 text-2xl font-black text-foreground">{amount}</p>
          {order.razorpayPaymentId ? (
            <p className="mt-1 truncate text-[11px] font-bold text-muted-foreground">
              Pay ID: {order.razorpayPaymentId}
            </p>
          ) : null}
          <div className="mt-3 grid w-full grid-cols-2 gap-2">
            <button
              type="button"
              onClick={onOpenDetails}
              className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-3 text-xs font-black text-primary-foreground shadow-elegant transition hover:opacity-95"
            >
              <Eye className="h-4 w-4" />
              Details
            </button>
            <Link
              href={routePath(order.reorderUrl)}
              className="inline-flex h-10 items-center justify-center rounded-md border border-primary/25 px-3 text-xs font-black text-primary transition hover:bg-primary/10"
            >
              Reorder
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

function OrderFact({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex min-w-0 items-center gap-2">
      <span className="shrink-0 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </span>
      <span className="truncate font-bold text-foreground">{value}</span>
    </div>
  );
}

function OrderStatusPill({ status }: { status: string }) {
  const normalized = status.toLowerCase();
  const className =
    normalized === "completed"
      ? "bg-emerald-100 text-emerald-700"
      : normalized === "cancelled"
        ? "bg-red-50 text-red-700"
        : normalized === "payment_failed"
          ? "bg-red-50 text-red-700"
          : normalized === "payment_pending"
            ? "bg-amber-100 text-amber-700"
            : normalized === "placed"
              ? "bg-primary/10 text-primary"
              : "bg-slate-100 text-muted-foreground";

  return (
    <span
      className={`rounded-md px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] ${className}`}
    >
      {formatDisplayText(status)}
    </span>
  );
}

function PaymentStatusPill({ status }: { status: string }) {
  const normalized = status.toLowerCase();
  const className =
    normalized === "paid"
      ? "bg-emerald-100 text-emerald-700"
      : normalized === "failed"
        ? "bg-red-50 text-red-700"
        : normalized === "refunded"
          ? "bg-blue-100 text-blue-700"
          : "bg-amber-100 text-amber-700";

  return (
    <span
      className={`inline-flex h-6 shrink-0 items-center rounded-md px-2 text-[10px] font-black uppercase tracking-[0.12em] ${className}`}
    >
      {formatDisplayText(status)}
    </span>
  );
}

function OrderDetailsModal({
  onClose,
  onOrderUpdate,
  order,
}: {
  onClose: () => void;
  onOrderUpdate: (order: AccountOrder) => void;
  order: AccountOrder;
}) {
  const [currentOrder, setCurrentOrder] = useState(order);
  const VehicleIcon = currentOrder.vehicleType === "bike" ? Bike : CarFront;
  const [isDownloadingInvoice, setIsDownloadingInvoice] = useState(false);
  const [isPayingAgain, setIsPayingAgain] = useState(false);
  const [invoiceError, setInvoiceError] = useState("");
  const [paymentError, setPaymentError] = useState("");
  const features = [
    ...(currentOrder.orderDetails?.highlightedFeatures ?? []),
    ...(currentOrder.orderDetails?.features ?? []),
  ].filter(Boolean);
  const isCompleted = currentOrder.status === "completed";
  const canPayAgain =
    currentOrder.paymentMode === "online_razorpay" &&
    ["pending", "failed"].includes(currentOrder.paymentStatus);

  useEffect(() => {
    setCurrentOrder(order);
  }, [order]);

  function applyOrderUpdate(nextOrder: AccountOrder) {
    setCurrentOrder(nextOrder);
    onOrderUpdate(nextOrder);
  }

  async function verifyRazorpayPayment(orderId: number, response: RazorpaySuccessResponse) {
    return accountRequest<RazorpayVerifyResponse>("/api/account/orders/razorpay/verify", {
      method: "POST",
      body: JSON.stringify({
        orderId,
        razorpayOrderId: response.razorpay_order_id,
        razorpayPaymentId: response.razorpay_payment_id,
        razorpaySignature: response.razorpay_signature,
      }),
    });
  }

  async function markRazorpayPaymentFailed(
    orderId: number,
    razorpayOrderId: string,
    reason: string,
  ) {
    await accountRequest<{ ok: boolean }>("/api/account/orders/razorpay/failed", {
      method: "POST",
      body: JSON.stringify({
        orderId,
        razorpayOrderId,
        reason,
      }),
    });
  }

  async function openRazorpayRetryPayment(data: RazorpayRetryResponse) {
    const isLoaded = await loadRazorpayCheckoutScript();
    const RazorpayCheckout = window.Razorpay;

    if (!isLoaded || !RazorpayCheckout) {
      throw new Error("Could not load Razorpay checkout. Please check your connection.");
    }

    await new Promise<void>((resolve, reject) => {
      let isSettled = false;
      const settle = (callback: () => void) => {
        if (isSettled) {
          return;
        }
        isSettled = true;
        callback();
      };

      const checkout = new RazorpayCheckout({
        key: data.payment.keyId,
        amount: data.payment.amount,
        currency: data.payment.currency,
        name: "Ride N Revive",
        description: `${data.order.packageName} - ${data.order.orderNumber}`,
        order_id: data.payment.orderId,
        notes: {
          orderNumber: data.order.orderNumber,
        },
        theme: {
          color: "#dc2626",
        },
        handler: (response) => {
          verifyRazorpayPayment(data.order.id, response)
            .then((verifiedData) => {
              applyOrderUpdate(verifiedData.order);
              settle(resolve);
            })
            .catch((error: unknown) => {
              settle(() =>
                reject(error instanceof Error ? error : new Error("Payment verification failed")),
              );
            });
        },
        modal: {
          ondismiss: () => {
            settle(() => reject(new Error("Payment was cancelled before completion")));
          },
        },
      });

      checkout.on("payment.failed", (response) => {
        const reason = response.error?.description ?? "Razorpay payment failed";
        markRazorpayPaymentFailed(data.order.id, data.payment.orderId, reason)
          .catch((error: unknown) => {
            console.error("Could not mark Razorpay payment as failed", error);
          })
          .finally(() => {
            applyOrderUpdate({
              ...data.order,
              paymentStatus: "failed",
              status: "payment_failed",
              updatedAt: new Date().toISOString(),
            });
            settle(() => reject(new Error(reason)));
          });
      });

      checkout.open();
    });
  }

  async function payAgain() {
    setIsPayingAgain(true);
    setPaymentError("");

    try {
      const data = await accountRequest<RazorpayRetryResponse>(
        `/api/account/orders/${currentOrder.id}/razorpay/retry`,
        { method: "POST" },
      );
      applyOrderUpdate(data.order);
      await openRazorpayRetryPayment(data);
    } catch (error) {
      setPaymentError(error instanceof Error ? error.message : "Could not start payment");
    } finally {
      setIsPayingAgain(false);
    }
  }

  async function downloadInvoice() {
    setIsDownloadingInvoice(true);
    setInvoiceError("");

    try {
      const token = getUserAuthToken();

      if (!token) {
        throw new Error("Login required");
      }

      const response = await fetch(
        `${apiBaseUrl}${apiPath(`/api/account/orders/${currentOrder.id}/invoice`)}`,
        {
          headers: apiHeaders({
            Authorization: `Bearer ${token}`,
          }),
        },
      );

      if (!response.ok) {
        const data = (await response.json().catch(() => ({}))) as { error?: string };
        throw new Error(data.error ?? "Could not download invoice");
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = `invoice-${currentOrder.orderNumber}.pdf`;
      document.body.appendChild(anchor);
      anchor.click();
      anchor.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      setInvoiceError(error instanceof Error ? error.message : "Could not download invoice");
    } finally {
      setIsDownloadingInvoice(false);
    }
  }

  return (
    <div className="fixed inset-0 z-[80] overflow-y-auto bg-slate-950/70 px-4 py-6 font-['Space_Grotesk'] backdrop-blur-sm">
      <button
        type="button"
        className="fixed inset-0 cursor-default"
        onClick={onClose}
        aria-label="Close order details"
      />
      <div className="relative mx-auto w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-white shadow-2xl">
        <div className="flex items-start justify-between gap-4 bg-foreground p-5 text-background">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.14em] text-primary">
              {currentOrder.orderNumber}
            </p>
            <h2 className="mt-1 text-2xl font-black text-background">{currentOrder.packageName}</h2>
            <p className="mt-2 text-sm font-bold text-background/70">
              {formatDisplayText(currentOrder.status)} -{" "}
              {formatDateTime(currentOrder.updatedAt ?? currentOrder.createdAt)}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 place-items-center rounded-md border border-background/20 text-background transition hover:bg-background/10"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="grid gap-5 p-5 lg:grid-cols-[1fr_0.9fr]">
          <div className="space-y-4">
            <div className="flex items-start gap-3 rounded-lg border border-border bg-slate-50 p-4">
              <div className="grid h-20 w-24 shrink-0 place-items-center overflow-hidden rounded-lg border border-border bg-white">
                {currentOrder.modelImage ? (
                  <img
                    src={currentOrder.modelImage}
                    alt={currentOrder.modelName}
                    className="h-full w-full object-contain p-2"
                  />
                ) : (
                  <VehicleIcon className="h-7 w-7 text-muted-foreground" />
                )}
              </div>
              <div className="min-w-0">
                <p className="font-black">{getVehicleDisplayName(currentOrder)}</p>
                <p className="mt-1 text-sm font-bold text-muted-foreground">
                  {formatDisplayText(currentOrder.vehicleType)}
                  {currentOrder.fuelType ? ` - ${formatDisplayText(currentOrder.fuelType)}` : ""}
                  {!isElectricFuel(currentOrder.fuelType) && currentOrder.engineCc
                    ? ` - ${currentOrder.engineCc} cc`
                    : ""}
                </p>
                <p className="mt-2 text-xs font-black uppercase tracking-[0.12em] text-primary">
                  {formatDisplayText(currentOrder.packageType)}
                  {currentOrder.estimatedDuration ? ` - ${currentOrder.estimatedDuration}` : ""}
                </p>
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-3">
              <OrderDetailStat
                label="Amount"
                value={
                  currentOrder.finalPrice > 0
                    ? formatCurrency(currentOrder.finalPrice)
                    : "To confirm"
                }
              />
              <OrderDetailStat
                label="Payment"
                value={formatPaymentMode(currentOrder.paymentMode)}
              />
              <OrderDetailStat
                label="Payment status"
                value={formatDisplayText(currentOrder.paymentStatus)}
              />
              {currentOrder.paymentMode === "online_razorpay" ? (
                <OrderDetailStat
                  label="Payment ID"
                  value={currentOrder.razorpayPaymentId ?? "Pending payment"}
                  className="sm:col-span-3"
                />
              ) : null}
            </div>

            {canPayAgain ? (
              <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <p className="font-black text-foreground">
                      {currentOrder.paymentStatus === "failed"
                        ? "Payment failed"
                        : "Payment pending"}
                    </p>
                    <p className="mt-1 text-sm font-bold text-muted-foreground">
                      Complete the online payment to confirm this order as paid.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={payAgain}
                    disabled={isPayingAgain}
                    className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 disabled:opacity-60"
                  >
                    {isPayingAgain ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <CreditCard className="h-4 w-4" />
                    )}
                    Pay again
                  </button>
                </div>
                {paymentError ? (
                  <p className="mt-3 rounded-md border border-destructive/25 bg-white px-3 py-2 text-sm font-bold text-destructive">
                    {paymentError}
                  </p>
                ) : null}
              </div>
            ) : null}

            {isCompleted ? (
              <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <p className="font-black text-foreground">Invoice ready</p>
                    <p className="mt-1 text-sm font-bold text-muted-foreground">
                      Download the completed order invoice as PDF.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={downloadInvoice}
                    disabled={isDownloadingInvoice}
                    className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground shadow-elegant transition hover:opacity-95 disabled:opacity-60"
                  >
                    {isDownloadingInvoice ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Download className="h-4 w-4" />
                    )}
                    Download invoice
                  </button>
                </div>
                {invoiceError ? (
                  <p className="mt-3 rounded-md border border-destructive/25 bg-white px-3 py-2 text-sm font-bold text-destructive">
                    {invoiceError}
                  </p>
                ) : null}
              </div>
            ) : null}

            <div className="rounded-lg border border-border p-4">
              <p className="text-xs font-black uppercase tracking-[0.12em] text-muted-foreground">
                Service address
              </p>
              <p className="mt-2 text-sm font-bold leading-6 text-foreground">
                {formatAccountAddressLine(currentOrder.address)}
              </p>
            </div>

            {features.length > 0 ? (
              <div className="rounded-lg border border-border p-4">
                <p className="text-xs font-black uppercase tracking-[0.12em] text-muted-foreground">
                  Included
                </p>
                <div className="mt-3 grid gap-2 sm:grid-cols-2">
                  {features.slice(0, 8).map((feature) => (
                    <div
                      key={feature}
                      className="flex items-start gap-2 text-sm font-bold text-muted-foreground"
                    >
                      <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                      <span>{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}
          </div>

          <OrderProgressTimeline order={currentOrder} />
        </div>
      </div>
    </div>
  );
}

function OrderDetailStat({
  className = "",
  label,
  value,
}: {
  className?: string;
  label: string;
  value: string;
}) {
  return (
    <div className={`rounded-md bg-slate-50 p-3 ${className}`}>
      <p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </p>
      <p className="mt-1 break-all text-sm font-black text-foreground">{value}</p>
    </div>
  );
}

function OrderProgressTimeline({ order }: { order: AccountOrder }) {
  const isPaymentOnly = paymentPendingStatuses.includes(order.status);
  const statusIndex = orderProgressSteps.indexOf(order.status);
  const isCancelled = order.status === "cancelled";
  const currentIndex = isCancelled || isPaymentOnly ? 0 : Math.max(statusIndex, 0);

  const steps = isPaymentOnly
    ? [order.status]
    : isCancelled
      ? ["placed", "cancelled"]
      : orderProgressSteps;

  return (
    <div className="rounded-md border border-border p-4">
      <div className="flex items-center gap-3">
        <PackageCheck className="h-5 w-5 text-primary" />
        <div>
          <p className="font-black">Order progress</p>
          <p className="text-xs font-bold text-muted-foreground">
            Placed time and latest status time
          </p>
        </div>
      </div>

      <div className="mt-5 space-y-0">
        {steps.map((step, index) => {
          const isDone = isCancelled ? index <= 1 : index <= currentIndex;
          const isCurrent = step === order.status;
          const time =
            step === "placed"
              ? order.createdAt
              : isCurrent
                ? (order.updatedAt ?? order.createdAt)
                : null;

          return (
            <div key={step} className="grid grid-cols-[28px_minmax(0,1fr)] gap-3">
              <div className="flex flex-col items-center">
                <div
                  className={`grid h-7 w-7 place-items-center rounded-full border ${
                    isDone
                      ? "border-primary bg-primary text-primary-foreground"
                      : "border-border bg-white text-muted-foreground"
                  }`}
                >
                  <CheckCircle2 className="h-4 w-4" />
                </div>
                {index < steps.length - 1 ? (
                  <div className={`h-12 w-px ${isDone ? "bg-primary" : "bg-border"}`} />
                ) : null}
              </div>
              <div className="pb-5">
                <p className="text-sm font-black text-foreground">{formatDisplayText(step)}</p>
                <p className="mt-1 text-xs font-bold text-muted-foreground">
                  {time
                    ? formatDateTime(time)
                    : isDone
                      ? "Completed before latest update"
                      : "Pending"}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AddressesSection({
  addresses,
  isSaving,
  onSave,
  onDelete,
}: {
  addresses: AccountAddress[];
  isSaving: boolean;
  onSave: (event: FormEvent<HTMLFormElement>) => Promise<boolean>;
  onDelete: (id: number) => void;
}) {
  const [draft, setDraft] = useState<AddressDraft>(emptyAddressDraft);
  const [isLocating, setIsLocating] = useState(false);
  const [locationStatus, setLocationStatus] = useState("Fetching your current location...");

  const updateDraft = (key: keyof AddressDraft, value: string) => {
    setDraft((current) => ({ ...current, [key]: value }));
  };

  const applyCoordinates = useCallback(
    async (latitude: number, longitude: number, shouldOverwrite = true) => {
      try {
        const response = await fetch(`${apiBaseUrl}${apiPath("/api/locations/resolve")}`, {
          method: "POST",
          headers: apiHeaders({ "Content-Type": "application/json" }),
          body: JSON.stringify({ lat: latitude, lng: longitude }),
        });
        const data = (await response.json().catch(() => ({}))) as ReverseLocationResponse;

        if (!response.ok) {
          throw new Error("Could not fetch address details.");
        }

        const address = data.address ?? {};
        const displayParts = getDisplayNameParts(data.displayName);
        const displaySector = getSectorFromDisplayName(data.displayName);
        const street =
          [address.house_number, address.road ?? address.pedestrian ?? address.footway]
            .filter(Boolean)
            .join(", ") ||
          displayParts[0] ||
          "";
        const sector =
          address.quarter ??
          address.city_block ??
          displaySector ??
          address.neighbourhood ??
          address.suburb ??
          "";
        const locality =
          sector ??
          address.locality ??
          address.residential ??
          address.city_district ??
          address.hamlet ??
          address.village ??
          displayParts[1] ??
          "";
        const city =
          address.city ??
          address.town ??
          address.village ??
          address.county ??
          displayParts.find((part) => /gurugram|gurgaon|delhi|noida|faridabad/i.test(part)) ??
          "";
        const state = address.state || "";
        const pincode = (address.postcode || "").replace(/\D/g, "").slice(0, 6);
        const landmark = address.amenity ?? address.building ?? address.shop ?? "";

        setDraft((current) => ({
          ...current,
          houseNo: shouldOverwrite
            ? address.house_number || ""
            : current.houseNo || address.house_number || "",
          street: shouldOverwrite ? street : current.street || street,
          locality: shouldOverwrite ? locality : current.locality || locality,
          city: shouldOverwrite ? city : current.city || city,
          state: shouldOverwrite ? state : current.state || state,
          pincode: shouldOverwrite ? pincode : current.pincode || pincode,
          landmark: shouldOverwrite ? landmark : current.landmark || landmark,
          latitude,
          longitude,
        }));

        setLocationStatus(data.displayName ?? "Location fetched. Please confirm the details.");
      } catch (error) {
        setDraft((current) => ({
          ...current,
          latitude,
          longitude,
        }));

        setLocationStatus(
          error instanceof Error
            ? error.message
            : "Location saved, but full address details could not be fetched.",
        );
      }
    },
    [],
  );

  const detectLocation = useCallback(async () => {
    if (!navigator.geolocation) {
      setLocationStatus("Location is not supported in this browser.");
      return;
    }

    setIsLocating(true);
    setLocationStatus("Allow location access to auto-fill this address.");

    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const latitude = Number(position.coords.latitude.toFixed(6));
        const longitude = Number(position.coords.longitude.toFixed(6));

        try {
          await applyCoordinates(latitude, longitude, true);
        } finally {
          setIsLocating(false);
        }
      },
      (error) => {
        setLocationStatus(error.message || "Location permission was not granted.");
        setIsLocating(false);
      },
      {
        enableHighAccuracy: true,
        maximumAge: 0,
        timeout: 20000,
      },
    );
  }, [applyCoordinates]);

  const selectMapPoint = useCallback(
    async (latitude: number, longitude: number) => {
      setIsLocating(true);
      setLocationStatus("Resolving selected map pin...");

      try {
        await applyCoordinates(Number(latitude.toFixed(6)), Number(longitude.toFixed(6)), true);
      } finally {
        setIsLocating(false);
      }
    },
    [applyCoordinates],
  );

  useEffect(() => {
    detectLocation();
  }, [detectLocation]);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    const didSave = await onSave(event);

    if (didSave) {
      setDraft(emptyAddressDraft);
      setLocationStatus("Address saved. Fetch location again for the next address.");
    }
  }

  return (
    <section className="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
      <FormCard icon={Plus} title="Add address">
        <form onSubmit={handleSubmit} className="space-y-3">
          <AddressLocationMap
            latitude={draft.latitude}
            longitude={draft.longitude}
            status={locationStatus}
            isLocating={isLocating}
            onRefresh={detectLocation}
            onPointSelect={selectMapPoint}
          />

          <input type="hidden" name="latitude" value={draft.latitude ?? ""} />
          <input type="hidden" name="longitude" value={draft.longitude ?? ""} />

          <select
            required
            name="type"
            value={draft.type}
            onChange={(event) => updateDraft("type", event.target.value)}
            className={fieldClass}
          >
            <option value="">Address type</option>
            <option value="home">Home</option>
            <option value="other">Other</option>
          </select>

          <Input
            name="houseNo"
            placeholder="House / flat / building number"
            value={draft.houseNo}
            onChange={(value) => updateDraft("houseNo", value)}
          />

          <Input
            name="street"
            placeholder="Building / road / street"
            value={draft.street}
            onChange={(value) => updateDraft("street", value)}
          />

          <Input
            name="locality"
            placeholder="Sector / locality / area"
            value={draft.locality}
            onChange={(value) => updateDraft("locality", value)}
          />

          <div className="grid gap-3 sm:grid-cols-3">
            <Input
              name="city"
              placeholder="City"
              value={draft.city}
              onChange={(value) => updateDraft("city", value)}
            />

            <Input
              name="state"
              placeholder="State"
              value={draft.state}
              onChange={(value) => updateDraft("state", value)}
            />

            <Input
              inputMode="numeric"
              maxLength={6}
              name="pincode"
              pattern="[0-9]{6}"
              placeholder="Pincode"
              value={draft.pincode}
              onChange={(value) => updateDraft("pincode", value.replace(/\D/g, "").slice(0, 6))}
            />
          </div>

          <Input
            name="landmark"
            placeholder="Landmark / nearby place"
            required={false}
            value={draft.landmark}
            onChange={(value) => updateDraft("landmark", value)}
          />

          <Checkbox name="isDefault" label="Set as default" />

          <SaveButton isSaving={isSaving} label="Save address" />
        </form>
      </FormCard>

      <ListCard icon={MapPin} title="Saved addresses">
        {addresses.length === 0 ? <EmptyState text="No saved addresses." /> : null}

        {addresses.map((address) => (
          <SavedAddressCard
            key={address.id}
            address={address}
            onDelete={() => onDelete(address.id)}
          />
        ))}
      </ListCard>
    </section>
  );
}

function VehiclesSection({
  vehicles,
  onDelete,
}: {
  vehicles: AccountVehicle[];
  onDelete: (id: number) => void;
}) {
  const [serviceVehicle, setServiceVehicle] = useState<AccountVehicle | null>(null);
  const [deleteVehicle, setDeleteVehicle] = useState<AccountVehicle | null>(null);
  const carCount = vehicles.filter((vehicle) => vehicle.vehicleType === "car").length;
  const bikeCount = vehicles.filter((vehicle) => vehicle.vehicleType === "bike").length;
  const defaultVehicle = vehicles.find((vehicle) => vehicle.isDefault);

  return (
    <section className="overflow-hidden rounded-xl border border-border bg-white shadow-sm">
      <div className="border-b border-border bg-slate-50/80 p-4 sm:p-5">
        <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
          <div className="flex items-center gap-3">
            <div className="grid h-11 w-11 place-items-center rounded-lg bg-primary text-primary-foreground shadow-[0_12px_24px_rgba(211,47,47,0.22)]">
              <CarFront className="h-5 w-5" />
            </div>
            <div>
              <h2 className="text-xl font-black tracking-tight">Saved vehicles</h2>
              <p className="text-sm font-bold text-muted-foreground">
                {vehicles.length} vehicle{vehicles.length === 1 ? "" : "s"} ready for booking
              </p>
            </div>
          </div>

          <div className="grid gap-2 sm:grid-cols-3 lg:min-w-[420px]">
            <OrderSummaryStat label="Cars" value={carCount} />
            <OrderSummaryStat label="Bikes" value={bikeCount} />
            <OrderSummaryStat
              label="Default"
              value={defaultVehicle ? getVehicleDisplayName(defaultVehicle) : "-"}
            />
          </div>
        </div>
      </div>

      <div className="grid gap-4 p-4 sm:p-5 md:grid-cols-2 xl:grid-cols-3">
        {vehicles.length === 0 ? <EmptyState text="No saved vehicles." /> : null}
        {vehicles.map((vehicle) => (
          <SavedVehicleCard
            key={vehicle.id}
            vehicle={vehicle}
            onChooseService={() => setServiceVehicle(vehicle)}
            onDelete={() => setDeleteVehicle(vehicle)}
          />
        ))}
      </div>
      {serviceVehicle ? (
        <VehicleServiceChooser vehicle={serviceVehicle} onClose={() => setServiceVehicle(null)} />
      ) : null}
      {deleteVehicle ? (
        <DeleteVehicleDialog
          vehicle={deleteVehicle}
          onCancel={() => setDeleteVehicle(null)}
          onConfirm={() => {
            onDelete(deleteVehicle.id);
            setDeleteVehicle(null);
          }}
        />
      ) : null}
    </section>
  );
}

function AmcSection({ packages }: { packages: AccountAmcPackage[] }) {
  return (
    <section className="rounded-lg border border-border bg-white shadow-sm">
      <SectionHeader icon={ShieldCheck} title="AMC packages" />
      <div className="grid gap-3 p-4">
        {packages.length === 0 ? (
          <EmptyState text="No AMC packages assigned yet. Admin can assign AMC records later." />
        ) : null}
        {packages.map((item) => (
          <div key={item.id} className="rounded-md border border-border p-4">
            <p className="text-lg font-black">{item.packageName}</p>
            <p className="mt-1 text-sm font-bold text-muted-foreground">
              {item.vehicleName ?? item.vehicleType}
            </p>
            <p className="mt-3 text-sm font-bold text-muted-foreground">
              {formatDate(item.startsAt)} - {formatDate(item.expiresAt)}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionHeader({
  icon: Icon,
  title,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
}) {
  return (
    <div className="flex items-center gap-3 border-b border-border px-4 py-3">
      <div className="grid h-9 w-9 place-items-center rounded-md bg-primary/10 text-primary">
        <Icon className="h-4 w-4" />
      </div>
      <h2 className="font-black">{title}</h2>
    </div>
  );
}

function FormCard({
  icon,
  title,
  children,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
      <SectionHeader icon={icon} title={title} />
      <div className="pt-4">{children}</div>
    </div>
  );
}

function ListCard({
  icon,
  title,
  children,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-lg border border-border bg-white shadow-sm">
      <SectionHeader icon={icon} title={title} />
      <div className="grid gap-3 p-4">{children}</div>
    </div>
  );
}

const fieldClass =
  "h-11 w-full rounded-md border border-border bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15";

function Input({
  inputMode,
  maxLength,
  name,
  onChange,
  pattern,
  placeholder,
  required = true,
  value,
}: {
  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
  maxLength?: number;
  name: string;
  onChange?: (value: string) => void;
  pattern?: string;
  placeholder: string;
  required?: boolean;
  value?: string;
}) {
  return (
    <input
      inputMode={inputMode}
      maxLength={maxLength}
      onChange={onChange ? (event) => onChange(event.target.value) : undefined}
      pattern={pattern}
      required={required && name !== "fuelType" && name !== "registrationNumber"}
      name={name}
      placeholder={placeholder}
      value={value}
      className={fieldClass}
    />
  );
}

function formatAddressType(value: string | null | undefined) {
  if (!value) {
    return "Address";
  }

  return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
}

function Checkbox({ name, label }: { name: string; label: string }) {
  return (
    <label className="flex items-center gap-2 text-sm font-bold text-muted-foreground">
      <input name={name} type="checkbox" className="h-4 w-4 accent-primary" />
      {label}
    </label>
  );
}

function SaveButton({ isSaving, label }: { isSaving: boolean; label: string }) {
  return (
    <button
      disabled={isSaving}
      className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground disabled:opacity-60"
    >
      {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
      {label}
    </button>
  );
}

function SavedAddressCard({
  address,
  onDelete,
}: {
  address: AccountAddress;
  onDelete: () => void;
}) {
  const placeParts = [address.locality, address.city, address.state, address.pincode].filter(
    Boolean,
  );
  const streetParts = [address.houseNo, address.street].filter(Boolean);

  return (
    <div className="flex items-start justify-between gap-3 rounded-md border border-border p-4">
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-2">
          <p className="font-black">{formatAddressType(address.type)}</p>
          {address.isDefault ? (
            <span className="rounded-md bg-primary/10 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-primary">
              Default
            </span>
          ) : null}
          {address.latitude !== null && address.longitude !== null ? (
            <span className="rounded-md bg-emerald-50 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-emerald-700">
              Location saved
            </span>
          ) : null}
        </div>
        <p className="mt-2 text-sm font-bold leading-6 text-muted-foreground">
          {streetParts.length > 0 ? streetParts.join(", ") : address.address}
        </p>
        {address.landmark ? (
          <p className="mt-1 text-sm font-bold text-muted-foreground">{address.landmark}</p>
        ) : null}
        {placeParts.length > 0 ? (
          <p className="mt-1 text-sm font-black text-foreground">{placeParts.join(", ")}</p>
        ) : null}
      </div>
      <button
        type="button"
        onClick={onDelete}
        className="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-destructive/25 text-destructive transition hover:bg-destructive/10"
        aria-label={`Delete ${formatAddressType(address.type)}`}
      >
        <Trash2 className="h-4 w-4" />
      </button>
    </div>
  );
}

const vehicleServices: Array<{
  slug: string;
  title: string;
  vehicleTypes: Array<"car" | "bike">;
  image: string;
}> = [
  {
    slug: "car-service",
    title: "Car Service",
    vehicleTypes: ["car"],
    image: "/images/car-service-new-2.webp",
  },
  {
    slug: "bike-service",
    title: "Bike Service",
    vehicleTypes: ["bike"],
    image: "/images/bike-service-new-2.webp",
  },
  {
    slug: "car-ac-service",
    title: "Car AC Service",
    vehicleTypes: ["car"],
    image: "/images/car-ac-service-new-1.webp",
  },
  {
    slug: "engine-repair",
    title: "Engine Repair",
    vehicleTypes: ["car", "bike"],
    image: "/images/engine-service-new-2.webp",
  },
  {
    slug: "battery-service",
    title: "Battery Service",
    vehicleTypes: ["car", "bike"],
    image: "/images/battery-service-new-7.webp",
  },
  {
    slug: "tyre-wheel",
    title: "Tyre & Wheel",
    vehicleTypes: ["car", "bike"],
    image: "/images/tyre-service-new-2.webp",
  },
];

function SavedVehicleCard({
  vehicle,
  onChooseService,
  onDelete,
}: {
  vehicle: AccountVehicle;
  onChooseService: () => void;
  onDelete: () => void;
}) {
  const vehicleName = getVehicleDisplayName(vehicle);
  const VehicleIcon = vehicle.vehicleType === "bike" ? Bike : CarFront;
  const vehicleSpecs = [
    formatDisplayText(vehicle.vehicleType),
    vehicle.fuelType ? formatDisplayText(vehicle.fuelType) : null,
    !isElectricFuel(vehicle.fuelType) && vehicle.engineCc ? `${vehicle.engineCc} cc` : null,
  ].filter(Boolean);

  return (
    <div className="group flex h-full flex-col overflow-hidden rounded-xl border border-border bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md">
      <button
        type="button"
        onClick={onChooseService}
        className="grid aspect-[16/10] w-full place-items-center border-b border-border bg-slate-50 transition group-hover:bg-primary/5"
      >
        {vehicle.modelImage ? (
          <img
            src={vehicle.modelImage}
            alt={vehicleName}
            className="h-full w-full object-contain p-5"
          />
        ) : (
          <VehicleIcon className="h-10 w-10 text-muted-foreground" />
        )}
      </button>

      <div className="flex flex-1 flex-col p-4">
        <div className="flex items-start justify-between gap-3">
          <button type="button" onClick={onChooseService} className="min-w-0 text-left">
            <p className="line-clamp-2 text-lg font-black leading-6 text-foreground">
              {vehicleName}
            </p>
            <p className="mt-1 text-sm font-bold text-muted-foreground">
              {vehicleSpecs.join(" - ")}
            </p>
          </button>
          <button
            type="button"
            onClick={onDelete}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-destructive/25 text-destructive transition hover:bg-destructive/10"
            aria-label={`Delete ${vehicleName}`}
          >
            <Trash2 className="h-4 w-4" />
          </button>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          {vehicle.isDefault ? (
            <span className="rounded-md bg-primary/10 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-primary">
              Default
            </span>
          ) : null}
          {vehicle.registrationNumber ? (
            <span className="rounded-md bg-slate-100 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
              {vehicle.registrationNumber}
            </span>
          ) : null}
          {vehicle.manufacturerName ? (
            <span className="rounded-md bg-emerald-50 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-emerald-700">
              {vehicle.manufacturerName}
            </span>
          ) : null}
        </div>

        <div className="mt-auto pt-5">
          <button
            type="button"
            onClick={onChooseService}
            className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-3 text-xs font-black text-primary-foreground shadow-elegant transition hover:opacity-95"
          >
            <PackageCheck className="h-4 w-4" />
            Book service
          </button>
        </div>
      </div>
    </div>
  );
}

function DeleteVehicleDialog({
  vehicle,
  onCancel,
  onConfirm,
}: {
  vehicle: AccountVehicle;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  const vehicleName = getVehicleDisplayName(vehicle);

  return (
    <div className="fixed inset-0 z-[90] grid place-items-center bg-foreground/65 p-4 font-['Space_Grotesk'] backdrop-blur-sm">
      <button
        type="button"
        className="absolute inset-0 cursor-default"
        onClick={onCancel}
        aria-label="Cancel vehicle delete"
      />
      <div className="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-white shadow-2xl">
        <div className="border-b border-border bg-slate-50 p-5">
          <div className="flex items-start gap-3">
            <div className="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-destructive/10 text-destructive">
              <Trash2 className="h-5 w-5" />
            </div>
            <div className="min-w-0">
              <h2 className="text-xl font-black tracking-tight text-foreground">
                Delete saved vehicle?
              </h2>
              <p className="mt-1 break-words text-sm font-bold text-muted-foreground">
                {vehicleName}
              </p>
            </div>
          </div>
        </div>
        <div className="p-5">
          <p className="text-sm font-semibold leading-6 text-muted-foreground">
            This vehicle will be removed from your account. Your past orders will not be deleted.
          </p>
          <div className="mt-5 grid grid-cols-2 gap-2">
            <button
              type="button"
              onClick={onCancel}
              className="h-11 rounded-md border border-border text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={onConfirm}
              className="h-11 rounded-md bg-destructive px-4 text-sm font-black text-destructive-foreground transition hover:opacity-95"
            >
              Delete
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function VehicleServiceChooser({
  vehicle,
  onClose,
}: {
  vehicle: AccountVehicle;
  onClose: () => void;
}) {
  const services = vehicleServices.filter((service) =>
    service.vehicleTypes.includes(vehicle.vehicleType),
  );
  const hasModelRoute = vehicle.manufacturerSlug && vehicle.modelSlug;
  const vehicleName = getVehicleDisplayName(vehicle);

  return (
    <div className="fixed inset-0 z-[80] overflow-y-auto bg-slate-950/70 px-4 py-6 font-['Space_Grotesk'] backdrop-blur-sm">
      <button
        type="button"
        className="fixed inset-0 cursor-default"
        onClick={onClose}
        aria-label="Close services"
      />
      <div className="relative mx-auto w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-white shadow-2xl">
        <div className="flex items-start justify-between gap-4 bg-foreground p-5 text-background">
          <div className="min-w-0">
            <p className="text-xs font-black uppercase tracking-[0.14em] text-primary">
              Choose service
            </p>
            <h2 className="mt-1 truncate text-2xl font-black text-background">{vehicleName}</h2>
            <p className="mt-2 text-sm font-bold text-background/70">
              {formatDisplayText(vehicle.vehicleType)}
              {vehicle.fuelType ? ` - ${formatDisplayText(vehicle.fuelType)}` : ""}
              {vehicle.registrationNumber ? ` - ${vehicle.registrationNumber}` : ""}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-background/20 text-background transition hover:bg-background/10"
            aria-label="Close services"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="grid gap-4 p-5 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => {
            const href = hasModelRoute
              ? routePath(
                  `/services/${service.slug}/${encodeURIComponent(
                    vehicle.manufacturerSlug ?? "",
                  )}/${encodeURIComponent(vehicle.modelSlug ?? "")}`,
                )
              : routePath(`/services/${service.slug}`);

            return (
              <Link
                key={service.slug}
                href={href}
                className="group overflow-hidden rounded-xl border border-border bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md"
              >
                <div className="grid aspect-[4/3] place-items-center border-b border-border bg-slate-50">
                  <img
                    src={service.image}
                    alt={service.title}
                    className="h-full w-full object-contain p-4"
                  />
                </div>
                <div className="p-4">
                  <p className="font-black text-foreground">{service.title}</p>
                  <p className="mt-2 text-xs font-black uppercase tracking-[0.12em] text-primary">
                    View packages
                  </p>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function ItemCard({
  title,
  subtitle,
  meta,
  onDelete,
}: {
  title: string;
  subtitle: string;
  meta: string;
  onDelete: () => void;
}) {
  return (
    <div className="flex items-start justify-between gap-3 rounded-md border border-border p-4">
      <div className="min-w-0">
        <p className="font-black">{title}</p>
        <p className="mt-1 text-sm font-bold text-muted-foreground">{subtitle}</p>
        {meta ? (
          <p className="mt-2 text-xs font-black uppercase tracking-[0.12em] text-primary">{meta}</p>
        ) : null}
      </div>
      <button
        type="button"
        onClick={onDelete}
        className="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-destructive/25 text-destructive transition hover:bg-destructive/10"
        aria-label={`Delete ${title}`}
      >
        <Trash2 className="h-4 w-4" />
      </button>
    </div>
  );
}

function EmptyState({ text }: { text: string }) {
  return (
    <div className="grid place-items-center rounded-md border border-dashed border-border px-4 py-8 text-center">
      <Home className="h-6 w-6 text-muted-foreground" />
      <p className="mt-3 text-sm font-bold text-muted-foreground">{text}</p>
    </div>
  );
}