import React from 'react';
import { BrainIcon, ZapIcon } from 'lucide-react';

import type { ICopilotThinkingMode } from '../../service/copilot/copilot.interface';
import { TURN_CREDITS, turnCost } from '../../service/copilot/pricing';

import { cn } from './cn';

/** The two modes, in the order they are offered. */
const THINKING_MODES: ReadonlyArray<{
  value: ICopilotThinkingMode;
  label: string;
  hint: string;
  icon: typeof ZapIcon;
}> = [
  {
    value: 'fast',
    label: 'Fast',
    hint: 'Answers straight away',
    icon: ZapIcon,
  },
  {
    value: 'deep',
    label: 'Deep',
    hint: 'Thinks longer before answering',
    icon: BrainIcon,
  },
];

/**
 * The composer's thinking-mode toggle, with what an answer costs in the
 * mode picked. There is deliberately no model picker: the model is ours to
 * choose, while how long to think is a trade the merchant can actually
 * judge. The chosen mode is filled rather than tinted, so which one is on
 * reads at a glance.
 */
export function ThinkingSelect({
  value,
  onChange,
  className = '',
}: {
  value: ICopilotThinkingMode;
  onChange: (mode: ICopilotThinkingMode) => void;
  className?: string;
}): React.ReactElement {
  return (
    <div className={cn('flex items-center gap-2', className)}>
      <span className="text-xs text-muted-foreground">{turnCost(value)}</span>
      <div
        role="radiogroup"
        aria-label="Thinking mode"
        className="flex items-center gap-1 rounded-full border border-border-default p-1"
      >
        {THINKING_MODES.map(mode => {
          const Icon = mode.icon;
          const isActive: boolean = mode.value === value;

          return (
            <button
              key={mode.value}
              type="button"
              role="radio"
              aria-checked={isActive}
              title={`${mode.hint} · ${TURN_CREDITS[mode.value]} credits`}
              onClick={() => onChange(mode.value)}
              className={cn(
                'flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold transition',
                isActive
                  ? 'bg-foreground text-background'
                  : 'text-foreground hover:bg-surface-active'
              )}
            >
              <Icon className="h-3.5 w-3.5" />
              {mode.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}