import { Suspense } from 'react';

import { ChartSkeleton } from '@/components/charts/chart-skeleton.js';
import { MetricCardSkeleton } from '@/components/dashboard/metric-card-skeleton.js';
import { Card, CardContent, CardHeader } from '@/components/ui/card.js';
import { Skeleton } from '@/components/ui/skeleton.js';
import { AlertTriangle } from 'lucide-react';
import type { Metadata } from 'next';

import { CrackSpreadSection } from './_sections/crack-spread-section.js';
import { EventsSection } from './_sections/events-section.js';
import { FuturesSection } from './_sections/futures-section.js';
import { ConflictHeroMetrics } from './_sections/hero-metrics.js';
import { MarketFearSection } from './_sections/market-fear-section.js';
import { NormalizedSection } from './_sections/normalized-section.js';
import { OilSection } from './_sections/oil-section.js';
import { SupplySection } from './_sections/supply-section.js';
import { WarPremiumSection } from './_sections/war-premium-section.js';

export const metadata: Metadata = {
  title: 'Conflict Impact | Energy & AI Dashboard',
  description:
    'Iran conflict energy market impact — oil prices, supply disruptions, war premium, and geopolitical events',
};

function HeroSkeleton() {
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
      {Array.from({ length: 8 }).map((_, i) => (
        <MetricCardSkeleton key={i} />
      ))}
    </div>
  );
}

function GaugeSkeleton() {
  return (
    <Card>
      <CardHeader>
        <Skeleton className="h-5 w-48" />
        <Skeleton className="mt-1 h-3 w-64" />
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="flex flex-col items-center gap-2 rounded-lg border border-border/50 p-4">
              <Skeleton className="h-3 w-20" />
              <Skeleton className="h-20 w-36 rounded" />
              <Skeleton className="h-3 w-16" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

export default function ConflictPage() {
  return (
    <div className="space-y-6 px-4 py-6 sm:px-6 sm:py-8">
      {/* Page header with alert banner */}
      <div>
        <div className="mb-4 flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/5 px-4 py-3">
          <AlertTriangle className="h-5 w-5 shrink-0 text-red-400" />
          <div>
            <p className="text-sm font-semibold text-red-400">Active Conflict — Iran-US War (Week 6)</p>
            <p className="text-xs text-muted-foreground">
              Strait of Hormuz closed. Qatar LNG offline 3-5 years. SPR at historic lows. Data updates every 30 minutes.
            </p>
          </div>
        </div>

        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">Conflict Energy Impact</h1>
        <p className="mt-2 text-muted-foreground">
          How the Iran-US conflict is reshaping energy markets — oil prices, supply disruptions, and the cost to every
          grid region.
        </p>
      </div>

      {/* Hero metrics row */}
      <Suspense fallback={<HeroSkeleton />}>
        <ConflictHeroMetrics />
      </Suspense>

      {/* Normalized performance since conflict — the single most informative chart */}
      <Suspense fallback={<ChartSkeleton />}>
        <NormalizedSection />
      </Suspense>

      {/* War Premium */}
      <Suspense fallback={<ChartSkeleton />}>
        <WarPremiumSection />
      </Suspense>

      {/* Oil prices chart */}
      <Suspense fallback={<ChartSkeleton />}>
        <OilSection />
      </Suspense>

      {/* Natural Gas Futures + Supply side by side */}
      <div className="grid gap-6 lg:grid-cols-2">
        <Suspense fallback={<ChartSkeleton />}>
          <FuturesSection />
        </Suspense>

        <Suspense fallback={<ChartSkeleton />}>
          <SupplySection />
        </Suspense>
      </div>

      {/* Crack Spread (refinery margins) */}
      <Suspense fallback={<ChartSkeleton />}>
        <CrackSpreadSection />
      </Suspense>

      {/* Market Fear Indicators */}
      <Suspense fallback={<GaugeSkeleton />}>
        <MarketFearSection />
      </Suspense>

      {/* Event Timeline */}
      <Suspense fallback={<ChartSkeleton />}>
        <EventsSection />
      </Suspense>
    </div>
  );
}