import { useState, useEffect, useCallback } from "react"; import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, PieChart, Pie } from "recharts"; const TABS = [ { id: "india", label: "🇮🇳 India LPG Crisis" }, { id: "storage", label: "🏭 Storage Comparison" }, { id: "reserves", label: "⛽ Global Gas Reserves" }, ]; const FALLBACK = { kpis: [ { label: "Daily LPG Demand", value: "80,000 T/day", sub: "~3M tonnes/month", color: "#D4AF37", icon: "🔥", trend: "+15%" }, { label: "Underground Cavern Stock", value: "<2 Days", sub: "Vizag + Mangaluru", color: "#EF4444", icon: "⚠️", trend: "CRITICAL" }, { label: "Total Buffer (terminals)", value: "~22 Days", sub: "Per S&P Global", color: "#F59E0B", icon: "📦", trend: "LOW" }, { label: "Hormuz Dependency", value: "85%+", sub: "Of all LPG imports", color: "#EF4444", icon: "🌊", trend: "HIGH RISK" }, { label: "Import Dependency", value: "60–62%", sub: "Up from 47% in 2015", color: "#F59E0B", icon: "🚢", trend: "↑ Rising" }, { label: "LPG Connections", value: "33 Cr+", sub: "Household subscribers", color: "#10B981", icon: "🏠", trend: "Stable" }, { label: "Delhi Cylinder Price", value: "₹913", sub: "14.2 kg domestic", color: "#3B82F6", icon: "💰", trend: "↑ Hiked" }, { label: "Crude Oil Reserves", value: "74 Days", sub: "Strategic reserves", color: "#10B981", icon: "🛢️", trend: "vs <2d LPG" }, ], crisisNews: [ { icon: "🏭", title: "Only 2 Underground Caverns", desc: "Visakhapatnam & Mangaluru — 1.4 lakh tonnes total, under 2 days of national supply" }, { icon: "📈", title: "Production Up 28%", desc: "Govt directed refiners to maximize domestic LPG output; refineries running at 105% capacity" }, { icon: "🚫", title: "Commercial Supply Curbed", desc: "50-60% of restaurants warned of shutdown risk; commercial cylinders restricted in multiple states" }, { icon: "📅", title: "Booking Period Extended", desc: "Urban: 25 days | Rural: 45 days to manage 15-20% demand surge" }, { icon: "🔄", title: "Diversification Underway", desc: "US (45-day transit), Norway, Canada, Russia being tapped as alternative sources" }, { icon: "🏗️", title: "New Caverns Planned", desc: "Govt plans to add 6 new underground caverns, but construction is 3-5 years away" }, ], storageData: [ { country: "Japan", flag: "🇯🇵", days: 90, type: "Underground + Terminals", risk: "Low", rc: "#10B981" }, { country: "South Korea", flag: "🇰🇷", days: 75, type: "Underground Caverns", risk: "Low", rc: "#10B981" }, { country: "EU Average", flag: "🇪🇺", days: 60, type: "Mandated 90% fill rule", risk: "Low", rc: "#10B981" }, { country: "China", flag: "🇨🇳", days: 50, type: "Strategic Stockpiling", risk: "Low", rc: "#10B981" }, { country: "USA", flag: "🇺🇸", days: 45, type: "Domestic Prod + Storage", risk: "Very Low", rc: "#10B981" }, { country: "Brazil", flag: "🇧🇷", days: 30, type: "Import Terminals", risk: "Moderate", rc: "#F59E0B" }, { country: "India (Total)", flag: "🇮🇳", days: 22, type: "Import Terminals", risk: "HIGH", rc: "#EF4444" }, { country: "India (Caverns)", flag: "🇮🇳", days: 2, type: "Vizag + Mangaluru only", risk: "CRITICAL", rc: "#DC2626" }, ], gasReserves: [ { country: "Russia", flag: "🇷🇺", tcm: 44.2, pct: "21.1%", region: "Eurasia", rank: 1 }, { country: "Iran", flag: "🇮🇷", tcm: 33.8, pct: "16.2%", region: "Middle East", rank: 2 }, { country: "Qatar", flag: "🇶🇦", tcm: 24.7, pct: "11.8%", region: "Middle East", rank: 3 }, { country: "Turkmenistan", flag: "🇹🇲", tcm: 13.6, pct: "6.5%", region: "Central Asia", rank: 4 }, { country: "USA", flag: "🇺🇸", tcm: 12.6, pct: "6.0%", region: "N. America", rank: 5 }, { country: "Saudi Arabia", flag: "🇸🇦", tcm: 9.4, pct: "4.5%", region: "Middle East", rank: 6 }, { country: "UAE", flag: "🇦🇪", tcm: 8.2, pct: "3.9%", region: "Middle East", rank: 7 }, { country: "Venezuela", flag: "🇻🇪", tcm: 6.3, pct: "3.0%", region: "S. America", rank: 8 }, { country: "Nigeria", flag: "🇳🇬", tcm: 5.8, pct: "2.8%", region: "Africa", rank: 9 }, { country: "China", flag: "🇨🇳", tcm: 5.6, pct: "2.7%", region: "Asia Pacific", rank: 10 }, { country: "Algeria", flag: "🇩🇿", tcm: 4.5, pct: "2.2%", region: "Africa", rank: 11 }, { country: "Iraq", flag: "🇮🇶", tcm: 3.5, pct: "1.7%", region: "Middle East", rank: 12 }, { country: "Australia", flag: "🇦🇺", tcm: 3.2, pct: "1.5%", region: "Asia Pacific", rank: 13 }, { country: "Kazakhstan", flag: "🇰🇿", tcm: 2.4, pct: "1.1%", region: "Central Asia", rank: 14 }, { country: "Canada", flag: "🇨🇦", tcm: 2.4, pct: "1.1%", region: "N. America", rank: 15 }, { country: "India", flag: "🇮🇳", tcm: 1.4, pct: "0.67%", region: "Asia Pacific", rank: 24, highlight: true }, ], }; function Ticker({ items }) { return (
{[...items, ...items].map((item, i) => ( {item.alert ? "🔴" : "📊"} {item.text} ))}
); } function Pulse({ color = "#EF4444" }) { return ( ); } export default function Dashboard() { const [tab, setTab] = useState("india"); const [liveData, setLiveData] = useState(null); const [loading, setLoading] = useState(false); const [lastUpdated, setLastUpdated] = useState(null); const [streamText, setStreamText] = useState(""); const [insightLoading, setInsightLoading] = useState(false); const data = liveData ? { ...FALLBACK, ...liveData } : FALLBACK; const fetchLiveData = useCallback(async () => { setLoading(true); try { const res = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, tools: [{ type: "web_search_20250305", name: "web_search" }], system: `You are an energy data analyst. Search the web for the latest news on India LPG crisis and current LPG cylinder prices in India. Return ONLY a raw JSON object — no markdown, no backticks, no explanation, just the JSON. Use this exact structure: { "tickerItems": [{"text": "short news item", "alert": true}], "latestHeadlines": [{"icon": "emoji", "title": "short title", "desc": "2 sentence description", "source": "publication name"}], "priceUpdates": {"delhi": "₹XXX", "mumbai": "₹XXX", "chennai": "₹XXX", "kolkata": "₹XXX"}, "crisisLevel": "CRITICAL", "summaryLine": "One sentence current status" }`, messages: [{ role: "user", content: "Search: India LPG crisis March 2026, India LPG cylinder price today. Return only the JSON object." }] }) }); const json = await res.json(); const textBlock = json.content?.find(b => b.type === "text"); if (textBlock?.text) { const clean = textBlock.text.replace(/```json|```/g, "").trim(); const parsed = JSON.parse(clean); setLiveData(parsed); setLastUpdated(new Date().toLocaleTimeString()); } } catch (e) { console.error(e); } setLoading(false); }, []); const fetchInsight = useCallback(async () => { setInsightLoading(true); setStreamText(""); try { const res = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, tools: [{ type: "web_search_20250305", name: "web_search" }], system: "You are a senior energy analyst for W.C Prestige Club. Write a sharp 3-paragraph intelligence brief on India's LPG crisis using the latest web data. Para 1: current situation with numbers. Para 2: root causes. Para 3: outlook & risks. Be specific and data-driven.", messages: [{ role: "user", content: "Write the intelligence brief on India LPG crisis March 2026." }] }) }); const json = await res.json(); const textBlock = json.content?.find(b => b.type === "text"); if (textBlock?.text) { const words = textBlock.text.split(" "); let i = 0; const iv = setInterval(() => { if (i < words.length) { setStreamText(p => p + (i === 0 ? "" : " ") + words[i]); i++; } else { clearInterval(iv); setInsightLoading(false); } }, 25); } else setInsightLoading(false); } catch(e) { setInsightLoading(false); } }, []); useEffect(() => { fetchLiveData(); }, []); const prices = liveData?.priceUpdates || { delhi: "₹913", mumbai: "₹912.5", chennai: "₹928.5", kolkata: "₹939" }; const crisisLevel = liveData?.crisisLevel || "CRITICAL"; const crisisColor = crisisLevel === "CRITICAL" ? "#EF4444" : crisisLevel === "HIGH" ? "#F59E0B" : "#10B981"; const tickerItems = liveData?.tickerItems || [ { text: "INDIA LPG CRISIS: Underground caverns <2 days storage", alert: true }, { text: "Delhi LPG: ₹913/cylinder • Mumbai: ₹912.5 • Chennai: ₹928.5", alert: false }, { text: "85%+ imports via Strait of Hormuz — HIGH RISK", alert: true }, { text: "Russia #1 gas reserves: 44.2 TCM • Iran #2: 33.8 TCM", alert: false }, { text: "India ranks ~24th in global gas reserves with 1.4 TCM (0.67%)", alert: false }, { text: "Japan: 90 days LPG buffer vs India's 22 days total system", alert: true }, ]; const s = { card: { background:"#0D0B1A", border:"1px solid #D4AF3715", borderRadius:8, padding:22 }, sectionTitle: { fontSize:11, letterSpacing:2, textTransform:"uppercase", marginBottom:16 }, }; return (
{/* HEADER */}
💡
W.C PRESTIGE CLUB
ENERGY INTELLIGENCE DIVISION
💹
{loading?"FETCHING…":"LIVE"}
MARCH 14, 2026
{lastUpdated &&
↻ {lastUpdated}
}

🔴 INDIA LPG CRISIS & GLOBAL NATURAL GAS RESERVES — LIVE INTELLIGENCE

CRISIS LEVEL: {crisisLevel}
{/* TICKER */} {/* PRICE STRIP */}
{[["Delhi",prices.delhi],["Mumbai",prices.mumbai],["Chennai",prices.chennai],["Kolkata",prices.kolkata]].map(([city,price])=>(
{city} LPG 14.2kg
{price}
))}
IMPORT DEPENDENCY
60–62%
HORMUZ RISK
85%+
{/* TABS */}
{TABS.map(t=>( ))}
{/* INDIA TAB */} {tab==="india" && (
{data.kpis.map((k,i)=>(
{k.icon} {k.trend}
{k.label}
{k.value}
{k.sub}
))}
🔥 LPG Usage — India 2026
{[{n:"Household",v:"85%",c:"#D4AF37"},{n:"Commercial",v:"10%",c:"#F59E0B"},{n:"Industrial",v:"5%",c:"#4B3F2F"}].map((d,i)=>(
{d.n}
{d.v}
))}
🚢 India LPG Import Sources
{[{n:"W. Asia (Hormuz)",v:"90%",c:"#EF4444"},{n:"USA (45d transit)",v:"7%",c:"#3B82F6"},{n:"Others",v:"3%",c:"#4B3F2F"}].map((d,i)=>(
{d.n}
{d.v}
))}
⚠️ Hormuz disruption = immediate national crisis
📰 Crisis Intelligence — Key Developments
{liveData?.latestHeadlines && 🔴 LIVE DATA}
{(liveData?.latestHeadlines || data.crisisNews).map((item,i)=>(
{item.icon}
{item.title}
{item.desc}
{item.source &&
— {item.source}
}
))}
🤖 AI Intelligence Brief — Live Web Analysis
{streamText ? (
{streamText}{insightLoading && }
) : (
Click ⚡ Generate Live Brief for a real-time AI intelligence analysis powered by live web search
)}
)} {/* STORAGE TAB */} {tab==="storage" && (
🏭 LPG Strategic Storage — Country Comparison (Days of Supply)

India's underground cavern reserve is <2 days. Total system buffer ~22 days (incl. import terminals). Japan leads globally at 90 days.

[`${v} days`, p.payload.country]} /> `${v}d` }}> {data.storageData.map((e,i)=>)}
📋 Detailed Storage Analysis
{["Country","Days","Storage Type","Risk"].map(h=>( ))} {data.storageData.map((row,i)=>( ))}
{h}
{row.flag}{row.country} {row.days} {row.type} {row.risk}
⚠️ India's underground cavern capacity (<2 days) is critically low for the world's 3rd-largest LPG consumer. Japan & South Korea demonstrate best-practice strategic reserves.
)} {/* GAS RESERVES TAB */} {tab==="reserves" && (
⛽ Proven Natural Gas Reserves — Top Countries (Trillion Cubic Meters, 2024)

Global total ~209 TCM. India ranks ~24th with 1.4 TCM (0.67%). Russia + Iran + Qatar alone = ~49% of world reserves.

[`${v} TCM (${p.payload.pct})`, p.payload.flag+" "+p.payload.country]} /> {data.gasReserves.map((e,i)=>( ))}
📋 Country Rankings — Proven Natural Gas Reserves 2024
{["Rank","Country","TCM","World Share","Region"].map(h=>( ))} {data.gasReserves.map((row,i)=>( ))}
{h}
{row.rank} {row.flag}{row.country} {row.tcm} {row.pct} {row.region}
{[ {label:"Russia+Iran+Qatar",value:"~49%",sub:"of all global reserves",color:"#D4AF37"}, {label:"India's Share",value:"0.67%",sub:"Rank #24 globally",color:"#EF4444"}, {label:"Global Total",value:"~209 TCM",sub:"Proven reserves 2024",color:"#3B82F6"}, ].map((stat,i)=>(
{stat.label}
{stat.value}
{stat.sub}
))}
)} {/* Footer */}
💡W.C PRESTIGE CLUB💹
ENERGY INTELLIGENCE DIVISION • AI-Powered Live Dashboard • March 14, 2026
Sources: S&P Global • Business Standard • OPEC ASB 2025 • IEA • Energy Institute
); }