"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { MiniKit } from "@worldcoin/minikit-js";
import { useTranslation } from "react-i18next";
import LanguageSwitcher from "@/components/LanguageSwitcher";

export default function Home() {
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const { t } = useTranslation('common');

  // Check if user is already logged in
  useEffect(() => {
    const walletAddress = localStorage.getItem("walletAddress");
    if (walletAddress) {
      router.push("/dashboard");
    }
  }, [router]);

  const login = async () => {
    setLoading(true);
    setError(null);

    try {
      // Get nonce from API
      const nonceResponse = await fetch("/api/nonce");
      if (!nonceResponse.ok) {
        throw new Error("Failed to get nonce");
      }
      const { nonce } = await nonceResponse.json();

      // Get the MiniKit instance
      const minikit = MiniKit.instance;
      if (!minikit) {
        setError(t("please_open_in_worldapp"));
        setLoading(false);
        return;
      }

      // Authenticate with wallet
      const authResult = await minikit.commandsAsync.walletAuth({
        nonce,
      });

      if (authResult.address) {
        // Store wallet address in localStorage for session management
        localStorage.setItem("walletAddress", authResult.address);
        router.push("/dashboard");
      } else {
        setError(t("authentication_failed"));
      }
    } catch (err) {
      console.error(err);
      setError(t("authentication_failed_worldapp"));
    }

    setLoading(false);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-6 md:p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <div className="flex items-center justify-center w-full">
          <LanguageSwitcher />
        </div>
      </div>

      <div className="relative flex place-items-center flex-col before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
        <h1 className="text-3xl font-bold text-center mb-8">{t('welcome')}</h1>
        <button
          onClick={login}
          disabled={loading}
          className="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-colors duration-300 disabled:opacity-50"
        >
          {loading ? "Loading..." : t('sign_in_with_world_app')}
        </button>
        {error && <p className="mt-4 text-red-500">{error}</p>}
      </div>

      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-3 lg:text-left">
        <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors">
          <h2 className="mb-3 text-2xl font-semibold">
            MiniKit
          </h2>
          <p className="m-0 max-w-[30ch] text-sm opacity-50">
            Authentication with WorldCoin MiniKit.
          </p>
        </div>
      </div>
    </main>
  );
}