"use client";

import { useState } from "react";

export default function SeedProductsPage() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);

  const handleSeedProducts = async () => {
    const count = prompt("How many products to add? (Default: 1200)", "1200");
    const productCount = parseInt(count || "1200", 10);
    
    if (!confirm(`This will add ${productCount} dummy products to the database. Continue?`)) {
      return;
    }

    setLoading(true);
    setResult(null);

    try {
      const response = await fetch(`/api/admin/seed-products?count=${productCount}`, {
        method: "POST",
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Failed to seed products");
      }

      setResult(data);
      alert(`Successfully added ${data.insertedCount} products!`);
    } catch (error) {
      console.error("Error seeding products:", error);
      alert(error instanceof Error ? error.message : "Failed to seed products");
      setResult({ error: error instanceof Error ? error.message : "Unknown error" });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Seed Dummy Products</h1>
        <p className="text-gray-600 mt-2">Add 1000+ dummy products for website testing (Default: 1200 products)</p>
      </div>

      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Product Categories</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
          <div className="p-4 bg-blue-50 rounded-lg">
            <h3 className="font-semibold text-blue-900">Laptops</h3>
            <p className="text-sm text-blue-700">Gaming laptops</p>
          </div>
          <div className="p-4 bg-green-50 rounded-lg">
            <h3 className="font-semibold text-green-900">Gaming Accessories</h3>
            <p className="text-sm text-green-700">Mice, keyboards, headsets</p>
          </div>
          <div className="p-4 bg-purple-50 rounded-lg">
            <h3 className="font-semibold text-purple-900">Monitors</h3>
            <p className="text-sm text-purple-700">Gaming monitors</p>
          </div>
          <div className="p-4 bg-yellow-50 rounded-lg">
            <h3 className="font-semibold text-yellow-900">Storage</h3>
            <p className="text-sm text-yellow-700">SSDs, hard drives</p>
          </div>
          <div className="p-4 bg-red-50 rounded-lg">
            <h3 className="font-semibold text-red-900">Graphics Cards</h3>
            <p className="text-sm text-red-700">GPUs</p>
          </div>
          <div className="p-4 bg-indigo-50 rounded-lg">
            <h3 className="font-semibold text-indigo-900">Computer Accessories</h3>
            <p className="text-sm text-indigo-700">Webcams, USB hubs</p>
          </div>
        </div>

        <div className="border-t pt-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-2">Product Categories:</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-700 mb-6">
            <li>Laptops (Gaming, Business, Ultrabooks)</li>
            <li>Desktops (Gaming, Workstations)</li>
            <li>Gaming Accessories (Mice, Keyboards, Headsets)</li>
            <li>Monitors (4K, Gaming, Professional)</li>
            <li>Storage (SSDs, HDDs, External Drives)</li>
            <li>Graphics Cards (RTX 4070, 4080, 4090)</li>
            <li>Computer Components (RAM, Motherboards, Processors)</li>
            <li>Computer Accessories (Webcams, USB Hubs, Cases)</li>
            <li>Networking (Routers, Switches)</li>
            <li>And more...</li>
          </ul>
          <p className="text-sm text-gray-600 mb-4">
            Products will be generated with random variations in price, stock, and specifications.
            First 50 products will be marked as "Featured".
          </p>

          <button
            onClick={handleSeedProducts}
            disabled={loading}
            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? "Adding Products..." : "Add 1000+ Dummy Products"}
          </button>
        </div>
      </div>

      {result && (
        <div className={`rounded-lg p-6 ${result.error ? "bg-red-50 border border-red-200" : "bg-green-50 border border-green-200"}`}>
          {result.error ? (
            <div>
              <h3 className="font-semibold text-red-900 mb-2">Error</h3>
              <p className="text-red-700">{result.error}</p>
              {result.existingSkus && (
                <p className="text-red-700 mt-2">
                  Existing SKUs: {result.existingSkus}
                </p>
              )}
            </div>
          ) : (
            <div>
              <h3 className="font-semibold text-green-900 mb-2">Success!</h3>
              <p className="text-green-700">
                Successfully added {result.insertedCount} products to the database.
              </p>
              {result.products && (
                <div className="mt-4">
                  <h4 className="font-semibold text-green-900 mb-2">Added Products:</h4>
                  <ul className="list-disc list-inside space-y-1 text-green-700">
                    {result.products.map((product: any, index: number) => (
                      <li key={index}>
                        {product.title} - {product.sku} ({product.category})
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h3 className="font-semibold text-blue-900 mb-2">Features of Added Products:</h3>
        <ul className="list-disc list-inside space-y-1 text-blue-800 text-sm">
          <li>Full product specifications in JSON format</li>
          <li>Multiple product images (2-3 images per product)</li>
          <li>Detailed descriptions (short, full, and specifications)</li>
          <li>Various categories: Laptops, Gaming Accessories, Monitors, Storage, Graphics Cards, Computer Accessories</li>
          <li>Complete product information: price, cost, stock, supplier, manufacturer</li>
          <li>Product details include: brand, model, specifications, warranty, dimensions, weight</li>
        </ul>
      </div>
    </div>
  );
}