import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import StatBar from './StatBar';
import { cn } from '@/lib/utils';
import type { Preset } from '@shared/types';

interface Props {
  preset: Preset;
  loading?: boolean;
  onPick: (nationId: string) => void;
  onBack: () => void;
}

/** Pick which nation to lead, with a short world-context blurb above. */
export default function NationSelect({ preset, loading, onPick, onBack }: Props) {
  return (
    <div className="mx-auto max-w-6xl px-6 py-8">
      <Button variant="ghost" size="sm" onClick={onBack} className="mb-4">
        ← Back to scenarios
      </Button>
      <h1 className="text-3xl font-bold tracking-tight">{preset.title}</h1>
      <p
        className="mt-3 max-w-3xl whitespace-pre-line text-sm leading-relaxed text-muted-foreground"
        data-testid="world-background"
      >
        {preset.worldBackground}
      </p>

      <h2 className="mb-4 mt-8 text-lg font-semibold">Choose your nation</h2>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {preset.nations.map((n) => (
          <Card key={n.id} className="flex flex-col" data-testid={`nation-card-${n.id}`}>
            <CardHeader>
              <CardTitle className="text-base">{n.name}</CardTitle>
              <CardDescription>
                {n.type} · {n.territory.length} region{n.territory.length === 1 ? '' : 's'}
              </CardDescription>
            </CardHeader>
            <CardContent className="mt-auto space-y-1.5">
              <StatBar label="Military" value={n.stats.military} />
              <StatBar label="Economy" value={n.stats.economy} />
              <StatBar label="Stability" value={n.stats.stability} />
              <Button
                className={cn('w-full mt-3')}
                onClick={() => onPick(n.id)}
                disabled={loading}
              >
                Play as {n.name}
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}