import { Plus, X } from 'lucide-react';
import { formatCurrency } from '@/utils/indicators';

export interface PlanKeyLevelsEditorProps {
  support: number[];
  resistance: number[];
  isEditing: boolean;
  onAddSupport: () => void;
  onAddResistance: () => void;
  onRemoveSupport: (index: number) => void;
  onRemoveResistance: (index: number) => void;
  onUpdateSupport: (index: number, value: number) => void;
  onUpdateResistance: (index: number, value: number) => void;
}

export function PlanKeyLevelsEditor({
  support,
  resistance,
  isEditing,
  onAddSupport,
  onAddResistance,
  onRemoveSupport,
  onRemoveResistance,
  onUpdateSupport,
  onUpdateResistance,
}: PlanKeyLevelsEditorProps): JSX.Element {
  const renderLevelList = (
    title: string,
    levels: number[],
    color: 'green' | 'red',
    onAdd: () => void,
    onRemove: (index: number) => void,
    onUpdate: (index: number, value: number) => void
  ) => {
    const colorClasses = {
      green: {
        badge: 'bg-green-500/20 text-green-300 border-green-500/30',
        button: 'text-green-400 hover:text-green-300',
        input: 'border-green-500/30 focus:border-green-500',
      },
      red: {
        badge: 'bg-red-500/20 text-red-300 border-red-500/30',
        button: 'text-red-400 hover:text-red-300',
        input: 'border-red-500/30 focus:border-red-500',
      },
    };

    const classes = colorClasses[color];

    return (
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h5 className="text-sm font-medium text-slate-300">{title}</h5>
          {isEditing && (
            <button
              onClick={onAdd}
              className={`inline-flex items-center gap-1 text-sm ${classes.button}`}
              aria-label={`Add ${title.toLowerCase()} level`}
            >
              <Plus className="h-4 w-4" aria-hidden="true" />
              Add
            </button>
          )}
        </div>

        <div className="space-y-2">
          {levels.length === 0 ? (
            <p className="text-sm text-slate-500 italic">No levels defined</p>
          ) : (
            levels.map((level, index) => (
              <div key={`${level}-${index}`} className="flex items-center gap-2">
                {isEditing ? (
                  <>
                    <input
                      type="number"
                      value={level}
                      onChange={(e) => onUpdate(index, parseFloat(e.target.value) || 0)}
                      step="0.01"
                      className={`flex-1 rounded-lg border bg-slate-800 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-offset-0 ${classes.input}`}
                    />
                    <button
                      onClick={() => onRemove(index)}
                      className="p-2 text-slate-400 hover:text-red-400 transition-colors"
                      aria-label={`Remove ${title.toLowerCase()} level`}
                    >
                      <X className="h-4 w-4" aria-hidden="true" />
                    </button>
                  </>
                ) : (
                  <div className={`flex-1 rounded-lg border px-3 py-2 ${classes.badge}`}>
                    {formatCurrency(level)}
                  </div>
                )}
              </div>
            ))
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="space-y-4">
      <h4 className="text-sm font-semibold text-slate-300">Key Levels</h4>
      <div className="grid gap-6 sm:grid-cols-2">
        {renderLevelList(
          'Support Levels',
          support,
          'green',
          onAddSupport,
          onRemoveSupport,
          onUpdateSupport
        )}
        {renderLevelList(
          'Resistance Levels',
          resistance,
          'red',
          onAddResistance,
          onRemoveResistance,
          onUpdateResistance
        )}
      </div>
    </div>
  );
}
