import Translate from "./Translate";
import { useState } from "react";
import Translator from "./ai/Translator.ts";
import Initialize from "./Initialize.tsx";

function App() {
  const [translator, setTranslator] = useState<Translator>(null);
  const [progress, setProgress] = useState<number>(0);
  const [isInitializing, setIsInitializing] = useState<boolean>(false);

  const init = async () => {
    setIsInitializing(true);
    const t = Translator.getInstance();
    const loaded = new Map<string, number>();
    let newProgress = 0;
    await t.init((e) => {
      if (e.status === "progress") {
        loaded.set(e.file, e.loaded);
        const allLoaded = Array.from(loaded.values()).reduce(
          (acc: number, curr: number) => acc + curr,
          0
        );
        const percentLoaded = Math.round((100 / Translator.size) * allLoaded);
        if (newProgress !== percentLoaded) {
          newProgress = percentLoaded;
          setProgress(newProgress);
        }
      }
    });
    setTranslator(t);
    setIsInitializing(false);
  };

  return (
    <div className="min-h-screen bg-neutral-100 flex flex-col justify-between gap-2">
      <header className="bg-white border-b border-border shadow-sm p-4">
        <h1 className="text-md md:text-3xl font-sans text-center flex justify-center items-center gap-2 md:gap-6">
          <span className="font-bold flex items-center justify-center gap-1">
            <img
              src="gemma.svg"
              alt="Gemma Logo"
              className="block"
              style={{
                width: "1.2em",
                height: "1.2em",
              }}
            />
            <span>
              Translate<span className="text-primary">Gemma</span>
            </span>
          </span>
          <span>//</span>
          <span className="font-bold flex items-center justify-center gap-1">
            <img
              src="hf-logo.svg"
              alt="Gemma Logo"
              className="block"
              style={{
                width: "1.2em",
                height: "1.2em",
              }}
            />
            Transformers.js
          </span>
        </h1>
      </header>
      {translator ? (
        <Translate className="w-full" translator={translator} />
      ) : (
        <Initialize
          onInitialize={init}
          progress={progress}
          isInitializing={isInitializing}
        />
      )}
      <footer className="p-8 pt-0 text-center text-muted-foreground text-xs md:text-sm">
        <p>
          High-quality translations across 56 languages powered by{" "}
          <a
            href="https://blog.google/technology/developers/gemma-open-models/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary hover:underline"
          >
            Google's TranslateGemma
          </a>{" "}
          model, running entirely in your browser with{" "}
          <a
            href="https://huggingface.co/docs/transformers.js"
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary hover:underline"
          >
            Transformers.js
          </a>{" "}
          and complete privacy.
        </p>
      </footer>
    </div>
  );
}

export default App;