import React, { useEffect, useState } from "react";
import { useParams, Link } from "react-router-dom";
import axios from "../../app/api";
import { ArrowLeft } from "lucide-react";

const ProductDetails = () => {
  const { slug } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
     .get(`/products/${slug}`)
      .then((res) => {
        setProduct(res.data.data.product);
        setLoading(false);
      })
      .catch((err) => {
        console.error(err);
        setLoading(false);
      });
  }, [slug]);

  if (loading)
    return (
      <div className="flex justify-center items-center h-64 text-gray-600">
        Loading product details...
      </div>
    );

  if (!product)
    return (
      <div className="text-center mt-10 text-gray-600">Product not found!</div>
    );

  return (
    <div className="max-w-5xl mx-auto space-y-8">
      {/* Back Button */}
      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
        <ArrowLeft size={18} />
        <Link to="/products" className="font-medium">
          Back to Products
        </Link>
      </div>

      {/* Product Header */}
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between bg-white shadow-md rounded-2xl p-6 border border-gray-100">
        <div>
          <h2 className="text-2xl font-bold text-gray-800">{product.name}</h2>
          <p className="text-gray-500 text-sm mt-1">{product.slug}</p>
        </div>
        <div className="mt-4 md:mt-0">
          <p className="text-3xl font-semibold text-green-600">
            ₹{product.basePrice?.toLocaleString()}
          </p>
        </div>
      </div>

      {/* Product Info */}
      <div className="grid md:grid-cols-2 gap-6">
        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
            Product Details
          </h3>
          <InfoRow label="Description" value={product.description || "N/A"} />
          <InfoRow label="Category ID" value={product.category || "N/A"} />
          <InfoRow label="Status" value={product.status || "N/A"} />
          <InfoRow label="Featured" value={product.isFeatured ? "Yes" : "No"} />
          <InfoRow label="Digital" value={product.isDigital ? "Yes" : "No"} />
        </div>

        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
            Analytics
          </h3>
          <InfoRow label="View Count" value={product.viewCount || 0} />
          <InfoRow label="Purchase Count" value={product.purchaseCount || 0} />
          <InfoRow
            label="Created At"
            value={new Date(product.createdAt).toLocaleString()}
          />
          <InfoRow
            label="Updated At"
            value={new Date(product.updatedAt).toLocaleString()}
          />
        </div>
      </div>

      {/* Images Section */}
      {product.images?.gallery?.length > 0 && (
        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-700 border-b pb-3">
            Product Images
          </h3>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4">
            {product.images.gallery.map((img, idx) => (
              <div
                key={idx}
                className="overflow-hidden rounded-lg border hover:shadow-md transition-all"
              >
                <img
                  src={img}
                  alt={`product-${idx}`}
                  className="w-full h-40 object-cover"
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

// Small helper component for clean info rows
const InfoRow = ({ label, value }) => (
  <div className="flex justify-between text-sm text-gray-700">
    <span className="font-medium text-gray-600">{label}:</span>
    <span className="text-gray-800">{value}</span>
  </div>
);

export default ProductDetails;
