import React, { useState, useEffect, useMemo } from 'react';
import { Search, Filter, Box, Calendar, Tag, ChevronRight, Info, ExternalLink, Grid, List } from 'lucide-react';

// Mock Data - In a real scenario, you would use PapaParse to load your master_metadata.csv
const INITIAL_DATA = [
  { id: 1, sku: "BA3241-001", name: "RPM Black Anthracite", year: 2012, colorway: "Black/Black", status: "Released", description: "The classic OG RPM with the iconic skateboard straps and 15-inch laptop sleeve.", rarity: "Common" },
  { id: 2, sku: "BA3241-200", name: "RPM Iguana Camo", year: 2014, colorway: "Iguana/Black", status: "Released", description: "Heavyweight textured polyester with a classic woodland camo pattern.", rarity: "Uncommon" },
  { id: 3, sku: "BA3241-010", name: "RPM Triple Black", year: 2018, colorway: "Black/Black/Black", status: "Released", description: "Water-resistant coating with blacked-out branding for a stealth look.", rarity: "Common" },
  { id: 4, sku: "BA3241-601", name: "RPM Solar Red", year: 2015, colorway: "Solar Red/White", status: "Discontinued", description: "A vibrant release from the mid-2010s era of Nike SB design.", rarity: "Rare" },
  { id: 5, sku: "BA5971-010", name: "RPM Skate Backpack 2.0", year: 2021, colorway: "Black/White", status: "Active", description: "The updated silhouette with improved shoulder strap ergonomics.", rarity: "Common" },
  { id: 6, sku: "BA3241-401", name: "RPM Midnight Navy", year: 2013, colorway: "Navy/Black", status: "Archive", description: "Part of the early RPM catalog, featuring the original zipper pull design.", rarity: "Rare" },
];

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedYear, setSelectedYear] = useState('All');
  const [viewMode, setViewMode] = useState('grid');
  const [selectedItem, setSelectedItem] = useState(null);

  const years = ['All', ...new Set(INITIAL_DATA.map(item => item.year))].sort((a, b) => b - a);

  const filteredData = useMemo(() => {
    return INITIAL_DATA.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
                            item.sku.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesYear = selectedYear === 'All' || item.year.toString() === selectedYear;
      return matchesSearch && matchesYear;
    });
  }, [searchTerm, selectedYear]);

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-orange-500 selection:text-white">
      {/* Header */}
      <header className="border-b border-zinc-800 bg-zinc-900/50 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-orange-600 rounded-sm flex items-center justify-center font-bold text-xl skew-x-[-12deg]">
              SB
            </div>
            <div>
              <h1 className="font-black text-xl tracking-tighter uppercase italic">RPM Master Archive</h1>
              <p className="text-[10px] text-zinc-500 font-mono tracking-widest uppercase">Digital Museum & Catalog</p>
            </div>
          </div>
          <nav className="hidden md:flex gap-8 text-sm font-medium uppercase tracking-widest text-zinc-400">
            <a href="#" className="hover:text-white transition-colors">Archive</a>
            <a href="#" className="hover:text-white transition-colors">Methodology</a>
            <a href="#" className="hover:text-white transition-colors">GitHub</a>
          </nav>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-12">
        {/* Search and Filters */}
        <section className="mb-12 space-y-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 w-5 h-5" />
              <input 
                type="text"
                placeholder="Search by SKU, Name or Colorway..."
                className="w-full bg-zinc-900 border border-zinc-800 rounded-none py-4 pl-12 pr-4 focus:ring-1 focus:ring-orange-600 outline-none transition-all placeholder:text-zinc-600 italic"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <div className="relative">
                <select 
                  className="appearance-none bg-zinc-900 border border-zinc-800 rounded-none py-4 px-6 pr-12 focus:ring-1 focus:ring-orange-600 outline-none cursor-pointer uppercase text-xs font-bold tracking-widest"
                  value={selectedYear}
                  onChange={(e) => setSelectedYear(e.target.value)}
                >
                  {years.map(year => <option key={year} value={year}>{year === 'All' ? 'ALL YEARS' : year}</option>)}
                </select>
                <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 rotate-90 w-4 h-4 text-zinc-500 pointer-events-none" />
              </div>
              <button 
                onClick={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
                className="p-4 bg-zinc-900 border border-zinc-800 hover:border-orange-600 transition-colors"
              >
                {viewMode === 'grid' ? <List className="w-5 h-5" /> : <Grid className="w-5 h-5" />}
              </button>
            </div>
          </div>
          
          <div className="flex items-center gap-4 text-[10px] text-zinc-500 font-mono tracking-widest">
            <span className="flex items-center gap-1"><Box className="w-3 h-3" /> {filteredData.length} ITEMS FOUND</span>
            <div className="h-px flex-1 bg-zinc-900"></div>
            <span>LAST UPDATED: JAN 2026</span>
          </div>
        </section>

        {/* Catalog Display */}
        {viewMode === 'grid' ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredData.map((item) => (
              <div 
                key={item.id}
                onClick={() => setSelectedItem(item)}
                className="group bg-zinc-900/40 border border-zinc-800 p-6 cursor-pointer hover:border-zinc-500 transition-all relative overflow-hidden"
              >
                <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-100 transition-opacity">
                   <div className="text-4xl font-black italic">{item.year}</div>
                </div>
                
                <div className="mb-8">
                   <div className="bg-zinc-800 w-full aspect-square flex items-center justify-center relative mb-4">
                      {/* Using inline SVG to represent the backpack structure */}
                      <svg width="80" height="100" viewBox="0 0 80 100" className="text-zinc-600 group-hover:text-orange-600 transition-colors duration-500">
                        <path d="M10,20 Q10,5 40,5 Q70,5 70,20 L70,85 Q70,95 40,95 Q10,95 10,85 Z" fill="none" stroke="currentColor" strokeWidth="2"/>
                        <rect x="20" y="30" width="40" height="40" rx="2" fill="none" stroke="currentColor" strokeWidth="1"/>
                        <line x1="10" y1="40" x2="70" y2="40" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2"/>
                        <line x1="10" y1="60" x2="70" y2="60" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2"/>
                      </svg>
                      <div className="absolute bottom-4 left-4 bg-orange-600 text-white text-[8px] font-bold px-2 py-0.5 tracking-tighter uppercase italic">
                        {item.rarity}
                      </div>
                   </div>
                </div>

                <div className="space-y-1">
                  <p className="text-[10px] font-mono text-orange-500 tracking-tighter">{item.sku}</p>
                  <h3 className="font-black text-lg uppercase leading-tight group-hover:text-white transition-colors">{item.name}</h3>
                  <p className="text-xs text-zinc-500 font-medium uppercase tracking-wider">{item.colorway}</p>
                </div>

                <div className="mt-6 pt-6 border-t border-zinc-800 flex justify-between items-center opacity-50 group-hover:opacity-100 transition-opacity">
                  <span className="text-[10px] font-bold tracking-widest uppercase">{item.status}</span>
                  <ChevronRight className="w-4 h-4" />
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="border border-zinc-800">
            <table className="w-full text-left text-xs uppercase tracking-widest font-bold">
              <thead>
                <tr className="bg-zinc-900 border-b border-zinc-800 text-zinc-500">
                  <th className="p-4">SKU</th>
                  <th className="p-4">Model Name</th>
                  <th className="p-4">Year</th>
                  <th className="p-4">Colorway</th>
                  <th className="p-4">Status</th>
                  <th className="p-4"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-900">
                {filteredData.map(item => (
                  <tr key={item.id} className="hover:bg-zinc-900 transition-colors cursor-pointer group" onClick={() => setSelectedItem(item)}>
                    <td className="p-4 font-mono text-orange-500">{item.sku}</td>
                    <td className="p-4">{item.name}</td>
                    <td className="p-4">{item.year}</td>
                    <td className="p-4 text-zinc-400">{item.colorway}</td>
                    <td className="p-4 italic">{item.status}</td>
                    <td className="p-4 text-right"><ChevronRight className="inline w-4 h-4 group-hover:translate-x-1 transition-transform" /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Empty State */}
        {filteredData.length === 0 && (
          <div className="py-32 text-center border-2 border-dashed border-zinc-900">
            <Search className="w-12 h-12 text-zinc-800 mx-auto mb-4" />
            <h3 className="text-xl font-black uppercase italic text-zinc-600">No Archive Records Found</h3>
            <p className="text-zinc-500 text-sm mt-2">Try adjusting your search terms or filters.</p>
          </div>
        )}
      </main>

      {/* Item Details Sidebar/Modal */}
      {selectedItem && (
        <div className="fixed inset-0 z-[100] flex justify-end">
          <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setSelectedItem(null)}></div>
          <div className="relative w-full max-w-2xl bg-zinc-950 border-l border-zinc-800 h-full overflow-y-auto animate-in slide-in-from-right duration-300">
            <div className="p-8 md:p-12">
              <button 
                onClick={() => setSelectedItem(null)}
                className="mb-12 text-zinc-500 hover:text-white flex items-center gap-2 text-xs font-bold uppercase tracking-widest"
              >
                <ChevronRight className="w-4 h-4 rotate-180" /> Close Archive
              </button>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <div className="aspect-square bg-zinc-900 border border-zinc-800 flex items-center justify-center">
                  <svg width="120" height="150" viewBox="0 0 80 100" className="text-orange-600">
                    <path d="M10,20 Q10,5 40,5 Q70,5 70,20 L70,85 Q70,95 40,95 Q10,95 10,85 Z" fill="none" stroke="currentColor" strokeWidth="2"/>
                    <rect x="20" y="30" width="40" height="40" rx="2" fill="none" stroke="currentColor" strokeWidth="1"/>
                  </svg>
                </div>
                <div className="space-y-6">
                  <div>
                    <span className="text-orange-500 font-mono text-sm tracking-tighter">{selectedItem.sku}</span>
                    <h2 className="text-4xl font-black uppercase italic leading-none">{selectedItem.name}</h2>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-zinc-900 border border-zinc-800">
                      <p className="text-[10px] text-zinc-500 font-mono mb-1 uppercase tracking-widest font-bold">RELEASE YEAR</p>
                      <p className="text-xl font-black italic">{selectedItem.year}</p>
                    </div>
                    <div className="p-4 bg-zinc-900 border border-zinc-800">
                      <p className="text-[10px] text-zinc-500 font-mono mb-1 uppercase tracking-widest font-bold">STATUS</p>
                      <p className="text-sm font-black italic uppercase text-orange-500">{selectedItem.status}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="space-y-8">
                <div>
                  <h4 className="text-[10px] text-zinc-500 font-mono mb-4 uppercase tracking-widest font-bold border-b border-zinc-900 pb-2 flex items-center gap-2">
                    <Info className="w-3 h-3" /> Historical Context
                  </h4>
                  <p className="text-zinc-400 leading-relaxed italic">
                    {selectedItem.description}
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div>
                    <h4 className="text-[10px] text-zinc-500 font-mono mb-4 uppercase tracking-widest font-bold border-b border-zinc-900 pb-2">Technical Specs</h4>
                    <ul className="space-y-3 text-xs uppercase tracking-wider font-bold text-zinc-300">
                      <li className="flex justify-between border-b border-zinc-900 pb-2"><span>Primary Color</span> <span className="text-zinc-500 italic">{selectedItem.colorway.split('/')[0]}</span></li>
                      <li className="flex justify-between border-b border-zinc-900 pb-2"><span>Secondary Color</span> <span className="text-zinc-500 italic">{selectedItem.colorway.split('/')[1] || 'N/A'}</span></li>
                      <li className="flex justify-between border-b border-zinc-900 pb-2"><span>Rarity Level</span> <span className="text-zinc-500 italic">{selectedItem.rarity}</span></li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="text-[10px] text-zinc-500 font-mono mb-4 uppercase tracking-widest font-bold border-b border-zinc-900 pb-2">Internal Tags</h4>
                    <div className="flex flex-wrap gap-2">
                      {['Backpack', '600D', 'Skateboard Straps', 'Laptop Sleeve', 'Nike SB'].map(tag => (
                        <span key={tag} className="text-[9px] bg-zinc-900 px-2 py-1 text-zinc-500 border border-zinc-800 tracking-tighter uppercase font-bold">{tag}</span>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="pt-12">
                   <button className="w-full bg-zinc-100 text-zinc-950 py-4 font-black uppercase italic tracking-widest hover:bg-orange-600 hover:text-white transition-colors flex items-center justify-center gap-2">
                     <ExternalLink className="w-4 h-4" /> View Stock Photos
                   </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="mt-24 border-t border-zinc-900 py-12 px-4 text-center">
        <p className="text-[10px] text-zinc-600 font-mono tracking-widest uppercase mb-4">
          The Nike SB RPM Master Archive is an independent community research project.
        </p>
        <div className="flex justify-center gap-6 grayscale opacity-30">
          {/* Mock Logos */}
          <div className="font-black text-xs italic tracking-tighter">NIKE SB</div>
          <div className="font-black text-xs italic tracking-tighter">RPM ARCHIVE</div>
          <div className="font-black text-xs italic tracking-tighter">MUSEUM</div>
        </div>
      </footer>
    </div>
  );
};

export default App;