"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import {
  ArrowLeft,
  CalendarClock,
  CarFront,
  Home,
  Loader2,
  MapPin,
  ShieldCheck,
  Smartphone,
  User,
  X,
} from "lucide-react";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { adminRequest, type AdminUser } from "@/lib/admin-api";

type AdminUserSession = {
  id: number;
  deviceName: string | null;
  userAgent: string | null;
  ipAddress: string | null;
  hasFcmToken: boolean;
  expiresAt: string | null;
  revokedAt: string | null;
  lastUsedAt: string;
  createdAt: string;
};

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

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

type AdminUserVehicle = {
  id: number;
  vehicleType: "car" | "bike";
  manufacturerName: string;
  modelName: string;
  fuelType: string | null;
  registrationNumber: string | null;
  isDefault: boolean;
  createdAt: string;
  updatedAt: string;
};

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

type AdminUserOrder = {
  id: number;
  orderNumber: string;
  userId: number;
  userName: string;
  userMobile: string;
  userEmail: string | null;
  serviceSlug: string;
  packageId: number | null;
  packageType: string;
  packageName: string;
  estimatedDuration: string | null;
  vehicleType: "car" | "bike";
  manufacturerSlug: string | null;
  manufacturerName: string;
  modelId: number | null;
  modelSlug: string | null;
  modelName: string;
  fuelType: string | null;
  modelImage: string | null;
  engineCc: number | null;
  basePrice: number;
  discountPercentage: number;
  finalPrice: number;
  paymentMode: string;
  paymentStatus: string;
  status: string;
  address: Record<string, any>;
  orderDetails: Record<string, any>;
  createdAt: string;
  updatedAt: string;
};

type AdminUserDetail = {
  user: AdminUser & { referredBy: number | null };
  sessions: AdminUserSession[];
  bookings: AdminUserBooking[];
  orders: AdminUserOrder[];
  addresses: AdminUserAddress[];
  vehicles: AdminUserVehicle[];
  amcPackages: AdminUserAmcPackage[];
};

type DetailSection = "sessions" | "orders" | "bookings" | "addresses" | "vehicles" | "amcPackages";

const previewLimit = 3;

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 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 formatPaymentMode(value: string) {
  if (value === "cash_after_service") {
    return "Cash after service";
  }

  return formatDisplayText(value);
}

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

export default function AdminUserDetailPage() {
  const params = useParams<{ id: string }>();
  const [detail, setDetail] = useState<AdminUserDetail | null>(null);
  const [openSection, setOpenSection] = useState<DetailSection | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState("");

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

    try {
      const data = await adminRequest<AdminUserDetail>(`/api/admin/users/${params.id}`);
      setDetail(data);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load user");
    } finally {
      setIsLoading(false);
    }
  }, [params.id]);

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

  const counts = useMemo(
    () => ({
      activeSessions: detail?.sessions.filter((session) => !session.revokedAt).length ?? 0,
      orders: detail?.orders.length ?? 0,
      bookings: detail?.bookings.length ?? 0,
      addresses: detail?.addresses.length ?? 0,
      vehicles: detail?.vehicles.length ?? 0,
      amc: detail?.amcPackages.length ?? 0,
    }),
    [detail],
  );

  return (
    <AdminGuard>
      <AdminShell title="User details" lead="Customer profile, activity, and saved account data.">
        <section className="space-y-5">
          <Link
            href="/admin/users"
            className="inline-flex h-10 items-center gap-2 rounded-md border border-border px-3 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to users
          </Link>

          {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 && detail ? (
            <>
              <div className="rounded-lg border border-border bg-white p-5 shadow-sm">
                <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
                  <div className="flex min-w-0 items-center gap-4">
                    <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-lg border border-border bg-slate-50">
                      {detail.user.profileImage ? (
                        <Image
                          src={detail.user.profileImage}
                          alt={detail.user.name}
                          fill
                          sizes="80px"
                          className="object-cover"
                        />
                      ) : (
                        <div className="grid h-full place-items-center text-muted-foreground">
                          <User className="h-8 w-8" />
                        </div>
                      )}
                    </div>
                    <div className="min-w-0">
                      <h1 className="truncate text-3xl font-black tracking-tight text-foreground">
                        {detail.user.name && detail.user.name !== "User"
                          ? detail.user.name
                          : "Profile pending"}
                      </h1>
                      <p className="mt-1 text-sm font-bold text-muted-foreground">
                        {detail.user.mobile} - {detail.user.email ?? "No email saved"}
                      </p>
                      <div className="mt-3 flex flex-wrap gap-2">
                        <StatusBadge value={detail.user.status} />
                        <StatusBadge
                          value={
                            detail.user.isMobileVerified ? "mobile verified" : "mobile pending"
                          }
                        />
                      </div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-2 text-center sm:grid-cols-3 lg:grid-cols-6">
                    <MiniStat label="Sessions" value={counts.activeSessions} />
                    <MiniStat label="Orders" value={counts.orders} />
                    <MiniStat label="Bookings" value={counts.bookings} />
                    <MiniStat label="Addresses" value={counts.addresses} />
                    <MiniStat label="Vehicles" value={counts.vehicles} />
                    <MiniStat label="AMC" value={counts.amc} />
                  </div>
                </div>
              </div>

              <div className="grid gap-4 xl:grid-cols-3">
                <InfoPanel
                  icon={User}
                  title="Profile"
                  rows={[
                    ["User ID", String(detail.user.id)],
                    ["Referral code", detail.user.referralCode ?? "-"],
                    ["Referred by", detail.user.referredBy ? String(detail.user.referredBy) : "-"],
                    ["Created", formatDateTime(detail.user.createdAt)],
                    ["Last login", formatDateTime(detail.user.lastLoginAt)],
                    ["Last active", formatDateTime(detail.user.lastActiveAt)],
                  ]}
                />
                <CollectionPanel
                  count={detail.sessions.length}
                  icon={Smartphone}
                  title="Sessions"
                  onViewMore={
                    detail.sessions.length > previewLimit
                      ? () => setOpenSection("sessions")
                      : undefined
                  }
                >
                  {detail.sessions.length === 0 ? <Empty text="No sessions found." /> : null}
                  {detail.sessions.slice(0, previewLimit).map((session) => (
                    <RecordCard
                      key={session.id}
                      title={getBrowserName(session.userAgent)}
                      badge={session.revokedAt ? "logged out" : "active"}
                      lines={[
                        session.deviceName ?? getPlatformName(session.userAgent),
                        session.ipAddress ? `IP: ${session.ipAddress}` : "IP: -",
                        `Last used: ${formatDateTime(session.lastUsedAt)}`,
                      ]}
                    />
                  ))}
                </CollectionPanel>
                <CollectionPanel
                  count={detail.orders.length}
                  icon={CalendarClock}
                  title="Orders"
                  onViewMore={
                    detail.orders.length > previewLimit ? () => setOpenSection("orders") : undefined
                  }
                >
                  {detail.orders.length === 0 ? <Empty text="No orders found." /> : null}
                  {detail.orders.slice(0, previewLimit).map((order) => (
                    <RecordCard
                      key={order.id}
                      title={order.packageName}
                      badge={order.status}
                      lines={[
                        `${order.orderNumber} - ${order.userMobile}`,
                        `${order.manufacturerName} ${order.modelName}`,
                        `${formatCurrency(order.finalPrice)} - ${formatPaymentMode(order.paymentMode)}`,
                      ]}
                    />
                  ))}
                </CollectionPanel>
              </div>

              <div className="grid gap-4 xl:grid-cols-3">
                <CollectionPanel
                  count={detail.bookings.length}
                  icon={CalendarClock}
                  title="Old bookings"
                  onViewMore={
                    detail.bookings.length > previewLimit
                      ? () => setOpenSection("bookings")
                      : undefined
                  }
                >
                  {detail.bookings.length === 0 ? <Empty text="No bookings found." /> : null}
                  {detail.bookings.slice(0, previewLimit).map((booking) => (
                    <RecordCard
                      key={booking.id}
                      title={booking.service}
                      badge={booking.status}
                      lines={[
                        `${booking.vehicleType} - ${booking.phone}`,
                        `${formatDateTime(booking.preferredDate)} - ${booking.preferredTime}`,
                        booking.address,
                      ]}
                    />
                  ))}
                </CollectionPanel>
                <CollectionPanel
                  count={detail.addresses.length}
                  icon={MapPin}
                  title="Addresses"
                  onViewMore={
                    detail.addresses.length > previewLimit
                      ? () => setOpenSection("addresses")
                      : undefined
                  }
                >
                  {detail.addresses.length === 0 ? <Empty text="No addresses found." /> : null}
                  {detail.addresses.slice(0, previewLimit).map((address) => (
                    <RecordCard
                      key={address.id}
                      title={address.label || address.type}
                      badge={address.status}
                      lines={[
                        [address.houseNo, address.street].filter(Boolean).join(", ") ||
                          address.address ||
                          "-",
                        [address.locality, address.city, address.state, address.pincode]
                          .filter(Boolean)
                          .join(", "),
                        address.isDefault ? "Default address" : "Saved address",
                      ]}
                    />
                  ))}
                </CollectionPanel>
                <CollectionPanel
                  count={detail.vehicles.length}
                  icon={CarFront}
                  title="Saved vehicles"
                  onViewMore={
                    detail.vehicles.length > previewLimit
                      ? () => setOpenSection("vehicles")
                      : undefined
                  }
                >
                  {detail.vehicles.length === 0 ? <Empty text="No vehicles found." /> : null}
                  {detail.vehicles.slice(0, previewLimit).map((vehicle) => (
                    <RecordCard
                      key={vehicle.id}
                      title={`${vehicle.manufacturerName} ${vehicle.modelName}`}
                      badge={vehicle.vehicleType}
                      lines={[
                        vehicle.fuelType ?? "Fuel type not saved",
                        vehicle.registrationNumber ?? "Registration not saved",
                        vehicle.isDefault ? "Default vehicle" : "Saved vehicle",
                      ]}
                    />
                  ))}
                </CollectionPanel>
                <CollectionPanel
                  count={detail.amcPackages.length}
                  icon={ShieldCheck}
                  title="AMC packages"
                  onViewMore={
                    detail.amcPackages.length > previewLimit
                      ? () => setOpenSection("amcPackages")
                      : undefined
                  }
                >
                  {detail.amcPackages.length === 0 ? <Empty text="No AMC packages found." /> : null}
                  {detail.amcPackages.slice(0, previewLimit).map((item) => (
                    <RecordCard
                      key={item.id}
                      title={item.packageName}
                      badge={item.status}
                      lines={[
                        item.vehicleName ?? item.vehicleType,
                        `${formatDateTime(item.startsAt)} - ${formatDateTime(item.expiresAt)}`,
                        item.notes ?? "No notes",
                      ]}
                    />
                  ))}
                </CollectionPanel>
              </div>

              {openSection ? (
                <DetailModal
                  detail={detail}
                  section={openSection}
                  onClose={() => setOpenSection(null)}
                />
              ) : null}
            </>
          ) : null}
        </section>
      </AdminShell>
    </AdminGuard>
  );
}

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

function StatusBadge({ value }: { value: string }) {
  return (
    <span className="rounded-md bg-slate-100 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
      {value}
    </span>
  );
}

function InfoPanel({
  icon: Icon,
  title,
  rows,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  rows: Array<[string, string]>;
}) {
  return (
    <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
      <SectionTitle icon={Icon} title={title} />
      <div className="mt-4 grid gap-2">
        {rows.map(([label, value]) => (
          <div key={label} 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 break-words text-sm font-black text-foreground">{value}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function CollectionPanel({
  children,
  count,
  icon: Icon,
  onViewMore,
  title,
}: {
  children: React.ReactNode;
  count: number;
  icon: React.ComponentType<{ className?: string }>;
  onViewMore?: () => void;
  title: string;
}) {
  return (
    <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
      <div className="flex items-center justify-between gap-3">
        <SectionTitle icon={Icon} title={title} />
        <span className="rounded-md bg-slate-100 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
          {count}
        </span>
      </div>
      <div className="mt-4 grid gap-3">{children}</div>
      {onViewMore ? (
        <button
          type="button"
          onClick={onViewMore}
          className="mt-4 h-10 w-full rounded-md border border-border text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
        >
          View more
        </button>
      ) : null}
    </div>
  );
}

function SectionTitle({
  icon: Icon,
  title,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
}) {
  return (
    <div className="flex items-center gap-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 text-foreground">{title}</h2>
    </div>
  );
}

function RecordCard({ badge, lines, title }: { badge: string; lines: string[]; title: string }) {
  return (
    <div className="rounded-md border border-border p-3">
      <div className="flex items-start justify-between gap-3">
        <p className="min-w-0 break-words font-black text-foreground">{title}</p>
        <span className="shrink-0 rounded-md bg-slate-100 px-2 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
          {badge}
        </span>
      </div>
      <div className="mt-2 grid gap-1">
        {lines.map((line, index) => (
          <p
            key={`${line}-${index}`}
            className="break-words text-xs font-bold text-muted-foreground"
          >
            {line || "-"}
          </p>
        ))}
      </div>
    </div>
  );
}

function getSectionMeta(section: DetailSection) {
  switch (section) {
    case "sessions":
      return { title: "All sessions", icon: Smartphone };
    case "orders":
      return { title: "All orders", icon: CalendarClock };
    case "bookings":
      return { title: "All old bookings", icon: CalendarClock };
    case "addresses":
      return { title: "All addresses", icon: MapPin };
    case "vehicles":
      return { title: "All saved vehicles", icon: CarFront };
    case "amcPackages":
      return { title: "All AMC packages", icon: ShieldCheck };
  }
}

function getSectionRecords(detail: AdminUserDetail, section: DetailSection) {
  switch (section) {
    case "sessions":
      return detail.sessions.map((session) => ({
        id: session.id,
        title: getBrowserName(session.userAgent),
        badge: session.revokedAt ? "logged out" : "active",
        lines: [
          session.deviceName ?? getPlatformName(session.userAgent),
          session.ipAddress ? `IP: ${session.ipAddress}` : "IP: -",
          `Last used: ${formatDateTime(session.lastUsedAt)}`,
          `Created: ${formatDateTime(session.createdAt)}`,
        ],
      }));
    case "orders":
      return detail.orders.map((order) => ({
        id: order.id,
        title: order.packageName,
        badge: order.status,
        lines: [
          `${order.orderNumber} - ${order.userMobile}`,
          `${order.manufacturerName} ${order.modelName}`,
          `${formatCurrency(order.finalPrice)} - ${formatPaymentMode(order.paymentMode)}`,
          `Payment: ${formatDisplayText(order.paymentStatus)}`,
          `Created: ${formatDateTime(order.createdAt)}`,
        ],
      }));
    case "bookings":
      return detail.bookings.map((booking) => ({
        id: booking.id,
        title: booking.service,
        badge: booking.status,
        lines: [
          `${booking.vehicleType} - ${booking.phone}`,
          `${formatDateTime(booking.preferredDate)} - ${booking.preferredTime}`,
          booking.address,
          `Created: ${formatDateTime(booking.createdAt)}`,
        ],
      }));
    case "addresses":
      return detail.addresses.map((address) => ({
        id: address.id,
        title: address.label || address.type,
        badge: address.status,
        lines: [
          [address.houseNo, address.street].filter(Boolean).join(", ") || address.address || "-",
          [address.locality, address.city, address.state, address.pincode]
            .filter(Boolean)
            .join(", "),
          address.landmark ? `Landmark: ${address.landmark}` : "",
          address.isDefault ? "Default address" : "Saved address",
        ],
      }));
    case "vehicles":
      return detail.vehicles.map((vehicle) => ({
        id: vehicle.id,
        title: `${vehicle.manufacturerName} ${vehicle.modelName}`,
        badge: vehicle.vehicleType,
        lines: [
          vehicle.fuelType ?? "Fuel type not saved",
          vehicle.registrationNumber ?? "Registration not saved",
          vehicle.isDefault ? "Default vehicle" : "Saved vehicle",
          `Created: ${formatDateTime(vehicle.createdAt)}`,
        ],
      }));
    case "amcPackages":
      return detail.amcPackages.map((item) => ({
        id: item.id,
        title: item.packageName,
        badge: item.status,
        lines: [
          item.vehicleName ?? item.vehicleType,
          `${formatDateTime(item.startsAt)} - ${formatDateTime(item.expiresAt)}`,
          item.notes ?? "No notes",
          `Created: ${formatDateTime(item.createdAt)}`,
        ],
      }));
  }
}

function DetailModal({
  detail,
  onClose,
  section,
}: {
  detail: AdminUserDetail;
  onClose: () => void;
  section: DetailSection;
}) {
  const [visibleCount, setVisibleCount] = useState(20);
  const meta = getSectionMeta(section);
  const records = getSectionRecords(detail, section);
  const visibleRecords = records.slice(0, visibleCount);
  const Icon = meta.icon;

  useEffect(() => {
    setVisibleCount(20);
  }, [section]);

  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-slate-950/55 px-4 py-6 backdrop-blur-sm">
      <div className="flex max-h-full w-full max-w-4xl flex-col overflow-hidden rounded-lg border border-border bg-white shadow-2xl">
        <div className="flex items-center justify-between gap-4 border-b border-border p-4">
          <div className="flex min-w-0 items-center gap-3">
            <div className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
              <Icon className="h-5 w-5" />
            </div>
            <div className="min-w-0">
              <h2 className="truncate text-xl font-black text-foreground">{meta.title}</h2>
              <p className="text-xs font-bold text-muted-foreground">
                Showing {visibleRecords.length} of {records.length}
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            aria-label="Close details"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="grid gap-3 overflow-y-auto p-4">
          {visibleRecords.map((record) => (
            <RecordCard
              key={record.id}
              title={record.title}
              badge={record.badge}
              lines={record.lines}
            />
          ))}
          {records.length === 0 ? <Empty text="No records found." /> : null}
          {visibleCount < records.length ? (
            <button
              type="button"
              onClick={() => setVisibleCount((current) => current + 20)}
              className="h-11 rounded-md border border-border text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            >
              Load more
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function Empty({ 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>
  );
}