import { Box, Text } from "ink";
import { NF, COL } from "./UnifiedProjectItem.tsx";
import { palette } from "../ui/theme.ts";
import type { SortField, SortDirection } from "../types/index.ts";

interface ColumnHeaderProps {
  sortBy?: SortField;
  sortDirection?: SortDirection;
}

/**
 * Column headers for the project list
 * Matches column widths from UnifiedProjectItem exactly
 * Highlights the currently sorted column
 */
export function ColumnHeader({ sortBy = 'status', sortDirection = 'desc' }: ColumnHeaderProps) {
  // Helper to get header styling based on sort state
  const getStyle = (field: SortField) => {
    const isSorted = sortBy === field;
    return {
      color: isSorted ? palette.text.warning : palette.text.muted,
      bold: isSorted,
      underline: isSorted,
      arrow: isSorted ? (sortDirection === 'desc' ? '↓' : '↑') : '',
      bgColor: undefined,
    };
  };

  const formatHeader = (
    label: string,
    style: ReturnType<typeof getStyle>,
    width: number,
    padStart = false
  ) => {
    const text = `${label}${style.arrow ? ` ${style.arrow}` : ''}`;
    const padded = padStart ? text.padStart(width) : text.padEnd(width);
    return (
      <Text
        color={style.color}
        bold={style.bold}
        underline={style.underline}
        backgroundColor={style.bgColor}
      >
        {padded}
      </Text>
    );
  };

  const nameStyle = getStyle('name');
  const statusStyle = getStyle('status');
  const branchStyle = getStyle('branch');
  const syncStyle = getStyle('sync');
  const langStyle = getStyle('language');
  const starsStyle = getStyle('stars');
  const forksStyle = getStyle('forks');
  const activityStyle = getStyle('lastActivity');
  const sizeStyle = getStyle('size');

  return (
    <Box>
      {/* Cursor space */}
      <Text color="gray">{' '}</Text>
      
      {/* Selection "Sel " */}
      <Text color="gray">{'Sel '.padEnd(COL.sel)}</Text>
      
      {/* Status header - just icon */}
      <Text color={statusStyle.color} bold={statusStyle.bold} backgroundColor={statusStyle.bgColor}>
        {`${statusStyle.arrow || '●'}`.padEnd(COL.status)}
      </Text>
      
      {/* Source icon + Name header */}
      <Text color="gray">{NF.repo}</Text>
      <Text color="gray">{' '}</Text>
      {formatHeader('Name', nameStyle, COL.name - 2)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Branch header */}
      {formatHeader(`${NF.git_branch_oct} Branch`, branchStyle, COL.branch)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Sync header */}
      {formatHeader('Sync', syncStyle, COL.sync)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Language icon */}
      {formatHeader(NF.code, langStyle, COL.lang, true)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Stars header */}
      {formatHeader(NF.star, starsStyle, COL.stars, true)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Forks header */}
      {formatHeader(NF.repo_forked, forksStyle, COL.forks, true)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Updated header */}
      {formatHeader(NF.clock, activityStyle, COL.updated, true)}
      
      {/* Gap */}
      <Text>{'  '}</Text>
      
      {/* Size header */}
      {formatHeader(NF.database, sizeStyle, COL.size, true)}
    </Box>
  );
}

/**
 * Separator line under headers
 * No longer needed - cleaner without it
 */
export function ColumnSeparator() {
  return null;
}