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

type ParamType = 'v0' | 's1' | 's2' | 's3';

interface InfoParamModalProps {
  type: ParamType;
  className?: string;
}

const PARAM_INFO = {
  v0: {
    title: 'Velocidade Básica do Vento (V₀)',
    section: 'NBR 6123 — Item 5.1 e Anexo C',
    description: 'A velocidade básica (V₀) é a velocidade de uma rajada de vento de 3 segundos, excedida em média uma vez em 50 anos (período de recorrência), a 10 metros de altura sobre um terreno plano e aberto.',
    guidance: 'Para projetos reais, localize o município no mapa de isopletas (Figura 1) ou utilize os dados reais das estações de medição do Anexo C. Em áreas de transição de isopletas, adote sempre o maior valor para garantir o conservadorismo de segurança.',
  },
  s1: {
    title: 'Fator Topográfico (S₁)',
    section: 'NBR 6123 — Item 5.2 e Anexo A',
    description: 'O fator S₁ ajusta a velocidade do vento conforme as características do relevo e topografia do terreno ao redor da construção, contabilizando acelerações ou reduções de velocidade.',
    guidance: '• Terreno plano ou levemente ondulado: S₁ = 1,0.\n• Vales protegidos (onde o vento é atenuado): S₁ = 0,9.\n• Topo de morros e cristas de taludes: S₁ varia de 1,0 a 1,2 dependendo da inclinação (efeito de aceleração do escoamento).',
  },
  s2: {
    title: 'Rugosidade e Dimensões (S₂)',
    section: 'NBR 6123 — Item 5.3 e Tabela 3',
    description: 'O fator S₂ ajusta a velocidade conforme a rugosidade do terreno (categorias I a V) e a altura da edificação (z), associado à classe geométrica da estrutura (A, B ou C baseadas na maior dimensão vertical/horizontal).',
    guidance: '• Categorias I/II: Áreas litorâneas e campos abertos (ventos mais intensos próximos ao solo).\n• Categoria III/IV: Zonas residenciais, suburbanas ou florestas com obstáculos esparsos.\n• Categoria V: Zonas urbanas com grandes edificações (ventos atenuados no solo, mas aumentam rapidamente com a altura).',
  },
  s3: {
    title: 'Fator Estatístico (S₃)',
    section: 'NBR 6123 — Item 5.4 e Tabela 4',
    description: 'O fator S₃ é baseado em conceitos de probabilidade e risco aceitável, ajustando o projeto à vida útil de utilização da estrutura e ao risco de danos humanos ou socioeconômicos em caso de colapso.',
    guidance: '• Grupo 1 (S₃ = 1,11): Edifícios vitais cujos serviços devem continuar após tempestades (hospitais, quartéis, telefonia).\n• Grupo 2 (S₃ = 1,06): Residências, escritórios, hotéis e comércios comuns.\n• Grupo 3 (S₃ = 1,00): Depósitos industriais ou comerciais comuns de menor risco.\n• Grupo 4 (S₃ = 0,95): Edificações agrícolas, silos e galpões temporários.',
  },
};

export function InfoParamModal({ type, className = '' }: InfoParamModalProps) {
  const info = PARAM_INFO[type];

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className={`h-4 w-4 text-muted-foreground/80 hover:text-primary rounded-full p-0 shrink-0 transition-colors cursor-pointer ${className}`}
          title={`Como determinar o ${type.toUpperCase()}`}
        >
          <HelpCircle className="h-3.5 w-3.5" />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[460px] max-w-[95vw] p-5 bg-background border border-border shadow-2xl rounded-lg">
        <DialogHeader className="border-b pb-2.5">
          <DialogTitle className="text-sm font-semibold flex items-center gap-1.5 text-primary">
            <Info className="h-4.5 w-4.5" />
            {info.title}
          </DialogTitle>
          <DialogDescription className="text-[10px] font-mono text-muted-foreground/80 mt-0.5">
            {info.section}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3.5 text-xs mt-3.5 text-muted-foreground leading-relaxed">
          <div className="space-y-1 bg-muted/40 p-3 rounded-md border border-border/40">
            <h5 className="font-semibold text-foreground text-[11px]">Conceito Físico:</h5>
            <p className="text-muted-foreground">{info.description}</p>
          </div>

          <div className="space-y-1">
            <h5 className="font-semibold text-foreground text-[11px]">Como especificar no projeto:</h5>
            <p className="whitespace-pre-line text-muted-foreground">{info.guidance}</p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
