import React, { useState, useEffect, useMemo } from 'react';
import { 
  Download, 
  Share2, 
  Twitter, 
  Instagram, 
  Heart, 
  Filter, 
  Maximize2,
  Calendar,
  X,
  Layers,
  Image as ImageIcon,
  Loader2,
  AlertCircle
} from 'lucide-react';

const DATA_URL = "https://art.uni-dev.co.uk/Data.txt";
// Using corsproxy.io for better stability with raw text files
const PROXY_URL = `https://corsproxy.io/?${encodeURIComponent(DATA_URL)}`;

const PRESET_BACKGROUNDS = [
  { id: 'none', label: 'None', class: 'bg-zinc-900' },
  { id: 'grad-blue', label: 'Deep Ocean', class: 'bg-gradient-to-br from-blue-900 to-indigo-950' },
  { id: 'grad-sunset', label: 'Sunset', class: 'bg-gradient-to-br from-orange-600 to-purple-900' },
  { id: 'grid', label: 'Grid', class: 'bg-zinc-900 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]' },
  { id: 'white', label: 'Studio', class: 'bg-zinc-100' },
];

const App = () => {
  const [assets, setAssets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedAsset, setSelectedAsset] = useState(null);
  const [activeBackground, setActiveBackground] = useState(PRESET_BACKGROUNDS[0]);
  const [filters, setFilters] = useState({
    Personal: false,
    Business: false,
    Roblox: false,
    Fortnite: false,
    FullScene: false,
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        // Add cache buster to URL
        const cacheBuster = `&t=${Date.now()}`;
        const response = await fetch(PROXY_URL + cacheBuster);
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const text = await response.text();
        
        if (!text || text.trim().length === 0) {
          throw new Error("The data file is empty.");
        }

        const parsedAssets = parseCustomFormat(text);
        
        if (parsedAssets.length === 0) {
          throw new Error("No valid art data found in the file.");
        }

        setAssets(parsedAssets);
        setError(null);
      } catch (err) {
        console.error("Fetch error:", err);
        setError("Unable to connect to the art database. This can happen if the external server is blocking requests or the proxy is busy. Please try again in a moment.");
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  const parseCustomFormat = (rawText) => {
    // Improved parser to handle various line endings and spacing
    const blocks = rawText.split('}').map(block => block.trim());
    const results = [];

    blocks.forEach(block => {
      // Find where the actual content starts (skip the opening '{')
      const startIndex = block.indexOf('{');
      if (startIndex === -1 && !block.includes(':')) return;
      
      const content = startIndex !== -1 ? block.substring(startIndex + 1) : block;
      const lines = content.split('\n');
      const obj = {};
      
      lines.forEach(line => {
        const colonIndex = line.indexOf(':');
        if (colonIndex === -1) return;

        const key = line.substring(0, colonIndex).trim();
        let value = line.substring(colonIndex + 1).trim();
        
        // Handle boolean strings and nulls
        const lowerVal = value.toLowerCase();
        if (lowerVal === 'true') value = true;
        else if (lowerVal === 'false') value = false;
        else if (lowerVal === 'null') value = null;
        
        if (key) obj[key] = value;
      });

      if (obj.Name || obj.AssetID) {
        results.push(obj);
      }
    });

    return results;
  };

  const filteredAssets = useMemo(() => {
    return assets.filter(asset => {
      if (filters.Personal && !asset.TagPersonalUsage) return false;
      if (filters.Business && !asset.TagBusinessUsage) return false;
      if (filters.Roblox && !asset.TagRoblox) return false;
      if (filters.Fortnite && !asset.TagFortnite) return false;
      if (filters.FullScene && !asset.TagFullScene) return false;
      return true;
    });
  }, [filters, assets]);

  const toggleFilter = (key) => {
    setFilters(prev => ({ ...prev, [key]: !prev[key] }));
  };

  const handleDownload = (link) => {
    if (link && typeof link === 'string' && link.toLowerCase() !== "null") {
      window.open(link, '_blank');
    }
  };

  const copyShareLink = (link) => {
    const el = document.createElement('textarea');
    el.value = link;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-zinc-400">
        <Loader2 className="animate-spin mb-4 text-blue-500" size={40} />
        <p className="font-bold tracking-[0.2em] uppercase text-[10px] animate-pulse">Syncing Database...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-zinc-400 p-6">
        <div className="bg-zinc-900 border border-zinc-800 p-10 rounded-[2.5rem] max-w-md w-full flex flex-col items-center shadow-2xl">
          <div className="w-16 h-16 bg-red-500/10 rounded-full flex items-center justify-center mb-6">
            <AlertCircle size={32} className="text-red-500" />
          </div>
          <h2 className="text-xl font-black text-white mb-3">Connection Lost</h2>
          <p className="text-center text-sm leading-relaxed mb-8 opacity-60 px-4">{error}</p>
          <button 
            onClick={() => window.location.reload()} 
            className="w-full py-4 bg-white text-black rounded-2xl font-black uppercase text-xs tracking-widest hover:bg-zinc-200 transition-all active:scale-95"
          >
            Reconnect Now
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-blue-500 selection:text-white">
      {/* Header */}
      <header className="border-b border-zinc-900 bg-zinc-950/90 backdrop-blur-xl sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center font-black italic text-lg shadow-lg shadow-blue-900/20">N</div>
            <div>
              <h1 className="text-lg font-black tracking-tighter leading-none">NEOX ARTS</h1>
              <p className="text-[9px] font-bold text-zinc-600 uppercase tracking-widest mt-1">Global Repository</p>
            </div>
          </div>
          
          <nav className="hidden lg:flex items-center gap-8 text-[10px] font-black uppercase tracking-[0.2em]">
            <span className="text-blue-500 cursor-default">Gallery</span>
            <span className="text-zinc-600 cursor-not-allowed">Archives</span>
            <span className="text-zinc-600 cursor-not-allowed">Licenses</span>
          </nav>

          <div className="flex items-center gap-4">
            <a href="https://x.com/neox_yaps" target="_blank" rel="noreferrer" className="p-3 bg-zinc-900 border border-zinc-800 hover:border-blue-500/50 rounded-xl transition-all hover:scale-105 active:scale-95">
              <Twitter size={18} />
            </a>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-12">
        {/* Filter Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex items-center gap-2 mr-4 text-zinc-600">
              <Filter size={14} />
              <span className="text-[10px] font-black uppercase tracking-widest">Filter By</span>
            </div>
            {Object.keys(filters).map((f) => (
              <button
                key={f}
                onClick={() => toggleFilter(f)}
                className={`px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border ${
                  filters[f] 
                    ? 'bg-blue-600 border-blue-500 text-white shadow-xl shadow-blue-900/20' 
                    : 'bg-zinc-900 border-zinc-800 text-zinc-500 hover:border-zinc-700 hover:text-zinc-300'
                }`}
              >
                {f}
              </button>
            ))}
          </div>
          <div className="text-[10px] font-black text-zinc-700 uppercase tracking-widest border-l-2 border-zinc-900 pl-4">
            Active Dataset: {filteredAssets.length} Objects
          </div>
        </div>

        {/* Gallery Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
          {filteredAssets.map((asset) => (
            <div 
              key={asset.AssetID || Math.random()}
              className="group relative bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-800 hover:border-blue-500/30 transition-all duration-500 hover:-translate-y-2 shadow-2xl shadow-black/50"
            >
              <div className="aspect-[4/3] overflow-hidden relative">
                <img 
                  src={asset.PreviewIMG} 
                  alt={asset.Name}
                  className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
                  loading="lazy"
                  onError={(e) => { e.target.src = "https://images.unsplash.com/photo-1614728263952-84ea256f9679?auto=format&fit=crop&q=80&w=800"; }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-end p-6">
                  <button 
                    onClick={() => {
                      setActiveBackground(PRESET_BACKGROUNDS[0]);
                      setSelectedAsset(asset);
                    }}
                    className="w-full bg-white text-black font-black py-4 rounded-2xl text-[10px] uppercase tracking-[0.2em] flex items-center justify-center gap-3 hover:bg-zinc-200 transition-all shadow-2xl transform translate-y-4 group-hover:translate-y-0"
                  >
                    <Maximize2 size={14} /> Inspect Asset
                  </button>
                </div>
                {asset.BackgroundsEnabled && (
                  <div className="absolute top-4 right-4 bg-zinc-950/80 text-[8px] font-black uppercase px-3 py-1.5 rounded-lg shadow-lg flex items-center gap-2 backdrop-blur-md border border-white/5 z-10 text-blue-400">
                    <Layers size={10} /> Dynamic Stage
                  </div>
                )}
              </div>
              
              <div className="p-6">
                <div className="flex justify-between items-start mb-4">
                   <h3 className="font-black text-sm text-white truncate max-w-[70%] tracking-tight">{asset.Name}</h3>
                   <span className="text-[10px] font-mono text-zinc-600">ID:{asset.AssetID}</span>
                </div>
                <div className="flex flex-wrap gap-2">
                  {asset.TagRoblox && <span className="px-2.5 py-1 bg-zinc-800 text-[8px] font-black text-zinc-400 uppercase rounded-md tracking-wider">Roblox</span>}
                  {asset.TagFortnite && <span className="px-2.5 py-1 bg-zinc-800 text-[8px] font-black text-zinc-400 uppercase rounded-md tracking-wider">Fortnite</span>}
                  {asset.TagFullScene && <span className="px-2.5 py-1 bg-zinc-950 border border-zinc-800 text-[8px] font-black text-blue-500 uppercase rounded-md tracking-wider">Full Scene</span>}
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredAssets.length === 0 && (
          <div className="flex flex-col items-center justify-center py-40 text-zinc-700">
            <div className="w-20 h-20 bg-zinc-900 rounded-[2.5rem] flex items-center justify-center mb-6 border border-zinc-800 shadow-inner">
              <ImageIcon size={32} className="opacity-10" />
            </div>
            <p className="text-[10px] font-black uppercase tracking-[0.3em]">Zero Matches Detected</p>
            <button 
              onClick={() => setFilters({Personal: false, Business: false, Roblox: false, Fortnite: false, FullScene: false})}
              className="mt-6 text-blue-500 hover:text-blue-400 text-[10px] font-black uppercase tracking-[0.2em] border-b border-blue-500/30 pb-1 transition-all"
            >
              Flush All Filters
            </button>
          </div>
        )}
      </main>

      {/* Detail Modal */}
      {selectedAsset && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 md:p-8 animate-in fade-in duration-300">
          <div className="absolute inset-0 bg-black/98 backdrop-blur-2xl" onClick={() => setSelectedAsset(null)} />
          
          <div className="relative bg-zinc-900 w-full max-w-7xl h-full max-h-[85vh] rounded-[3rem] overflow-hidden border border-zinc-800 flex flex-col md:flex-row shadow-2xl animate-in zoom-in duration-500">
            
            {/* Viewport */}
            <div className={`relative flex-1 flex items-center justify-center overflow-hidden min-h-[400px] md:min-h-0 ${activeBackground.class} transition-colors duration-700`}>
              <img 
                src={selectedAsset.PreviewIMG} 
                alt={selectedAsset.Name}
                className="max-w-[85%] max-h-[85%] object-contain drop-shadow-[0_35px_35px_rgba(0,0,0,0.6)] z-10 transition-all duration-700"
                onError={(e) => { e.target.src = "https://images.unsplash.com/photo-1614728263952-84ea256f9679?auto=format&fit=crop&q=80&w=800"; }}
              />
              
              {selectedAsset.BackgroundsEnabled && (
                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-3 bg-black/60 p-3 rounded-3xl backdrop-blur-2xl border border-white/5 shadow-2xl">
                  {PRESET_BACKGROUNDS.map((bg) => (
                    <button
                      key={bg.id}
                      onClick={() => setActiveBackground(bg)}
                      className={`w-8 h-8 rounded-2xl border-2 transition-all hover:scale-110 active:scale-90 ${bg.class} ${
                        activeBackground.id === bg.id ? 'border-blue-500 scale-110 rotate-3' : 'border-white/10'
                      }`}
                    />
                  ))}
                </div>
              )}

              <button 
                onClick={() => setSelectedAsset(null)}
                className="absolute top-8 right-8 z-30 p-3 bg-black/50 text-white rounded-2xl hover:bg-black transition-all border border-white/5 active:scale-90"
              >
                <X size={24} />
              </button>
            </div>

            {/* Sidebar */}
            <div className="w-full md:w-[450px] bg-zinc-900 border-t md:border-t-0 md:border-l border-zinc-800 overflow-y-auto p-10 scrollbar-hide">
              <div className="space-y-10">
                <div className="pb-8 border-b border-zinc-800">
                  <h2 className="text-3xl font-black text-white leading-[1.1] mb-4 tracking-tighter">{selectedAsset.Name}</h2>
                  <div className="flex items-center gap-3 text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">
                    <div className="px-2 py-1 bg-blue-500/10 text-blue-500 rounded-md"><Calendar size={12} /></div>
                    {selectedAsset.CreationDate || "Legacy Entry"}
                  </div>
                </div>

                {selectedAsset.Embed && (
                  <div className="p-6 bg-zinc-950 rounded-[2rem] border border-zinc-800/50 shadow-inner relative overflow-hidden group">
                    <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                      <Info size={48} />
                    </div>
                    <p className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-4">Metadata Analysis</p>
                    <p className="text-zinc-400 text-sm leading-relaxed mb-6 font-medium italic">
                      "{selectedAsset.EmbedDescription && selectedAsset.EmbedDescription !== "Null" ? selectedAsset.EmbedDescription : "Visual representation calibrated for high-performance integration."}"
                    </p>
                    <div className="pt-4 border-t border-zinc-900 flex items-center gap-4">
                       <div className="p-2 bg-zinc-900 rounded-lg">
                         <ImageIcon size={14} className="text-zinc-600" />
                       </div>
                       <p className="text-[9px] text-zinc-500 font-black uppercase tracking-widest leading-tight">
                        {selectedAsset.EmbedText || "System Identifier: " + selectedAsset.AssetID}
                      </p>
                    </div>
                  </div>
                )}

                <div className="space-y-5">
                  <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-600 flex items-center gap-3">
                    <div className="w-4 h-[1px] bg-zinc-800" /> Asset Acquisition
                  </h4>
                  <div className="grid grid-cols-2 gap-3">
                    {['720p', '1080p', '1920p', '4k', '8k'].map(res => {
                      const isEnabled = selectedAsset[res];
                      const link = selectedAsset[`${res}Link`];
                      return (
                        <button
                          key={res}
                          disabled={!isEnabled}
                          onClick={() => handleDownload(link)}
                          className={`flex items-center justify-center gap-3 py-4 rounded-2xl text-[10px] font-black tracking-widest transition-all ${
                            isEnabled 
                              ? 'bg-zinc-800 hover:bg-blue-600 text-white shadow-xl active:scale-95' 
                              : 'bg-zinc-900/40 text-zinc-700 cursor-not-allowed border border-zinc-800/50'
                          }`}
                        >
                          <Download size={14} /> {res}
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div className="flex justify-between items-end">
                  <div className="space-y-4">
                    <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-600">Rights Profile</h4>
                    <div className="flex gap-4">
                      <div className={`px-3 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest border ${selectedAsset.PersonalUsageAllowed ? 'border-green-500/20 text-green-500' : 'border-red-500/20 text-red-500'}`}>
                        Personal
                      </div>
                      <div className={`px-3 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest border ${selectedAsset.BusinessUsageAllowed ? 'border-green-500/20 text-green-500' : 'border-red-500/20 text-red-500'}`}>
                        Commercial
                      </div>
                    </div>
                  </div>
                  
                  <div className="flex gap-3">
                    {selectedAsset.TwitterProfileURL && selectedAsset.TwitterProfileURL !== "Null" && (
                      <a href={selectedAsset.TwitterProfileURL} target="_blank" rel="noreferrer" className="p-4 bg-zinc-800 rounded-2xl hover:text-blue-400 transition-all active:scale-90 border border-zinc-700">
                        <Twitter size={20} />
                      </a>
                    )}
                    {selectedAsset.InstagramURL && selectedAsset.InstagramURL !== "Null" && (
                      <a href={selectedAsset.InstagramURL} target="_blank" rel="noreferrer" className="p-4 bg-zinc-800 rounded-2xl hover:text-pink-500 transition-all active:scale-90 border border-zinc-700">
                        <Instagram size={20} />
                      </a>
                    )}
                  </div>
                </div>

                <div className="pt-10 flex flex-col gap-4">
                  {selectedAsset.DonationButtonEnabled && (
                    <a 
                      href={selectedAsset.DonationLink} 
                      target="_blank" 
                      rel="noreferrer"
                      className="w-full bg-blue-600 hover:bg-blue-500 text-white font-black py-5 rounded-[1.5rem] flex items-center justify-center gap-3 transition-all shadow-2xl shadow-blue-900/30 active:scale-[0.98] uppercase text-xs tracking-[0.2em]"
                    >
                      <Heart size={18} fill="currentColor" /> Fuel Creative Work
                    </a>
                  )}
                  <button 
                    onClick={() => copyShareLink(selectedAsset.ShareLink)}
                    className="w-full bg-zinc-800 hover:bg-zinc-700 text-white font-black py-5 rounded-[1.5rem] flex items-center justify-center gap-3 transition-all active:scale-[0.98] uppercase text-xs tracking-[0.2em]"
                  >
                    <Share2 size={18} /> Replicate URL
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="mt-40 border-t border-zinc-900 py-24 bg-zinc-950">
        <div className="max-w-7xl mx-auto px-6 flex flex-col items-center text-zinc-700">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 bg-zinc-900 rounded-xl flex items-center justify-center font-black text-lg text-white border border-zinc-800">N</div>
            <span className="font-black text-xl uppercase tracking-tighter text-zinc-400">NEOX ARTS</span>
          </div>
          <p className="text-[10px] font-black uppercase tracking-[0.5em] mb-12 opacity-30">Render Hosting Infrastructure v4.0</p>
          
          <div className="flex flex-wrap justify-center gap-12 text-[10px] font-black uppercase tracking-[0.3em] opacity-50">
            <span className="cursor-default hover:text-white transition-colors">Distributed System</span>
            <span className="cursor-default hover:text-white transition-colors">Encrypted CDN</span>
            <a href="https://x.com/neox_yaps" target="_blank" className="hover:text-blue-500 transition-colors">Contact Operator</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;