'use client';

import { Lock } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import type { TranslationMode } from './types';

interface TranslationModeToggleProps {
  mode: TranslationMode;
  onModeChange: (mode: TranslationMode) => void;
  isPro: boolean;
}

export function TranslationModeToggle({
  mode,
  onModeChange,
  isPro,
}: TranslationModeToggleProps) {
  return (
    <TooltipProvider>
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-medium text-muted-foreground">
          Translation Mode
        </label>
        <div className="flex rounded-lg border border-border bg-muted p-1">
          <button
            type="button"
            className={cn(
              'flex-1 rounded-md px-4 py-2 text-sm font-medium transition-all',
              mode === 'classic'
                ? 'bg-card text-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            )}
            onClick={() => onModeChange('classic')}
          >
            Classic
            <span className="ms-1.5 text-xs text-muted-foreground">
              Fast
            </span>
          </button>
          <Tooltip>
            <TooltipTrigger asChild>
              <button
                type="button"
                className={cn(
                  'flex-1 rounded-md px-4 py-2 text-sm font-medium transition-all relative',
                  mode === 'llm'
                    ? 'bg-card text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground',
                  !isPro && 'cursor-not-allowed opacity-60'
                )}
                onClick={() => isPro && onModeChange('llm')}
                disabled={!isPro}
              >
                Pro LLM
                <span className="ms-1.5 text-xs text-muted-foreground">
                  Context-Aware
                </span>
                {!isPro && (
                  <Lock className="absolute right-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground" />
                )}
              </button>
            </TooltipTrigger>
            {!isPro && (
              <TooltipContent side="top">
                <p>Upgrade to Pro for LLM translation</p>
              </TooltipContent>
            )}
          </Tooltip>
        </div>
        {!isPro && (
          <p className="text-xs text-muted-foreground">
            <a href="/pricing" className="text-primary hover:underline">
              Upgrade to Pro
            </a>{' '}
            for LLM-powered translations
          </p>
        )}
      </div>
    </TooltipProvider>
  );
}