"use client";

import Link from "next/link";
import { useAuth } from "@/hooks/useAuth";
import { useHeaderSession } from "@/hooks/useHeaderSession";
import { useTheme } from "@/hooks/useTheme";
import { Button, Container } from "@/components/ui";

export function SiteHeader() {
  const { theme } = useTheme();
  const { login, loading, isAuthenticated, user } = useAuth();
  const { isSsoAuth, isLoggedIn } = useHeaderSession();
  const isPlatformAdmin =
    user?.roles?.includes("platform_admin") || user?.roles?.includes("tenant_admin");

  return (
    <header className="sticky top-0 z-50 border-b border-gray-100/80 bg-white/80 backdrop-blur-md">
      <Container className="flex h-16 items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-lg font-bold text-white shadow-md">
            {(theme?.site_name ?? "T").charAt(0)}
          </div>
          <div className="hidden sm:block">
            <p className="text-base font-bold text-secondary">{theme?.site_name ?? "Torbatyar"}</p>
            <p className="text-xs text-gray-500">پلتفرم SaaS چندسرویسی</p>
          </div>
        </Link>

        <nav className="flex flex-wrap items-center justify-end gap-2">
          {isLoggedIn ? (
            <>
              {isSsoAuth && isPlatformAdmin && (
                <Link href="/admin">
                  <Button variant="primary" size="sm">
                    پنل ادمین
                  </Button>
                </Link>
              )}
              {isSsoAuth && (
                <Link href="/dashboard">
                  <Button variant="outline" size="sm">
                    داشبورد
                  </Button>
                </Link>
              )}
              {isSsoAuth && (
                <Link href={isPlatformAdmin ? "/admin/settings" : "/dashboard/settings"}>
                  <Button variant="ghost" size="sm">
                    حساب کاربری
                  </Button>
                </Link>
              )}
            </>
          ) : (
            <Button
              variant="primary"
              size="sm"
              onClick={() => login()}
              loading={loading}
              loadingText="..."
            >
              ورود
            </Button>
          )}
        </nav>
      </Container>
    </header>
  );
}