'use client'

import { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
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 (
    <Card className={`border-2 transition-all ${
      demoMode
        ? 'border-amber-300 bg-gradient-to-br from-amber-50 to-white dark:from-amber-950/30 dark:to-background'
        : 'border-amber-100 dark:border-amber-900/30'
    }`}>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className={`p-2 rounded-full transition-colors ${
              demoMode
                ? 'bg-amber-200 dark:bg-amber-900/50'
                : 'bg-gray-100 dark:bg-gray-800'
            }`}>
              <FlaskConical className={`h-5 w-5 ${
                demoMode ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500'
              }`} />
            </div>
            <div>
              <CardTitle className="text-base flex items-center gap-2">
                🧪 {t('demoMode.title')}
                {demoMode && <Zap className="h-4 w-4 text-amber-500 animate-pulse" />}
              </CardTitle>
              <CardDescription className="text-xs mt-1">
                {t('demoMode.description')}
              </CardDescription>
            </div>
          </div>
          <Switch
            checked={demoMode}
            onCheckedChange={handleToggle}
            disabled={isPending}
            className="data-[state=checked]:bg-amber-600"
          />
        </div>
      </CardHeader>

      {demoMode && (
        <CardContent className="pt-0 space-y-2">
          <div className="rounded-lg bg-white dark:bg-zinc-900 border border-amber-200 dark:border-amber-900/30 p-3">
            <p className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
              {t('demoMode.parametersActive')}
            </p>
            <div className="space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
              <div className="flex items-start gap-2">
                <Target className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
                <span>{t('demoMode.similarityThreshold')}</span>
              </div>
              <div className="flex items-start gap-2">
                <Zap className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
                <span>{t('demoMode.delayBetweenNotes')}</span>
              </div>
              <div className="flex items-start gap-2">
                <Lightbulb className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
                <span>{t('demoMode.unlimitedInsights')}</span>
              </div>
            </div>
          </div>
          <p className="text-xs text-amber-700 dark:text-amber-400 text-center">
            💡 {t('demoMode.createNotesTip')}
          </p>
        </CardContent>
      )}
    </Card>
  )
}