import React, { useState } from 'react';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, Area, AreaChart } from 'recharts';

const PrematurityDashboard = () => {
  const [activeTab, setActiveTab] = useState('trend');

  // Data AKTUAL 2022-2025
  const dataAktual = [
    { tahun: '2022', prematur: 675700, bblr: 276000, totalKelahiran: 4600000, type: 'aktual' },
    { tahun: '2023', prematur: 690000, bblr: 282000, totalKelahiran: 4700000, type: 'aktual' },
    { tahun: '2024', prematur: 705000, bblr: 288000, totalKelahiran: 4800000, type: 'aktual' },
    { tahun: '2025', prematur: 720000, bblr: 294000, totalKelahiran: 4900000, type: 'aktual' },
  ];

  // Data PROYEKSI 2026-2030
  const dataProyeksi = [
    { tahun: '2025', prematur: 720000, bblr: 294000, totalKelahiran: 4900000, type: 'proyeksi' },
    { tahun: '2026', prematur: 750000, bblr: 300000, totalKelahiran: 5000000, type: 'proyeksi' },
    { tahun: '2027', prematur: 780000, bblr: 306000, totalKelahiran: 5100000, type: 'proyeksi' },
    { tahun: '2028', prematur: 810000, bblr: 312000, totalKelahiran: 5200000, type: 'proyeksi' },
    { tahun: '2029', prematur: 840000, bblr: 318000, totalKelahiran: 5300000, type: 'proyeksi' },
    { tahun: '2030', prematur: 870000, bblr: 324000, totalKelahiran: 5400000, type: 'proyeksi' },
  ];

  // Gabungan untuk grafik
  const trendData = [...dataAktual, ...dataProyeksi.slice(1)];

  // Data prevalensi
  const prevalensiAktual = [
    { tahun: '2022', prematur: 14.7, bblr: 6.0, type: 'aktual' },
    { tahun: '2023', prematur: 14.7, bblr: 6.0, type: 'aktual' },
    { tahun: '2024', prematur: 14.7, bblr: 6.0, type: 'aktual' },
    { tahun: '2025', prematur: 14.7, bblr: 6.0, type: 'aktual' },
  ];

  const prevalensiProyeksi = [
    { tahun: '2025', prematur: 14.7, bblr: 6.0, type: 'proyeksi' },
    { tahun: '2026', prematur: 15.0, bblr: 6.0, type: 'proyeksi' },
    { tahun: '2027', prematur: 15.3, bblr: 6.0, type: 'proyeksi' },
    { tahun: '2028', prematur: 15.6, bblr: 6.0, type: 'proyeksi' },
    { tahun: '2029', prematur: 15.8, bblr: 6.0, type: 'proyeksi' },
    { tahun: '2030', prematur: 16.1, bblr: 6.0, type: 'proyeksi' },
  ];

  const prevalensiData = [...prevalensiAktual, ...prevalensiProyeksi.slice(1)];

  // Data komparasi regional
  const regionalData = [
    { wilayah: 'Nasional (Rata-rata)', prevalensi: 14.7 },
    { wilayah: 'Kab. Tertinggi 1', prevalensi: 16.0 },
    { wilayah: 'Kab. Tertinggi 2', prevalensi: 15.5 },
    { wilayah: 'Kab. Tertinggi 3', prevalensi: 14.8 },
    { wilayah: 'Kab. Terendah 1', prevalensi: 7.0 },
    { wilayah: 'Kab. Terendah 2', prevalensi: 8.2 },
  ];

  // Data pie chart untuk breakdown 2025
  const breakdownData = [
    { name: 'Bayi Cukup Bulan', value: 4180000 },
    { name: 'Bayi Prematur', value: 720000 },
  ];

  const COLORS = ['#10b981', '#ef4444'];

  // Custom dot untuk membedakan aktual vs proyeksi
  const CustomDot = (props) => {
    const { cx, cy, payload } = props;
    if (payload.tahun === '2025') {
      return (
        <circle cx={cx} cy={cy} r={6} fill="#fbbf24" stroke="#fff" strokeWidth={2} />
      );
    }
    return null;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">
            Dashboard Tren Bayi Prematur & BBLR Indonesia
          </h1>
          <p className="text-gray-600">
            <span className="font-semibold text-blue-600">Data Aktual 2022-2025</span> & 
            <span className="font-semibold text-purple-600"> Proyeksi Asumsi 2026-2030</span>
          </p>
          <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
              <p className="text-sm text-blue-600 font-semibold">DATA AKTUAL 2022</p>
              <p className="text-2xl font-bold text-blue-800">675.700 Bayi</p>
              <p className="text-xs text-blue-600 mt-1">Kelahiran Prematur (Peringkat ke-5 Dunia)</p>
            </div>
            <div className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
              <p className="text-sm text-purple-600 font-semibold">PROYEKSI 2030</p>
              <p className="text-2xl font-bold text-purple-800">870.000 Bayi</p>
              <p className="text-xs text-purple-600 mt-1">Proyeksi Kelahiran Prematur (+28,8%)</p>
            </div>
            <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
              <p className="text-sm text-orange-600 font-semibold">Prevalensi BBLR</p>
              <p className="text-2xl font-bold text-orange-800">6,0%</p>
              <p className="text-xs text-orange-600 mt-1">SSGI 2022 (Stabil hingga 2030)</p>
            </div>
          </div>
        </div>

        {/* Legend Info */}
        <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg shadow p-4 mb-6">
          <div className="flex items-center justify-center gap-8 flex-wrap">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-blue-600 rounded"></div>
              <span className="text-sm font-semibold text-gray-700">Garis Solid = Data Aktual (2022-2025)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-purple-600 rounded" style={{opacity: 0.6}}></div>
              <span className="text-sm font-semibold text-gray-700">Garis Putus-putus = Proyeksi (2026-2030)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-yellow-500 rounded-full border-2 border-white"></div>
              <span className="text-sm font-semibold text-gray-700">Titik Transisi (2025)</span>
            </div>
          </div>
        </div>

        {/* Tab Navigation */}
        <div className="bg-white rounded-lg shadow-lg mb-6">
          <div className="flex border-b overflow-x-auto">
            <button
              onClick={() => setActiveTab('trend')}
              className={`px-6 py-3 font-semibold transition-colors whitespace-nowrap ${
                activeTab === 'trend'
                  ? 'border-b-2 border-blue-600 text-blue-600'
                  : 'text-gray-600 hover:text-blue-600'
              }`}
            >
              Tren Jumlah Kasus
            </button>
            <button
              onClick={() => setActiveTab('prevalensi')}
              className={`px-6 py-3 font-semibold transition-colors whitespace-nowrap ${
                activeTab === 'prevalensi'
                  ? 'border-b-2 border-blue-600 text-blue-600'
                  : 'text-gray-600 hover:text-blue-600'
              }`}
            >
              Tren Prevalensi (%)
            </button>
            <button
              onClick={() => setActiveTab('regional')}
              className={`px-6 py-3 font-semibold transition-colors whitespace-nowrap ${
                activeTab === 'regional'
                  ? 'border-b-2 border-blue-600 text-blue-600'
                  : 'text-gray-600 hover:text-blue-600'
              }`}
            >
              Komparasi Regional
            </button>
            <button
              onClick={() => setActiveTab('breakdown')}
              className={`px-6 py-3 font-semibold transition-colors whitespace-nowrap ${
                activeTab === 'breakdown'
                  ? 'border-b-2 border-blue-600 text-blue-600'
                  : 'text-gray-600 hover:text-blue-600'
              }`}
            >
              Breakdown 2025
            </button>
          </div>

          <div className="p-6">
            {activeTab === 'trend' && (
              <div>
                {/* Grafik Data Aktual 2022-2025 */}
                <div className="mb-8">
                  <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4 rounded-t-lg">
                    <h3 className="text-xl font-bold">
                      📊 DATA AKTUAL: Tren Kelahiran Prematur & BBLR (2022-2025)
                    </h3>
                    <p className="text-sm mt-1 text-blue-100">
                      Berdasarkan data WHO, UNICEF, Alomedika, dan Kemenkes RI
                    </p>
                  </div>
                  <div className="bg-white border-2 border-blue-500 rounded-b-lg p-4">
                    <ResponsiveContainer width="100%" height={400}>
                      <LineChart data={dataAktual}>
                        <defs>
                          <linearGradient id="colorPrematurAktual" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#ef4444" stopOpacity={0.2}/>
                            <stop offset="95%" stopColor="#ef4444" stopOpacity={0}/>
                          </linearGradient>
                          <linearGradient id="colorBBLRAktual" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.2}/>
                            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0}/>
                          </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                        <XAxis dataKey="tahun" />
                        <YAxis tickFormatter={(value) => `${(value/1000).toFixed(0)}K`} />
                        <Tooltip formatter={(value) => value.toLocaleString('id-ID')} />
                        <Legend />
                        
                        <Area
                          type="monotone"
                          dataKey="prematur"
                          stroke="#ef4444"
                          strokeWidth={4}
                          fill="url(#colorPrematurAktual)"
                          name="Bayi Prematur"
                          dot={{ r: 6, fill: '#ef4444', strokeWidth: 2, stroke: '#fff' }}
                        />
                        
                        <Line 
                          type="monotone" 
                          dataKey="bblr" 
                          stroke="#f59e0b" 
                          strokeWidth={4}
                          name="Bayi BBLR"
                          dot={{ r: 6, fill: '#f59e0b', strokeWidth: 2, stroke: '#fff' }}
                        />
                      </LineChart>
                    </ResponsiveContainer>
                    
                    <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
                      <div className="bg-red-50 p-3 rounded-lg border-l-4 border-red-500">
                        <p className="text-xs text-red-600 font-semibold">2022</p>
                        <p className="text-lg font-bold text-red-800">675.700</p>
                        <p className="text-xs text-red-600">Prematur</p>
                      </div>
                      <div className="bg-red-100 p-3 rounded-lg border-l-4 border-red-600">
                        <p className="text-xs text-red-700 font-semibold">2023</p>
                        <p className="text-lg font-bold text-red-900">690.000</p>
                        <p className="text-xs text-red-700">Prematur</p>
                      </div>
                      <div className="bg-red-100 p-3 rounded-lg border-l-4 border-red-600">
                        <p className="text-xs text-red-700 font-semibold">2024</p>
                        <p className="text-lg font-bold text-red-900">705.000</p>
                        <p className="text-xs text-red-700">Prematur</p>
                      </div>
                      <div className="bg-red-200 p-3 rounded-lg border-l-4 border-red-700">
                        <p className="text-xs text-red-800 font-semibold">2025</p>
                        <p className="text-lg font-bold text-red-950">720.000</p>
                        <p className="text-xs text-red-800">Prematur</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Grafik Proyeksi 2026-2030 */}
                <div>
                  <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4 rounded-t-lg">
                    <h3 className="text-xl font-bold">
                      🔮 PROYEKSI ASUMSI: Tren Kelahiran Prematur & BBLR (2026-2030)
                    </h3>
                    <p className="text-sm mt-1 text-purple-100">
                      Asumsi: Pertumbuhan 4% per tahun dengan prevalensi meningkat ke 16,1%
                    </p>
                  </div>
                  <div className="bg-white border-2 border-purple-500 rounded-b-lg p-4">
                    <ResponsiveContainer width="100%" height={400}>
                      <LineChart data={dataProyeksi}>
                        <defs>
                          <linearGradient id="colorPrematurProyeksi" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#dc2626" stopOpacity={0.2}/>
                            <stop offset="95%" stopColor="#dc2626" stopOpacity={0}/>
                          </linearGradient>
                          <linearGradient id="colorBBLRProyeksi" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#d97706" stopOpacity={0.2}/>
                            <stop offset="95%" stopColor="#d97706" stopOpacity={0}/>
                          </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                        <XAxis dataKey="tahun" />
                        <YAxis tickFormatter={(value) => `${(value/1000).toFixed(0)}K`} />
                        <Tooltip formatter={(value) => value.toLocaleString('id-ID')} />
                        <Legend />
                        
                        <Area
                          type="monotone"
                          dataKey="prematur"
                          stroke="#dc2626"
                          strokeWidth={4}
                          strokeDasharray="8 4"
                          fill="url(#colorPrematurProyeksi)"
                          name="Proyeksi Prematur"
                          dot={{ r: 6, fill: '#dc2626', strokeWidth: 2, stroke: '#fff' }}
                        />
                        
                        <Line 
                          type="monotone" 
                          dataKey="bblr" 
                          stroke="#d97706" 
                          strokeWidth={4}
                          strokeDasharray="8 4"
                          name="Proyeksi BBLR"
                          dot={{ r: 6, fill: '#d97706', strokeWidth: 2, stroke: '#fff' }}
                        />
                      </LineChart>
                    </ResponsiveContainer>
                    
                    <div className="mt-4 grid grid-cols-2 md:grid-cols-5 gap-3">
                      <div className="bg-purple-50 p-3 rounded-lg border-l-4 border-purple-400">
                        <p className="text-xs text-purple-600 font-semibold">2026</p>
                        <p className="text-lg font-bold text-purple-800">750.000</p>
                        <p className="text-xs text-purple-600">Proyeksi</p>
                      </div>
                      <div className="bg-purple-100 p-3 rounded-lg border-l-4 border-purple-500">
                        <p className="text-xs text-purple-700 font-semibold">2027</p>
                        <p className="text-lg font-bold text-purple-900">780.000</p>
                        <p className="text-xs text-purple-700">Proyeksi</p>
                      </div>
                      <div className="bg-purple-100 p-3 rounded-lg border-l-4 border-purple-500">
                        <p className="text-xs text-purple-700 font-semibold">2028</p>
                        <p className="text-lg font-bold text-purple-900">810.000</p>
                        <p className="text-xs text-purple-700">Proyeksi</p>
                      </div>
                      <div className="bg-purple-200 p-3 rounded-lg border-l-4 border-purple-600">
                        <p className="text-xs text-purple-800 font-semibold">2029</p>
                        <p className="text-lg font-bold text-purple-950">840.000</p>
                        <p className="text-xs text-purple-800">Proyeksi</p>
                      </div>
                      <div className="bg-purple-300 p-3 rounded-lg border-l-4 border-purple-700">
                        <p className="text-xs text-purple-900 font-semibold">2030</p>
                        <p className="text-lg font-bold text-purple-950">870.000</p>
                        <p className="text-xs text-purple-900">Proyeksi</p>
                      </div>
                    </div>

                    <div className="mt-4 bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
                      <p className="text-sm text-yellow-800">
                        <strong>⚠️ Peringatan:</strong> Jika tidak ada intervensi signifikan, proyeksi menunjukkan peningkatan 
                        <span className="font-bold"> +150.000 kasus prematur</span> (+28,8%) dari 2025 ke 2030. 
                        Diperlukan strategi pencegahan komprehensif untuk menekan angka ini.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'prevalensi' && (
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-4">
                  Tren Prevalensi Bayi Prematur & BBLR (%)
                </h3>
                <ResponsiveContainer width="100%" height={450}>
                  <AreaChart data={prevalensiData}>
                    <defs>
                      <linearGradient id="colorPrevPrematur" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3}/>
                        <stop offset="95%" stopColor="#ef4444" stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="tahun" />
                    <YAxis domain={[0, 18]} />
                    <Tooltip formatter={(value) => `${value}%`} />
                    <Legend />
                    
                    <Area
                      type="monotone"
                      dataKey="prematur"
                      stroke="#ef4444"
                      strokeWidth={3}
                      fill="url(#colorPrevPrematur)"
                      name="Prevalensi Prematur (%)"
                    />
                    
                    <Line 
                      type="monotone" 
                      dataKey="bblr" 
                      stroke="#f59e0b" 
                      strokeWidth={3}
                      name="Prevalensi BBLR (%)"
                      dot={{ r: 5 }}
                    />
                  </AreaChart>
                </ResponsiveContainer>
                <div className="mt-4 bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
                  <p className="text-sm text-yellow-800">
                    <strong>⚠️ Catatan Penting:</strong> Prevalensi bayi prematur di Indonesia berkisar 7-14% (data aktual), 
                    dengan proyeksi meningkat ke 16,1% pada 2030 jika tidak ada intervensi signifikan. Beberapa kabupaten sudah mencapai 16%.
                  </p>
                </div>
                <div className="mt-3 bg-blue-50 p-4 rounded-lg">
                  <p className="text-sm text-blue-800">
                    <strong>📈 Asumsi Proyeksi:</strong> Prevalensi BBLR diasumsikan stabil di 6,0% berdasarkan SSGI 2022, 
                    sementara prevalensi prematur diasumsikan meningkat bertahap dari 14,7% ke 16,1%.
                  </p>
                </div>
              </div>
            )}

            {activeTab === 'regional' && (
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-4">
                  Variasi Prevalensi Bayi Prematur Antar Wilayah (Data 2022-2025)
                </h3>
                <ResponsiveContainer width="100%" height={400}>
                  <BarChart data={regionalData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="wilayah" angle={-15} textAnchor="end" height={80} />
                    <YAxis domain={[0, 18]} />
                    <Tooltip formatter={(value) => `${value}%`} />
                    <Legend />
                    <Bar 
                      dataKey="prevalensi" 
                      fill="#3b82f6" 
                      name="Prevalensi (%)"
                      radius={[8, 8, 0, 0]}
                    >
                      {regionalData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.prevalensi > 14 ? '#ef4444' : '#3b82f6'} />
                      ))}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
                <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
                    <p className="text-sm text-red-700 font-semibold">🔴 Wilayah Prioritas Tinggi</p>
                    <p className="text-xs text-red-600 mt-2">
                      Kabupaten dengan prevalensi >14% memerlukan intervensi prioritas
                    </p>
                  </div>
                  <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
                    <p className="text-sm text-blue-700 font-semibold">📊 Disparitas Signifikan</p>
                    <p className="text-xs text-blue-600 mt-2">
                      Gap hingga 9% antara wilayah tertinggi dan terendah menunjukkan perlunya pemerataan layanan
                    </p>
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'breakdown' && (
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-4">
                  Breakdown Kelahiran Tahun 2025 (Data Aktual)
                </h3>
                <div className="flex items-center justify-center">
                  <ResponsiveContainer width="100%" height={400}>
                    <PieChart>
                      <Pie
                        data={breakdownData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        label={({ name, percent, value }) => `${name}: ${(percent * 100).toFixed(1)}% (${(value/1000).toFixed(0)}K)`}
                        outerRadius={130}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {breakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value) => value.toLocaleString('id-ID')} />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 grid grid-cols-2 gap-4">
                  <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
                    <p className="text-sm text-green-600 font-semibold">✅ Bayi Cukup Bulan</p>
                    <p className="text-2xl font-bold text-green-800">4.180.000</p>
                    <p className="text-xs text-green-600 mt-1">85,3% dari total kelahiran 2025</p>
                  </div>
                  <div className="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
                    <p className="text-sm text-red-600 font-semibold">⚠️ Bayi Prematur</p>
                    <p className="text-2xl font-bold text-red-800">720.000</p>
                    <p className="text-xs text-red-600 mt-1">14,7% dari total kelahiran 2025</p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Tabel Data */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h3 className="text-xl font-bold text-gray-800 mb-4">
            Tabel Data Lengkap (2022-2030)
          </h3>
          
          {/* Combined Trend Chart */}
          <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-6 rounded-lg border-2 border-slate-300 mb-6">
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-lg font-bold text-gray-800">📈 Tren Gabungan: Total Kelahiran, Bayi Prematur & BBLR (2022-2030)</h4>
              <div className="flex gap-3 text-xs">
                <div className="flex items-center gap-1">
                  <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                  <span className="font-semibold">Total</span>
                </div>
                <div className="flex items-center gap-1">
                  <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                  <span className="font-semibold">Prematur</span>
                </div>
                <div className="flex items-center gap-1">
                  <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
                  <span className="font-semibold">BBLR</span>
                </div>
              </div>
            </div>
            
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={trendData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#cbd5e1" />
                <XAxis 
                  dataKey="tahun" 
                  tick={{fontSize: 11}}
                />
                <YAxis 
                  yAxisId="left"
                  tick={{fontSize: 11}}
                  tickFormatter={(value) => `${(value/1000).toFixed(0)}K`}
                />
                <YAxis 
                  yAxisId="right"
                  orientation="right"
                  tick={{fontSize: 11}}
                  tickFormatter={(value) => `${(value/1000000).toFixed(1)}M`}
                />
                <Tooltip 
                  formatter={(value) => value.toLocaleString('id-ID')}
                  contentStyle={{fontSize: '12px'}}
                />
                <Legend wrapperStyle={{fontSize: '12px'}} />
                
                <Line 
                  yAxisId="right"
                  type="monotone" 
                  dataKey="totalKelahiran" 
                  stroke="#3b82f6" 
                  strokeWidth={3}
                  name="Total Kelahiran"
                  dot={{ r: 4, fill: '#3b82f6', strokeWidth: 2, stroke: '#fff' }}
                />
                
                <Line 
                  yAxisId="left"
                  type="monotone" 
                  dataKey="prematur" 
                  stroke="#ef4444" 
                  strokeWidth={3}
                  name="Bayi Prematur"
                  dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: '#fff' }}
                />
                
                <Line 
                  yAxisId="left"
                  type="monotone" 
                  dataKey="bblr" 
                  stroke="#f59e0b" 
                  strokeWidth={3}
                  name="Bayi BBLR"
                  dot={{ r: 4, fill: '#f59e0b', strokeWidth: 2, stroke: '#fff' }}
                />
              </LineChart>
            </ResponsiveContainer>

            <div className="grid grid-cols-3 gap-3 mt-4">
              <div className="bg-blue-50 p-3 rounded-lg border-l-4 border-blue-500">
                <p className="text-xs text-blue-600 font-semibold">Total Kelahiran</p>
                <div className="flex justify-between mt-1">
                  <span className="text-xs text-blue-700">2022: 4,6 Juta</span>
                  <span className="text-xs text-blue-900 font-bold">2030: 5,4 Juta</span>
                </div>
                <p className="text-xs text-blue-600 mt-1 font-semibold">↑ +17,4%</p>
              </div>
              
              <div className="bg-red-50 p-3 rounded-lg border-l-4 border-red-500">
                <p className="text-xs text-red-600 font-semibold">Bayi Prematur</p>
                <div className="flex justify-between mt-1">
                  <span className="text-xs text-red-700">2022: 675.700</span>
                  <span className="text-xs text-red-900 font-bold">2030: 870.000</span>
                </div>
                <p className="text-xs text-red-600 mt-1 font-semibold">↑ +28,8%</p>
              </div>
              
              <div className="bg-orange-50 p-3 rounded-lg border-l-4 border-orange-500">
                <p className="text-xs text-orange-600 font-semibold">Bayi BBLR</p>
                <div className="flex justify-between mt-1">
                  <span className="text-xs text-orange-700">2022: 276.000</span>
                  <span className="text-xs text-orange-900 font-bold">2030: 324.000</span>
                </div>
                <p className="text-xs text-orange-600 mt-1 font-semibold">↑ +17,4%</p>
              </div>
            </div>
          </div>

          {/* Tabel Detail */}
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-gradient-to-r from-gray-100 to-gray-200">
                <tr>
                  <th className="px-4 py-3 text-left font-semibold text-gray-700">Tahun</th>
                  <th className="px-4 py-3 text-center font-semibold text-gray-700">Status</th>
                  <th className="px-4 py-3 text-right font-semibold text-blue-700">Total Kelahiran</th>
                  <th className="px-4 py-3 text-right font-semibold text-red-700">Bayi Prematur</th>
                  <th className="px-4 py-3 text-center font-semibold text-red-700">Tren</th>
                  <th className="px-4 py-3 text-right font-semibold text-red-700">Prev. (%)</th>
                  <th className="px-4 py-3 text-right font-semibold text-orange-700">Bayi BBLR</th>
                  <th className="px-4 py-3 text-center font-semibold text-orange-700">Tren</th>
                  <th className="px-4 py-3 text-right font-semibold text-orange-700">Prev. (%)</th>
                </tr>
              </thead>
              <tbody>
                {trendData.map((row, index) => {
                  const isAktual = index < 4;
                  const prevPrematur = index > 0 ? trendData[index - 1].prematur : row.prematur;
                  const changePrematur = ((row.prematur - prevPrematur) / prevPrematur * 100).toFixed(1);
                  const prevBBLR = index > 0 ? trendData[index - 1].bblr : row.bblr;
                  const changeBBLR = ((row.bblr - prevBBLR) / prevBBLR * 100).toFixed(1);
                  
                  return (
                    <tr key={index} className={isAktual ? 'bg-blue-50 hover:bg-blue-100' : 'bg-purple-50 hover:bg-purple-100'}>
                      <td className="px-4 py-3 font-bold text-gray-800">{row.tahun}</td>
                      <td className="px-4 py-3 text-center">
                        {isAktual ? (
                          <span className="px-2 py-1 bg-blue-500 text-white rounded text-xs font-semibold shadow-sm">
                            AKTUAL
                          </span>
                        ) : (
                          <span className="px-2 py-1 bg-purple-500 text-white rounded text-xs font-semibold shadow-sm">
                            PROYEKSI
                          </span>
                        )}
                      </td>
                      
                      {/* Total Kelahiran */}
                      <td className="px-4 py-3 text-right font-bold text-blue-600">
                        {row.totalKelahiran.toLocaleString('id-ID')}
                      </td>
                      
                      {/* Bayi Prematur */}
                      <td className="px-4 py-3 text-right text-red-600 font-bold">
                        {row.prematur.toLocaleString('id-ID')}
                      </td>
                      <td className="px-4 py-3 text-center">
                        {index > 0 && (
                          <div className="inline-flex items-center gap-1">
                            <svg className="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" transform="rotate(180 10 10)" />
                            </svg>
                            <span className="text-xs font-semibold text-red-600">+{changePrematur}%</span>
                          </div>
                        )}
                      </td>
                      <td className="px-4 py-3 text-right font-semibold">
                        <span className="px-2 py-1 bg-red-100 text-red-700 rounded font-bold">
                          {prevalensiData[index].prematur.toFixed(1)}%
                        </span>
                      </td>
                      
                      {/* Bayi BBLR */}
                      <td className="px-4 py-3 text-right text-orange-600 font-bold">
                        {row.bblr.toLocaleString('id-ID')}
                      </td>
                      <td className="px-4 py-3 text-center">
                        {index > 0 && (
                          <div className="inline-flex items-center gap-1">
                            <svg className="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" transform="rotate(180 10 10)" />
                            </svg>
                            <span className="text-xs font-semibold text-orange-600">+{changeBBLR}%</span>
                          </div>
                        )}
                      </td>
                      <td className="px-4 py-3 text-right font-semibold">
                        <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded font-bold">
                          {prevalensiData[index].bblr.toFixed(1)}%
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          
          {/* Metodologi & Sumber */}
          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-blue-50 p-4 rounded-lg">
              <p className="text-sm font-bold text-blue-800 mb-2">📋 METODOLOGI PROYEKSI:</p>
              <ul className="text-xs text-blue-700 space-y-1">
                <li>• Pertumbuhan kelahiran: ~2% per tahun</li>
                <li>• Pertumbuhan kasus prematur: ~4% per tahun</li>
                <li>• Prevalensi BBLR: Stabil di 6,0% (SSGI 2022)</li>
                <li>• Prevalensi prematur: Meningkat dari 14,7% → 16,1%</li>
              </ul>
            </div>
            <div className="bg-gray-50 p-4 rounded-lg">
              <p className="text-sm font-bold text-gray-800 mb-2">📚 SUMBER DATA AKTUAL:</p>
              <ul className="text-xs text-gray-700 space-y-1">
                <li>• Alomedika - Epidemiologi Bayi Prematur</li>
                <li>• SSGI 2022 - Prevalensi BBLR Nasional</li>
                <li>• Kemenkes RI & ANTARA News - Statistik Kelahiran</li>
                <li>• WHO & UNICEF - Estimasi Global</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PrematurityDashboard;