import React, { useState } from 'react';
import { HIGHLIGHTED_PUBLICATIONS, Publication, PROFILE_SUMMARY } from '../data/cvData';
import { Search, BookOpen, ExternalLink, Award, Sparkles, Filter, X } from 'lucide-react';

export default function PublicationsSection() {
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedPublication, setSelectedPublication] = useState<Publication | null>(null);

  const categories = [
    'All',
    'Nature Group',
    'Clinical & Antimicrobial',
    'Cyanobacteria & Algae',
    'Biofuels & Energy',
    'Nanotechnology',
    'Books & Reviews'
  ];

  const filteredPublications = HIGHLIGHTED_PUBLICATIONS.filter((pub) => {
    const matchesCategory = selectedCategory === 'All' || pub.category === selectedCategory;
    const query = searchQuery.toLowerCase();
    const matchesSearch =
      pub.title.toLowerCase().includes(query) ||
      pub.authors.toLowerCase().includes(query) ||
      pub.journal.toLowerCase().includes(query) ||
      pub.year.toString().includes(query);
    return matchesCategory && matchesSearch;
  });

  return (
    <section id="publications" className="py-16 bg-slate-50 dark:bg-slate-950 transition-colors">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
          <div>
            <div className="text-xs font-mono font-semibold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-2">
              475+ Publications · 85 Book Chapters · 11 Books
            </div>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">
              Research Publications & Citation Metrics
            </h2>
          </div>

          {/* Citation Stats Panel */}
          <div className="flex flex-wrap items-center gap-3 text-xs font-mono">
            <div className="px-3.5 py-2 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
              <span className="text-slate-400">Google Scholar:</span>{' '}
              <span className="font-bold text-slate-900 dark:text-emerald-400">15,451 Citations</span>{' '}
              <span className="text-slate-400">(h-index: 60)</span>
            </div>
            <div className="px-3.5 py-2 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
              <span className="text-slate-400">Scopus:</span>{' '}
              <span className="font-bold text-slate-900 dark:text-emerald-400">7,108 Citations</span>{' '}
              <span className="text-slate-400">(h-index: 41)</span>
            </div>
          </div>
        </div>

        {/* Filter Bar & Search */}
        <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4 mb-8">
          
          {/* Category Tabs */}
          <div className="flex items-center gap-1.5 overflow-x-auto pb-2 no-scrollbar">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setSelectedCategory(cat)}
                className={`px-3.5 py-1.5 text-xs font-semibold rounded-lg transition-colors whitespace-nowrap shrink-0 ${
                  selectedCategory === cat
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 shadow-sm'
                    : 'bg-white text-slate-600 hover:text-slate-900 dark:bg-slate-900 dark:text-slate-300 dark:hover:text-white border border-slate-200/60 dark:border-slate-800/60'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>

          {/* Search Bar */}
          <div className="relative w-full md:w-72 shrink-0">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              placeholder="Search title, author, journal..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 pr-4 py-2 text-xs rounded-lg bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
              >
                <X className="w-3.5 h-3.5" />
              </button>
            )}
          </div>

        </div>

        {/* Publications Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredPublications.map((pub) => (
            <div
              key={pub.id}
              onClick={() => setSelectedPublication(pub)}
              className="group p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 hover:border-emerald-500/50 dark:hover:border-emerald-500/50 shadow-sm hover:shadow-md transition-all cursor-pointer flex flex-col justify-between"
            >
              <div>
                {/* Header metadata row without pill boxes */}
                <div className="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 mb-3 font-mono">
                  <span className="font-semibold text-emerald-700 dark:text-emerald-400">
                    {pub.category}
                  </span>
                  <span>{pub.year}</span>
                </div>

                <h3 className="text-base font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors line-clamp-2 mb-2 leading-snug">
                  {pub.title}
                </h3>

                <p className="text-xs text-slate-600 dark:text-slate-400 line-clamp-2 mb-4 font-normal">
                  {pub.authors}
                </p>
              </div>

              <div>
                <div className="pt-3 border-t border-slate-100 dark:border-slate-800/60 flex items-center justify-between text-xs">
                  <span className="font-medium text-slate-700 dark:text-slate-300 italic truncate max-w-[200px]">
                    {pub.journal}
                  </span>
                  {pub.impactFactor && (
                    <span className="font-mono text-emerald-700 dark:text-emerald-400 font-bold shrink-0 bg-emerald-50 dark:bg-emerald-950/60 px-2 py-0.5 rounded border border-emerald-200/50 dark:border-emerald-900/50">
                      IF: {pub.impactFactor}
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredPublications.length === 0 && (
          <div className="p-12 text-center rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80">
            <BookOpen className="w-8 h-8 mx-auto text-slate-400 mb-3" />
            <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-1">
              No matching publications found
            </h3>
            <p className="text-xs text-slate-500 dark:text-slate-400">
              Try adjusting your search terms or clearing the category filter.
            </p>
          </div>
        )}

        {/* Detailed Publication Modal */}
        {selectedPublication && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-sm animate-in fade-in">
            <div className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 sm:p-8 shadow-2xl">
              
              <button
                onClick={() => setSelectedPublication(null)}
                className="absolute top-4 right-4 p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"
              >
                <X className="w-5 h-5" />
              </button>

              <div className="flex items-center gap-2 text-xs font-mono text-emerald-600 dark:text-emerald-400 font-semibold mb-3">
                <span>{selectedPublication.category}</span>
                <span aria-hidden="true">·</span>
                <span>Published {selectedPublication.year}</span>
                {selectedPublication.impactFactor && (
                  <>
                    <span aria-hidden="true">·</span>
                    <span>Impact Factor: {selectedPublication.impactFactor}</span>
                  </>
                )}
              </div>

              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 leading-snug">
                {selectedPublication.title}
              </h3>

              <div className="space-y-4 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-6">
                <div>
                  <div className="font-mono text-xs text-slate-400 uppercase font-semibold mb-1">Authors</div>
                  <div className="font-medium text-slate-800 dark:text-slate-200">{selectedPublication.authors}</div>
                </div>

                <div>
                  <div className="font-mono text-xs text-slate-400 uppercase font-semibold mb-1">Journal / Publisher</div>
                  <div className="font-medium italic">{selectedPublication.journal}</div>
                </div>

                {selectedPublication.doi && (
                  <div>
                    <div className="font-mono text-xs text-slate-400 uppercase font-semibold mb-1">DOI Reference</div>
                    <div className="font-mono text-xs text-emerald-600 dark:text-emerald-400">{selectedPublication.doi}</div>
                  </div>
                )}
              </div>

              <div className="pt-4 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between">
                <span className="text-xs text-slate-500">Indexed in Google Scholar & Scopus</span>
                {selectedPublication.doi && (
                  <a
                    href={`https://doi.org/${selectedPublication.doi}`}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition-colors"
                  >
                    <span>View Publisher DOI</span>
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                )}
              </div>

            </div>
          </div>
        )}

      </div>
    </section>
  );
}