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 { 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">
              TrackkSteel<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 />

              <InspectionChecklist />

              <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;