import Link from "next/link";
import { Search } from "lucide-react";
import { ThemeToggle } from "./theme-toggle";
import { MobileMenu } from "./mobile-menu";
import { Ticker } from "./ticker";

const NAV_ITEMS = [
  { label: "Crypto", href: "/category/crypto" },
  { label: "Chứng khoán", href: "/category/chung-khoan" },
  { label: "Vàng", href: "/category/vang" },
  { label: "Forex", href: "/category/forex" },
  { label: "Phân tích", href: "/category/phan-tich" },
  { label: "Tin Nóng", href: "/category/tin-nong" },
];

function formatVietnameseDate(d: Date): string {
  return d
    .toLocaleDateString("vi-VN", {
      weekday: "long",
      day: "2-digit",
      month: "long",
      year: "numeric",
    })
    .toUpperCase();
}

/**
 * Vietnam stock session status based on Asia/Ho_Chi_Minh time.
 * HOSE: 09:00-11:30 morning, 13:00-14:45 afternoon, ATC 14:45-15:00.
 */
function vnSession(d: Date): { label: string; status: "open" | "break" | "closed" | "weekend" } {
  // Get Vietnam time even if server is in UTC
  const vn = new Date(d.toLocaleString("en-US", { timeZone: "Asia/Ho_Chi_Minh" }));
  const day = vn.getDay(); // 0=Sun ... 6=Sat
  const minutes = vn.getHours() * 60 + vn.getMinutes();
  if (day === 0 || day === 6) return { label: "PHIÊN GIAO DỊCH · NGHỈ CUỐI TUẦN", status: "weekend" };
  if (minutes >= 540 && minutes < 690) return { label: "PHIÊN GIAO DỊCH · MỞ (SÁNG)", status: "open" };
  if (minutes >= 690 && minutes < 780) return { label: "PHIÊN GIAO DỊCH · NGHỈ TRƯA", status: "break" };
  if (minutes >= 780 && minutes < 900) return { label: "PHIÊN GIAO DỊCH · MỞ (CHIỀU)", status: "open" };
  return { label: "PHIÊN GIAO DỊCH · ĐÃ ĐÓNG", status: "closed" };
}

export async function Header() {
  const now = new Date();
  const today = formatVietnameseDate(now);
  const session = vnSession(now);
  const dotColor =
    session.status === "open"
      ? "var(--up)"
      : session.status === "break"
      ? "var(--gold)"
      : "var(--ink-3)";

  return (
    <>
      <Ticker />
      <header
        className="border-b hairline-strong"
        style={{ background: "var(--paper)" }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10">
          {/* Top bar: date + session status + theme toggle */}
          <div
            className="flex items-center justify-between py-2.5 border-b hairline text-[11px] font-mono uppercase tracking-wider"
            style={{ color: "var(--ink-3)" }}
          >
            <span className="truncate">{today}</span>
            <div className="flex items-center gap-3">
              <span className="hidden sm:flex items-center gap-1.5">
                <span
                  className="w-1.5 h-1.5 rounded-full"
                  style={{
                    background: dotColor,
                    animation: session.status === "open" ? "pulse 2s infinite" : "none",
                  }}
                  aria-hidden
                />
                {session.label}
              </span>
              <ThemeToggle />
            </div>
          </div>

          {/* Masthead title */}
          <div className="text-center py-6 lg:py-10">
            <Link href="/" className="logo-display block" aria-label="Finzone Network">
              Finzone
            </Link>
            <p className="eyebrow mt-3">
              Trang tin tài chính · Đầu tư · Phân tích thị trường
            </p>
          </div>

          {/* Nav */}
          <nav
            className="flex items-center justify-center gap-1 lg:gap-3 py-3 border-t hairline overflow-x-auto scrollbar-hide"
            aria-label="Navigation chính"
          >
            {NAV_ITEMS.map((item, i) => (
              <span key={item.href} className="flex items-center gap-1 lg:gap-3">
                <Link
                  href={item.href}
                  className="px-3 py-1.5 text-[11px] lg:text-[13px] font-medium uppercase tracking-wider whitespace-nowrap hover:underline underline-offset-4"
                  style={{ color: "var(--ink-2)" }}
                >
                  {item.label}
                </Link>
                {i < NAV_ITEMS.length - 1 && (
                  <span style={{ color: "var(--ink-3)" }} aria-hidden>
                    ·
                  </span>
                )}
              </span>
            ))}
            <Link
              href="/tim-kiem"
              aria-label="Tìm kiếm"
              className="ml-2 inline-flex items-center justify-center w-8 h-8 rounded hover:bg-[var(--bg-2)]"
              style={{ color: "var(--ink-2)" }}
            >
              <Search size={16} />
            </Link>
            <span className="lg:hidden">
              <MobileMenu items={NAV_ITEMS} />
            </span>
          </nav>
        </div>
      </header>
    </>
  );
}