import { useNavigate } from "react-router-dom";
import { ArrowLeft, Glasses, Box, Ruler, FileText } 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 { useEffect } from "react";
import { toast } from "sonner";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

const Viewer = () => {
  const navigate = useNavigate();
  const { model, xrSupported } = useModelStore();

  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">
              TrackSteel<span className="text-primary">XR</span>
            </h1>
          </div>
        </div>

        <Button className="gap-2 glow-primary" disabled={!xrSupported} onClick={handleEnterXR}>
          <Glasses className="h-4 w-4" />
          Entrar em Modo XR
        </Button>
      </header>

      <div className="flex flex-1 overflow-hidden">
        {/* 3D Canvas with floating controls */}
        <div className="relative flex-1">
          <ModelViewerCanvas url={model.url} />
          <ViewerControls />
        </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;