import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Info, AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface InfoV0ModalProps {
  variant?: 'icon' | 'button';
  buttonText?: string;
  className?: string;
}

export function InfoV0Modal({ variant = 'icon', buttonText = 'Atenção', className = '' }: InfoV0ModalProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        {variant === 'icon' ? (
          <Button
            variant="ghost"
            size="icon"
            className={`h-5 w-5 text-muted-foreground hover:text-primary rounded-full p-0 shrink-0 ${className}`}
            title="Por que existem divergências na velocidade do vento?"
          >
            <Info className="h-4 w-4" />
          </Button>
        ) : (
          <Button
            variant="outline"
            size="sm"
            className={`h-7 px-2.5 text-[10px] gap-1 border-amber-500/30 hover:border-amber-500/50 text-amber-600 dark:text-amber-400 bg-amber-500/5 hover:bg-amber-500/10 shrink-0 ${className}`}
          >
            <AlertTriangle className="h-3.5 w-3.5" />
            <span>{buttonText}</span>
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px] max-w-[95vw] p-4 sm:p-6 bg-background border border-border shadow-2xl">
        <DialogHeader className="border-b pb-2 flex-row gap-2 items-center">
          <AlertTriangle className="h-5 w-5 text-amber-500 shrink-0" />
          <div>
            <DialogTitle className="text-sm font-semibold text-foreground">
              Divergências de Velocidade Básica (V₀)
            </DialogTitle>
            <DialogDescription className="text-[10px]">
              Entenda por que a velocidade do vento na lista de cidades pode diferir do mapa de isopletas.
            </DialogDescription>
          </div>
        </DialogHeader>

        <div className="space-y-4 text-xs leading-relaxed text-muted-foreground mt-4">
          <div className="space-y-1.5">
            <h4 className="font-semibold text-foreground flex items-center gap-1.5">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-mono font-bold">1</span>
              Soberania do Anexo C (Dados Reais vs. Macro)
</h4>
            <p>
              As 49 estações principais da lista utilizam os dados do <strong>Anexo C da NBR 6123</strong>, obtidos a partir de medições estatísticas históricas reais em aeroportos. A norma estabelece que, se houver dado tabulado no anexo para a localidade, <strong>este valor oficial deve ser adotado prioritariamente</strong> sobre a estimativa visual obtida no mapa de isopletas.
            </p>
          </div>

          <div className="space-y-1.5">
            <h4 className="font-semibold text-foreground flex items-center gap-1.5">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-mono font-bold">2</span>
              Efeito de Borda e Arredondamento de Segurança
            </h4>
            <p>
              Cidades que ficam situadas geograficamente entre duas curvas de vento (por exemplo, na transição entre 30 m/s e 35 m/s) devem adotar o valor da <strong>curva de velocidade superior mais próxima</strong> (35 m/s) para garantir o conservadorismo estrutural e a segurança humana contra rajadas extremas.
            </p>
          </div>

          <div className="space-y-1.5">
            <h4 className="font-semibold text-foreground flex items-center gap-1.5">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-mono font-bold">3</span>
              Microclimas e Topografia Local
            </h4>
            <p>
              O mapa nacional de isopletas é aproximado. Acidentes geográficos locais como vales profundos, serras (como a Serra do Mar) ou proximidade com o oceano provocam acelerações do vento. As estações de monitoramento registram esses efeitos localmente, alterando a velocidade regulamentada em relação à linha média suave do mapa nacional.
            </p>
          </div>

          <div className="rounded-md border border-amber-500/20 bg-amber-500/5 p-2.5 text-[11px] text-amber-600 dark:text-amber-400">
            <strong>Recomendação Técnica:</strong> Verifique sempre o histórico de vento local e, em caso de dúvida, utilize a maior velocidade disponível para assegurar a estabilidade e segurança da edificação.
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}