import { Hash, Settings, Users } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { Room } from "./channel-sidebar";

type Props = {
  room: Room;
  onToggleSettings: () => void;
  memberCount?: number;
};

export function ChannelHeader({
  room,
  onToggleSettings,
  memberCount,
}: Props) {
  return (
    <header className="flex h-[56px] shrink-0 items-center gap-3 border-b border-border/40 bg-card/60 px-5 backdrop-blur-md">
      <div className="flex min-w-0 items-center gap-2.5">
        <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-primary/15 to-primary/[0.04] ring-1 ring-primary/[0.12] shadow-sm">
          <Hash className="size-4 text-primary/70" />
        </span>
        <div className="flex min-w-0 items-baseline gap-2">
          <h3 className="truncate text-[16px] font-bold text-foreground tracking-tight">
            {room.name}
          </h3>
          {room.topic && (
            <Tooltip>
              <TooltipTrigger className="hidden sm:block">
                <span className="max-w-[200px] cursor-default truncate text-[13px] text-muted-foreground/35">
                  {room.topic}
                </span>
              </TooltipTrigger>
              <TooltipContent
                className="max-w-sm text-xs leading-relaxed"
                side="bottom"
              >
                {room.topic}
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      </div>

      <div className="ml-auto flex items-center gap-0.5">
        {typeof memberCount === "number" && memberCount > 0 && (
          <span className="flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-[12px] text-muted-foreground/50 hover:bg-accent/40 hover:text-muted-foreground/70 transition-colors cursor-default">
            <Users className="size-3.5" />
            <span className="tabular-nums font-medium">{memberCount}</span>
          </span>
        )}

        <Tooltip>
          <TooltipTrigger
            aria-label="Channel settings"
            className="inline-flex size-8 cursor-pointer items-center justify-center rounded-lg text-muted-foreground/40 transition-[background-color,border-color,color,opacity,box-shadow,transform] duration-150 hover:bg-accent/40 hover:text-foreground"
            onClick={onToggleSettings}
          >
            <Settings className="size-[18px]" />
          </TooltipTrigger>
          <TooltipContent className="text-xs">Channel settings</TooltipContent>
        </Tooltip>
      </div>
    </header>
  );
}
