SteelXR2/src/pages/Index.tsx

import { useEffect, useRef, useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Upload, Glasses, CheckCircle, XCircle, Loader2, Box, Package } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore';
import { toast } from 'sonner';
import { generateDemoBeamGLB } from '@/lib/generateDemoBeam';
import { getSupportedExtension, convertToGLB, ACCEPTED_EXTENSIONS } from '@/lib/convertToGLB';

const Index = () => {
  const navigate = useNavigate();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [loadingDemo, setLoadingDemo] = useState(false);
  const [converting, setConverting] = useState(false);
  const { model, setModel, xrSupported, setXrSupported } = useModelStore();

  useEffect(() => {
    if (navigator.xr) {
      navigator.xr.isSessionSupported('immersive-ar').then(setXrSupported).catch(() => setXrSupported(false));
    } else {
      setXrSupported(false);
    }
  }, [setXrSupported]);

  const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const ext = getSupportedExtension(file.name);
    if (!ext) {
      toast.error('Formato inválido. Selecione um arquivo .GLB, .OBJ ou .STL');
      return;
    }

    if (ext === 'glb') {
      const url = URL.createObjectURL(file);
      setModel({ fileName: file.name, fileSize: file.size, url });
      toast.success(`Modelo "${file.name}" carregado com sucesso!`);
      return;
    }

    // Convert OBJ/STL to GLB
    setConverting(true);
    try {
      const buffer = await file.arrayBuffer();
      const { blob, fileName, fileSize } = await convertToGLB(buffer, ext, file.name);
      const url = URL.createObjectURL(blob);
      setModel({ fileName, fileSize, url });
      toast.success(`"${file.name}" convertido para GLB e carregado!`);
    } catch (err) {
      console.error(err);
      toast.error(`Falha ao converter "${file.name}"`);
    } finally {
      setConverting(false);
    }
  }, [setModel]);

  const handleLoadDemo = useCallback(async () => {
    setLoadingDemo(true);
    try {
      const { blob, fileName, fileSize } = await generateDemoBeamGLB();
      const url = URL.createObjectURL(blob);
      setModel({ fileName, fileSize, url });
      toast.success('Modelo demo "IPE 200 — 1000mm" carregado!');
    } catch (err) {
      console.error(err);
      toast.error('Falha ao gerar modelo demo');
    } finally {
      setLoadingDemo(false);
    }
  }, [setModel]);

  const handleEnterViewer = () => {
    if (!model) {
      toast.error('Importe um modelo GLB primeiro');
      return;
    }
    navigate('/viewer');
  };

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background grid-industrial p-6">
      <input
        ref={fileInputRef}
        type="file"
        accept={ACCEPTED_EXTENSIONS}
        className="hidden"
        onChange={handleFileUpload} />


      {/* Logo area */}
      <div className="mb-12 text-center">
        <div className="mb-4 flex items-center justify-center gap-3">
          <Box className="h-10 w-10 text-primary" />
          <h1 className="text-3xl font-bold tracking-tight text-foreground md:text-4xl">
            TrackSteel<span className="text-primary">XR</span>
          </h1>
        </div>
        <p className="font-mono text-sm uppercase tracking-widest text-muted-foreground">
          Inspeção de Qualidade Industrial
        </p>
      </div>

      {/* Main card */}
      <div className="w-full max-w-md space-y-4">
        {/* Import button */}
        <Button
          variant="outline"
          className="h-28 w-full flex-col gap-3 border-dashed border-2 text-muted-foreground hover:border-primary hover:text-primary transition-all"
          onClick={() => fileInputRef.current?.click()}
          disabled={converting}>

          {converting ? <Loader2 className="h-8 w-8 animate-spin" /> : <Upload className="h-8 w-8" />}
          <div className="text-center">
            <p className="text-sm font-semibold">{converting ? 'Convertendo modelo…' : 'Importar Modelo 3D'}</p>
            <p className="text-xs text-muted-foreground">GLB · OBJ · STL — Escala 1:1</p>
          </div>
        </Button>

        {/* Demo button */}
        <Button
          variant="outline"
          className="h-12 w-full gap-3 border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary transition-all"
          onClick={handleLoadDemo}
          disabled={loadingDemo}>

          {loadingDemo ?
          <Loader2 className="h-4 w-4 animate-spin" /> :

          <Package className="h-4 w-4" />
          }
          {loadingDemo ? 'Gerando modelo…' : 'Carregar Demo — Viga IPE 200'}
        </Button>


        {model &&
        <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 glow-primary">
            <div className="flex items-center gap-3">
              <Box className="h-5 w-5 text-primary" />
              <div className="min-w-0 flex-1">
                <p className="truncate font-mono text-sm font-medium text-foreground">{model.fileName}</p>
                <p className="text-xs text-muted-foreground">
                  {(model.fileSize / (1024 * 1024)).toFixed(2)} MB
                </p>
              </div>
              <CheckCircle className="h-5 w-5 text-success shrink-0" />
            </div>
          </div>
        }

        {/* Enter viewer */}
        <Button
          className="h-14 w-full gap-3 text-base font-semibold glow-primary"
          disabled={!model}
          onClick={handleEnterViewer}>

          <Glasses className="h-5 w-5" />
          Visualizar Modelo 3D
        </Button>

        {/* XR Status */}
        <div className="flex items-center justify-center gap-2 pt-2">
          {xrSupported === null ?
          <>
              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
              <span className="text-xs text-muted-foreground">Verificando suporte WebXR…</span>
            </> :
          xrSupported ?
          <>
              <CheckCircle className="h-4 w-4 text-success" />
              <span className="text-xs text-success">WebXR Compatível — Passthrough disponível</span>
            </> :

          <>
              <XCircle className="h-4 w-4 text-destructive" />
              <span className="text-xs text-destructive">WebXR não disponível neste navegador</span>
            </>
          }
        </div>
      </div>

      {/* Footer */}
      <p className="mt-16 text-center font-mono text-xs text-muted-foreground/50">
        TrackSteelXR v1.0 — Q.C. Inspection
      </p>
    </div>);

};

export default Index;