import { useADHDMode } from './providers/ADHDModeProvider';
import { Switch } from '@/components/ui/switch';
import { Brain, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

interface ADHDModeToggleProps {
  showLabel?: boolean;
  compact?: boolean;
}

export function ADHDModeToggle({ showLabel = true, compact = false }: ADHDModeToggleProps) {
  const { isEnabled, toggle, isLoading } = useADHDMode();
  const { t } = useTranslation();

  if (compact) {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              onClick={toggle}
              disabled={isLoading}
              className={`
                relative flex items-center justify-center w-10 h-10 rounded-lg
                transition-all duration-200
                ${isEnabled
                  ? 'bg-primary/20 text-primary border-2 border-primary'
                  : 'bg-muted hover:bg-muted/80 text-muted-foreground'
                }
                ${isLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
              `}
            >
              <Brain className="h-5 w-5" />
              {isEnabled && (
                <Sparkles className="absolute -top-1 -right-1 h-3 w-3 text-primary animate-pulse" />
              )}
            </button>
          </TooltipTrigger>
          <TooltipContent>
            <p>{isEnabled ? t('adhd.modeEnabled') : t('adhd.modeDisabled')}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );
  }

  return (
    <div className="flex items-center gap-3 p-3 rounded-lg bg-card border">
      <div className={`
        flex items-center justify-center w-10 h-10 rounded-full
        ${isEnabled ? 'bg-primary/20' : 'bg-muted'}
      `}>
        <Brain className={`h-5 w-5 ${isEnabled ? 'text-primary' : 'text-muted-foreground'}`} />
      </div>

      <div className="flex-1">
        {showLabel && (
          <>
            <div className="flex items-center gap-2">
              <span className="font-medium text-sm">{t('adhd.mode')}</span>
              {isEnabled && (
                <span className="text-xs px-2 py-0.5 rounded-full bg-primary/20 text-primary">
                  {t('adhd.active')}
                </span>
              )}
            </div>
            <p className="text-xs text-muted-foreground">
              {t('adhd.modeDescription')}
            </p>
          </>
        )}
      </div>

      <Switch
        checked={isEnabled}
        onCheckedChange={toggle}
        disabled={isLoading}
        aria-label={t('adhd.toggleMode')}
      />
    </div>
  );
}
