"use client";

// The workspace view-mode control: [ Search | Chat | Split ]. The two focused
// single-pane views come first, the combined view last. Search and Chat are real
// Links (client-side routing between `/` and `/ask`, so the URL + the persistent
// search bar stay in lockstep); Split is a client toggle that shows both panes
// side by side. Below `lg` Split isn't offered and the control degrades to the
// two-state Search ⇄ Chat tabs — fullscreen-either is the only sensible form on a
// phone. Trailing slashes match the static export's trailingSlash:true.

import Link from "next/link";
import { ColumnsIcon, MessageSquareIcon, SearchIcon } from "lucide-react";
import { useWorkspaceView } from "./WorkspaceView";

// Reads its state from WorkspaceViewProvider rather than taking props, because
// it is rendered in the search bar (a common/ component that cannot import it)
// while the panes it governs are rendered in WorkspaceView.
export default function WorkspaceNav() {
  const { onAsk, view, wide, setSplit } = useWorkspaceView();
  const onPickSingle = () => setSplit(false);
  const onPickSplit = () => setSplit(true);
  const split = view === "split";
  const base =
    "inline-flex items-center gap-1.5 px-3 py-1.5 font-medium transition-colors";
  const active = "bg-primary text-primary-foreground";
  const idle =
    "text-muted-foreground hover:bg-accent hover:text-accent-foreground";

  return (
    <div
      role="group"
      aria-label="Search, chat, or split view"
      data-testid="workspace-nav"
      className="inline-flex shrink-0 self-start overflow-hidden rounded-md border border-border bg-muted text-sm"
    >
      <Link
        href="/"
        aria-current={!onAsk && !split ? "page" : undefined}
        onClick={onPickSingle}
        className={`${base} ${!split && !onAsk ? active : idle}`}
      >
        <SearchIcon className="size-3.5" /> Search
      </Link>
      <Link
        href="/ask/"
        aria-current={onAsk && !split ? "page" : undefined}
        onClick={onPickSingle}
        className={`${base} ${!split && onAsk ? active : idle}`}
      >
        <MessageSquareIcon className="size-3.5" /> Chat
      </Link>
      {wide && (
        <button
          type="button"
          aria-pressed={split}
          data-testid="view-split"
          onClick={onPickSplit}
          className={`${base} border-l border-border ${split ? active : idle}`}
        >
          <ColumnsIcon className="size-3.5" /> Split
        </button>
      )}
    </div>
  );
}