'use client'

import { useState } from 'react'
import { Label } from '@/components/ui/label'
import { Loader2, Check } from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'

interface SettingInputProps {
  label: string
  description?: string
  value: string
  type?: 'text' | 'password' | 'email' | 'url'
  onChange: (value: string) => Promise<void>
  placeholder?: string
  disabled?: boolean
}

export function SettingInput({
  label,
  description,
  value,
  type = 'text',
  onChange,
  placeholder,
  disabled
}: SettingInputProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [isSaved, setIsSaved] = useState(false)

  const handleChange = async (newValue: string) => {
    setIsLoading(true)
    setIsSaved(false)

    try {
      await onChange(newValue)
      setIsSaved(true)
      toast.success('Setting saved')

      // Clear saved indicator after 2 seconds
      setTimeout(() => setIsSaved(false), 2000)
    } catch (err) {
      console.error('Error updating setting:', err)
      toast.error('Failed to save setting', {
        description: 'Please try again'
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
        {label}
      </Label>
      {description && (
        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          {description}
        </p>
      )}
      <div className="relative">
        <input
          type={type}
          value={value}
          onChange={(e) => handleChange(e.target.value)}
          placeholder={placeholder}
          disabled={disabled || isLoading}
          className={cn(
            'w-full px-3 py-2 border rounded-lg',
            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
            'disabled:opacity-50 disabled:cursor-not-allowed',
            'bg-white dark:bg-gray-900',
            'border-gray-300 dark:border-gray-700',
            'text-gray-900 dark:text-gray-100',
            'placeholder:text-gray-400 dark:placeholder:text-gray-600'
          )}
        />
        {isLoading && (
          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
        )}
        {isSaved && !isLoading && (
          <Check className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
        )}
      </div>
    </div>
  )
}