"use client";

import { RefreshCw } from "lucide-react";
import { type Lang } from "@/lib/config";
import { AnimatedSearchBar } from "@/components/dashboard/AnimatedSearchBar";
import NotificationDropdown from "@/components/dashboard/NotificationDropdown";
import AccountDropdown from "@/components/dashboard/AccountDropdown";
import { getWorkspaceDisplay } from "@/lib/types/dashboard.types";
import BrandLogo from "@/components/BrandLogo";
import type { Session } from "next-auth";
import type { OrgRole } from "@/lib/types/organization.types";
import type { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";

type DashboardDictionary = typeof dashboardEn;

interface DashboardHeaderProps {
  lang: Lang;
  dt: DashboardDictionary;
  isAr: boolean;
  refreshing: boolean;
  session: Session;
  organizationRole: OrgRole | null;
  userIndustry: string | null;
  onRefresh: () => void;
  onOpenSettings: () => void;
  onOpenBilling: () => void;
}

export function DashboardHeader({
  lang,
  dt,
  isAr,
  refreshing,
  session,
  organizationRole,
  userIndustry,
  onRefresh,
  onOpenSettings,
  onOpenBilling,
}: DashboardHeaderProps) {
  const workspace = getWorkspaceDisplay(userIndustry, isAr);

  return (
    <header className="sticky top-0 z-50 border-b border-slate-200/80 bg-white/80 backdrop-blur-xl shadow-sm">
      <div className="flex items-center justify-between px-4 py-3 sm:px-6">
        {/* Logo + Workspace Badge */}
        <div className="flex shrink-0 items-center gap-4">
          <BrandLogo href={`/${lang}/dashboard`} size="sm" />
          <div className="hidden md:flex items-center gap-2 rounded-full bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200/50 px-4 py-1.5">
            <span className="text-emerald-600">{workspace.icon}</span>
            <span className="text-sm font-semibold text-emerald-700">
              {workspace.name}
            </span>
          </div>
        </div>

        {/* Center: Quick Search (Desktop) with Animated Placeholder */}
        <div className="hidden lg:flex items-center flex-1 max-w-md mx-8">
          <AnimatedSearchBar isAr={isAr} />
        </div>

        {/* Right: Actions */}
        <div className="flex items-center gap-2 sm:gap-3">
          <button
            onClick={onRefresh}
            disabled={refreshing}
            className="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 transition-all hover:border-brand-green hover:text-brand-green hover:shadow-md disabled:opacity-50"
            title={dt.refresh}
          >
            <RefreshCw
              className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`}
            />
          </button>

          <NotificationDropdown lang={lang} />

          <AccountDropdown
            session={session}
            lang={lang}
            onOpenSettings={onOpenSettings}
            onOpenBilling={onOpenBilling}
            organizationRole={organizationRole}
          />
        </div>
      </div>
    </header>
  );
}

export default DashboardHeader;