"use client";

import { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import { useCart } from "@/context/CartContext";
import Navbar from "@/components/Navbar";
import WhatsAppButton from "@/components/WhatsAppButton";
import Link from "next/link";

type Product = {
  _id: string;
  title?: string;
  itc1?: string;
  itn?: string;
  sku?: string;
  description?: string;
  shortDescription?: string;
  fullDescription?: string;
  productDetails?: string;
  price?: number;
  cost?: number;
  stock?: number;
  qty?: number;
  scat?: string;
  cat?: string;
  photoUrl?: string;
  images?: string[];
};

export default function ProductDetailPage() {
  const params = useParams();
  const router = useRouter();
  const { addItem } = useCart();
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<"overview" | "specifications">("overview");
  const [selectedImage, setSelectedImage] = useState(0);
  const [enquiryForm, setEnquiryForm] = useState({
    name: "",
    email: "",
    phone: "",
    message: "",
  });
  const [showEnquiry, setShowEnquiry] = useState(false);
  const [imageLoading, setImageLoading] = useState(true);

  useEffect(() => {
    if (params.id) {
      fetchProduct();
    }
  }, [params.id]);

  const fetchProduct = async () => {
    setLoading(true);
    try {
      // Try ecommers first
      let response = await fetch(`/api/ecommers/${params.id}`);
      if (!response.ok) {
        // Try products collection
        response = await fetch(`/api/products/${params.id}`);
      }
      if (response.ok) {
        const data = await response.json();
        setProduct(data);
        if (data.images && data.images.length > 0) {
          setSelectedImage(0);
        }
        setImageLoading(true);
      }
    } catch (error) {
      console.error("Error fetching product:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleAddToCart = () => {
    if (!product) return;
    addItem({
      productId: product._id,
      title: product.title || "Product",
      price: product.price || 0,
      quantity: 1,
      sku: product.sku,
      itc1: product.itc1,
      itn: product.itn,
    });
  };

  const handleEnquiry = () => {
    if (!product) return;
    const message = `Product Enquiry: ${product.title}\n\nName: ${enquiryForm.name}\nEmail: ${enquiryForm.email}\nPhone: ${enquiryForm.phone}\nMessage: ${enquiryForm.message}`;
    const phoneNumber = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || "1234567890"; // Replace with your WhatsApp number
    const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
    window.open(url, "_blank");
  };

  const sendWhatsAppMessage = () => {
    if (!product) return;
    const message = `I'm interested in this product: ${product.title} - ${product.price ? `$${product.price}` : "Price on request"}`;
    const phoneNumber = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || "1234567890"; // Replace with your WhatsApp number
    const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
    window.open(url, "_blank");
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Navbar />
        <div className="container mx-auto px-4 py-12">
          <p className="text-center">Loading...</p>
        </div>
      </div>
    );
  }

  if (!product) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Navbar />
        <div className="container mx-auto px-4 py-12">
          <p className="text-center">Product not found</p>
        </div>
      </div>
    );
  }

  const productImages = product.images && product.images.length > 0 ? product.images : (product.photoUrl ? [product.photoUrl] : []);

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <div className="container mx-auto px-4 py-6">
        {/* Breadcrumbs */}
        <nav className="text-sm text-gray-600 mb-4">
          <Link href="/" className="hover:text-blue-600">Home</Link>
          {" > "}
          <Link href="/shop" className="hover:text-blue-600">Shop</Link>
          {product.scat && (
            <>
              {" > "}
              <span className="text-gray-900">{product.scat}</span>
            </>
          )}
          {" > "}
          <span className="text-gray-900">{product.title || "Product"}</span>
        </nav>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
          {/* Product Images - Left Column */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm p-4 sticky top-4">
              {/* Brand Authorized Badge */}
              <div className="mb-3">
                <span className="inline-block bg-black text-white px-3 py-1 text-xs font-semibold rounded">
                  BRAND AUTHORIZED
                </span>
              </div>
              
              {/* Main Product Image */}
              <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4 border border-gray-200 relative">
                {productImages[selectedImage] ? (
                  <>
                    {imageLoading && (
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                      </div>
                    )}
                    <img
                      src={productImages[selectedImage]}
                      alt={product.title || "Product"}
                      className={`w-full h-full object-contain transition-opacity duration-300 ${
                        imageLoading ? "opacity-0" : "opacity-100"
                      }`}
                      onLoad={() => setImageLoading(false)}
                      onError={() => setImageLoading(false)}
                      style={{ minHeight: "400px", maxHeight: "400px" }}
                    />
                  </>
                ) : (
                  <div className="w-full h-full flex items-center justify-center">
                    <span className="text-gray-400">No Image</span>
                  </div>
                )}
              </div>
              
              {/* Thumbnail Images */}
              {productImages.length > 1 && (
                <div className="grid grid-cols-4 gap-2">
                  {productImages.map((img, index) => (
                    <button
                      key={index}
                      onClick={() => {
                        setSelectedImage(index);
                        setImageLoading(true);
                      }}
                      className={`aspect-square rounded border-2 overflow-hidden relative ${
                        selectedImage === index 
                          ? "border-blue-600 ring-2 ring-blue-200" 
                          : "border-gray-300 hover:border-gray-400"
                      } transition-all`}
                    >
                      <img 
                        src={img} 
                        alt={`Thumbnail ${index + 1}`} 
                        className="w-full h-full object-cover" 
                        loading="lazy"
                      />
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Product Info - Right Column */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-sm p-6">
              {/* Brand and Product Name */}
              <div className="mb-4">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-green-600 font-semibold">✔</span>
                  <span className="text-sm font-semibold text-gray-700">
                    {product.scat?.toUpperCase() || "PRODUCT"}
                  </span>
                  <span className="text-gray-400">{'>'}</span>
                </div>
                <h1 className="text-2xl font-bold text-gray-900 leading-tight">
                  {product.title || "Product"}
                </h1>
              </div>

              {/* Rating */}
              <div className="flex items-center gap-2 mb-4">
                <div className="flex items-center">
                  <span className="text-yellow-400 text-lg">★</span>
                  <span className="text-green-600 font-semibold ml-1">5.0</span>
                </div>
                <span className="text-sm text-gray-600">(1 Rating)</span>
              </div>

              {/* Price */}
              <div className="mb-4">
                <div className="flex items-baseline gap-3">
                  <span className="text-3xl font-bold text-gray-900">
                    ${product.price?.toFixed(2) || "0.00"}
                  </span>
                  {product.cost && product.cost < (product.price || 0) && (
                    <span className="text-lg text-gray-500 line-through">
                      ${product.cost.toFixed(2)}
                    </span>
                  )}
                </div>
              </div>

              {/* Delivery Info */}
              <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
                <div className="flex items-center gap-2 text-green-700">
                  <span className="font-semibold">Free Delivery</span>
                  <span className="bg-green-600 text-white px-2 py-0.5 rounded text-xs font-semibold">
                    EXPRESS
                  </span>
                </div>
                <p className="text-sm text-green-600 mt-1">Get it Tomorrow | Order in 5h 31m</p>
              </div>

              {/* Short Description */}
              {product.shortDescription && (
                <div className="mb-6">
                  <p className="text-gray-700 leading-relaxed">
                    {product.shortDescription}
                  </p>
                </div>
              )}

              {/* Product Details */}
              <div className="space-y-3 mb-6">
                {product.sku && (
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-gray-700 text-sm">SKU:</span>
                    <span className="text-gray-600 text-sm">{product.sku}</span>
                  </div>
                )}
                {product.stock !== undefined && (
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-gray-700 text-sm">Stock:</span>
                    <span className={`text-sm font-semibold ${
                      product.stock > 10 ? "text-green-600" : product.stock > 0 ? "text-yellow-600" : "text-red-600"
                    }`}>
                      {product.stock} available
                    </span>
                  </div>
                )}
                {product.scat && (
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-gray-700 text-sm">Category:</span>
                    <span className="text-gray-600 text-sm">{product.scat}</span>
                  </div>
                )}
              </div>

              {/* Action Buttons */}
              <div className="flex gap-4 mb-4">
                <button
                  onClick={handleAddToCart}
                  className="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition shadow-md"
                >
                  Add to Cart
                </button>
                <button
                  onClick={sendWhatsAppMessage}
                  className="px-6 py-3 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition flex items-center gap-2 shadow-md"
                >
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
                  </svg>
                  WhatsApp
                </button>
              </div>

              <button
                onClick={() => setShowEnquiry(!showEnquiry)}
                className="w-full px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition"
              >
                Product Enquiry
              </button>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="bg-white rounded-lg shadow mb-8">
          <div className="border-b border-gray-200">
            <div className="flex">
              <button
                onClick={() => setActiveTab("overview")}
                className={`px-6 py-4 font-semibold ${
                  activeTab === "overview"
                    ? "text-blue-600 border-b-2 border-blue-600"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                Overview
              </button>
              <button
                onClick={() => setActiveTab("specifications")}
                className={`px-6 py-4 font-semibold ${
                  activeTab === "specifications"
                    ? "text-blue-600 border-b-2 border-blue-600"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                Specifications
              </button>
            </div>
          </div>

          <div className="p-6">
            {activeTab === "overview" && (
              <div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Product Overview</h3>
                <div className="prose max-w-none">
                  <p className="text-gray-700 whitespace-pre-wrap">
                    {product.fullDescription || product.description || "No description available."}
                  </p>
                </div>
              </div>
            )}

            {activeTab === "specifications" && (
              <div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Specifications</h3>
                {product.productDetails ? (
                  <div className="space-y-2">
                    {(() => {
                      try {
                        // Try to parse as JSON
                        const details = typeof product.productDetails === "string" 
                          ? JSON.parse(product.productDetails) 
                          : product.productDetails;
                        
                        // If it's an object, display as key-value pairs
                        if (typeof details === "object" && details !== null) {
                          return (
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                              {Object.entries(details).map(([key, value]) => (
                                <div key={key} className="border-b pb-2">
                                  <span className="font-semibold text-gray-700 block mb-1">
                                    {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, " $1")}:
                                  </span>
                                  <span className="text-gray-600">{String(value)}</span>
                                </div>
                              ))}
                            </div>
                          );
                        }
                        // If it's a string, display as is
                        return (
                          <pre className="bg-gray-50 p-4 rounded-lg overflow-auto text-sm">
                            {typeof product.productDetails === "string" 
                              ? product.productDetails 
                              : JSON.stringify(product.productDetails, null, 2)}
                          </pre>
                        );
                      } catch (e) {
                        // If parsing fails, display as plain text
                        return (
                          <pre className="bg-gray-50 p-4 rounded-lg overflow-auto text-sm">
                            {String(product.productDetails)}
                          </pre>
                        );
                      }
                    })()}
                  </div>
                ) : (
                  <p className="text-gray-600">No specifications available.</p>
                )}
              </div>
            )}
          </div>
        </div>

        {/* Enquiry Form */}
        {showEnquiry && (
          <div className="bg-white rounded-lg shadow p-6 mb-8">
            <h3 className="text-xl font-semibold text-gray-900 mb-4">Product Enquiry</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Name *</label>
                <input
                  type="text"
                  value={enquiryForm.name}
                  onChange={(e) => setEnquiryForm({ ...enquiryForm, name: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Email *</label>
                <input
                  type="email"
                  value={enquiryForm.email}
                  onChange={(e) => setEnquiryForm({ ...enquiryForm, email: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Phone *</label>
                <input
                  type="tel"
                  value={enquiryForm.phone}
                  onChange={(e) => setEnquiryForm({ ...enquiryForm, phone: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Message</label>
                <textarea
                  value={enquiryForm.message}
                  onChange={(e) => setEnquiryForm({ ...enquiryForm, message: e.target.value })}
                  rows={3}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                />
              </div>
            </div>
            <div className="mt-4 flex gap-4">
              <button
                onClick={handleEnquiry}
                className="px-6 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition"
              >
                Send via WhatsApp
              </button>
              <button
                onClick={() => setShowEnquiry(false)}
                className="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition"
              >
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>
      <WhatsAppButton productTitle={product.title} />
    </div>
  );
}