import React from 'react';
import { useWindStore } from '@/store/appStore';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import type { PermeabilityCase } from '@/lib/internal-pressure';

export const CpiSettingsCard: React.FC = () => {
  const {
    permeabilityCase,
    cpiRatio,
    cpi,
    setPermeabilityCase,
    setCpiRatio,
  } = useWindStore();

  return (
    <Card className="shadow-sm border-border">
      <CardHeader className="pb-2">
        <CardTitle className="text-base">Pressão Interna (Cpi)</CardTitle>
        <CardDescription className="text-xs">
          Coeficiente de pressão interna (sec. 6.3)
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-1">
          <Tooltip>
            <TooltipTrigger asChild>
              <label className="text-xs font-medium text-foreground cursor-help underline decoration-dashed decoration-muted-foreground underline-offset-4">Caso de Permeabilidade</label>
            </TooltipTrigger>
            <TooltipContent side="right">
              <p className="text-sm">Baseado na <b>NBR 6123, Seção 6.3</b> (Coeficiente de pressão interna).<br/>Permeabilidade afeta a diferença de pressão total na estrutura.</p>
            </TooltipContent>
          </Tooltip>
          <Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
            <SelectTrigger className="w-full text-xs h-8">
              <SelectValue placeholder="Selecione" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
              <SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
              <SelectItem value="dominant-windward">Abertura dominante — barlavento</SelectItem>
              <SelectItem value="dominant-leeward">Abertura dominante — sotavento</SelectItem>
              <SelectItem value="dominant-lateral">Abertura dominante — lateral</SelectItem>
              <SelectItem value="airtight">Edificação estanque</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <Tooltip>
                <TooltipTrigger asChild>
                  <label className="text-xs font-medium text-foreground cursor-help underline decoration-dashed decoration-muted-foreground underline-offset-4">Razão de áreas</label>
                </TooltipTrigger>
                <TooltipContent side="right">
                  <p className="text-sm">A razão entre a área das aberturas na face dominante<br/>e as demais determina o valor limite do Cpi (Figura 2 / Sec. 6.3).</p>
                </TooltipContent>
              </Tooltip>
              <span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
            </div>
            <Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
            <p className="text-[10px] leading-tight text-muted-foreground">
              Razão entre a área da abertura dominante e a área total das demais aberturas.
            </p>
          </div>
        )}

        <div className="rounded-md border bg-muted/40 p-2">
          <div className="flex justify-between items-center">
            <span className="text-xs font-medium">Cpi calculado:</span>
            <Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
          </div>
          <p className="text-[10px] leading-tight text-muted-foreground mt-1">
            Limitado a ±0,9 conforme norma. A pressão final é p = q · (Cpe − Cpi).
          </p>
        </div>
      </CardContent>
    </Card>
  );
};