import { NextPage } from "next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

// Define a type for the product data
type Product = {
  id: string;
  name: string;
  image: string;
  description: string;
  specifications: {
    manufacturer: string;
    model: string;
    weight: string;
    dimensions: string;
    material: string;
    warranty: string;
  };
  vendors: Array<{
    name: string;
    price: string;
    stock: string;
  }>;
};

export default function ProductPage() {
  const router = useRouter();
  const { id } = router.query;
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    if (id) {
      // Fetch product data based on the id
      fetch(`/api/products/${id}`)
        .then((response) => response.json())
        .then((data) => setProduct(data))
        .catch((error) => console.error("Error fetching product data:", error));
    }
  }, [id]);

  if (!product) {
    return <div>Loading...</div>;
  }

  return (
    <div className="p-4 pt-16 mx-auto max-w-screen-lg">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        {/* Product Image */}
        <div className="bg-white rounded-lg shadow-md p-4">
          <img 
            src={product.image} 
            alt={product.name}
            className="w-full h-auto rounded-lg"
          />
        </div>

        {/* Product Info */}
        <div>
          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
          
          {/* Vendor Pricing Table */}
          <div className="bg-white rounded-lg shadow-md p-4 mb-6">
            <h2 className="text-xl font-semibold mb-4">Available From</h2>
            <div className="overflow-x-auto">
              <table className="min-w-full table-auto">
                <thead>
                  <tr className="bg-gray-50 border-b">
                    <th className="px-4 py-2 text-left">Vendor</th>
                    <th className="px-4 py-2 text-left">Price</th>
                    <th className="px-4 py-2 text-left">Stock</th>
                    <th className="px-4 py-2 text-left">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {product.vendors.map((vendor, index) => (
                    <tr key={index} className="border-b hover:bg-gray-50">
                      <td className="px-4 py-2">{vendor.name}</td>
                      <td className="px-4 py-2">{vendor.price}</td>
                      <td className="px-4 py-2">{vendor.stock}</td>
                      <td className="px-4 py-2">
                        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                          Buy Now
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* Product Description */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 className="text-xl font-semibold mb-4">Product Description</h2>
        <p className="text-gray-600">
          {product.description}
        </p>
      </div>

      {/* Product Specifications */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-xl font-semibold mb-4">Specifications</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="border-b py-2">
            <span className="font-medium">Manufacturer:</span> {product.specifications.manufacturer}
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Model:</span> {product.specifications.model}
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Weight:</span> {product.specifications.weight}
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Dimensions:</span> {product.specifications.dimensions}
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Material:</span> {product.specifications.material}
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Warranty:</span> {product.specifications.warranty}
          </div>
        </div>
      </div>
    </div>
  );
}
