import { useAppState } from '../state/context';
import { colors } from '../theme';

/**
 * Find the best position to highlight the key character within a label.
 * Prefers matching at the start of a word; falls back to any position.
 * Returns -1 if not found.
 */
function findKeyIndex(key: string, label: string): number {
  const lowerKey = key.toLowerCase();
  let offset = 0;
  for (const part of label.split(/(\s+)/)) {
    if (part.trim() && part.toLowerCase().startsWith(lowerKey)) {
      return offset;
    }
    offset += part.length;
  }
  return label.toLowerCase().indexOf(lowerKey);
}

function Shortcut({ keyName, label }: { keyName: string; label: string }) {
  // Single-char keys: highlight the key letter inline within the label
  if (keyName.length === 1) {
    const idx = findKeyIndex(keyName, label);
    if (idx >= 0) {
      const before = label.slice(0, idx);
      const after = label.slice(idx + 1);
      return (
        <text>
          {before ? <span fg={colors.textSecondary}>{before}</span> : null}
          <span fg={colors.accentBlue}>
            <u>
              <strong>{keyName}</strong>
            </u>
          </span>
          <span fg={colors.textSecondary}>{after} </span>
        </text>
      );
    }
  }
  // Fallback for special/multi-char keys or when key not found in label
  return (
    <text>
      <span fg={colors.accentBlue}>
        <strong>{keyName}</strong>
      </span>
      <span fg={colors.textSecondary}> {label} </span>
    </text>
  );
}

export function StatusBar() {
  const state = useAppState();

  if (state.overlay !== 'none') return null;

  const feedShortcuts = (
    <box flexDirection="row" gap={1}>
      <Shortcut keyName="j/k" label="nav" />
      <Shortcut keyName="h/l ←/→" label="panes" />
      <Shortcut keyName="Enter" label="select" />
      <Shortcut keyName="a" label="add" />
      <Shortcut keyName="e" label="edit" />
      <Shortcut keyName="d" label="delete" />
      <Shortcut keyName="R" label="mark all" />
      <Shortcut keyName="f" label="fetch" />
      <Shortcut keyName="F" label="fetch all" />
      <Shortcut keyName="Tab" label="next" />
      <Shortcut keyName="?" label="help" />
      <Shortcut keyName="q" label="quit" />
    </box>
  );

  const articleShortcuts = (
    <box flexDirection="row" gap={1}>
      <Shortcut keyName="j/k" label="nav" />
      <Shortcut keyName="h/l ←/→" label="panes" />
      <Shortcut keyName="Enter" label="open" />
      <Shortcut keyName="s" label="star" />
      <Shortcut keyName="r" label="read" />
      <Shortcut keyName="R" label="mark all" />
      <Shortcut keyName="f" label="fetch" />
      <Shortcut keyName="F" label="fetch all" />
      <Shortcut keyName="u" label="unread" />
      <Shortcut keyName="t" label="sort" />
      <Shortcut keyName="/" label="search" />
      <Shortcut keyName="Tab" label="next" />
      <Shortcut keyName="?" label="help" />
      <Shortcut keyName="q" label="quit" />
    </box>
  );

  const readerShortcuts = (
    <box flexDirection="row" gap={1}>
      <Shortcut keyName="↑/↓" label="scroll" />
      <Shortcut keyName="n/p" label="next/prev" />
      <Shortcut keyName="s" label="star" />
      <Shortcut keyName="r" label="read" />
      <Shortcut keyName="o" label="open" />
      <Shortcut keyName="u" label="urls" />
      <Shortcut keyName="h/l ←/→" label="panes" />
      <Shortcut keyName="Space" label="pgdn" />
      <Shortcut keyName="?" label="help" />
      <Shortcut keyName="q" label="quit" />
    </box>
  );

  return (
    <box height={1} backgroundColor={colors.bgHighlight} paddingLeft={1}>
      {state.activePanel === 'feeds' && feedShortcuts}
      {state.activePanel === 'articles' && articleShortcuts}
      {state.activePanel === 'reader' && readerShortcuts}
    </box>
  );
}