import React, { useState, useMemo, useEffect } from 'react';
import { Search, ChevronDown, ChevronRight, Globe, Users, Info, ArrowUpDown, History, ArrowRight, X } from 'lucide-react';

const languageData = [
  {
    family: "Afroasiatic",
    branches: "Semitic, Cushitic, Berber, Chadic, Omotic, Egyptian",
    speakers: "500 Million",
    region: "Middle East, North Africa, Horn of Africa, Sahel",
    majorLanguages: ["Arabic", "Amharic", "Hausa", "Oromo", "Somali", "Hebrew"],
    description: "One of the world's oldest language families, documented for over 5,000 years."
  },
  {
    family: "Indo-European",
    branches: "Germanic, Romance, Indo-Aryan, Iranian, Balto-Slavic, Hellenic, Celtic, Armenian, Albanian",
    speakers: "3.2 Billion",
    region: "Europe, Western & South Asia, Americas, Oceania",
    majorLanguages: ["English", "Spanish", "Hindustani", "Bengali", "Portuguese", "Russian", "Hindi", "French", "German", "Punjabi", "Marathi"],
    description: "The most widely spoken language family in the world today."
  },
  {
    family: "Niger-Congo",
    branches: "Bantu, Atlantic, Mande, Gur, Kwa, Adamawa-Ubangi",
    speakers: "600 Million",
    region: "Sub-Saharan Africa",
    majorLanguages: ["Swahili", "Yoruba", "Igbo", "Fula", "Shona", "Zulu"],
    description: "Contains the largest number of distinct languages of any family (over 1,500)."
  },
  {
    family: "Sino-Tibetan",
    branches: "Sinitic, Tibeto-Burman",
    speakers: "1.4 Billion",
    region: "East Asia, Southeast Asia, South Asia",
    majorLanguages: ["Mandarin Chinese", "Cantonese", "Burmese", "Tibetan"],
    description: "Defined by the Sinitic languages (Chinese) and the diverse Tibeto-Burman group."
  },
  {
    family: "Austronesian",
    branches: "Malayo-Polynesian, Formosan",
    speakers: "386 Million",
    region: "Maritime Southeast Asia, Oceania, Madagascar",
    majorLanguages: ["Malay/Indonesian", "Tagalog", "Javanese", "Malagasy"],
    description: "A vast family spread across islands from Madagascar to Easter Island."
  },
  {
    family: "Dravidian",
    branches: "South, South-Central, Central, North",
    speakers: "250 Million",
    region: "South Asia (mainly Southern India & Sri Lanka)",
    majorLanguages: ["Telugu", "Tamil", "Kannada", "Malayalam"],
    description: "Indigenous to the Indian subcontinent, separate from Indo-Aryan languages."
  },
  {
    family: "Turkic",
    branches: "Oghuz, Kipchak, Karluk, Siberian",
    speakers: "180 Million",
    region: "Central Asia, Western Asia, Eastern Europe",
    majorLanguages: ["Turkish", "Azerbaijani", "Uzbek", "Kazakh", "Tatar"],
    description: "Characterized by vowel harmony and agglutinative grammar."
  },
  {
    family: "Japonic",
    branches: "Japanese, Ryukyuan",
    speakers: "125 Million",
    region: "Japan, Ryukyu Islands",
    majorLanguages: ["Japanese", "Okinawan"],
    description: "Thought to have originated in the Korean peninsula or mainland Asia."
  },
  {
    family: "Austroasiatic",
    branches: "Munda, Mon-Khmer",
    speakers: "117 Million",
    region: "Southeast Asia, South Asia",
    majorLanguages: ["Vietnamese", "Khmer", "Santali"],
    description: "The indigenous languages of mainland Southeast Asia."
  },
  {
    family: "Kra-Dai",
    branches: "Tai, Kam-Sui, Hlai",
    speakers: "93 Million",
    region: "Southeast Asia, Southern China",
    majorLanguages: ["Thai", "Lao", "Shan", "Zhuang"],
    description: "Mainly concentrated in Thailand, Laos, and southern China."
  }
];

const lineageMap = {
  "English": ["Indo-European", "Germanic", "West Germanic", "Old English", "English"],
  "Spanish": ["Indo-European", "Romance", "Ibero-Romance", "Old Spanish", "Spanish"],
  "Hindi": ["Indo-European", "Indo-Aryan", "Central Zone", "Sanskrit Influence", "Hindi"],
  "Arabic": ["Afroasiatic", "Semitic", "Central Semitic", "Classical Arabic", "Modern Standard Arabic"],
  "Mandarin Chinese": ["Sino-Tibetan", "Sinitic", "Mandarin", "Old Chinese", "Mandarin Chinese"],
  "Swahili": ["Niger-Congo", "Bantu", "Sabaki", "Swahili"],
  "Japanese": ["Japonic", "Japanese", "Old Japanese", "Modern Japanese"],
  "French": ["Indo-European", "Romance", "Gallo-Romance", "Old French", "French"],
  "German": ["Indo-European", "Germanic", "West Germanic", "High German", "German"],
  "Russian": ["Indo-European", "Balto-Slavic", "East Slavic", "Old East Slavic", "Russian"],
  "Bengali": ["Indo-European", "Indo-Aryan", "Eastern Zone", "Magadhi Prakrit", "Bengali"],
  "Telugu": ["Dravidian", "South-Central", "Telugu"],
  "Turkish": ["Turkic", "Oghuz", "Old Anatolian Turkish", "Ottoman Turkish", "Turkish"],
  "Vietnamese": ["Austroasiatic", "Mon-Khmer", "Vietic", "Vietnamese"]
};

const TraceTool = ({ onClose }) => {
  const [selectedLang, setSelectedLang] = useState('');
  
  const lineage = useMemo(() => {
    return selectedLang ? lineageMap[selectedLang] : [];
  }, [selectedLang]);

  return (
    <div className="bg-slate-900/40 rounded-2xl p-6 mb-8 text-white shadow-xl relative overflow-hidden backdrop-blur-sm border border-white/10">
      <div className="absolute top-0 right-0 p-4">
        <button onClick={onClose} className="hover:bg-white/10 p-1 rounded-full transition-colors">
          <X size={24} />
        </button>
      </div>
      <div className="relative z-10">
        <h2 className="text-xl font-bold flex items-center gap-2 mb-4">
          <History size={24} /> Trace Language History
        </h2>
        
        <div className="mb-6">
          <label className="block text-slate-200 text-sm mb-2 font-medium">Select a modern language to see its ancestry:</label>
          <select 
            value={selectedLang} 
            onChange={(e) => setSelectedLang(e.target.value)}
            className="w-full md:w-64 bg-slate-800 border-none text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-slate-400 outline-none cursor-pointer"
          >
            <option value="">Choose a language...</option>
            {Object.keys(lineageMap).sort().map(lang => (
              <option key={lang} value={lang}>{lang}</option>
            ))}
          </select>
        </div>

        {lineage.length > 0 && (
          <div className="bg-black/20 rounded-xl p-6 border border-white/10">
            <h3 className="text-slate-300 text-xs font-bold uppercase tracking-widest mb-4">Evolutionary Path</h3>
            <div className="flex flex-col gap-4">
              {lineage.map((step, idx) => (
                <div key={idx} className="flex items-center gap-4 group">
                  <div className="flex flex-col items-center">
                    <div className={`w-4 h-4 rounded-full ${idx === lineage.length - 1 ? 'bg-amber-400' : 'bg-slate-300'} border-2 border-slate-900 shadow-sm`} />
                    {idx < lineage.length - 1 && <div className="w-0.5 h-6 bg-white/20" />}
                  </div>
                  <div className="flex flex-col">
                    <span className={`text-sm ${idx === 0 ? 'font-black' : idx === lineage.length - 1 ? 'font-bold text-amber-300' : 'font-medium text-slate-100'}`}>
                      {step}
                    </span>
                    {idx === 0 && <span className="text-[10px] text-slate-400 uppercase font-bold">Primary Family</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const FamilyCard = ({ item }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="border border-white/10 rounded-xl overflow-hidden bg-white/10 backdrop-blur-md shadow-lg transition-all hover:bg-white/[0.15] mb-4 group">
      <button 
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full flex items-center justify-between p-5 text-left transition-colors"
      >
        <div className="flex items-center gap-5">
          <div className="p-3 bg-white/10 rounded-xl text-white group-hover:bg-white/20 transition-colors">
            <Globe size={22} />
          </div>
          <div>
            <h3 className="text-xl font-bold text-white leading-tight">{item.family}</h3>
            <p className="text-sm text-slate-300 font-medium">{item.region}</p>
          </div>
        </div>
        <div className="flex items-center gap-8">
          <div className="hidden md:flex flex-col items-end">
            <span className="text-base font-bold text-white">{item.speakers}</span>
            <span className="text-[10px] text-slate-300 uppercase tracking-widest font-black">Speakers</span>
          </div>
          {isExpanded ? <ChevronDown size={22} className="text-white/60" /> : <ChevronRight size={22} className="text-white/60" />}
        </div>
      </button>

      {isExpanded && (
        <div className="p-6 border-t border-white/10 bg-black/10 animate-in fade-in slide-in-from-top-2 duration-200">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-white">
            <div>
              <h4 className="text-[10px] font-black text-slate-300 uppercase mb-3 flex items-center gap-2 tracking-widest">
                <Info size={14} /> Description
              </h4>
              <p className="text-slate-100 text-sm leading-relaxed mb-6 font-medium">
                {item.description}
              </p>
              
              <h4 className="text-[10px] font-black text-slate-300 uppercase mb-3 tracking-widest">Primary Branches</h4>
              <div className="flex flex-wrap gap-2">
                {item.branches.split(', ').map(branch => (
                  <span key={branch} className="px-3 py-1.5 bg-white/5 border border-white/10 rounded-lg text-xs font-bold hover:bg-white/10 transition-colors">
                    {branch}
                  </span>
                ))}
              </div>
            </div>
            
            <div className="bg-black/20 p-5 rounded-xl border border-white/5">
              <h4 className="text-[10px] font-black text-slate-300 uppercase mb-4 flex items-center gap-2 tracking-widest">
                <Users size={14} /> Notable Languages
              </h4>
              <ul className="grid grid-cols-2 gap-y-3 gap-x-4">
                {item.majorLanguages.map(lang => (
                  <li key={lang} className="flex items-center gap-3 text-sm font-bold text-slate-100">
                    <div className="w-1.5 h-1.5 rounded-full bg-amber-400" />
                    {lang}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState('family');
  const [showTracer, setShowTracer] = useState(false);

  const filteredData = useMemo(() => {
    return languageData
      .filter(item => 
        item.family.toLowerCase().includes(searchTerm.toLowerCase()) ||
        item.region.toLowerCase().includes(searchTerm.toLowerCase()) ||
        item.majorLanguages.some(l => l.toLowerCase().includes(searchTerm.toLowerCase()))
      )
      .sort((a, b) => {
        if (sortBy === 'family') return a.family.localeCompare(b.family);
        if (sortBy === 'speakers') {
          const getVal = s => parseFloat(s.replace(/[^\d.]/g, '')) * (s.includes('Billion') ? 1000 : 1);
          return getVal(b.speakers) - getVal(a.speakers);
        }
        return 0;
      });
  }, [searchTerm, sortBy]);

  return (
    <div 
      className="min-h-screen p-4 md:p-12 text-slate-100"
      style={{ 
        backgroundColor: '#888',
        fontFamily: "'Questrial', sans-serif" 
      }}
    >
      {/* Inject Google Font */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
      `}</style>

      <div className="max-w-4xl mx-auto">
        {/* Navigation / Actions (No Header) */}
        <div className="mb-10 flex flex-col md:flex-row gap-5 items-center">
          <div className="relative flex-1 w-full">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-white/50" size={20} />
            <input 
              type="text"
              placeholder="Search history and families..."
              className="w-full pl-12 pr-6 py-4 bg-black/20 border border-white/10 text-white rounded-2xl focus:ring-2 focus:ring-white/30 outline-none transition-all placeholder:text-white/30 backdrop-blur-md"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          
          <div className="flex gap-2 w-full md:w-auto">
            <button 
              onClick={() => setShowTracer(!showTracer)}
              className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-4 rounded-2xl font-black text-sm transition-all shadow-lg ${showTracer ? 'bg-amber-400 text-slate-900' : 'bg-slate-900 text-white hover:bg-slate-800'}`}
            >
              <History size={18} /> Trace Root
            </button>
            
            <div className="flex gap-1 bg-black/20 p-1 rounded-2xl border border-white/10 backdrop-blur-md">
              <button 
                onClick={() => setSortBy('family')}
                className={`p-3 rounded-xl transition-all ${sortBy === 'family' ? 'bg-white/20 text-white' : 'text-white/40 hover:text-white/60'}`}
                title="Sort A-Z"
              >
                <ArrowUpDown size={18} />
              </button>
              <button 
                onClick={() => setSortBy('speakers')}
                className={`p-3 rounded-xl transition-all ${sortBy === 'speakers' ? 'bg-white/20 text-white' : 'text-white/40 hover:text-white/60'}`}
                title="Sort by Population"
              >
                <Users size={18} />
              </button>
            </div>
          </div>
        </div>

        {showTracer && <TraceTool onClose={() => setShowTracer(false)} />}

        {/* List */}
        <div className="space-y-4">
          {filteredData.length > 0 ? (
            filteredData.map((item) => (
              <FamilyCard key={item.family} item={item} />
            ))
          ) : (
            <div className="text-center py-20 bg-black/10 rounded-3xl border-2 border-dashed border-white/10">
              <p className="text-white/40 font-bold">No matches found in the tree.</p>
            </div>
          )}
        </div>

        {/* Minimal Footer */}
        <footer className="mt-16 pb-8 text-center text-[10px] font-black text-white/30 uppercase tracking-[0.2em]">
          <p>Global Linguistic Lineage • Data Est. 2024</p>
        </footer>
      </div>
    </div>
  );
}