import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Glasses, Box, Ruler, FileText, Columns2, Download } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore';
import { ModelViewerCanvas } from '@/components/three/ModelViewer';
import { ViewerControls } from '@/components/ViewerControls';
import { InspectionChecklist } from '@/components/InspectionChecklist';
import { FineTuningControls } from '@/components/FineTuningControls';
import { MeasurementsList } from '@/components/MeasurementsList';
import { ScreenshotGallery } from '@/components/ScreenshotGallery';
import { ComparePanel } from '@/components/ComparePanel';
import { useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { generateInspectionReport } from '@/lib/generateReport';

const Viewer = () => {
  const navigate = useNavigate();
  const { model, xrSupported, compareMode, setCompareMode, checklist, measurements, screenshots, fineTuning } = useModelStore();

  const handleExportPDF = useCallback(async () => {
    if (!model) return;
    toast.info('Gerando relatório PDF…');
    try {
      await generateInspectionReport({
        fileName: model.fileName,
        fileSize: model.fileSize,
        fineTuning,
        checklist,
        measurements,
        screenshots,
      });
      toast.success('Relatório exportado com sucesso!');
    } catch (err) {
      console.error(err);
      toast.error('Erro ao gerar o relatório.');
    }
  }, [model, fineTuning, checklist, measurements, screenshots]);

  useEffect(() => {
    if (!model) {
      navigate('/');
    }
  }, [model, navigate]);

  if (!model) return null;

  const handleEnterXR = async () => {
    if (!xrSupported) {
      toast.error('WebXR não é suportado neste navegador. Use o navegador do Meta Quest 3.');
      return;
    }
    navigate('/xr');
  };

  return (
    <div className="flex h-screen flex-col bg-background">
      {/* Top bar */}
      <header className="flex items-center justify-between border-b bg-card px-4 py-3">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={() => navigate('/')}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div className="flex items-center gap-2">
            <Box className="h-5 w-5 text-primary" />
            <h1 className="font-mono text-sm font-semibold text-foreground">
              TrackkSteel<span className="text-primary">XR</span>
            </h1>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            className="gap-2"
            onClick={handleExportPDF}
          >
            <Download className="h-4 w-4" />
            Exportar PDF
          </Button>
          <Button
            variant={compareMode ? 'default' : 'outline'}
            size="sm"
            className="gap-2"
            onClick={() => setCompareMode(!compareMode)}
          >
            <Columns2 className="h-4 w-4" />
            Comparar
          </Button>
          <Button
            className="gap-2 glow-primary"
            disabled={!xrSupported}
            onClick={handleEnterXR}
          >
            <Glasses className="h-4 w-4" />
            Entrar em Modo XR
          </Button>
        </div>
      </header>

      <div className="flex flex-1 overflow-hidden">
        {/* 3D Canvas with floating controls */}
        <div className={`relative ${compareMode ? 'w-1/2' : 'flex-1'}`}>
          <ModelViewerCanvas url={model.url} />
          <ViewerControls />
        </div>

        {/* Compare panel */}
        {compareMode && (
          <div className="w-1/2 border-l">
            <ComparePanel />
          </div>
        )}

        {/* Side panel */}
        <aside className="w-80 shrink-0 border-l bg-card">
          <ScrollArea className="h-full">
            <div className="p-4 space-y-5">
              <div>
                <h2 className="mb-3 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                  Informações do Modelo
                </h2>
                <div className="space-y-3">
                  <InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
                  <InfoItem
                    icon={Box}
                    label="Tamanho"
                    value={`${(model.fileSize / (1024 * 1024)).toFixed(2)} MB`}
                  />
                  <InfoItem icon={Ruler} label="Escala" value="1:1 (mm)" />
                </div>
              </div>

              <Separator />

              <FineTuningControls />

              <Separator />

              <MeasurementsList />

              <Separator />

              <InspectionChecklist />

              <Separator />

              <ScreenshotGallery />
              <div className="rounded-lg border bg-muted/50 p-3">
                <p className="font-mono text-xs text-muted-foreground">
                  Use o mouse para orbitar, scroll para zoom. Controle a opacidade e o modo de renderização nos controles flutuantes.
                </p>
              </div>
            </div>
          </ScrollArea>
        </aside>
      </div>
    </div>
  );
};

function InfoItem({ icon: Icon, label, value }: { icon: any; label: string; value: string }) {
  return (
    <div className="flex items-start gap-3">
      <Icon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
      <div className="min-w-0">
        <p className="text-xs text-muted-foreground">{label}</p>
        <p className="truncate font-mono text-sm text-foreground">{value}</p>
      </div>
    </div>
  );
}

export default Viewer;