/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState } from "react";
import { X, Edit3, Tag, CheckCircle2 } from "lucide-react";
import { Listing } from "@/state/listing";
import { getImageUrl } from "@/lib/imageUrl";

interface ViewListingModalProps {
  isOpen: boolean;
  onClose: () => void;
  listing: Listing | null;
  onEdit?: (listingId: string) => void;
}

const ViewListingModal: React.FC<ViewListingModalProps> = ({
  isOpen,
  onClose,
  listing,
  onEdit,
}) => {
  const [selectedImageIndex, setSelectedImageIndex] = useState(0);

  if (!isOpen || !listing) return null;

  const rawList =
    Array.isArray(listing.images) && listing.images.length > 0
      ? listing.images
      : Array.isArray(listing.listingImages) && listing.listingImages.length > 0
      ? listing.listingImages
      : ["/assets/home/lenses.png"];

  const images = rawList.map((img: any) =>
    getImageUrl(typeof img === "string" ? img : img?.url)
  );

  const currentImage = images[selectedImageIndex] || images[0];

  const statusColors: Record<string, string> = {
    active: "bg-green-100 text-green-800 border-green-200",
    inactive: "bg-gray-100 text-gray-800 border-gray-200",
    sold_out: "bg-red-100 text-red-800 border-red-200",
    deal_locked: "bg-yellow-100 text-yellow-800 border-yellow-200",
  };

  const statusClass =
    statusColors[listing.status || "active"] || statusColors.active;

  return (
    <div
      className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-2xl p-6 sm:p-8 w-full max-w-[760px] max-h-[90vh] overflow-y-auto shadow-2xl relative"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          aria-label="Close"
          className="absolute right-5 top-5 text-[#8C8C8C] hover:text-black transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="flex items-center gap-2.5 mb-4">
          <span className="text-[12px] font-semibold tracking-wide text-blue-600 bg-blue-50 px-2.5 py-0.5 rounded">
            {listing.listingNo || "LISTING"}
          </span>
          <span
            className={`text-[12px] font-medium px-2.5 py-0.5 rounded border capitalize ${statusClass}`}
          >
            {/* "deal_locked" -> "Deal Locked" (capitalize handles the casing) */}
            {(listing.status || "active").replace(/_/g, " ")}
          </span>
          <span className="text-[12px] font-medium text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded uppercase">
            {listing.productType === "new-ads" ? "New Equipment" : "Used Equipment"}
          </span>
        </div>

        <h2 className="text-[22px] font-bold text-[#0B0F19] leading-snug mb-2">
          {listing.title}
        </h2>

        <div className="flex flex-wrap items-center gap-4 text-[13px] text-[#686262] mb-6">
          {listing.manufacturer && (
            <span>
              <strong>Brand:</strong> {listing.manufacturer}
            </span>
          )}
          {listing.modelNumber && (
            <span>
              <strong>Model:</strong> {listing.modelNumber}
            </span>
          )}
          <span>
            <strong>Price:</strong>{" "}
            <span className="text-[#2954E8] font-bold text-[16px]">
              ${Number(listing.price || 0).toLocaleString()} {listing.currency || "AUD"}
            </span>
            {listing.isPriceNegotiable && (
              <span className="ml-1 text-xs text-green-600 font-medium">
                (Negotiable)
              </span>
            )}
          </span>
        </div>

        {/* Image Display */}
        <div className="mb-6">
          <div className="w-full h-[280px] sm:h-[340px] rounded-xl bg-gray-100 overflow-hidden flex items-center justify-center border border-gray-200">
            <img
              src={currentImage}
              alt={listing.title}
              className="w-full h-full object-contain"
            />
          </div>
          {images.length > 1 && (
            <div className="flex gap-2.5 mt-3 overflow-x-auto pb-1">
              {images.map((img, idx) => (
                <button
                  key={idx}
                  type="button"
                  onClick={() => setSelectedImageIndex(idx)}
                  className={`w-16 h-16 rounded-lg overflow-hidden border-2 shrink-0 transition-all ${
                    selectedImageIndex === idx
                      ? "border-[#2954E8] shadow-sm"
                      : "border-gray-200 opacity-70 hover:opacity-100"
                  }`}
                >
                  <img
                    src={img}
                    alt={`Thumbnail ${idx + 1}`}
                    className="w-full h-full object-cover"
                  />
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Condition & Attributes */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
          <div className="p-3.5 rounded-lg bg-gray-50 border border-gray-100">
            <p className="text-[11px] font-semibold text-[#8C95A6] uppercase mb-1">
              Working Condition
            </p>
            <p className="text-[14px] font-medium text-[#0B0F19] capitalize flex items-center gap-1.5">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              {listing.workingCondition || "Good"}
            </p>
          </div>
          <div className="p-3.5 rounded-lg bg-gray-50 border border-gray-100">
            <p className="text-[11px] font-semibold text-[#8C95A6] uppercase mb-1">
              Physical Condition
            </p>
            <p className="text-[14px] font-medium text-[#0B0F19] capitalize flex items-center gap-1.5">
              <Tag className="w-4 h-4 text-blue-500" />
              {listing.physicalCondition || "Good"}
            </p>
          </div>
        </div>

        {/* Notes & Details */}
        <div className="space-y-4 mb-8 text-[13px] leading-relaxed">
          {listing.description && (
            <div>
              <p className="font-semibold text-[#0B0F19] mb-1">Product Description</p>
              <p className="text-[#686262] bg-gray-50 p-3 rounded-md border border-gray-100 whitespace-pre-line">
                {listing.description}
              </p>
            </div>
          )}
          {listing.reasonForSale && (
            <div>
              <p className="font-semibold text-[#0B0F19] mb-1">Reason for Sale</p>
              <p className="text-[#686262] bg-gray-50 p-3 rounded-md border border-gray-100">
                {listing.reasonForSale}
              </p>
            </div>
          )}
          {listing.accessoriesIncluded && (
            <div>
              <p className="font-semibold text-[#0B0F19] mb-1">Accessories Included</p>
              <p className="text-[#686262] bg-gray-50 p-3 rounded-md border border-gray-100">
                {listing.accessoriesIncluded}
              </p>
            </div>
          )}
          {listing.optionalAccessories && (
            <div>
              <p className="font-semibold text-[#0B0F19] mb-1">Optional Accessories</p>
              <p className="text-[#686262] bg-gray-50 p-3 rounded-md border border-gray-100">
                {listing.optionalAccessories}
              </p>
            </div>
          )}
          {listing.detailedNotes && (
            <div>
              <p className="font-semibold text-[#0B0F19] mb-1">Detailed Notes / Specifications</p>
              <p className="text-[#686262] bg-gray-50 p-3 rounded-md border border-gray-100 whitespace-pre-line">
                {listing.detailedNotes}
              </p>
            </div>
          )}
        </div>

        {/* Action Buttons */}
        <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-100">
          <button
            type="button"
            onClick={onClose}
            className="px-5 py-2.5 text-[14px] font-medium text-[#0B0F19] bg-white border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
          >
            Close
          </button>
          {onEdit && (
            <button
              type="button"
              onClick={() => {
                onClose();
                onEdit(listing.id || listing._id || "");
              }}
              className="inline-flex items-center gap-2 px-5 py-2.5 text-[14px] font-semibold text-white bg-[#2954E8] rounded-md hover:bg-[#1f42c2] transition-colors"
            >
              <Edit3 className="w-4 h-4" />
              Edit Listing
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default ViewListingModal;