"use client";

import Link from "next/link";
import Image from "next/image"; // ✅
import { useMemo, useState } from "react";
import type { Locale } from "@/lib/i18n";
import LanguageSwitcher from "./LanguageSwitcher";
import { usePathname } from "next/navigation";
import ThemeToggle from "./ThemeToggle";

const NAV = [
  { id: "nacionales", path: "section/nacionales" },
  { id: "internacionales", path: "section/internacionales" },
  { id: "opiniones", path: "section/opiniones" },
  { id: "ciencias", path: "section/ciencias" },
  { id: "criptos", path: "section/criptos" },
  { id: "trading", path: "section/trading" },
  { id: "futurologia", path: "section/futurologia" },
  { id: "filosofia", path: "section/filosofia" },
  { id: "entretenimiento", path: "section/entretenimiento" },
  { id: "curiosidades", path: "section/curiosidades" },
  { id: "salud", path: "section/salud" },
] as const;

function t(locale: Locale) {
  if (locale === "zh") {
    return {
      tagline: "真相至上",
      search: "搜索",
      menu: "菜单",
      labels: {
        nacionales: "国内",
        internacionales: "国际",
        opiniones: "观点",
        ciencias: "科学",
        criptos: "加密",
        trading: "交易",
        futurologia: "未来",
        filosofia: "哲学",
        entretenimiento: "娱乐",
        curiosidades: "冷知识",
        salud: "健康",
      } as Record<string, string>,
    };
  }
  if (locale === "en") {
    return {
      tagline: "Truth above all",
      search: "Search",
      menu: "Menu",
      labels: {
        nacionales: "National",
        internacionales: "World",
        opiniones: "Opinion",
        ciencias: "Science",
        criptos: "Crypto",
        trading: "Trading",
        futurologia: "Futurology",
        filosofia: "Philosophy",
        entretenimiento: "Trends",
        curiosidades: "Curiosities",
        salud: "Health",
      } as Record<string, string>,
    };
  }
  return {
    tagline: "La verdad ante todo",
    search: "Buscar",
    menu: "Menú",
    labels: {
      nacionales: "Nacionales",
      internacionales: "Mundo",
      opiniones: "Opiniones",
      ciencias: "Ciencias",
      criptos: "Criptos",
      trading: "Trading",
      futurologia: "Futurología",
      filosofia: "Filosofía",
      entretenimiento: "Tendencias",
      curiosidades: "Curiosidades",
      salud: "Salud",
    } as Record<string, string>,
  };
}

export default function Header({ locale }: { locale: Locale }) {
  const M = t(locale);
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  // Para marcar "activo" en la catbar (simple)
  const activeKey = useMemo(() => {
    const p = pathname || "";
    const parts = p.split("/");
    // /es/section/nacionales -> ["", "es", "section", "nacionales"]
    if (parts[2] === "section" && parts[3]) return parts[3];
    return "";
  }, [pathname]);

  return (
    <header className="site-header">
      <div className="container">
        {/* Row 1 */}
        <div className="topbar">
          <Link href={`/${locale}`} className="brand" aria-label="Home">
            {/* ✅ Logo */}
            <Image
              src="/logo.png"              // si lo pusiste en frontend/public/logo.png
              alt="Newsoras"
              width={36}
              height={36}
              priority
              className="brand-logo"
            />

            {/* (opcional) si querés seguir usando el mark, dejalo; si no, sacalo */}
            {/* <div className="brand-mark" /> */}

            <div className="brand-text">
              <div className="brand-title">Newsoras</div>
              <div className="brand-subtitle">{M.tagline}</div>
            </div>
          </Link>

          <div className="header-actions">
            <Link className="icon-btn" href={`/${locale}/search`} aria-label={M.search} title={M.search}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" stroke="currentColor" strokeWidth="2" />
                <path d="M16.5 16.5 21 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </Link>
  <ThemeToggle />

{/* Language visible (mobile + desktop) */}
<LanguageSwitcher locale={locale} variant="chip" />

            {/* Mobile menu button */}
            <button
              type="button"
              className="icon-btn"
              aria-label={M.menu}
              title={M.menu}
              onClick={() => setOpen(true)}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </button>
          </div>
        </div>

        {/* Row 2: catbar */}
        <nav className="catbar" role="navigation" aria-label="Sections">
          {NAV.map((n) => {
            const href = `/${locale}/${n.path}`;
            return (
              <Link
                key={n.id}
                className="catlink"
                href={href}
                data-active={activeKey === n.path.split("/")[1] ? "true" : "false"}
              >
                {M.labels[n.id]}
              </Link>
            );
          })}
        </nav>
      </div>

      {/* Mobile drawer + overlay */}
      {open ? (
        <>
          <div className="overlay" onClick={() => setOpen(false)} aria-hidden="true" />

          <div className="menu-drawer" role="dialog" aria-modal="true" aria-label="Menu">
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
              <div className="menu-title">{M.menu}</div>
              <button className="menu-close" onClick={() => setOpen(false)} aria-label="Close">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </button>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {NAV.map((n) => (
                <Link
                  key={n.id}
                  className="badge"
                  href={`/${locale}/${n.path}`}
                  onClick={() => setOpen(false)}
                  style={{ width: "fit-content" }}
                >
                  {M.labels[n.id]}
                </Link>
              ))}
            </div>

            <div style={{ height: 1, background: "var(--line)", margin: "8px 0" }} />

            <div style={{ fontWeight: 900 }}>
              {locale === "es" ? "Idioma" : locale === "zh" ? "语言" : "Language"}
            </div>

            <LanguageSwitcher locale={locale} variant="chip" />
          </div>
        </>
      ) : null}
    </header>
  );
}