import React, { useState } from 'react';
import { GENBANK_CATEGORIES } from '../data/cvData';
import { Dna, Database, Search, ArrowRight, ExternalLink } from 'lucide-react';

export default function GenBankExplorer() {
  const [selectedCat, setSelectedCat] = useState<string>(GENBANK_CATEGORIES[0].category);

  const activeCategory = GENBANK_CATEGORIES.find(c => c.category === selectedCat) || GENBANK_CATEGORIES[0];

  return (
    <section id="genbank" className="py-16 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800/80 transition-colors">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="max-w-3xl mb-12">
          <div className="text-xs font-mono font-semibold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-2">
            NCBI / EMBL / DDBJ GenBank Repository
          </div>
          <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">
            687 Nucleotide Sequences & 10 Whole Genomes
          </h2>
          <p className="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed">
            Prof. Thajuddin has deposited 687 validated molecular sequence records to global genetic databanks, serving as international taxonomical benchmarks for cyanobacteria, microalgae, extremophilic bacteria, and fungal endosymbionts.
          </p>
        </div>

        {/* Breakdown Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          
          {/* Left Category Selection List */}
          <div className="lg:col-span-5 space-y-2">
            {GENBANK_CATEGORIES.map((cat) => {
              const isSelected = cat.category === selectedCat;
              return (
                <button
                  key={cat.category}
                  onClick={() => setSelectedCat(cat.category)}
                  className={`w-full p-3.5 rounded-xl border text-left transition-all flex items-center justify-between ${
                    isSelected
                      ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 border-slate-900 dark:border-emerald-500 shadow-sm'
                      : 'bg-slate-50 text-slate-800 hover:bg-slate-100 dark:bg-slate-950 dark:text-slate-200 dark:hover:bg-slate-800 border-slate-200/80 dark:border-slate-800/80'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <Dna className={`w-4 h-4 shrink-0 ${isSelected ? 'text-emerald-400 dark:text-slate-900' : 'text-emerald-600 dark:text-emerald-400'}`} />
                    <span className="text-xs font-semibold">{cat.category}</span>
                  </div>
                  <span className={`text-xs font-mono font-bold px-2 py-0.5 rounded ${
                    isSelected
                      ? 'bg-slate-800 text-emerald-300 dark:bg-slate-900 dark:text-emerald-950'
                      : 'bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 border border-slate-200/50 dark:border-slate-800/50'
                  }`}>
                    {cat.count}
                  </span>
                </button>
              );
            })}
          </div>

          {/* Right Category Detail Card */}
          <div className="lg:col-span-7 p-6 sm:p-8 rounded-2xl bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Database className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                <h3 className="text-lg font-bold text-slate-900 dark:text-white">
                  {activeCategory.category}
                </h3>
              </div>
              <span className="text-sm font-mono font-bold text-emerald-700 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-3 py-1 rounded-lg">
                {activeCategory.count} Deposits
              </span>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
              {activeCategory.description}
            </p>

            <div className="mb-6">
              <div className="text-xs font-mono font-semibold uppercase text-slate-400 mb-2">
                Representative Reference Taxa
              </div>
              <div className="flex flex-wrap gap-2">
                {activeCategory.examples.map((ex, idx) => (
                  <span
                    key={idx}
                    className="px-3 py-1.5 rounded-lg bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 text-xs font-mono italic text-slate-800 dark:text-slate-200"
                  >
                    {ex}
                  </span>
                ))}
              </div>
            </div>

            <div className="pt-6 border-t border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <span className="text-xs text-slate-500 font-mono">
                NCBI Term Query: Thajuddin
              </span>

              <a
                href="https://www.ncbi.nlm.nih.gov/nuccore/?term=Thajuddin"
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold rounded-lg bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 hover:bg-slate-800 dark:hover:bg-emerald-400 transition-colors shrink-0"
              >
                <span>Browse Live NCBI GenBank Database</span>
                <ExternalLink className="w-3.5 h-3.5" />
              </a>
            </div>

          </div>

        </div>

      </div>
    </section>
  );
}