import { useState } from 'react'
import { ChevronDown, ChevronUp, SlidersHorizontal } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { formatCurrency, formatNumber } from '@/lib/format'

interface SensitivityPanelProps {
  process: {
    annualFrequency: number
    automationInvestment: number
    currency: string
  }
  volumeAdjust: number        // entero -50 a +100
  investmentAdjust: number    // entero -50 a +100
  onVolumeChange: (v: number) => void
  onInvestmentChange: (v: number) => void
  onReset: () => void
}

function deltaLabel(adjust: number): string {
  if (adjust === 0) return '(valor base)'
  return `(${adjust > 0 ? '+' : ''}${adjust}%)`
}

export function SensitivityPanel({
  process,
  volumeAdjust,
  investmentAdjust,
  onVolumeChange,
  onInvestmentChange,
  onReset,
}: SensitivityPanelProps) {
  const [expanded, setExpanded] = useState(false)
  const isActive = volumeAdjust !== 0 || investmentAdjust !== 0

  const adjustedVolume = process.annualFrequency * (1 + volumeAdjust / 100)
  const adjustedInvestment = process.automationInvestment * (1 + investmentAdjust / 100)

  return (
    <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
      <button
        type="button"
        onClick={() => setExpanded((e) => !e)}
        className="flex items-center justify-between w-full text-left"
      >
        <div className="flex items-center gap-2">
          <SlidersHorizontal className="h-4 w-4 text-amber-700" />
          <span className="text-sm font-semibold text-amber-900">Análisis de sensibilidad</span>
          {isActive && (
            <span className="bg-orange-100 text-orange-700 text-xs font-medium px-2 py-0.5 rounded-full">
              Análisis activo
            </span>
          )}
        </div>
        {expanded ? (
          <ChevronUp className="h-4 w-4 text-amber-700" />
        ) : (
          <ChevronDown className="h-4 w-4 text-amber-700" />
        )}
      </button>

      {expanded && (
        <div className="mt-4 space-y-5">
          {/* Volumen anual */}
          <div>
            <label className="text-xs font-medium text-slate-700">Volumen anual</label>
            <p className="text-sm font-mono text-slate-800 mt-0.5">
              {formatNumber(adjustedVolume, 0)} ej/año {deltaLabel(volumeAdjust)}
            </p>
            <input
              type="range"
              min={-50}
              max={100}
              step={10}
              value={volumeAdjust}
              onChange={(e) => onVolumeChange(Number(e.target.value))}
              className="w-full mt-2"
              style={{ accentColor: '#F59845' }}
              aria-label="Ajuste de volumen anual"
            />
            <div className="flex justify-between text-[10px] text-slate-400 mt-1">
              <span>-50%</span>
              <span>0%</span>
              <span>+100%</span>
            </div>
          </div>

          {/* Inversión en automatización */}
          <div>
            <label className="text-xs font-medium text-slate-700">Inversión en automatización</label>
            <p className="text-sm font-mono text-slate-800 mt-0.5">
              {formatCurrency(adjustedInvestment, process.currency)} {deltaLabel(investmentAdjust)}
            </p>
            <input
              type="range"
              min={-50}
              max={100}
              step={10}
              value={investmentAdjust}
              onChange={(e) => onInvestmentChange(Number(e.target.value))}
              className="w-full mt-2"
              style={{ accentColor: '#F59845' }}
              aria-label="Ajuste de inversión en automatización"
            />
            <div className="flex justify-between text-[10px] text-slate-400 mt-1">
              <span>-50%</span>
              <span>0%</span>
              <span>+100%</span>
            </div>
          </div>

          {isActive && (
            <div className="flex justify-end">
              <Button variant="outline" size="sm" onClick={onReset}>
                Restablecer
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}
