import { Link } from "@tanstack/react-router";
import { Pilcrow, Eye, Menu } from "lucide-react";
import { useReadyShareView } from "@/client/components/share/use-share-view";
import { Button } from "@/client/components/ui/button";
import { deriveSharePageAffordance } from "@/client/lib/affordance/share-page";
import { useOnline } from "@/client/hooks/use-online";
import { useScrollVisibility } from "@/client/hooks/use-scroll-visibility";

interface ShareHeaderProps {
  onToggleMobileSidebar: () => void;
}

export function ShareHeader({ onToggleMobileSidebar }: ShareHeaderProps) {
  const share = useReadyShareView();
  const online = useOnline();
  const visible = useScrollVisibility("main-content");
  const pageAffordance = deriveSharePageAffordance({
    pageKind: share.rootPage.kind,
    pageAccess: share.rootPage.permission,
    workspaceId: share.workspaceId,
    online,
  });

  return (
    <header
      className={`relative z-50 shrink-0 border-b border-zinc-800/60 bg-zinc-900/95 backdrop-blur-sm transition-[margin-top] duration-300 ease-out ${
        visible ? "mt-0" : "-mt-[61px]"
      }`}
    >
      <div className="flex items-center px-4 py-3 sm:px-6">
        <Button
          variant="ghost"
          size="sm"
          iconOnly
          onClick={onToggleMobileSidebar}
          aria-label="Toggle outline"
          icon={<Menu className="h-5 w-5" />}
          className="mr-2 md:hidden"
        />
        <Link to="/" className="group flex items-center gap-3 transition-opacity hover:opacity-80">
          <span className="inline-grid h-9 w-9 place-items-center">
            <Pilcrow
              className="h-6 w-6 text-accent-400 transition-transform duration-200 group-hover:-rotate-6"
              strokeWidth={2}
              aria-hidden="true"
            />
          </span>
          <span className="hidden sm:block">
            <strong className="block text-sm font-semibold text-zinc-100">bland</strong>
            <small className="block text-xs text-zinc-400">Docs on Cloudflare</small>
          </span>
        </Link>

        <div className="flex-1" />

        {pageAffordance.showViewOnlyBadge && (
          <span
            className="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400"
            title="Read-only. Ask the owner for edit access."
          >
            <Eye className="h-3 w-3" />
            View only
          </span>
        )}
      </div>
    </header>
  );
}