import React, { useState } from 'react';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
  Cell, PieChart, Pie, Legend, LineChart, Line
} from 'recharts';
import { 
  Calendar, Globe, Shield, TrendingUp, Ship, 
  FileCheck, AlertTriangle, Zap, ArrowRight, LayoutDashboard,
  ArrowDownCircle, ArrowUpCircle, Info
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('overview');

  const stats = [
    { label: 'Combined Market', value: '2B+', sub: 'People' },
    { label: 'Collective GDP', value: '$24T+', sub: 'USD' },
    { label: 'Trade (2024-25)', value: '$136.5B', sub: 'Bilateral Value' },
    { label: 'Tariff Coverage', value: '97%+', sub: 'of Lines' }
  ];

  const timelineData = [
    { date: 'Jan 27, 2026', event: 'Negotiation Conclusion', status: 'completed' },
    { date: 'Feb - Jul 2026', event: 'Legal Scrubbing & Vetting', status: 'current' },
    { date: 'Aug 2026', event: 'Formal Signature', status: 'upcoming' },
    { date: 'Late 2026', event: 'Entry into Force', status: 'upcoming' }
  ];

  const exportGains = [
    { sector: 'Textiles', current: 12, post: 0 },
    { sector: 'Marine', current: 26, post: 0 },
    { sector: 'Footwear', current: 17, post: 0 },
    { sector: 'Engineering', current: 22, post: 0 },
    { sector: 'Gems & Jewellery', current: 4, post: 0 }
  ];

  const importImpact = [
    { sector: 'Luxury Cars', current: 110, post: 10, note: '250k Quota' },
    { sector: 'Wines', current: 150, post: 20, note: 'Phased' },
    { sector: 'Machinery', current: 44, post: 0, note: 'Immediate' },
    { sector: 'Olive Oil', current: 45, post: 0, note: '5 Years' }
  ];

  const regulatoryBarriers = [
    { id: 'CBAM', title: 'Carbon Border Adjustment', impact: 'High', description: 'Carbon tax on steel, aluminum, etc. tied to EU ETS prices (~€80/tonne).' },
    { id: 'EUDR', title: 'Deforestation Regulation', impact: 'Medium-High', description: 'Requires geotagging for coffee, rubber, wood, and leather exports.' },
    { id: 'CSDDD', title: 'Sustainability Due Diligence', impact: 'Medium', description: 'Mandatory value chain audits for human rights and environmental risks.' }
  ];

  const SectionHeader = ({ icon: Icon, title, subtitle }) => (
    <div className="flex items-center gap-3 mb-6">
      <div className="p-2 bg-blue-100 rounded-lg text-blue-700">
        <Icon size={24} />
      </div>
      <div>
        <h2 className="text-xl font-bold text-slate-800 uppercase tracking-tight">{title}</h2>
        <p className="text-sm text-slate-500">{subtitle}</p>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
      {/* Header */}
      <div className="max-w-7xl mx-auto mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-slate-200 pb-6">
        <div>
          <h1 className="text-3xl font-black text-slate-900 leading-tight">INDIA-EU FREE TRADE AGREEMENT</h1>
          <p className="text-slate-600 mt-1 max-w-2xl">
            Strategic analysis of market access, regulatory compliance, and the 2026 implementation roadmap.
          </p>
        </div>
        <div className="flex gap-2">
          {['overview', 'tariffs', 'compliance'].map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-2 rounded-md text-sm font-bold transition-all ${
                activeTab === tab 
                ? 'bg-slate-900 text-white shadow-lg shadow-slate-200' 
                : 'bg-white text-slate-600 border border-slate-200 hover:border-slate-400'
              }`}
            >
              {tab.toUpperCase()}
            </button>
          ))}
        </div>
      </div>

      <div className="max-w-7xl mx-auto space-y-8">
        {activeTab === 'overview' && (
          <>
            {/* KPI Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {stats.map((stat, i) => (
                <div key={i} className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                  <p className="text-slate-500 text-xs font-bold uppercase tracking-widest">{stat.label}</p>
                  <p className="text-2xl font-black text-blue-600 mt-1">{stat.value}</p>
                  <p className="text-slate-400 text-xs mt-1">{stat.sub}</p>
                </div>
              ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Timeline */}
              <div className="lg:col-span-1 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <SectionHeader icon={Calendar} title="Roadmap" subtitle="Key milestones for 2026" />
                <div className="space-y-6 relative before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-100">
                  {timelineData.map((item, i) => (
                    <div key={i} className="flex gap-4 relative">
                      <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 z-10 ${
                        item.status === 'completed' ? 'bg-green-500' : 
                        item.status === 'current' ? 'bg-blue-600 animate-pulse' : 'bg-slate-200'
                      }`}>
                        <div className="w-2 h-2 bg-white rounded-full" />
                      </div>
                      <div>
                        <p className="text-xs font-bold text-blue-600">{item.date}</p>
                        <p className="font-bold text-slate-800">{item.event}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Strategic Insights */}
              <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-slate-900 text-white p-6 rounded-2xl flex flex-col justify-between">
                  <div>
                    <div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4 text-blue-400">
                      <Ship size={20} />
                    </div>
                    <h3 className="text-lg font-bold mb-2 uppercase">IMEC Corridor</h3>
                    <p className="text-slate-400 text-sm">
                      The physical counterpart to the FTA. Linking India to Europe via Middle East rail and sea routes, expected to accelerate trade by 40%.
                    </p>
                  </div>
                  <div className="mt-6 flex items-center gap-2 text-xs font-bold text-blue-400">
                    40% LOGISTICS SPEED BOOST <ArrowRight size={14} />
                  </div>
                </div>

                <div className="bg-blue-600 text-white p-6 rounded-2xl flex flex-col justify-between">
                  <div>
                    <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mb-4 text-white">
                      <TrendingUp size={20} />
                    </div>
                    <h3 className="text-lg font-bold mb-2 uppercase">GSP Gap Neutralized</h3>
                    <p className="text-white/80 text-sm">
                      With GSP suspension on Jan 1, 2026, the FTA preserves duty-free access for garments and footwear that would otherwise face full MFN rates.
                    </p>
                  </div>
                  <div className="mt-6 flex items-center gap-2 text-xs font-bold text-white">
                    PROTECTING $33B EXPORTS <ArrowRight size={14} />
                  </div>
                </div>

                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm col-span-1 md:col-span-2">
                  <div className="flex justify-between items-start mb-4">
                    <h3 className="font-bold uppercase tracking-tight flex items-center gap-2">
                      <Globe size={18} className="text-blue-600" />
                      Comparative Snapshot: EU vs EFTA
                    </h3>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="text-slate-400 text-left border-b border-slate-100">
                          <th className="pb-2 font-medium">Feature</th>
                          <th className="pb-2 font-medium">India-EFTA (TEPA)</th>
                          <th className="pb-2 font-medium">India-EU (FTA)</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b border-slate-50">
                          <td className="py-3 font-bold">Investment</td>
                          <td className="py-3 text-slate-600">$100B Pledge (15yrs)</td>
                          <td className="py-3 text-slate-600">Climate/Innovation Platform</td>
                        </tr>
                        <tr className="border-b border-slate-50">
                          <td className="py-3 font-bold">Export Lines</td>
                          <td className="py-3 text-slate-600">92.2% (99.6% value)</td>
                          <td className="py-3 text-slate-600">97% (99.5% value)</td>
                        </tr>
                        <tr className="border-b border-slate-50">
                          <td className="py-3 font-bold">Entry Into Force</td>
                          <td className="py-3 text-slate-600">Oct 1, 2025</td>
                          <td className="py-3 text-slate-600">Late 2026 (Exp.)</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}

        {activeTab === 'tariffs' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Indian Exporters Gains */}
            <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
              <SectionHeader icon={ArrowUpCircle} title="Export Gains" subtitle="EU Duty Reductions for Indian Goods" />
              <div className="h-64 mb-6">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={exportGains} layout="vertical" margin={{ left: 40, right: 30 }}>
                    <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                    <XAxis type="number" unit="%" hide />
                    <YAxis dataKey="sector" type="category" width={100} fontSize={12} fontWeight="bold" />
                    <Tooltip />
                    <Bar dataKey="current" name="Current Tariff" fill="#cbd5e1" radius={[0, 4, 4, 0]} />
                    <Bar dataKey="post" name="Post-FTA Tariff" fill="#2563eb" radius={[0, 4, 4, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
              <div className="space-y-4">
                {exportGains.map((item, i) => (
                  <div key={i} className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                    <span className="font-bold text-sm">{item.sector}</span>
                    <div className="flex items-center gap-3">
                      <span className="text-slate-400 line-through text-xs font-bold">{item.current}%</span>
                      <ArrowRight size={14} className="text-blue-600" />
                      <span className="text-blue-700 font-black">FREE</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Indian Importers / EU Access */}
            <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
              <SectionHeader icon={ArrowDownCircle} title="Import Liberalization" subtitle="Indian Market Access for EU Goods" />
              <div className="space-y-4">
                {importImpact.map((item, i) => (
                  <div key={i} className="border border-slate-100 p-4 rounded-xl hover:border-blue-200 transition-colors">
                    <div className="flex justify-between items-start mb-2">
                      <h4 className="font-bold text-slate-800">{item.sector}</h4>
                      <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded text-[10px] font-black uppercase tracking-wider">{item.note}</span>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="flex-1 h-2 bg-slate-100 rounded-full overflow-hidden">
                        <div 
                          className="h-full bg-blue-600" 
                          style={{ width: `${(item.post / item.current) * 100}%` }}
                        />
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-bold text-slate-400">{item.current}%</span>
                        <ArrowRight size={12} />
                        <span className="text-sm font-black text-blue-600">{item.post}%</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-8 p-4 bg-amber-50 rounded-xl border border-amber-100 flex gap-4">
                <div className="text-amber-600 shrink-0"><Info size={20} /></div>
                <p className="text-xs text-amber-800 italic">
                  Critical staging periods apply. Auto parts and chemical reductions are phased over 5-10 years to protect domestic manufacturing ecosystems and allow for modernization.
                </p>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'compliance' && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-3">
               <SectionHeader icon={Shield} title="Regulatory Shield & Compliance" subtitle="Non-Tariff Barriers & Operational Mandates" />
            </div>
            
            {/* NTBs */}
            {regulatoryBarriers.map((barr) => (
              <div key={barr.id} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col">
                <div className="flex justify-between items-center mb-4">
                  <span className="px-2 py-1 bg-slate-900 text-white text-[10px] font-bold rounded uppercase tracking-tighter">{barr.id}</span>
                  <span className={`text-[10px] font-bold uppercase ${barr.impact === 'High' ? 'text-red-500' : 'text-amber-500'}`}>
                    {barr.impact} Impact
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-800 mb-2">{barr.title}</h3>
                <p className="text-sm text-slate-500 flex-1">{barr.description}</p>
                <button className="mt-4 text-xs font-bold text-blue-600 uppercase flex items-center gap-1 hover:gap-2 transition-all">
                  Compliance Checklist <ArrowRight size={14} />
                </button>
              </div>
            ))}

            {/* Certification Module */}
            <div className="md:col-span-2 lg:col-span-2 bg-slate-900 text-white p-8 rounded-2xl overflow-hidden relative">
              <div className="absolute right-0 top-0 opacity-10">
                <FileCheck size={200} />
              </div>
              <div className="relative z-10">
                <h3 className="text-2xl font-black mb-6 flex items-center gap-3">
                  <Zap className="text-blue-400" /> 
                  MODERN SELF-CERTIFICATION
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="space-y-2">
                    <p className="text-blue-400 font-bold text-xs uppercase">Mechanism</p>
                    <p className="text-lg font-bold">REX System</p>
                    <p className="text-slate-400 text-sm">One-time registration for Indian exporters replacing authority-issued certificates.</p>
                  </div>
                  <div className="space-y-2">
                    <p className="text-blue-400 font-bold text-xs uppercase">Requirement</p>
                    <p className="text-lg font-bold">Statement on Origin</p>
                    <p className="text-slate-400 text-sm">Self-certified declaration directly on commercial invoices for faster clearance.</p>
                  </div>
                  <div className="space-y-2">
                    <p className="text-blue-400 font-bold text-xs uppercase">Auditability</p>
                    <p className="text-lg font-bold">5 Year Retention</p>
                    <p className="text-slate-400 text-sm">Mandatory data retention for post-import verification by customs.</p>
                  </div>
                </div>
              </div>
            </div>

            {/* IPR/Digital */}
            <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-center">
              <h3 className="font-bold text-slate-800 mb-2 uppercase text-sm tracking-tight">IPR & Digital Trade</h3>
              <ul className="text-sm space-y-3 text-slate-600">
                <li className="flex gap-2">
                  <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-1.5 shrink-0" />
                  <span>Recognition of India's Traditional Knowledge Digital Library (TKDL).</span>
                </li>
                <li className="flex gap-2">
                  <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-1.5 shrink-0" />
                  <span>No mandatory source code disclosure for software exports.</span>
                </li>
                <li className="flex gap-2">
                  <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-1.5 shrink-0" />
                  <span>Alignment of trademark and design protection standards.</span>
                </li>
              </ul>
            </div>
          </div>
        )}
      </div>

      {/* Footer Branding */}
      <div className="max-w-7xl mx-auto mt-12 pt-6 border-t border-slate-200 text-slate-400 flex flex-col md:flex-row justify-between gap-4">
        <div className="flex items-center gap-2 font-bold text-xs uppercase">
          <LayoutDashboard size={14} />
          <span>Strategic Trade Analysis Framework</span>
        </div>
        <div className="text-[10px] text-right">
          Data based on Jan 27, 2026 Conclusion. Subject to final legal scrubbing and ratification.
        </div>
      </div>
    </div>
  );
};

export default App;