'use client'

import { Slider } from '@/components/ui/slider'
import { formatCurrency } from '@/lib/utils'

interface ROIInputPanelProps {
  hoursPerWeek: number
  hourlyRate: number
  onHoursChange: (v: number) => void
  onRateChange: (v: number) => void
}

export function ROIInputPanel({
  hoursPerWeek,
  hourlyRate,
  onHoursChange,
  onRateChange,
}: ROIInputPanelProps) {
  return (
    <div className="space-y-8">
      {/* Hours per week */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <label className="text-sm font-medium" style={{ color: 'var(--dt-text-primary)' }}>
            Manual admin hours per week
          </label>
          <span
            className="text-lg font-bold tabular-nums"
            style={{
              background: 'var(--dt-gradient-accent)',
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            {hoursPerWeek}h
          </span>
        </div>
        <Slider
          min={1}
          max={60}
          step={1}
          value={[hoursPerWeek]}
          onValueChange={(v) => onHoursChange(Array.isArray(v) ? v[0] : v)}
          className="w-full"
        />
        <div className="flex justify-between mt-1.5 text-xs" style={{ color: 'var(--dt-text-muted)' }}>
          <span>1 hr</span>
          <span>60 hrs</span>
        </div>
      </div>

      {/* Hourly rate */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <label className="text-sm font-medium" style={{ color: 'var(--dt-text-primary)' }}>
            Your time value (hourly rate)
          </label>
          <span
            className="text-lg font-bold tabular-nums"
            style={{
              background: 'var(--dt-gradient-accent)',
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            {formatCurrency(hourlyRate)}
          </span>
        </div>
        <Slider
          min={15}
          max={300}
          step={5}
          value={[hourlyRate]}
          onValueChange={(v) => onRateChange(Array.isArray(v) ? v[0] : v)}
          className="w-full"
        />
        <div className="flex justify-between mt-1.5 text-xs" style={{ color: 'var(--dt-text-muted)' }}>
          <span>$15/hr</span>
          <span>$300/hr</span>
        </div>
      </div>
    </div>
  )
}