import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

export interface PlanBiasSelectorProps {
  bias: 'BULLISH' | 'BEARISH' | 'NEUTRAL';
  isEditing: boolean;
  onChange: (bias: 'BULLISH' | 'BEARISH' | 'NEUTRAL') => void;
}

export function PlanBiasSelector({ bias, isEditing, onChange }: PlanBiasSelectorProps): JSX.Element {
  const biasOptions: Array<{ value: 'BULLISH' | 'BEARISH' | 'NEUTRAL'; label: string; icon: JSX.Element; color: 'green' | 'slate' | 'red' }> = [
    { value: 'BULLISH', label: 'Bullish', icon: <TrendingUp className="h-5 w-5" aria-hidden="true" />, color: 'green' },
    { value: 'NEUTRAL', label: 'Neutral', icon: <Minus className="h-5 w-5" aria-hidden="true" />, color: 'slate' },
    { value: 'BEARISH', label: 'Bearish', icon: <TrendingDown className="h-5 w-5" aria-hidden="true" />, color: 'red' },
  ];

  const selectedOption = biasOptions.find((opt) => opt.value === bias);

  if (!isEditing && selectedOption) {
    const colorClasses = {
      green: 'border-green-500/50 bg-green-500/10 text-green-300',
      slate: 'border-slate-500/50 bg-slate-500/10 text-slate-300',
      red: 'border-red-500/50 bg-red-500/10 text-red-300',
    };

    return (
      <div className="space-y-2">
        <label className="text-sm font-medium text-slate-400">Market Bias</label>
        <div className={`inline-flex items-center gap-2 rounded-lg border px-4 py-2 ${colorClasses[selectedOption.color]}`}>
          {selectedOption.icon}
          <span className="font-semibold">{selectedOption.label}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-slate-400">Market Bias</label>
      <div className="flex gap-2">
        {biasOptions.map((option) => {
          const isSelected = bias === option.value;
          const baseClasses = 'flex-1 inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 font-medium transition-colors cursor-pointer';

          const colorClasses = {
            green: isSelected
              ? 'border-green-500 bg-green-500/20 text-green-300'
              : 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-green-500/50 hover:text-green-400',
            slate: isSelected
              ? 'border-slate-500 bg-slate-500/20 text-slate-300'
              : 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-500/50 hover:text-slate-300',
            red: isSelected
              ? 'border-red-500 bg-red-500/20 text-red-300'
              : 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-red-500/50 hover:text-red-400',
          };

          return (
            <button
              key={option.value}
              onClick={() => onChange(option.value)}
              className={`${baseClasses} ${colorClasses[option.color]}`}
              aria-pressed={isSelected}
            >
              {option.icon}
              <span>{option.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}
