import React from 'react';
import Warehouse3DViewer from '../components/Warehouse3D';
import LinearLoadsTable from '../components/LinearLoadsTable';
import SceneCapturePanel from '../components/SceneCapturePanel';
import FtoolExportCard from '../components/FtoolExportCard';
import { useGalpaoStore } from '../store/galpaoStore';
import { useWindStore } from '../store/appStore';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import ExportMenu from '../components/ExportMenu';
import { EducationalManual } from '@/components/EducationalManual';

const GalpaoModule: React.FC = () => {
  const {
    width,
    length,
    height,
    roofPitch,
    setWidth,
    setLength,
    setHeight,
    setRoofPitch,
  } = useGalpaoStore();
  const {
    q,
    cpi,
    windAngle,
    setWindAngle,
  } = useWindStore();
  return (
    <div className="flex flex-col lg:flex-row h-full w-full gap-4 p-4 lg:p-6 bg-muted/30">
      {/* Coluna Esquerda: Controles */}
      <div className="w-full lg:w-80 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
        <Card className="shadow-sm border-border">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg">Geometria</CardTitle>
                <CardDescription>Ajuste as dimensões do galpão.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <label className="text-sm font-medium text-foreground">Largura (X)</label>
                    <span className="text-sm text-muted-foreground font-mono">{width} m</span>
                  </div>
                  <Slider min={5} max={80} step={1} value={[width]} onValueChange={(vals) => setWidth(vals[0])} className="py-1 cursor-pointer" />
                </div>

                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <label className="text-sm font-medium text-foreground">Comprimento (Z)</label>
                    <span className="text-sm text-muted-foreground font-mono">{length} m</span>
                  </div>
                  <Slider min={5} max={150} step={1} value={[length]} onValueChange={(vals) => setLength(vals[0])} className="py-1 cursor-pointer" />
                </div>

                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <label className="text-sm font-medium text-foreground">Altura (Y)</label>
                    <span className="text-sm text-muted-foreground font-mono">{height} m</span>
                  </div>
                  <Slider min={3} max={40} step={0.5} value={[height]} onValueChange={(vals) => setHeight(vals[0])} className="py-1 cursor-pointer" />
                </div>

                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <label className="text-sm font-medium text-foreground">Inclinação (θ)</label>
                    <span className="text-sm text-muted-foreground font-mono">{roofPitch}°</span>
                  </div>
                  <Slider min={0} max={60} step={1} value={[roofPitch]} onValueChange={(vals) => setRoofPitch(vals[0])} className="py-1 cursor-pointer" />
                </div>

                <Separator />

                <div className="space-y-2">
                  <label className="text-sm font-medium text-foreground">Direção do Vento</label>
                  <Select value={windAngle.toString()} onValueChange={(val) => setWindAngle(Number(val) as 0 | 90)}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Selecione a direção" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="0">0° (Perpendicular à largura)</SelectItem>
                      <SelectItem value="90">90° (Paralelo à largura)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
      </div>

      {/* Coluna Direita: Viewer 3D */}
      <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
        <div className="absolute top-4 left-4 z-10 flex gap-2">
          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm border-muted-foreground/20 text-foreground shadow-sm">
            Vento a {windAngle}°
          </Badge>
          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
            Cpi = {cpi.toFixed(2)}
          </Badge>
          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
            q = {q.toFixed(3)} kN/m²
          </Badge>
        </div>

        <div className="absolute top-4 right-4 z-10 flex gap-2">
          <ExportMenu />
          <EducationalManual type="warehouse" params={{ windAngle, cpi }} />
        </div>

        <div className="absolute bottom-4 left-4 z-10 flex gap-3 p-3 bg-background/90 backdrop-blur-md border border-border rounded-lg shadow-sm">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
            <span className="text-xs font-medium text-foreground">Pressão (Empuxo)</span>
          </div>
          <Separator orientation="vertical" className="h-4" />
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
            <span className="text-xs font-medium text-foreground">Sucção (Arrasto)</span>
          </div>
        </div>

        <div className="w-full h-full cursor-grab active:cursor-grabbing bg-muted/20">
          <Warehouse3DViewer />
        </div>
      </div>

      {/* Coluna Direita-Inferior: Cargas Lineares (M9.2) */}
      <div className="w-full lg:w-96 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
        <LinearLoadsTable />
        <SceneCapturePanel />
        <FtoolExportCard />
      </div>
    </div>
  );
};

export default GalpaoModule;