import { DollarSign, Target, AlertTriangle } from 'lucide-react';

export interface PlanRiskParametersProps {
  dailyTarget: number;
  maxLoss: number;
  maxTrades: number;
  entryZoneMin: number;
  entryZoneMax: number;
  targetPrice: number;
  stopLoss: number;
  isEditing: boolean;
  onChange: (field: string, value: number) => void;
}

export function PlanRiskParameters({
  dailyTarget,
  maxLoss,
  maxTrades,
  entryZoneMin,
  entryZoneMax,
  targetPrice,
  stopLoss,
  isEditing,
  onChange,
}: PlanRiskParametersProps): JSX.Element {
  const renderField = (
    label: string,
    value: number,
    field: string,
    icon: JSX.Element,
    prefix: string = '$',
    step: number = 1
  ) => {
    if (!isEditing) {
      return (
        <div className="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/50 p-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700 text-blue-400">
            {icon}
          </div>
          <div className="flex-1">
            <p className="text-xs text-slate-400">{label}</p>
            <p className="text-lg font-semibold text-white">
              {prefix}{value.toFixed(2)}
            </p>
          </div>
        </div>
      );
    }

    return (
      <div className="space-y-2">
        <label htmlFor={field} className="text-sm font-medium text-slate-400">
          {label}
        </label>
        <div className="flex items-center gap-2">
          <span className="text-slate-400">{prefix}</span>
          <input
            id={field}
            type="number"
            value={value}
            onChange={(e) => onChange(field, parseFloat(e.target.value) || 0)}
            step={step}
            className="flex-1 rounded-lg border border-slate-600 bg-slate-800 px-3 py-2 text-white focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
          />
        </div>
      </div>
    );
  };

  return (
    <div className="space-y-4">
      <h4 className="text-sm font-semibold text-slate-300">Risk Parameters</h4>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {renderField(
          'Daily Target',
          dailyTarget,
          'dailyTarget',
          <Target className="h-5 w-5" aria-hidden="true" />
        )}
        {renderField(
          'Max Loss',
          maxLoss,
          'maxLoss',
          <AlertTriangle className="h-5 w-5" aria-hidden="true" />
        )}
        {renderField(
          'Max Trades',
          maxTrades,
          'maxTrades',
          <DollarSign className="h-5 w-5" aria-hidden="true" />,
          '',
          1
        )}
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        {renderField(
          'Entry Zone Min',
          entryZoneMin,
          'entryZoneMin',
          <DollarSign className="h-5 w-5" aria-hidden="true" />
        )}
        {renderField(
          'Entry Zone Max',
          entryZoneMax,
          'entryZoneMax',
          <DollarSign className="h-5 w-5" aria-hidden="true" />
        )}
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        {renderField(
          'Target Price',
          targetPrice,
          'targetPrice',
          <Target className="h-5 w-5" aria-hidden="true" />
        )}
        {renderField(
          'Stop Loss',
          stopLoss,
          'stopLoss',
          <AlertTriangle className="h-5 w-5" aria-hidden="true" />
        )}
      </div>
    </div>
  );
}
