'use client'

import { useState } from 'react'
import { FlaskConical, Zap, Target, Lightbulb } from 'lucide-react'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'

interface DemoModeToggleProps {
  demoMode: boolean
  onToggle: (enabled: boolean) => Promise<void>
}

export function DemoModeToggle({ demoMode, onToggle }: DemoModeToggleProps) {
  const [isPending, setIsPending] = useState(false)
  const { t } = useLanguage()

  const handleToggle = async (checked: boolean) => {
    setIsPending(true)
    try {
      await onToggle(checked)
      if (checked) {
        toast.success(t('demoMode.activated'))
      } else {
        toast.success(t('demoMode.deactivated'))
      }
    } catch (error) {
      console.error('Error toggling demo mode:', error)
      toast.error(t('demoMode.toggleFailed'))
    } finally {
      setIsPending(false)
    }
  }

  return (
    <div className={`border rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 ${
      demoMode
        ? 'bg-ochre/10 dark:bg-ochre/10 border-ochre/30'
        : 'bg-ochre/5 dark:bg-ochre/10 border-ochre/20 hover:bg-ochre/10'
    }`}>
      <div className="flex items-center gap-6">
        <div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
          <FlaskConical size={20} />
        </div>
        <div className="space-y-1.5 text-left">
          <h4 className="text-sm font-bold text-ink flex items-center gap-3">
            🧪 {t('demoMode.title')}
            {demoMode && <Zap className="h-4 w-4 text-ochre animate-pulse" />}
          </h4>
          <p className="text-[11px] text-concrete leading-relaxed font-medium">
            {t('demoMode.description')}
          </p>
          {demoMode && (
            <div className="mt-3 rounded-lg bg-white/60 dark:bg-black/20 border border-ochre/20 p-3 space-y-1.5">
              <p className="text-[10px] font-bold text-ink uppercase tracking-wider">{t('demoMode.parametersActive')}</p>
              <div className="space-y-1 text-[10px] text-concrete">
                <div className="flex items-start gap-2">
                  <Target className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
                  <span>{t('demoMode.similarityThreshold')}</span>
                </div>
                <div className="flex items-start gap-2">
                  <Zap className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
                  <span>{t('demoMode.delayBetweenNotes')}</span>
                </div>
                <div className="flex items-start gap-2">
                  <Lightbulb className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
                  <span>{t('demoMode.unlimitedInsights')}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
        <input
          type="checkbox"
          className="sr-only peer"
          checked={demoMode}
          onChange={(e) => handleToggle(e.target.checked)}
          disabled={isPending}
        />
        <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre" />
      </label>
    </div>
  )
}
