// MFM Chat — Sidebar.
// Matches components/app-sidebar.tsx + components/sidebar-history.tsx +
// components/sidebar-user-nav.tsx visually.

const SidebarSection = ({ label, children }) => (
  <div className="px-2 py-2">
    {label && (
      <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
        {label}
      </div>
    )}
    <div className="flex flex-col">{children}</div>
  </div>
);

const SidebarItem = ({ active, onClick, children, onDelete }) => (
  <div
    className={`group/item flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors ${
      active
        ? "bg-sidebar-accent text-sidebar-accent-foreground"
        : "text-sidebar-foreground hover:bg-sidebar-accent"
    }`}
    onClick={onClick}
  >
    <span className="truncate">{children}</span>
    {onDelete && (
      <button
        type="button"
        onClick={(e) => {
          e.stopPropagation();
          onDelete();
        }}
        className="opacity-0 group-hover/item:opacity-100 transition-opacity h-6 w-6 inline-flex items-center justify-center rounded-md hover:bg-background/50"
        aria-label="More"
      >
        <MoreHorizontalIcon size={14} />
      </button>
    )}
  </div>
);

const SidebarUserNav = ({ user }) => (
  <div className="flex items-center justify-between gap-2 rounded-md p-2 hover:bg-sidebar-accent cursor-pointer">
    <div className="flex items-center gap-2 min-w-0">
      <div className="h-7 w-7 shrink-0 rounded-full bg-gradient-to-br from-zinc-300 to-zinc-500 ring-1 ring-border" />
      <div className="min-w-0">
        <div className="truncate text-sm font-medium text-sidebar-foreground">
          {user.email}
        </div>
        <div className="truncate text-[11px] text-muted-foreground">
          {user.plan}
        </div>
      </div>
    </div>
    <ChevronDownIcon size={14} />
  </div>
);

const Sidebar = ({
  open,
  onToggle,
  chats,
  activeId,
  onSelect,
  onNew,
  onDeleteAll,
  user,
}) => {
  if (!open) return null;

  // group chats into Today / Last 7 days / Older
  const today = chats.filter((c) => c.bucket === "today");
  const week = chats.filter((c) => c.bucket === "week");
  const older = chats.filter((c) => c.bucket === "older");

  return (
    <aside
      className="flex h-full w-[260px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar"
      style={{ color: "var(--sidebar-foreground)" }}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-2 pt-2 pb-1.5">
        <div className="flex items-center gap-2.5 pl-1">
          <div
            className="text-sidebar-foreground"
            style={{
              fontWeight: 600,
              fontSize: "15px",
              lineHeight: "1.2",
              letterSpacing: "-0.01em",
            }}
          >
            IRIS 2.0
          </div>
        </div>
        <div className="flex items-center gap-1">
          <Tooltip label="Delete All Chats" side="bottom">
            <Button variant="ghost" size="icon-sm" onClick={onDeleteAll} aria-label="Delete all">
              <TrashIcon size={14} />
            </Button>
          </Tooltip>
          <Tooltip label="New Chat" side="bottom">
            <Button variant="ghost" size="icon-sm" onClick={onNew} aria-label="New chat">
              <PlusIcon size={14} />
            </Button>
          </Tooltip>
        </div>
      </div>

      {/* History */}
      <div className="flex-1 overflow-y-auto">
        {today.length > 0 && (
          <SidebarSection label="Today">
            {today.map((c) => (
              <SidebarItem
                key={c.id}
                active={c.id === activeId}
                onClick={() => onSelect(c.id)}
                onDelete={() => {}}
              >
                {c.title}
              </SidebarItem>
            ))}
          </SidebarSection>
        )}
        {week.length > 0 && (
          <SidebarSection label="Last 7 days">
            {week.map((c) => (
              <SidebarItem
                key={c.id}
                active={c.id === activeId}
                onClick={() => onSelect(c.id)}
                onDelete={() => {}}
              >
                {c.title}
              </SidebarItem>
            ))}
          </SidebarSection>
        )}
        {older.length > 0 && (
          <SidebarSection label="Older">
            {older.map((c) => (
              <SidebarItem
                key={c.id}
                active={c.id === activeId}
                onClick={() => onSelect(c.id)}
                onDelete={() => {}}
              >
                {c.title}
              </SidebarItem>
            ))}
          </SidebarSection>
        )}
      </div>

      {/* Footer */}
      <div className="p-2 border-t border-sidebar-border">
        <SidebarUserNav user={user} />
      </div>
    </aside>
  );
};

Object.assign(window, { Sidebar });