kandev/apps/web/components/kanban/kanban-header.tsx

'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Button } from '@kandev/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@kandev/ui/toggle-group';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@kandev/ui/tooltip';
import { IconPlus, IconSettings, IconList, IconLayoutKanban, IconMenu2, IconChartBar, IconTimeline } from '@tabler/icons-react';
import { KanbanDisplayDropdown } from '../kanban-display-dropdown';
import { TaskSearchInput } from './task-search-input';
import { KanbanHeaderMobile } from './kanban-header-mobile';
import { MobileMenuSheet } from './mobile-menu-sheet';
import { linkToTasks } from '@/lib/links';
import { useResponsiveBreakpoint } from '@/hooks/use-responsive-breakpoint';
import { useAppStore } from '@/components/state-provider';
import { useKanbanDisplaySettings } from '@/hooks/use-kanban-display-settings';

type KanbanHeaderProps = {
  onCreateTask: () => void;
  workspaceId?: string;
  currentPage?: 'kanban' | 'tasks';
  searchQuery?: string;
  onSearchChange?: (query: string) => void;
  isSearchLoading?: boolean;
};

type ViewToggleItem = {
  value: string;
  icon: typeof IconLayoutKanban;
  label: string;
};

const VIEW_TOGGLE_ITEMS: ViewToggleItem[] = [
  { value: 'kanban', icon: IconLayoutKanban, label: 'Kanban' },
  { value: 'pipeline', icon: IconTimeline, label: 'Pipeline' },
  { value: 'list', icon: IconList, label: 'List' },
];

function ViewToggleGroup({
  toggleValue,
  onValueChange,
  className,
  itemClassName,
}: {
  toggleValue: string;
  onValueChange: (value: string) => void;
  className?: string;
  itemClassName?: string;
}) {
  return (
    <ToggleGroup
      type="single"
      value={toggleValue}
      onValueChange={onValueChange}
      variant="outline"
      className={className}
    >
      {VIEW_TOGGLE_ITEMS.map(({ value, icon: Icon, label }) => (
        <ToggleGroupItem
          key={value}
          value={value}
          className={`cursor-pointer data-[state=on]:bg-muted data-[state=on]:text-foreground ${itemClassName ?? ''}`}
        >
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="flex items-center justify-center">
                <Icon className="h-4 w-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>{label}</TooltipContent>
          </Tooltip>
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  );
}

function getToggleValue(currentPage: string, kanbanViewMode: string | null): string {
  if (currentPage === 'tasks') return 'list';
  if (kanbanViewMode === 'graph2') return 'pipeline';
  return 'kanban';
}

function TabletHeader({
  onCreateTask,
  searchQuery,
  onSearchChange,
  isSearchLoading,
  toggleValue,
  handleViewChange,
  setMenuOpen,
}: {
  onCreateTask: () => void;
  searchQuery: string;
  onSearchChange?: (query: string) => void;
  isSearchLoading: boolean;
  toggleValue: string;
  handleViewChange: (value: string) => void;
  setMenuOpen: (open: boolean) => void;
}) {
  return (
    <header className="flex items-center justify-between p-4 pb-3 gap-3">
      <Link href="/" className="text-xl font-bold hover:opacity-80 flex-shrink-0">
        KanDev
      </Link>
      {onSearchChange && (
        <TaskSearchInput
          value={searchQuery}
          onChange={onSearchChange}
          placeholder="Search..."
          isLoading={isSearchLoading}
          className="flex-1 max-w-[200px]"
        />
      )}
      <div className="flex items-center gap-2">
        <Button onClick={onCreateTask} size="lg" className="cursor-pointer">
          <IconPlus className="h-4 w-4" />
          <span className="hidden sm:inline ml-1">Add task</span>
        </Button>
        <TooltipProvider>
          <ViewToggleGroup
            toggleValue={toggleValue}
            onValueChange={handleViewChange}
            className="h-8"
            itemClassName="h-8 w-8"
          />
        </TooltipProvider>
        <Button
          variant="outline"
          size="icon-lg"
          onClick={() => setMenuOpen(true)}
          className="cursor-pointer"
        >
          <IconMenu2 className="h-4 w-4" />
          <span className="sr-only">Open menu</span>
        </Button>
      </div>
    </header>
  );
}

function DesktopHeader({
  onCreateTask,
  searchQuery,
  onSearchChange,
  isSearchLoading,
  toggleValue,
  handleViewChange,
}: {
  onCreateTask: () => void;
  searchQuery: string;
  onSearchChange?: (query: string) => void;
  isSearchLoading: boolean;
  toggleValue: string;
  handleViewChange: (value: string) => void;
}) {
  return (
    <header className="relative flex items-center justify-between p-4 pb-3">
      <div className="flex items-center gap-3">
        <Link href="/" className="text-2xl font-bold hover:opacity-80">
          KanDev
        </Link>
      </div>
      {onSearchChange && (
        <div className="absolute left-1/2 -translate-x-1/2">
          <TaskSearchInput
            value={searchQuery}
            onChange={onSearchChange}
            placeholder="Search tasks..."
            isLoading={isSearchLoading}
          />
        </div>
      )}
      <div className="flex items-center gap-3">
        <Button onClick={onCreateTask} className="cursor-pointer">
          <IconPlus className="h-4 w-4" />
          Add task
        </Button>
        <TooltipProvider>
          <ViewToggleGroup toggleValue={toggleValue} onValueChange={handleViewChange} />
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline" size="icon" asChild className="cursor-pointer">
                <Link href="/stats">
                  <IconChartBar className="h-4 w-4" />
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Stats</TooltipContent>
          </Tooltip>
        </TooltipProvider>
        <KanbanDisplayDropdown />
        <Link href="/settings" className="cursor-pointer">
          <Button variant="outline" className="cursor-pointer">
            <IconSettings className="h-4 w-4 mr-2" />
            Settings
          </Button>
        </Link>
      </div>
    </header>
  );
}

export function KanbanHeader({ onCreateTask, workspaceId, currentPage = 'kanban', searchQuery = '', onSearchChange, isSearchLoading = false }: KanbanHeaderProps) {
  const router = useRouter();
  const { isMobile, isTablet } = useResponsiveBreakpoint();
  const isMenuOpen = useAppStore((state) => state.mobileKanban.isMenuOpen);
  const setMenuOpen = useAppStore((state) => state.setMobileKanbanMenuOpen);

  const { kanbanViewMode, onViewModeChange } = useKanbanDisplaySettings();

  const toggleValue = getToggleValue(currentPage, kanbanViewMode);

  const handleViewChange = (value: string) => {
    if (value === 'list') {
      if (currentPage !== 'tasks') router.push(linkToTasks(workspaceId));
    } else if (value === 'kanban') {
      if (currentPage !== 'kanban') router.push('/');
      onViewModeChange('');
    } else if (value === 'pipeline') {
      if (currentPage !== 'kanban') router.push('/');
      onViewModeChange('graph2');
    }
  };

  if (isMobile) {
    return (
      <KanbanHeaderMobile
        workspaceId={workspaceId}
        currentPage={currentPage}
        searchQuery={searchQuery}
        onSearchChange={onSearchChange}
        isSearchLoading={isSearchLoading}
      />
    );
  }

  if (isTablet) {
    return (
      <>
        <TabletHeader
          onCreateTask={onCreateTask}
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          isSearchLoading={isSearchLoading}
          toggleValue={toggleValue}
          handleViewChange={handleViewChange}
          setMenuOpen={setMenuOpen}
        />
        <MobileMenuSheet
          open={isMenuOpen}
          onOpenChange={setMenuOpen}
          workspaceId={workspaceId}
          currentPage={currentPage}
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          isSearchLoading={isSearchLoading}
        />
      </>
    );
  }

  return (
    <DesktopHeader
      onCreateTask={onCreateTask}
      searchQuery={searchQuery}
      onSearchChange={onSearchChange}
      isSearchLoading={isSearchLoading}
      toggleValue={toggleValue}
      handleViewChange={handleViewChange}
    />
  );
}