import { useLanguage } from "@/hooks/use-language";
import { MessageCircle, Bell, Languages } from "lucide-react";
import { Link } from "@tanstack/react-router";
import { useNotificationCount } from "@/hooks/use-notifications";

export function TopHeader() {
  const { tr, lang, toggleLang } = useLanguage();
  const { data: notifCount = 0 } = useNotificationCount();

  const quickButtons = [
    { labelKey: "received", color: "bg-primary text-primary-foreground", to: "/sales" },
    { labelKey: "paymentLabel", color: "bg-chart-4 text-white", to: "/sales" },
    { labelKey: "purchaseBtn", color: "bg-chart-5 text-white", to: "/products" },
    { labelKey: "saleBtn", color: "bg-chart-2 text-white", to: "/sales/create" },
  ];

  return (
    <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-card px-5">
      <div className="flex items-center gap-3">
        <Link
          to="/"
          className="flex items-center gap-2 text-sm font-semibold text-foreground hover:text-primary transition-colors"
        >
          <MessageCircle className="h-4 w-4" />
          {tr("chat")}
        </Link>

        <div className="flex items-center gap-2 ml-3">
          {quickButtons.map((btn) => (
            <Link
              key={btn.labelKey}
              to={btn.to}
              className={`rounded-full px-3.5 py-1.5 text-xs font-semibold transition-opacity hover:opacity-90 ${btn.color}`}
            >
              {tr(btn.labelKey)}
            </Link>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-3">
        <Link
          to="/reports"
          className="rounded-lg border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted transition-colors"
        >
          {tr("accountBook")}
        </Link>

        <button
          onClick={toggleLang}
          className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted transition-colors"
        >
          <Languages className="h-3.5 w-3.5" />
          {lang === "bn" ? "EN" : "বাং"}
        </button>

        <Link
          to="/notifications"
          className="relative rounded-lg p-2 text-muted-foreground hover:bg-muted transition-colors"
          aria-label="Notifications"
        >
          <Bell className="h-4 w-4" />
          {notifCount > 0 && (
            <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-bold text-destructive-foreground">
              {notifCount > 99 ? "99+" : notifCount}
            </span>
          )}
        </Link>

        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">
          N
        </div>
      </div>
    </header>
  );
}
