import React, { useState, useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, CartesianGrid } from "recharts";
import { Globe, Users, TrendingUp, ShieldCheck, Zap } from "lucide-react";

// 국가별 전략 데이터 (WEF 발표용 실제 통계 기반 프리셋)
const COUNTRY_PRESETS = {
  senegal: {
    name: "Senegal (West Africa)",
    pph: 6.5,
    households: 274000,
    focus: "Migration & Health",
    color: "#10b981"
  },
  indonesia: {
    name: "Indonesia (SE Asia)",
    pph: 3.9,
    households: 500000,
    focus: "Digital Economy",
    color: "#ef4444"
  },
  pakistan: {
    name: "Pakistan (South Asia)",
    pph: 6.2,
    households: 400000,
    focus: "Resilience & Edu",
    color: "#06b6d4"
  }
};

export default function GulfSouthImpactPlatform() {
  const [selectedCountry, setSelectedCountry] = useState("senegal");
  const [households, setHouseholds] = useState(COUNTRY_PRESETS.senegal.households);
  const [pph, setPph] = useState(COUNTRY_PRESETS.senegal.pph);

  // 국가 선택 시 데이터 동기화
  const handleCountryChange = (val) => {
    setSelectedCountry(val);
    setHouseholds(COUNTRY_PRESETS[val].households);
    setPph(COUNTRY_PRESETS[val].pph);
  };

  const individuals = households * pph;
  const totalValueLow = individuals * 2200;
  const totalValueHigh = individuals * 6000;

  const chartData = [
    { name: "Health & Longevity", value: 1100, desc: "보건 인프라 혁신 가치" },
    { name: "Migration Retention", value: 1000, desc: "지역 사회 안정화 가치" },
    { name: "Energy Savings", value: 850, desc: "가계 가처분 소득 증대" },
    { name: "Digital Income", value: 650, desc: "디지털 경제 편입 가치" },
    { name: "Education", value: 400, desc: "미래 생산성 향상" },
  ];

  return (
    <div className="p-8 space-y-8 bg-slate-50 min-h-screen font-sans">
      {/* Header Section */}
      <div className="flex justify-between items-start border-b pb-6">
        <div className="space-y-2">
          <h1 className="text-3xl font-bold tracking-tight text-slate-900 flex items-center gap-3">
            <Zap className="text-amber-500 fill-amber-500" />
            Energy First. Digital Follows.
          </h1>
          <p className="text-slate-500 max-w-2xl font-medium">
            걸프 유틸리티 자본의 글로벌 사우스 인프라 투자에 따른 25개년 경제적 임팩트 평가 플랫폼 (WEF 2026 전략 프레임워크)
          </p>
        </div>
        <div className="bg-white p-4 rounded-xl shadow-sm border flex items-center gap-4">
          <Globe className="text-blue-600" />
          <Select value={selectedCountry} onValueChange={handleCountryChange}>
            <SelectTrigger className="w-[200px] border-none font-semibold text-lg focus:ring-0">
              <SelectValue placeholder="Select Country" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="senegal">Senegal Preset</SelectItem>
              <SelectItem value="indonesia">Indonesia Preset</SelectItem>
              <SelectItem value="pakistan">Pakistan Preset</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Input Controls */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-none shadow-sm ring-1 ring-slate-200">
          <CardContent className="pt-6">
            <label className="text-xs font-bold uppercase text-slate-400 mb-2 block">Target Households</label>
            <Input 
              type="number" 
              className="text-2xl font-bold border-none p-0 focus-visible:ring-0" 
              value={households} 
              onChange={(e) => setHouseholds(Number(e.target.value))} 
            />
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm ring-1 ring-slate-200">
          <CardContent className="pt-6">
            <label className="text-xs font-bold uppercase text-slate-400 mb-2 block">Persons per Household</label>
            <Input 
              type="number" 
              step="0.1"
              className="text-2xl font-bold border-none p-0 focus-visible:ring-0" 
              value={pph} 
              onChange={(e) => setPph(Number(e.target.value))} 
            />
          </CardContent>
        </Card>

        <Card className="bg-blue-600 text-white border-none shadow-lg">
          <CardContent className="pt-6 flex justify-between items-center">
            <div>
              <label className="text-xs font-bold uppercase opacity-80 mb-1 block">Individuals Impacted</label>
              <p className="text-3xl font-extrabold tracking-tight">{individuals.toLocaleString()}</p>
            </div>
            <Users size={40} className="opacity-30" />
          </CardContent>
        </Card>
      </div>

      {/* Valuation Summary */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="bg-white border-none shadow-sm ring-1 ring-slate-200 overflow-hidden">
          <div className="h-1 bg-slate-300 w-full" />
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-2 text-slate-500">
              <ShieldCheck size={16} />
              <p className="text-sm font-semibold uppercase tracking-wider">Conservative Scenario (25Y)</p>
            </div>
            <p className="text-5xl font-bold text-slate-900">
              <span className="text-2xl font-medium mr-1 text-slate-400">USD</span>
              {(totalValueLow / 1e9).toFixed(2)}<span className="text-2xl ml-1">B</span>
            </p>
          </CardContent>
        </Card>

        <Card className="bg-white border-none shadow-xl ring-1 ring-blue-500 overflow-hidden relative">
          <div className="h-1 bg-blue-500 w-full" />
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-2 text-blue-600">
              <TrendingUp size={16} />
              <p className="text-sm font-semibold uppercase tracking-wider">Standard Digital Follows (25Y)</p>
            </div>
            <p className="text-5xl font-bold text-blue-700">
              <span className="text-2xl font-medium mr-1 text-blue-300">USD</span>
              {(totalValueHigh / 1e9).toFixed(2)}<span className="text-2xl ml-1">B</span>
            </p>
            <div className="absolute right-4 bottom-4 bg-blue-50 text-blue-700 text-xs px-2 py-1 rounded font-bold uppercase">
              Premium Path
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Chart Section */}
      <Card className="border-none shadow-sm ring-1 ring-slate-200">
        <CardHeader>
          <CardTitle className="text-xl text-slate-800">Per Capita Value Composition (USD)</CardTitle>
          <p className="text-sm text-slate-400">개인당 창출되는 다차원적 사회경제적 가치 분석</p>
        </CardHeader>
        <CardContent>
          <div className="h-[350px] w-full mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={chartData} layout="vertical" margin={{ left: 40, right: 40 }}>
                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" />
                <XAxis type="number" hide />
                <YAxis dataKey="name" type="category" width={150} tick={{ fontSize: 12, fontWeight: 600 }} axisLine={false} tickLine={false} />
                <Tooltip 
                  cursor={{ fill: '#f8fafc' }}
                  contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
                />
                <Bar dataKey="value" radius={[0, 4, 4, 0]} barSize={40}>
                  {chartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={index === 3 ? '#3b82f6' : '#94a3b8'} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* Footer / Methodology */}
      <footer className="pt-8 border-t border-slate-200">
        <div className="flex flex-col md:flex-row justify-between gap-6">
          <p className="text-xs text-slate-400 max-w-3xl leading-relaxed italic">
            * Methodology aligned with DEN 2025, World Bank Human Capital Framework, and IRENA metrics. 
            Individual-based accounting replaces household proxies to reflect real digital economic operability. 
            Valuation reflects 25-year NPV of direct and indirect socio-economic benefits.
          </p>
          <div className="flex gap-4">
            <div className="px-3 py-1 bg-slate-100 rounded text-[10px] font-bold text-slate-500 uppercase tracking-tighter">SDG 7, 8, 9, 11 Alignment</div>
            <div className="px-3 py-1 bg-slate-100 rounded text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Gulf Utility Strategic Engine</div>
          </div>
        </div>
      </footer>
    </div>
  );
}