import { useState, FormEvent } from 'react';
import { PRODUCTS } from '../data/menuContent';
import { Product } from '../types';
import { Sparkles, ShoppingBag, Send, ShieldCheck, Tag, Info, BookOpen, CheckCircle } from 'lucide-react';

export default function ProductCatalog({ initialCategory = 'all' }: { initialCategory?: string }) {
  const [selectedCategory, setSelectedCategory] = useState<string>(initialCategory === 'all' ? 'all' : initialCategory);
  
  // Inquiry form states
  const [showInquiryModal, setShowInquiryModal] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [clientEmail, setClientEmail] = useState('');
  const [clientNote, setClientNote] = useState('');
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [formSuccess, setFormSuccess] = useState(false);

  const categories = ['all', 'Books', 'Podcasts', 'Training', 'Workshop', 'Skin Management & products'];

  const filteredProducts = selectedCategory === 'all'
    ? PRODUCTS
    : PRODUCTS.filter(p => p.category.toLowerCase().startsWith(selectedCategory.toLowerCase().substring(0, 4)));

  const handleOpenInquiry = (product: Product) => {
    setSelectedProduct(product);
    setShowInquiryModal(true);
    setFormSubmitted(false);
    setFormSuccess(false);
    setClientEmail('');
    setClientNote('');
  };

  const handleInquirySubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!clientEmail.trim()) return;
    setFormSubmitted(true);
    setTimeout(() => {
      setFormSuccess(true);
      setFormSubmitted(false);
    }, 1200);
  };

  return (
    <div className="space-y-8" id="kasolang-product-catalog">
      
      {/* Catalog Header */}
      <div className="bg-[#5D1F1F] text-[#FCF9F7] rounded-xl p-8 md:p-10 border border-[#7A2B2B] relative overflow-hidden shadow-md">
        <div className="absolute right-0 top-0 -mb-12 -mr-12 w-48 h-48 bg-[#C8A070] rounded-full opacity-10 blur-xl"></div>
        <div className="max-w-2xl space-y-3 relative z-10">
          <span className="bg-[#7A2B2B] text-[#C8A070] border border-[#C8A070]/30 text-[10px] font-bold px-3.5 py-1 rounded uppercase tracking-[0.15em] inline-block font-sans">
            Elite Values-Aligned Store
          </span>
          <h1 className="text-3xl md:text-4xl font-serif font-bold tracking-tight">Publications & Formulations</h1>
          <p className="text-xs text-stone-250 leading-relaxed max-w-xl font-sans">
            Acquire specialized printed playbook manuals, premium podcast subscriptions, certified institutional workshop slots, and our organic biocompatible skincare solutions.
          </p>
        </div>
      </div>

      {/* Categories Tabs row */}
      <div className="flex flex-wrap items-center gap-1.5 border-b border-stone-200 pb-4 font-sans">
        {categories.map((cat, i) => (
          <button
            key={i}
            onClick={() => setSelectedCategory(cat)}
            className={`px-3.5 py-2 text-xs font-bold uppercase rounded transition-all border cursor-pointer ${
              (selectedCategory === cat)
                ? 'bg-[#5D1F1F] text-white border-[#5D1F1F] shadow-sm'
                : 'bg-white hover:bg-stone-50 border-stone-200 text-stone-700'
            }`}
          >
            {cat === 'all' ? 'All Offerings' : cat}
          </button>
        ))}
      </div>

      {/* Grid of Products Card layout */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredProducts.map(prod => {
          const isSkin = prod.category.toLowerCase().includes('skin');
          const isBook = prod.category.toLowerCase().includes('book');

          return (
            <div
              key={prod.id}
              className={`bg-white rounded-xl border p-5 shadow-sm hover:border-[#C8A070]/60 transition-all flex flex-col justify-between ${
                isSkin ? 'border-amber-200 bg-amber-50/5' : 'border-stone-200 animate-fadeIn'
              }`}
            >
              <div className="space-y-4">
                <div className="flex items-center justify-between font-sans">
                  <span className={`text-[10px] font-extrabold uppercase tracking-wide px-2.5 py-0.5 rounded ${
                    isSkin ? 'bg-amber-150 text-amber-900 border border-amber-200' : 'bg-stone-100 text-stone-800'
                  }`}>
                    {prod.category}
                  </span>
                  
                  {isSkin && (
                    <span className="bg-emerald-50 text-emerald-800 border border-emerald-100 text-[8px] font-extrabold px-1.5 py-0.5 rounded uppercase font-mono tracking-wider">
                      ★ Biocompatible Halal
                    </span>
                  )}
                </div>

                <div className="space-y-2">
                  <h3 className="font-serif font-bold text-base text-stone-950 leading-snug">
                    {prod.name}
                  </h3>
                  <div className="text-xl font-mono font-bold text-[#5D1F1F]">
                    {prod.price}
                  </div>
                  <p className="text-xs text-stone-650 leading-relaxed font-sans">
                    {prod.description}
                  </p>
                </div>

                {/* Features & Benefits expandable guides */}
                <div className="border-t border-stone-100 pt-3 space-y-2.5 font-sans">
                  <div>
                    <span className="text-[8px] font-bold text-stone-400 uppercase block tracking-wider mb-2">
                      Key Highlights
                    </span>
                    <ul className="space-y-1">
                      {prod.features.map((ft, idx) => (
                        <li key={idx} className="text-xs text-stone-700 flex items-start gap-1 leading-normal font-normal">
                          <ShieldCheck className="w-3.5 h-3.5 text-[#5D1F1F] flex-shrink-0 mt-0.5" />
                          <span>{ft}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <span className="text-[8px] font-bold text-stone-400 uppercase block tracking-wider mb-2">
                      Transformative Benefit
                    </span>
                    <ul className="space-y-1">
                      {prod.benefits.map((bf, idx) => (
                        <li key={idx} className="text-xs text-stone-600 flex items-start gap-1 leading-normal italic font-normal">
                          <Info className="w-3.5 h-3.5 text-amber-700 flex-shrink-0 mt-0.5" />
                          <span>{bf}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

              </div>

              <div className="border-t border-stone-100 pt-4 mt-5 font-sans">
                <button
                  onClick={() => handleOpenInquiry(prod)}
                  className={`w-full py-2.5 rounded text-xs font-bold transition-all flex items-center justify-center gap-1.5 cursor-pointer ${
                    isSkin 
                      ? 'bg-amber-700 hover:bg-amber-800 text-white shadow-sm' 
                      : 'bg-[#5D1F1F] hover:bg-[#4A1818] text-white shadow-sm'
                  }`}
                >
                  <ShoppingBag className="w-4 h-4" />
                  {isBook ? 'Purchase Book' : isSkin ? 'Pre-Order Formulation' : 'Secure Program Slot'}
                </button>
              </div>

            </div>
          );
        })}
      </div>

      {/* Inquiry Trigger Modal Overlay */}
      {showInquiryModal && selectedProduct && (
        <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4 backdrop-blur-sm animate-fadeIn font-sans">
          <div className="bg-white rounded-xl border border-stone-100 max-w-md w-full p-6 shadow-2xl relative space-y-4 animate-scaleUp">
            
            <div className="flex items-center justify-between border-b border-stone-100 pb-2.5">
              <span className="text-xs font-extrabold text-[#5D1F1F] uppercase tracking-wider">
                Values Order Gateway
              </span>
              <button
                onClick={() => setShowInquiryModal(false)}
                className="text-stone-400 hover:text-red-500 font-bold text-lg p-1 cursor-pointer"
              >
                &times;
              </button>
            </div>

            {formSuccess ? (
              <div className="py-6 text-center space-y-4 animate-scaleUp">
                <CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
                <h3 className="font-serif font-bold text-lg text-stone-900 leading-tight">
                  Inquiry Successfully Registered!
                </h3>
                <p className="text-xs text-stone-600 max-w-xs mx-auto leading-relaxed">
                  Secure credentials for <strong className="text-stone-900 font-serif">"{selectedProduct.name}"</strong> have been cataloged for client verification.<br />
                  A stewardship representative will reach out at <strong className="font-mono text-[#5D1F1F]">{clientEmail}</strong> within 24 business hours.
                </p>
                <div className="pt-4">
                  <button
                    onClick={() => setShowInquiryModal(false)}
                    className="bg-[#5D1F1F] hover:bg-[#4A1818] text-[#FCF9F7] text-xs font-bold px-6 py-2 rounded transition-colors cursor-pointer"
                  >
                    Return to Store
                  </button>
                </div>
              </div>
            ) : (
              <>
                <div className="space-y-2 text-center">
                  <Sparkles className="w-10 h-10 text-[#C8A070] mx-auto animate-pulse" />
                  <h3 className="font-serif font-bold text-base text-stone-950 leading-tight">
                    Secure Inquiry: {selectedProduct.name}
                  </h3>
                  <p className="text-xs text-stone-500 max-w-xs mx-auto leading-relaxed">
                    Provide your trusted contact coordinates, and our values audit team will verify your license slot / shipping destination.
                  </p>
                </div>

                <form onSubmit={handleInquirySubmit} className="space-y-3.5 pt-2">
                  <div>
                    <label className="text-[10px] font-bold text-stone-500 uppercase tracking-widest block mb-1">
                      Secure Communication Email
                    </label>
                    <input
                      type="email"
                      required
                      placeholder="e.g., student.steward@gmail.com"
                      value={clientEmail}
                      onChange={(e) => setClientEmail(e.target.value)}
                      className="w-full text-xs font-semibold rounded border border-stone-200 p-2.5 focus:outline-none focus:ring-1 focus:ring-[#5D1F1F]"
                    />
                  </div>

                  <div>
                    <label className="text-[10px] font-bold text-stone-500 uppercase tracking-widest block mb-1">
                      Optional Custom Requirements / Delivery Address
                    </label>
                    <textarea
                      placeholder="Type specialized custom quantities, team slot limits, or delivery destinations here..."
                      value={clientNote}
                      onChange={(e) => setClientNote(e.target.value)}
                      className="w-full text-xs rounded border border-stone-200 p-2.5 h-20 resize-none focus:outline-none focus:ring-1 focus:ring-[#5D1F1F]"
                    />
                  </div>

                  <button
                    type="submit"
                    disabled={formSubmitted}
                    className="w-full bg-[#5D1F1F] hover:bg-[#4A1818] text-white text-xs font-bold py-3 rounded flex items-center justify-center gap-2 cursor-pointer transition-colors"
                  >
                    {formSubmitted ? (
                      <span>Registering Secure Order...</span>
                    ) : (
                      <>
                        <Send className="w-3.5 h-3.5" />
                        Transmit Order Credentials
                      </>
                    )}
                  </button>
                </form>

                <div className="pt-2 border-t border-stone-100 flex items-center gap-1.5 justify-center text-[10px] text-stone-500 font-sans">
                  <ShieldCheck className="w-4 h-4 text-emerald-600" />
                  <span>Complies with full 100% Amanah privacy codes.</span>
                </div>
              </>
            )}

          </div>
        </div>
      )}

    </div>
  );
}