import { useTranslation } from '@/i18n';
import { Typography } from '@/components/typography';
import { motion } from 'framer-motion';
import { Check, ArrowRight, Keyboard, Cloud, AlertTriangle } from 'lucide-react';
import { Page } from '@/components/page';
import { RenderKeys } from '@/components/render-keys';
import { useShortcut, SHORTCUT_CONFIGS } from '@/features/settings/shortcuts/hooks/use-shortcut';

interface StepSuccessProps {
    onComplete: () => void;
    isRemote?: boolean;
    remoteUrl?: string;
}

export const StepSuccess = ({ onComplete, isRemote = false, remoteUrl }: StepSuccessProps) => {
    const { t } = useTranslation();
    const { shortcut: llmShortcut } = useShortcut(SHORTCUT_CONFIGS.llm);
    const { shortcut: commandShortcut } = useShortcut(SHORTCUT_CONFIGS.command);

    return (
        <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="flex flex-col items-center justify-center min-h-[400px] max-w-2xl mx-auto text-center space-y-8"
        >
            <div className="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center shadow-lg shadow-green-500/20">
                {isRemote ? (
                    <Cloud className="w-12 h-12 text-white stroke-2" />
                ) : (
                    <Check className="w-12 h-12 text-white stroke-3" />
                )}
            </div>

            <div className="space-y-4">
                <Typography.MainTitle className="text-3xl">{t('You are all set!')}</Typography.MainTitle>
            </div>

            <div className="w-full max-w-lg bg-emerald-500/10 border border-emerald-500/30 rounded-lg p-6 text-left space-y-4">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-emerald-500/20 rounded-full flex items-center justify-center">
                        <Keyboard className="w-5 h-5 text-emerald-400" />
                    </div>
                    <Typography.Paragraph className="text-emerald-300 font-semibold text-base">
                        {t('LLM Connect is ready!')}
                    </Typography.Paragraph>
                </div>

                {isRemote && remoteUrl && (
                    <div className="flex items-center gap-2 text-sm text-foreground">
                        <Cloud className="w-4 h-4 text-sky-400" />
                        {t('Connected to:')} {remoteUrl}
                    </div>
                )}

                <Typography.Paragraph className="text-foreground text-sm leading-relaxed">
                    {t('Use the shortcut')} <RenderKeys keyString={llmShortcut} className="mr-1" />
                    {t('to record your voice. Your transcription will be automatically processed by the LLM.')}
                </Typography.Paragraph>
                <Typography.Paragraph className="text-foreground text-sm leading-relaxed">
                    {t('Or you can select text and use the shortcut')}{' '}
                    <RenderKeys keyString={commandShortcut} className="mr-1" />
                    {t('to run a command on the selected text (eg. translate it to French).')}
                </Typography.Paragraph>
                <Typography.Paragraph className="text-muted-foreground text-sm">
                    {t('You can customize the prompt or create new modes on the next screen.')}
                </Typography.Paragraph>

                {isRemote && (
                    <div className="flex items-start gap-2 mt-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs">
                        <AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
                        <span>
                            {t(
                                'Remember: your data is processed by a remote server. You can switch to local mode anytime from Settings.'
                            )}
                        </span>
                    </div>
                )}
            </div>

            <Page.PrimaryButton onClick={onComplete} data-testid="llm-connect-success-button">
                {t('Configure your prompt')}
                <ArrowRight className="w-4 h-4 ml-2" />
            </Page.PrimaryButton>
        </motion.div>
    );
};
