"use client";

import { useState, useRef, useEffect } from "react";

export default function XgridsWizard() {
  const [files, setFiles] = useState<File[]>([]);
  const [status, setStatus] = useState<string>("Waiting for upload...");
  const [isProcessing, setIsProcessing] = useState(false);
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    const worker = new Worker(
      new URL("./workers/converter.worker.ts", import.meta.url),
    );
    workerRef.current = worker;

    worker.onmessage = (e) => {
      const { type, message, data } = e.data;
      if (type === "LOG") setStatus(message);

      if (type === "DONE") {
        setIsProcessing(false);
        setStatus("Pipeline Complete!");
        data.files.forEach((file: { name: string; blob: Blob }) => {
          downloadFile(file.blob, file.name);
        });
      }
    };
    return () => worker.terminate();
  }, []);

  const downloadFile = (blob: Blob, name: string) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleFolderUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const uploadedFiles = Array.from(e.target.files || []);
    if (uploadedFiles.length > 0) {
      setFiles(uploadedFiles);
      setStatus(`Loaded ${uploadedFiles.length} files. Ready to convert.`);
    }
  };

  const startPipeline = async () => {
    if (!files.length || !workerRef.current) return;

    // FIND SPECIFIC ENTRIES
    const lciFile = files.find((f) => f.name.toLowerCase() === "collision.lci");
    const lccFile = files.find((f) => f.name.toLowerCase().endsWith(".lcc"));

    if (!lciFile) {
      setStatus("Error: 'collision.lci' not found in folder.");
      return;
    }
    if (!lccFile) {
      setStatus("Error: Main '.lcc' scene file not found.");
      return;
    }

    setIsProcessing(true);

    try {
      // --- PHASE 1: Python (Only collision.lci) ---
      setStatus("Step 1/2: Converting collision.lci to PLY...");
      const formData = new FormData();
      formData.append("file", lciFile);

      const pyResponse = await fetch("/api/convert", {
        method: "POST",
        body: formData,
      });

      if (!pyResponse.ok) {
        const err = await pyResponse.json();
        throw new Error(err.error || "Python script failed");
      }

      const plyBlob = await pyResponse.blob();
      downloadFile(plyBlob, "collision_mesh.ply");

      // --- PHASE 2: Worker (The whole folder context) ---
      setStatus("Step 2/2: Generating Splats and LODs from .lcc...");

      const filesData = await Promise.all(
        files.map(async (f) => ({
          name: f.name,
          buffer: await f.arrayBuffer(),
        })),
      );

      const buffersToTransfer = filesData.map((f) => f.buffer);

      workerRef.current.postMessage(
        {
          type: "START_CONVERSION",
          filesData,
          mainLccName: lccFile.name,
          fileName: lccFile.name.replace(".lcc", ""),
        },
        buffersToTransfer,
      );
    } catch (error: any) {
      console.error(error);
      setStatus(`Error: ${error.message}`);
      setIsProcessing(false);
    }
  };

  return (
    <main className="min-h-screen bg-slate-900 text-white p-8 flex flex-col items-center">
      <div className="max-w-2xl w-full bg-slate-800 rounded-xl p-8 shadow-2xl border border-slate-700">
        <header className="mb-8 text-center">
          <h1 className="text-3xl font-bold mb-2">Xgrids Scene Wizard</h1>
          <p className="text-slate-400">Targeting collision.lci + scene.lcc</p>
        </header>

        <div className="space-y-6">
          <div className="border-2 border-dashed border-slate-600 rounded-lg p-10 text-center hover:border-blue-500 transition-colors">
            <input
              type="file"
              id="folder-upload"
              //@ts-ignore
              webkitdirectory=""
              directory=""
              className="hidden"
              onChange={handleFolderUpload}
            />
            <label htmlFor="folder-upload" className="cursor-pointer">
              <span className="bg-blue-600 px-6 py-3 rounded-md font-medium hover:bg-blue-500 transition-all inline-block shadow-lg">
                Select Xgrids Folder
              </span>
              <p className="mt-4 text-sm text-slate-500 italic">
                {files.length > 0
                  ? `${files.length} files selected`
                  : "Upload folder"}
              </p>
            </label>
          </div>

          <div className="bg-black/40 p-4 rounded-md font-mono text-sm border border-slate-700">
            <p
              className={`${isProcessing ? "text-yellow-400" : "text-emerald-400"}`}
            >
              {"> "} {status}
            </p>
          </div>

          <button
            onClick={startPipeline}
            disabled={files.length === 0 || isProcessing}
            className="w-full py-4 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-700 disabled:text-slate-500 rounded-lg font-bold transition-all shadow-lg"
          >
            {isProcessing ? "Processing..." : "Generate Scene Files"}
          </button>
        </div>
      </div>
    </main>
  );
}