// frontend/src/shell/NavSessions.tsx
import type { ReactNode } from "react";
import type { SessionSummary } from "../api/types";

interface Props {
  sessions: SessionSummary[];
  activeSessionId: string | null;
  onOpenPanel: (id: string) => void;
  menuFor: (session: SessionSummary) => ReactNode;
}

export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }: Props) {
  if (sessions.length === 0) {
    return (
      <p className="px-1 py-6 text-center text-xs text-muted-foreground">
        No sessions yet. Start with <span className="font-medium text-foreground">New session</span>.
      </p>
    );
  }
  return (
    <ul className="flex flex-col gap-px">
      {sessions.map((s) => {
        const active = s.id === activeSessionId;
        const label = s.name || s.question || s.id;
        return (
          <li key={s.id}>
            <div
              data-testid={`session-item-${s.id}`}
              data-active={active ? "true" : "false"}
              onClick={() => onOpenPanel(s.id)}
              role="button"
              tabIndex={0}
              aria-label={label}
              title={`${label} · ${s.status}`}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  onOpenPanel(s.id);
                }
              }}
              className={[
                "group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
                active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent",
              ].join(" ")}
            >
              <span
                aria-hidden
                title={s.status}
                className={[
                  "size-1.5 shrink-0 rounded-full",
                  s.status === "open"
                    ? "bg-[oklch(var(--success))]"
                    : s.status === "finalized"
                      ? "bg-primary"
                      : "bg-muted-foreground/50",
                ].join(" ")}
              />
              <span
                className={[
                  "min-w-0 flex-1 truncate text-[0.8rem] leading-snug",
                  active ? "font-semibold text-primary" : "font-medium text-foreground/90",
                ].join(" ")}
              >
                {label}
              </span>
              {menuFor(s)}
            </div>
          </li>
        );
      })}
    </ul>
  );
}