"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(
          `Conversion Complete! Downloading ${data.files.length} files...`,
        );

        // Loop through all generated files and trigger downloads
        data.files.forEach((file: { name: string; blob: Blob }) => {
          downloadFile(file.blob, file.name);
        });
      }
    };

    return () => worker.terminate();
  }, []);

  // Helper to trigger browser downloads
  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 startConversion = async () => {
    if (!files.length || !workerRef.current) return;

    setIsProcessing(true);
    setStatus("Reading files into memory (this might take a moment)...");

    // Find the main .lcc file to act as our entry point
    const lccFile = files.find((f) => f.name.endsWith(".lcc"));

    if (!lccFile) {
      setStatus("Error: Missing .lcc file in folder.");
      setIsProcessing(false);
      return;
    }

    try {
      // 1. Convert all File objects into an array of { name, buffer }
      const filesData = await Promise.all(
        files.map(async (f) => ({
          name: f.name,
          buffer: await f.arrayBuffer(),
        })),
      );

      // 2. Extract just the ArrayBuffers so we can "transfer" them to the worker efficiently
      // This prevents duplicating the 272MB data in RAM
      const buffersToTransfer = filesData.map((f) => f.buffer);

      workerRef.current.postMessage(
        {
          type: "START_CONVERSION",
          filesData,
          mainLccName: lccFile.name,
          fileName: lccFile.name.replace(".lcc", ""), // e.g., "Wilhelm Studios"
        },
        buffersToTransfer, // Passes ownership to the worker to save memory
      );
    } catch (error) {
      console.error(error);
      setStatus("Error reading files. Check console.");
      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">
          <h1 className="text-3xl font-bold mb-2">Xgrids Scene Wizard</h1>
          <p className="text-slate-400">
            Convert .lcc/.lci to SOG, LODs, and PLY meshes locally.
          </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-colors inline-block">
                Select Xgrids Folder
              </span>
              <p className="mt-4 text-sm text-slate-500 italic">
                {files.length > 0
                  ? `${files.length} files selected`
                  : "Drag and drop or click to browse"}
              </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={startConversion}
            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 disabled:cursor-not-allowed rounded-lg font-bold transition-all shadow-lg"
          >
            {isProcessing ? (
              <span className="flex items-center justify-center gap-2">
                <svg
                  className="animate-spin h-5 w-5 text-white"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                    fill="none"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  />
                </svg>
                Processing...
              </span>
            ) : (
              "Generate Scene Files"
            )}
          </button>
        </div>
      </div>
    </main>
  );
}