"use client";

import type {
  ConversationSettings,
  VoiceSettings,
} from "@/lib/types/voice-agent.types";

interface ConversationSettingsPanelProps {
  conversationSettings: ConversationSettings;
  voiceSettings: VoiceSettings;
  onConversationChange: (settings: ConversationSettings) => void;
  onVoiceChange: (settings: VoiceSettings) => void;
  t: Record<string, string>;
}

function SliderField({
  label,
  description,
  value,
  onChange,
  min,
  max,
  step,
  minLabel,
  maxLabel,
  displayValue,
}: {
  label: string;
  description?: string;
  value: number;
  onChange: (v: number) => void;
  min: number;
  max: number;
  step: number;
  minLabel?: string;
  maxLabel?: string;
  displayValue?: string;
}) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium text-gray-700">{label}</label>
        <span className="text-sm text-gray-500">{displayValue ?? value}</span>
      </div>
      {description && <p className="text-xs text-gray-500">{description}</p>}
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      />
      {(minLabel || maxLabel) && (
        <div className="flex justify-between text-xs text-gray-400">
          <span>{minLabel}</span>
          <span>{maxLabel}</span>
        </div>
      )}
    </div>
  );
}

function ToggleField({
  label,
  description,
  checked,
  onChange,
}: {
  label: string;
  description?: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <label className="flex items-start gap-3 cursor-pointer">
      <div className="relative mt-0.5">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
          className="sr-only peer"
        />
        <div className="w-9 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full transition-colors" />
        <div className="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4" />
      </div>
      <div>
        <span className="text-sm font-medium text-gray-700">{label}</span>
        {description && (
          <p className="text-xs text-gray-500 mt-0.5">{description}</p>
        )}
      </div>
    </label>
  );
}

function NumberField({
  label,
  description,
  value,
  onChange,
  min,
  max,
  suffix,
}: {
  label: string;
  description?: string;
  value: number;
  onChange: (v: number) => void;
  min: number;
  max: number;
  suffix?: string;
}) {
  return (
    <div className="space-y-1">
      <label className="text-sm font-medium text-gray-700">{label}</label>
      {description && <p className="text-xs text-gray-500">{description}</p>}
      <div className="flex items-center gap-2">
        <input
          type="number"
          min={min}
          max={max}
          value={value}
          onChange={(e) => onChange(parseInt(e.target.value, 10) || min)}
          className="w-20 text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        {suffix && <span className="text-sm text-gray-500">{suffix}</span>}
      </div>
    </div>
  );
}

export default function ConversationSettingsPanel({
  conversationSettings: cs,
  voiceSettings: vs,
  onConversationChange,
  onVoiceChange,
  t,
}: ConversationSettingsPanelProps) {
  return (
    <div className="space-y-8">
      {/* Conversation Flow Settings */}
      <div>
        <h3 className="text-sm font-medium text-gray-900 mb-1">
          {t.vaConversationSettings}
        </h3>
        <p className="text-xs text-gray-500 mb-4">
          {t.vaConversationSettingsDesc}
        </p>

        <div className="space-y-5">
          <NumberField
            label={t.vaTurnTimeout}
            description={t.vaTurnTimeoutDesc}
            value={cs.turnTimeout ?? 7}
            onChange={(v) => onConversationChange({ ...cs, turnTimeout: v })}
            min={1}
            max={30}
            suffix="sec"
          />

          <NumberField
            label={t.vaSilenceEndCall}
            description={t.vaSilenceEndCallDesc}
            value={cs.silenceEndCallTimeout ?? 30}
            onChange={(v) =>
              onConversationChange({ ...cs, silenceEndCallTimeout: v })
            }
            min={5}
            max={120}
            suffix="sec"
          />

          <SliderField
            label={t.vaInterruptionSensitivity}
            value={cs.interruptionSensitivity ?? 0.5}
            onChange={(v) =>
              onConversationChange({ ...cs, interruptionSensitivity: v })
            }
            min={0}
            max={1}
            step={0.05}
            minLabel={t.vaInterruptionLow}
            maxLabel={t.vaInterruptionHigh}
          />

          <SliderField
            label={t.vaTurnEagerness}
            value={cs.turnEagerness ?? 0.5}
            onChange={(v) => onConversationChange({ ...cs, turnEagerness: v })}
            min={0}
            max={1}
            step={0.05}
            minLabel={t.vaTurnEagernessLow}
            maxLabel={t.vaTurnEagernessHigh}
          />

          <ToggleField
            label={t.vaBackchanneling}
            description={t.vaBackchannelingDesc}
            checked={cs.backchanneling ?? false}
            onChange={(v) => onConversationChange({ ...cs, backchanneling: v })}
          />

          <ToggleField
            label={t.vaBackgroundDenoising}
            description={t.vaDenoisingDesc}
            checked={cs.backgroundDenoising ?? false}
            onChange={(v) =>
              onConversationChange({ ...cs, backgroundDenoising: v })
            }
          />

          <NumberField
            label={t.vaMaxDuration}
            description={t.vaMaxDurationDesc}
            value={Math.round((cs.maxDurationSeconds ?? 600) / 60)}
            onChange={(v) =>
              onConversationChange({ ...cs, maxDurationSeconds: v * 60 })
            }
            min={1}
            max={60}
            suffix="min"
          />
        </div>
      </div>

      {/* Voice Settings */}
      <div>
        <h3 className="text-sm font-medium text-gray-900 mb-1">
          {t.vaVoiceSettings}
        </h3>
        <p className="text-xs text-gray-500 mb-4">{t.vaVoiceSettingsDesc}</p>

        <div className="space-y-5">
          <SliderField
            label={t.vaVoiceSpeed}
            value={vs.speed ?? 1.0}
            onChange={(v) => onVoiceChange({ ...vs, speed: v })}
            min={0.7}
            max={1.2}
            step={0.05}
            minLabel={t.vaVoiceSpeedSlower}
            maxLabel={t.vaVoiceSpeedFaster}
            displayValue={`${(vs.speed ?? 1.0).toFixed(2)}x`}
          />

          <SliderField
            label={t.vaVoiceStability}
            description={t.vaVoiceStabilityDesc}
            value={vs.stability ?? 0.5}
            onChange={(v) => onVoiceChange({ ...vs, stability: v })}
            min={0}
            max={1}
            step={0.05}
          />

          <SliderField
            label={t.vaVoiceExpressiveness}
            description={t.vaVoiceExpressivenessDesc}
            value={vs.style ?? 0}
            onChange={(v) => onVoiceChange({ ...vs, style: v })}
            min={0}
            max={1}
            step={0.05}
          />
        </div>
      </div>
    </div>
  );
}