// MFM Chat — Chat header (sticky top bar in the main column).
// Matches components/chat-header.tsx.

const VisibilitySelector = ({ value, onChange }) => {
  const [open, setOpen] = React.useState(false);
  const options = [
    { id: "private", label: "Private", description: "Only you can access this chat", Icon: LockIcon },
    { id: "public", label: "Public", description: "Anyone with the link can access this chat", Icon: GlobeIcon },
  ];
  const current = options.find((o) => o.id === value) || options[0];
  const Icon = current.Icon;
  return (
    <div className="relative">
      <Button
        variant="outline"
        className="h-8 px-2 text-sm"
        onClick={() => setOpen((o) => !o)}
      >
        <Icon size={14} />
        <span>{current.label}</span>
        <ChevronDownIcon size={14} />
      </Button>
      {open && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
          <div className="absolute left-0 top-full z-50 mt-1 w-[260px] rounded-md border border-border bg-popover p-1 shadow-md">
            {options.map((o) => {
              const OptIcon = o.Icon;
              return (
                <button
                  key={o.id}
                  type="button"
                  onClick={() => {
                    onChange(o.id);
                    setOpen(false);
                  }}
                  className="flex w-full items-start gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent"
                >
                  <OptIcon size={14} />
                  <div className="flex-1">
                    <div className="text-sm">{o.label}</div>
                    <div className="text-xs text-muted-foreground">
                      {o.description}
                    </div>
                  </div>
                  {value === o.id && (
                    <span className="text-foreground mt-0.5">
                      <CheckCircleFillIcon size={14} />
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
};

const ChatHeader = ({
  sidebarOpen,
  onToggleSidebar,
  visibility,
  onChangeVisibility,
  onNew,
}) => (
  <header className="sticky top-0 z-20 flex items-center gap-2 bg-background px-2 py-1.5">
    {!sidebarOpen && (
      <Tooltip label="Toggle sidebar" side="bottom">
        <Button
          variant="ghost"
          size="icon-sm"
          onClick={onToggleSidebar}
          aria-label="Toggle sidebar"
        >
          <SidebarLeftIcon size={16} />
        </Button>
      </Tooltip>
    )}

    {!sidebarOpen && (
      <Button
        variant="outline"
        className="h-8 px-2"
        onClick={onNew}
      >
        <PlusIcon size={14} />
        <span className="hidden md:inline">New Chat</span>
      </Button>
    )}

    <VisibilitySelector value={visibility} onChange={onChangeVisibility} />
  </header>
);

Object.assign(window, { ChatHeader, VisibilitySelector });