import React, { useState } from 'react';
import { ChevronRight, Plus, Minus, ShoppingCart, Send, Home, Grid3x3, Heart, User, Search, X } from 'lucide-react';

export default function AutoPartsCatalog() {
  const [expandedCategory, setExpandedCategory] = useState('Top Trending');
  const [requestList, setRequestList] = useState([]);
  const [customerName, setCustomerName] = useState('');
  const [customerEmail, setCustomerEmail] = useState('');
  const [showCart, setShowCart] = useState(false);
  const [activeTab, setActiveTab] = useState('home');

  const dealCategories = [
    {
      title: 'Top Trending',
      icon: '📈',
      deals: [
        { id: 1, name: '11.11 Sales', partNum: 'SALE001', aedPrice: 999, icon: '0%', badge: '%' },
        { id: 2, name: 'Flash Sales', partNum: 'FLASH001', aedPrice: 599, icon: '⚡', badge: '⚡' },
        { id: 3, name: 'Auto Parts Deal', partNum: 'AUTO001', aedPrice: 1299, icon: '%', badge: '%' },
      ]
    },
    {
      title: 'New in',
      icon: '✨',
      deals: [
        { id: 4, name: 'Engine Parts', partNum: 'ENG001', aedPrice: 1499, icon: '⚙️', badge: '%' },
        { id: 5, name: 'Brake Systems', partNum: 'BRK001', aedPrice: 899, icon: '🛑', badge: '%' },
        { id: 6, name: 'Suspension Kit', partNum: 'SUSP001', aedPrice: 2499, icon: '🌪️', badge: '%' },
      ]
    },
    {
      title: 'Top Brands',
      icon: '⭐',
      deals: [
        { id: 7, name: 'Bosch Parts', partNum: 'BOSCH001', aedPrice: 799, icon: '🏆', badge: '%' },
        { id: 8, name: 'OEM Quality', partNum: 'OEM001', aedPrice: 699, icon: '✅', badge: '⬇️' },
        { id: 9, name: 'Premium Fluids', partNum: 'FLUID001', aedPrice: 399, icon: '💧', badge: '%' },
      ]
    },
    {
      title: 'Clearence',
      icon: '💥',
      deals: [
        { id: 10, name: 'Electrical Deals', partNum: 'ELEC001', aedPrice: 299, icon: '🔌', badge: '%' },
        { id: 11, name: '30-day Lowest Price', partNum: 'LOW001', aedPrice: 199, icon: '📉', badge: '⬇️' },
        { id: 12, name: 'Stock Clearance', partNum: 'CLEAR001', aedPrice: 149, icon: '%', badge: '%' },
      ]
    },
    {
      title: 'Bestsellers - Automotive',
      icon: '🏅',
      deals: [
        { id: 13, name: 'Deals under 200 AED', partNum: 'DEAL200', aedPrice: 200, icon: '💰', badge: '₹200' },
        { id: 14, name: 'Deals under 500 AED', partNum: 'DEAL500', aedPrice: 500, icon: '💰', badge: '₹500' },
        { id: 15, name: 'Free Shipping', partNum: 'SHIP001', aedPrice: 0, icon: '📦', badge: '🚚' },
      ]
    },
    {
      title: 'Hot Deals',
      icon: '🔥',
      deals: [
        { id: 16, name: 'Under 100 AED', partNum: 'HOT100', aedPrice: 99, icon: '🎯', badge: '100' },
        { id: 17, name: 'Under 300 AED', partNum: 'HOT300', aedPrice: 299, icon: '🎯', badge: '300' },
        { id: 18, name: '50% Off Special', partNum: 'SPECIAL50', aedPrice: 599, icon: '%', badge: '50%' },
      ]
    },
  ];

  const addToRequest = (deal) => {
    const existing = requestList.find(item => item.id === deal.id);
    if (existing) {
      setRequestList(requestList.map(item => 
        item.id === deal.id ? { ...item, quantity: item.quantity + 1 } : item
      ));
    } else {
      setRequestList([...requestList, { ...deal, quantity: 1 }]);
    }
  };

  const removeFromRequest = (dealId) => {
    setRequestList(requestList.filter(item => item.id !== dealId));
  };

  const updateQuantity = (dealId, qty) => {
    if (qty <= 0) {
      removeFromRequest(dealId);
    } else {
      setRequestList(requestList.map(item => 
        item.id === dealId ? { ...item, quantity: qty } : item
      ));
    }
  };

  const totalAED = requestList.reduce((sum, item) => sum + (item.aedPrice * item.quantity), 0);

  const generateRequest = () => {
    if (!customerName.trim() || !customerEmail.trim() || requestList.length === 0) {
      alert('Please fill customer details and add items');
      return;
    }
    
    let message = 'REQUEST FOR QUOTATION\n\n';
    message += `Customer: ${customerName}\nEmail: ${customerEmail}\n`;
    message += `Date: ${new Date().toLocaleDateString()}\n\n`;
    message += 'REQUESTED PARTS:\n' + '─'.repeat(80) + '\n';
    
    requestList.forEach((item, idx) => {
      message += `${idx + 1}. ${item.name}\nPart #: ${item.partNum} | Qty: ${item.quantity}\nPrice: ${item.aedPrice} AED | Subtotal: ${(item.aedPrice * item.quantity)} AED\n\n`;
    });
    
    message += '─'.repeat(80) + `\nTOTAL: ${totalAED} AED\n`;
    
    const encoded = encodeURIComponent(message);
    window.open(`mailto:sales@autoparts.com?subject=RFQ from ${customerName}&body=${encoded}`);
  };

  return (
    <div className="min-h-screen bg-gray-100 pb-24">
      {/* Header */}
      <div className="sticky top-0 z-50 bg-white shadow-md">
        {/* Top Bar */}
        <div className="bg-orange-600 text-white px-4 py-2 text-center">
          <p className="text-xs font-semibold">🚗 AutoParts | Free Shipping on Orders Above 200 AED</p>
        </div>

        {/* Logo & Search */}
        <div className="px-4 py-3 border-b border-gray-200">
          <div className="flex items-center justify-between mb-3">
            <h1 className="text-2xl font-bold text-orange-600">🚗 AutoParts</h1>
            <div className="flex gap-2">
              <Heart size={24} className="text-gray-600 cursor-pointer" />
              <button onClick={() => setShowCart(!showCart)} className="relative">
                <ShoppingCart size={24} className="text-gray-600" />
                {requestList.length > 0 && (
                  <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold">
                    {requestList.length}
                  </span>
                )}
              </button>
            </div>
          </div>

          {/* Search Bar */}
          <div className="flex items-center gap-2 bg-gray-100 rounded-full px-3 py-2">
            <Search size={18} className="text-gray-500" />
            <input
              type="text"
              placeholder="Search parts..."
              className="flex-1 bg-transparent outline-none text-sm"
            />
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="px-4 py-4">
        {/* Left Sidebar - Desktop */}
        <div className="hidden md:block mb-6 bg-white rounded-lg p-4 shadow-sm">
          <h2 className="font-bold text-gray-800 mb-4 text-lg">🏷️ Dreamlike Deals</h2>
          <div className="space-y-2">
            {dealCategories.map(cat => (
              <button
                key={cat.title}
                onClick={() => setExpandedCategory(expandedCategory === cat.title ? null : cat.title)}
                className={`w-full text-left px-4 py-2 rounded-lg transition font-medium flex items-center justify-between ${
                  expandedCategory === cat.title
                    ? 'bg-orange-100 text-orange-600'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <span className="flex items-center gap-2">
                  {cat.icon} {cat.title}
                </span>
                <ChevronRight size={18} />
              </button>
            ))}
          </div>
        </div>

        {/* Deal Sections */}
        <div className="space-y-6">
          {dealCategories.map(category => (
            <div key={category.title} className="bg-white rounded-xl shadow-md overflow-hidden">
              {/* Category Header */}
              <button
                onClick={() => setExpandedCategory(expandedCategory === category.title ? null : category.title)}
                className="w-full px-4 py-4 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-bold flex items-center justify-between hover:from-orange-600 hover:to-orange-700 transition"
              >
                <span className="flex items-center gap-2 text-lg">
                  {category.icon} {category.title}
                </span>
                <ChevronRight size={24} className={`transition ${expandedCategory === category.title ? 'rotate-90' : ''}`} />
              </button>

              {/* Deals Grid */}
              {expandedCategory === category.title && (
                <div className="p-4">
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    {category.deals.map(deal => {
                      const isInRequest = requestList.find(item => item.id === deal.id);
                      const colors = ['from-purple-500 to-pink-500', 'from-pink-400 to-pink-500', 'from-cyan-400 to-teal-500', 'from-blue-500 to-purple-500', 'from-orange-400 to-orange-600', 'from-green-400 to-teal-500'];
                      const bgColor = colors[deal.id % colors.length];

                      return (
                        <div
                          key={deal.id}
                          onClick={() => addToRequest(deal)}
                          className={`relative rounded-3xl p-6 cursor-pointer transition transform hover:scale-105 text-center bg-gradient-to-br ${bgColor} text-white shadow-lg ${
                            isInRequest ? 'ring-4 ring-green-400 scale-105' : ''
                          }`}
                        >
                          {/* Badge */}
                          {deal.badge && (
                            <div className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full w-12 h-12 flex items-center justify-center text-2xl shadow-lg font-bold">
                              {deal.badge}
                            </div>
                          )}

                          {/* Icon */}
                          <div className="text-6xl mb-3">{deal.icon}</div>

                          {/* Deal Name */}
                          <h3 className="font-bold text-sm mb-2">{deal.name}</h3>

                          {/* Price */}
                          {deal.aedPrice > 0 && (
                            <p className="text-2xl font-bold mb-2">{deal.aedPrice} AED</p>
                          )}

                          {/* Part Number */}
                          <p className="text-xs opacity-90 mb-3">{deal.partNum}</p>

                          {/* Add Button */}
                          {!isInRequest ? (
                            <button className="bg-white text-orange-600 px-4 py-1 rounded-full text-xs font-bold hover:bg-gray-100 transition">
                              Add Now
                            </button>
                          ) : (
                            <div className="bg-white text-green-600 px-4 py-1 rounded-full text-xs font-bold">
                              ✓ Added (Qty: {isInRequest.quantity})
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Cart Drawer - Mobile */}
      {showCart && (
        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setShowCart(false)}>
          <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl max-h-96 overflow-y-auto">
            <div className="sticky top-0 bg-gradient-to-r from-purple-600 to-purple-700 text-white p-4 flex items-center justify-between rounded-t-3xl">
              <h2 className="font-bold text-lg">Your Request</h2>
              <button onClick={() => setShowCart(false)}>
                <X size={24} />
              </button>
            </div>

            {requestList.length === 0 ? (
              <div className="p-6 text-center text-gray-500">
                <ShoppingCart size={48} className="mx-auto mb-2 opacity-50" />
                <p>No items yet</p>
              </div>
            ) : (
              <div className="p-4 space-y-3">
                {requestList.map(item => (
                  <div key={item.id} className="flex items-center justify-between bg-gray-100 p-3 rounded-lg">
                    <div className="flex-1">
                      <p className="font-bold text-sm">{item.name}</p>
                      <p className="text-xs text-gray-600">{item.aedPrice} AED × {item.quantity}</p>
                    </div>
                    <button onClick={() => removeFromRequest(item.id)} className="text-red-500 font-bold">
                      ✕
                    </button>
                  </div>
                ))}
                <div className="border-t pt-3 font-bold text-lg">
                  Total: {totalAED} AED
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Desktop Cart Sidebar */}
      <div className="hidden md:block fixed right-4 bottom-24 w-80 bg-gradient-to-br from-purple-600 to-purple-700 rounded-2xl p-6 text-white shadow-2xl max-h-96 overflow-y-auto">
        <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
          <ShoppingCart size={24} />
          Your Request
        </h2>

        <div className="space-y-3 mb-6">
          <input
            type="text"
            placeholder="Your Name"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
            className="w-full bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white placeholder-white/70 text-sm"
          />
          <input
            type="email"
            placeholder="Your Email"
            value={customerEmail}
            onChange={(e) => setCustomerEmail(e.target.value)}
            className="w-full bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white placeholder-white/70 text-sm"
          />
        </div>

        <div className="bg-black/20 rounded-lg p-3 mb-6 max-h-48 overflow-y-auto space-y-2">
          {requestList.length === 0 ? (
            <p className="text-center text-white/70 py-4">No items added</p>
          ) : (
            requestList.map(item => (
              <div key={item.id} className="bg-white/10 rounded p-2 text-xs">
                <div className="flex justify-between items-start mb-1">
                  <div>
                    <p className="font-bold">{item.name}</p>
                    <p className="text-white/70">{item.aedPrice} AED</p>
                  </div>
                  <button onClick={() => removeFromRequest(item.id)} className="text-red-300">✕</button>
                </div>
                <div className="flex items-center gap-1">
                  <button onClick={() => updateQuantity(item.id, item.quantity - 1)} className="bg-white/20 px-1.5 py-0.5 rounded">−</button>
                  <span className="flex-1 text-center">{item.quantity}</span>
                  <button onClick={() => updateQuantity(item.id, item.quantity + 1)} className="bg-white/20 px-1.5 py-0.5 rounded">+</button>
                </div>
              </div>
            ))
          )}
        </div>

        {requestList.length > 0 && (
          <>
            <div className="border-t border-white/20 pt-3 mb-3">
              <div className="flex justify-between font-bold text-lg mb-2">
                <span>Total:</span>
                <span className="text-yellow-300">{totalAED} AED</span>
              </div>
            </div>
            <button
              onClick={generateRequest}
              className="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-bold transition flex items-center justify-center gap-2"
            >
              <Send size={18} />
              Send RFQ
            </button>
          </>
        )}
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300 flex items-center justify-around py-3 shadow-2xl">
        <button className={`flex flex-col items-center gap-1 transition ${activeTab === 'home' ? 'text-orange-600' : 'text-gray-600'}`} onClick={() => setActiveTab('home')}>
          <Home size={24} />
          <span className="text-xs font-semibold">Home</span>
        </button>
        <button className={`flex flex-col items-center gap-1 transition ${activeTab === 'cat' ? 'text-orange-600' : 'text-gray-600'}`} onClick={() => setActiveTab('cat')}>
          <Grid3x3 size={24} />
          <span className="text-xs font-semibold">Categories</span>
        </button>
        <button className={`flex flex-col items-center gap-1 transition`}>
          <Heart size={28} className="text-purple-600" fill="currentColor" />
          <span className="text-xs font-semibold text-purple-600">Favorites</span>
        </button>
        <button className={`flex flex-col items-center gap-1 transition ${activeTab === 'cart' ? 'text-orange-600' : 'text-gray-600'}`} onClick={() => { setShowCart(!showCart); setActiveTab('cart'); }}>
          <ShoppingCart size={24} />
          <span className="text-xs font-semibold">Cart</span>
        </button>
        <button className={`flex flex-col items-center gap-1 transition ${activeTab === 'acc' ? 'text-orange-600' : 'text-gray-600'}`} onClick={() => setActiveTab('acc')}>
          <User size={24} />
          <span className="text-xs font-semibold">Account</span>
        </button>
      </div>
    </div>