import { useTheme } from 'tamagui'

// MenuSelectable — one visual vocabulary shared across every selectable
// surface in the menu system (tab strip, context buttons, segments, collapsed
// indicator). Route every call site through `menuSelectableStyle(tone, tokens)`
// so tuning the selected state happens in one place.
//
// Four-tone contract — any new menu-surface control should pick one of these:
//
//   | Tone        | Background               | Content tint          | Use                                             |
//   |-------------|--------------------------|-----------------------|-------------------------------------------------|
//   | rest        | transparent              | $onSurfaceMuted       | default / unselected                            |
//   | active      | transparent              | $onSurfaceActive      | focused nav, current filter in icon-only mode   |
//   | selected    | $accentMuted (50% accent)| $onAccent             | filled toggle: segment pills, selected controls |
//   | highlighted | (caller paints accent)   | $onAccent             | strong CTA: camera FAB, primary commit button   |
//
// `selected`/`highlighted` content tint is `$onAccent` (white on most variants,
// near-black on Saffron) so the filled accent pill reads cleanly — on light
// mode, the previous `$onSurfacePrimary` (#1C1C1C) disappeared into the 50%
// accent fill.
// `highlighted` only carries the upscale here — the camera FAB paints its own
// accent gradient + glow in MenuBarUnified, so this helper's bg for
// `highlighted` is never observed by the current call sites.

export type MenuTone = 'rest' | 'active' | 'selected' | 'highlighted'

export interface MenuSelectableStyle {
  backgroundColor: string
  iconTint: string
  scale: number
}

export interface MenuSelectableTokens {
  accentMuted: string
  interactiveActive: string
  onSurfacePrimary: string
  onSurfaceMuted: string
  onSurfaceActive: string
  onAccent: string
  colorInverse: string
}

export function menuSelectableStyle(
  tone: MenuTone,
  tokens: MenuSelectableTokens
): MenuSelectableStyle {
  switch (tone) {
    case 'rest':
      return {
        backgroundColor: 'transparent',
        iconTint: tokens.onSurfaceMuted,
        scale: 1,
      }
    case 'active':
      return {
        backgroundColor: 'transparent',
        iconTint: tokens.onSurfaceActive,
        scale: 1,
      }
    case 'selected':
      return {
        backgroundColor: tokens.accentMuted,
        iconTint: tokens.onAccent,
        scale: 1,
      }
    case 'highlighted':
      return {
        backgroundColor: tokens.accentMuted,
        iconTint: tokens.onAccent,
        scale: 1.05,
      }
  }
}

// Resolve the tokens that the selectable helper needs from the current theme.
// Consolidates the `.val as string` extractions so call sites don't repeat
// them.
export function useMenuSelectableTokens(): MenuSelectableTokens {
  const theme = useTheme()
  return {
    accentMuted: theme.accentMuted.val as string,
    interactiveActive: theme.interactiveActive.val as string,
    onSurfacePrimary: theme.onSurfacePrimary.val as string,
    onSurfaceMuted: theme.onSurfaceMuted.val as string,
    onSurfaceActive: theme.onSurfaceActive.val as string,
    onAccent: theme.onAccent.val as string,
    colorInverse: theme.colorInverse.val as string,
  }
}

// Decide the tone for a bottom-tab strip entry. `highlighted` is the
// create-FAB flag carried on the tab config.
export function tabTone(focused: boolean, highlighted: boolean): MenuTone {
  if (focused && highlighted) return 'highlighted'
  if (highlighted) return 'selected'
  if (focused) return 'active'
  return 'rest'
}
