'use client'
import React, { useState } from 'react';
import Link from 'next/link'; // Not directly used here, but kept for consistency
import Layout from '@/component/Layout'; // Corrected import path (use '@/components/Layout')
import ProductCard from '@/component/ProductCard'; // Corrected import path
import productsData from '@/component/data/produect'; // Corrected import path and file name (should be 'products.json')
import type { Product } from '@/types'; // Import Product type

// Function to generate a random ID (simple implementation for demo purposes)
const generateRandomId = (): number => {
  return Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999
};

// Dashboard component (renamed from HomePage for clarity based on your export)
const Dashboard: React.FC = () => {
  // State to manage the list of products, initialized with data from JSON
  const [products, setProducts] = useState<Product[]>(productsData);
  const [newProduct, setNewProduct] = useState<Product>({
    id: 0, // Temporary ID, will be overwritten with random ID
    name: '',
    price: 0,
    image: '',
    description: '',
  });

  // Handle input changes for the new product form
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setNewProduct((prev) => ({
      ...prev,
      [name]: name === 'price' ? parseFloat(value) || 0 : value, // Parse price as a number
    }));
  };

  // Handle form submission to add a new product with a random ID
  const handleAddProduct = (e: React.FormEvent) => {
    e.preventDefault();
    const randomId = generateRandomId(); // Generate a random ID
    const newProductWithId: Product = { ...newProduct, id: randomId }; // Add random ID to the new product
    setProducts((prevProducts) => [...prevProducts, newProductWithId]); // Add to state
    setNewProduct({ id: 0, name: '', price: 0, image: '', description: '' }); // Reset form
  };

  return (
    <Layout>
      {/* Section for adding a new product */}
      <div className="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Add New Product</h2>
        <form onSubmit={handleAddProduct} className="space-y-4">
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Product Name</label>
            <input
              type="text"
              id="name"
              name="name"
              value={newProduct.name}
              onChange={handleInputChange}
              required
              className="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
            />
          </div>
          <div>
            <label htmlFor="price" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Price</label>
            <input
              type="number"
              id="price"
              name="price"
              value={newProduct.price}
              onChange={handleInputChange}
              required
              className="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
            />
          </div>
          <div>
            <label htmlFor="image" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Image URL</label>
            <input
              type="text"
              id="image"
              name="image"
              value={newProduct.image}
              onChange={handleInputChange}
              placeholder="e.g., https://picsum.photos/seed/newproduct/200/300"
              className="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
            />
          </div>
          <div>
            <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
            <textarea
              id="description"
              name="description"
              value={newProduct.description}
              onChange={handleInputChange}
              rows={3}
              className="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
            />
          </div>
          <button
            type="submit"
            className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-bold rounded-md shadow-md transition-colors duration-200"
          >
            Add Product
          </button>
        </form>
      </div>

      {/* Product Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {products.map((product: Product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </Layout>
  );
};

export default Dashboard; // Corrected export name (use Dashboard as per your query)


this code if create produect  than 
import productsData from '@/component/data/produect'; // Corrected import path and file name (should be 'products.json')
this file data updata and data updata than display custom message dispay and /// this over all process like save data in obj than run one function this time emtpy and retun true and only  this function return true than next process