import React, { useState } from 'react';
import { CLINICAL_RESEARCH_PILLARS } from '../data/cvData';
import { Dna, ShieldAlert, Award, Zap, Microscope, Recycle, Check, ArrowUpRight } from 'lucide-react';

export default function ExpertisePillars() {
  const [activeTabId, setActiveTabId] = useState<string>(CLINICAL_RESEARCH_PILLARS[0].id);

  const activePillar = CLINICAL_RESEARCH_PILLARS.find(p => p.id === activeTabId) || CLINICAL_RESEARCH_PILLARS[0];

  const getIcon = (id: string) => {
    switch (id) {
      case 'cyanobacteria-taxonomy': return <Dna className="w-5 h-5" />;
      case 'antimicrobials-resistance': return <ShieldAlert className="w-5 h-5" />;
      case 'curcumin-bioconversion': return <Award className="w-5 h-5" />;
      case 'biofuels-circular-bioeconomy': return <Zap className="w-5 h-5" />;
      case 'nanobiotechnology-materials': return <Microscope className="w-5 h-5" />;
      case 'phycoremediation-environment': return <Recycle className="w-5 h-5" />;
      default: return <Dna className="w-5 h-5" />;
    }
  };

  return (
    <section id="expertise" className="py-16 bg-white dark:bg-slate-900 border-y 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">
            Clinical Expertise & Scientific Achievements
          </div>
          <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">
            Specialized Pillars of Microbiology & Biotechnology
          </h2>
          <p className="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed">
            Over three decades of pioneering scientific research bridging foundational taxonomy of photosynthetic microorganisms with high-impact clinical therapeutics, green nanomedicine, and industrial circular bioeconomy solutions.
          </p>
        </div>

        {/* Interactive Segmented Filter Bar */}
        <div className="flex items-center gap-1.5 overflow-x-auto pb-3 mb-10 no-scrollbar border-b border-slate-200 dark:border-slate-800">
          {CLINICAL_RESEARCH_PILLARS.map((pillar) => {
            const isActive = pillar.id === activeTabId;
            return (
              <button
                key={pillar.id}
                onClick={() => setActiveTabId(pillar.id)}
                className={`inline-flex items-center gap-2 px-4 py-2.5 text-xs font-semibold rounded-lg transition-all whitespace-nowrap shrink-0 ${
                  isActive
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 shadow-sm'
                    : 'bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
                }`}
              >
                {getIcon(pillar.id)}
                <span>{pillar.title.split('&')[0]}</span>
              </button>
            );
          })}
        </div>

        {/* Detailed Active Pillar Showcase Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
          
          {/* Main Pillar Description 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 flex flex-col justify-between">
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="p-2.5 rounded-xl bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-400">
                  {getIcon(activePillar.id)}
                </div>
                <div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white">
                    {activePillar.title}
                  </h3>
                  <div className="text-xs font-mono text-emerald-700 dark:text-emerald-400 font-semibold mt-0.5">
                    {activePillar.keyMetrics}
                  </div>
                </div>
              </div>

              <p className="text-sm sm:text-base text-slate-700 dark:text-slate-300 font-medium mb-6 leading-relaxed">
                {activePillar.tagline}
              </p>

              <div className="space-y-4 text-xs sm:text-sm text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">
                <div className="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800/60">
                  <div className="text-xs font-mono font-semibold uppercase text-slate-400 mb-1">
                    Scientific Discovery & Methodology
                  </div>
                  <div>{activePillar.description}</div>
                </div>

                <div className="p-4 rounded-xl bg-emerald-50/60 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-900/60">
                  <div className="text-xs font-mono font-semibold uppercase text-emerald-700 dark:text-emerald-400 mb-1 flex items-center gap-1.5">
                    <Check className="w-3.5 h-3.5" />
                    Clinical & Applied Significance
                  </div>
                  <div className="text-slate-800 dark:text-slate-200 font-medium">
                    {activePillar.clinicalImpact}
                  </div>
                </div>
              </div>
            </div>

            <div className="pt-4 border-t border-slate-200/80 dark:border-slate-800/80 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
              <span>Verified Research Pillar</span>
              <a
                href="#publications"
                className="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-400 font-semibold hover:underline"
              >
                <span>View Publications ({activePillar.title.split(' ')[0]})</span>
                <ArrowUpRight className="w-3.5 h-3.5" />
              </a>
            </div>
          </div>

          {/* Visual Artwork & Microscopy Container */}
          <div className="lg:col-span-5 flex flex-col gap-4">
            
            <div className="relative rounded-2xl overflow-hidden border border-slate-200/80 dark:border-slate-800/80 bg-slate-950 h-64 sm:h-72 shadow-lg group">
              <img
                src={
                  activePillar.id === 'cyanobacteria-taxonomy'
                    ? "/src/assets/images/cyanobacteria_microscopy_1794337773045.jpg"
                    : activePillar.id === 'biofuels-circular-bioeconomy'
                    ? "/src/assets/images/biofuel_raceway_pond_1794337773996.jpg"
                    : "/src/assets/images/hero_microbiology_lab_1794337772364.jpg"
                }
                alt={activePillar.title}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                referrerPolicy="no-referrer"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent flex flex-col justify-end p-5 text-white">
                <span className="text-xs font-mono font-semibold text-emerald-400">
                  {activePillar.id === 'cyanobacteria-taxonomy' ? 'Phycocyanin Fluorescence' : 'Experimental Setup'}
                </span>
                <span className="text-xs text-slate-300 mt-0.5">
                  National Repository Strains & Bio-analytics
                </span>
              </div>
            </div>

            {/* Sub-card with quick clinical facts */}
            <div className="p-5 rounded-2xl bg-white dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
              <h4 className="text-xs font-mono font-bold uppercase text-slate-400 mb-3 tracking-wider">
                Key Research Inventions
              </h4>
              <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300">
                <li className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1 shrink-0" />
                  <span>US Patent Granted for Microbial Bioconversion of Curcuminoids to Calebin-A.</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1 shrink-0" />
                  <span>Anti-ESBL MGDG-Palmitoyl lipid from *Oscillatoria acuminata* (Nature Group paper).</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1 shrink-0" />
                  <span>Silver & Zinc Oxide nanoparticles preventing catheter biofilm formation.</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1 shrink-0" />
                  <span>35,000 Litre outdoor raceway pond facility for microalgal biodiesel.</span>
                </li>
              </ul>
            </div>

          </div>

        </div>

      </div>
    </section>
  );
}