"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Sparkles } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { useTranslation, getServerTranslations } from "@/lib/i18n";
import { cn } from "@/lib/utils";

export function Footer() {
  const pathname = usePathname();
  const [mounted, setMounted] = useState(false);
  const { t } = useTranslation();

  useEffect(() => setMounted(true), []);

  const getT = (key: string, params?: Record<string, string | number>) => {
    if (!mounted) return getServerTranslations("en").t(key, params);
    return t(key, params);
  };

  const toolLinks = useMemo(
    () => [
      { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
      { name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
      { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [mounted]
  );

  // Check if we're in the dashboard area (tools pages)
  const isDashboard = pathname?.startsWith("/tools");

  return (
    <footer className={cn(
      "border-t border-white/5 bg-background/50",
      isDashboard && "lg:ml-64"
    )}>
      <div className="container py-12">
        <div className="grid gap-10 md:grid-cols-[1.5fr_1fr]">
          <div>
            <Link href="/" className="inline-flex items-center gap-2">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.1)]">
                <Sparkles className="h-5 w-5" />
              </span>
              <span className="text-base font-semibold tracking-tight">{getT("common.appName")}</span>
            </Link>

            <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
              {getT("footer.tagline")}
            </p>

            <p className="mt-6 text-xs text-muted-foreground">
              {getT("footer.note")}
            </p>
          </div>

          <div className="grid grid-cols-2 gap-8">
            <div>
              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {getT("footer.sections.tools")}
              </div>
              <ul className="mt-4 space-y-2 text-sm">
                {toolLinks.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href} className="text-muted-foreground hover:text-foreground">
                      {link.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {getT("footer.sections.company")}
              </div>
              <ul className="mt-4 space-y-2 text-sm">
                <li>
                  <Link href="/" className="text-muted-foreground hover:text-foreground">
                    {getT("footer.links.home")}
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div className="mt-10 border-t border-white/5 pt-6">
          <div className="flex flex-col items-center justify-center gap-2 text-center">
            <p className="text-xs text-muted-foreground">
              © {new Date().getFullYear()} {getT("common.appName")}. {getT("footer.copyright")}
            </p>
            <Link
              href="https://beian.miit.gov.cn"
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs text-muted-foreground hover:text-foreground"
            >
              粤ICP备2021179543号
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}