'use client'

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

interface SettingToggleProps {
  label: string
  description?: string
  checked: boolean
  onChange: (checked: boolean) => Promise<void>
  disabled?: boolean
}

export function SettingToggle({
  label,
  description,
  checked,
  onChange,
  disabled
}: SettingToggleProps) {
  const { t } = useLanguage()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState(false)

  const handleChange = async (newChecked: boolean) => {
    setIsLoading(true)
    setError(false)

    try {
      await onChange(newChecked)
      toast.success(t('toast.saved'))
    } catch (err) {
      console.error('Error updating setting:', err)
      setError(true)
      toast.error(t('toast.saveFailed'))
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className={cn(
      'flex items-center justify-between py-4',
      'border-b last:border-0 dark:border-gray-800'
    )}>
      <div className="flex-1 pr-4">
        <Label className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
          {label}
        </Label>
        {description && (
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {description}
          </p>
        )}
      </div>
      <div className="flex items-center gap-2">
        {isLoading && <Loader2 className="h-4 w-4 animate-spin text-gray-500" />}
        {!isLoading && !error && checked && <Check className="h-4 w-4 text-green-500" />}
        {!isLoading && !error && !checked && <X className="h-4 w-4 text-gray-400" />}
        <Switch
          checked={checked}
          onCheckedChange={handleChange}
          disabled={disabled || isLoading}
        />
      </div>
    </div>
  )
}