import { useState } from 'react';
import {
  QUICK_FREQUENCIES,
  getFrequencyInfo,
  getWavelength,
} from '@/constants/frequencies.ts';

interface FrequencySelectorProps {
  value: number;
  onChange: (freq: number) => void;
}

export default function FrequencySelector({
  value,
  onChange,
}: FrequencySelectorProps) {
  const [customInput, setCustomInput] = useState('');
  const bandInfo = getFrequencyInfo(value);

  const handleCustomSubmit = () => {
    const parsed = parseInt(customInput, 10);
    if (parsed > 0 && parsed <= 100000) {
      onChange(parsed);
      setCustomInput('');
    }
  };

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-gray-700 dark:text-dark-text">
        Operating Frequency
      </label>

      {/* Quick buttons */}
      <div className="flex flex-wrap gap-1.5">
        {QUICK_FREQUENCIES.map((freq) => (
          <button
            key={freq}
            type="button"
            onClick={() => onChange(freq)}
            className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors min-h-[32px]
              ${
                value === freq
                  ? 'bg-blue-600 text-white dark:bg-blue-500'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-dark-border dark:text-dark-text dark:hover:bg-dark-muted'
              }`}
          >
            {freq}
          </button>
        ))}
        <span className="self-center text-xs text-gray-400 dark:text-dark-muted">MHz</span>
      </div>

      {/* Custom input */}
      <div className="flex gap-2">
        <input
          type="number"
          placeholder="Custom MHz..."
          value={customInput}
          onChange={(e) => setCustomInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleCustomSubmit()}
          className="flex-1 px-3 py-1.5 border border-gray-300 dark:border-dark-border dark:bg-dark-bg dark:text-dark-text rounded-md text-sm
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          min={1}
          max={100000}
        />
        <button
          type="button"
          onClick={handleCustomSubmit}
          className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-dark-border dark:hover:bg-dark-muted dark:text-dark-text rounded-md text-sm text-gray-700 min-h-[32px]"
        >
          Set
        </button>
      </div>

      {/* Current frequency display */}
      <div className="text-sm text-gray-600 dark:text-dark-muted font-medium">
        Current: {value} MHz
      </div>

      {/* Band info */}
      {bandInfo ? (
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-2 text-xs space-y-0.5">
          <div className="font-semibold text-blue-700 dark:text-blue-300">
            {bandInfo.name} ({bandInfo.range})
          </div>
          <div className="text-blue-600 dark:text-blue-400">
            λ = {getWavelength(value)} · {bandInfo.characteristics.range} range ·{' '}
            {bandInfo.characteristics.penetration} penetration
          </div>
          <div className="text-blue-500 dark:text-blue-400">{bandInfo.characteristics.typical}</div>
        </div>
      ) : (
        <div className="bg-gray-50 dark:bg-dark-bg border border-gray-200 dark:border-dark-border rounded-md p-2 text-xs">
          <div className="text-gray-600 dark:text-dark-muted">
            Custom frequency: {value} MHz · λ = {getWavelength(value)}
          </div>
        </div>
      )}
    </div>
  );
}
