import { TypewriterText } from './TypewriterText';
import type { TranslationKey } from '@/lib/i18n';

interface DeploySuccessProps {
  t: (key: TranslationKey) => string;
  stackName: string;
  deploymentUrl: string;
  onDeployAnother: () => void;
}

export function DeploySuccess({ t, stackName, deploymentUrl, onDeployAnother }: DeploySuccessProps) {
  return (
    <div className="backdrop-blur-md bg-black/20 rounded-2xl p-10 border border-white/10 shadow-2xl text-center animate-fadeIn">
      <div className="mb-6 animate-scaleIn">
        <div className="inline-flex items-center justify-center w-20 h-20 rounded-full border-2 border-green-500 text-green-500 text-5xl bg-green-500/10">
          ✓
        </div>
      </div>

      <h2 className="text-2xl font-bold mb-4 min-h-[2.4rem] text-white">
        <TypewriterText text={t('deploymentComplete')} />
      </h2>

      <p className="text-gray-400 mb-8">{t('successMessage')}</p>

      <div className="bg-white/5 p-6 rounded-xl mb-8 border border-white/10 text-left">
        <div className="flex justify-between mb-4 text-[0.95rem]">
          <span className="text-gray-400 font-medium">{t('stackNameLabel')}</span>
          <span className="font-semibold font-mono text-white">{stackName}</span>
        </div>
        <div className="flex justify-between text-[0.95rem]">
          <span className="text-gray-400 font-medium">URL:</span>
          <a
            href={deploymentUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-400 font-semibold font-mono hover:underline"
          >
            {deploymentUrl}
          </a>
        </div>
      </div>

      <div className="space-y-3">
        <a
          href={deploymentUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="w-full flex items-center justify-center gap-2 py-3.5 px-6 rounded-xl font-semibold bg-white text-black hover:bg-white/90 transition-all animate-pulse-glow"
        >
          <span>{t('openStack')}</span>
          <svg className="w-5 h-5 rtl:scale-x-[-1]" viewBox="0 0 20 20" fill="none">
            <path d="M10 4L16 10L10 16M16 10H4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>

        <button
          onClick={onDeployAnother}
          className="w-full py-3.5 px-6 rounded-xl font-semibold bg-transparent text-gray-400 border border-white/10 hover:bg-white/5 hover:border-white/20 hover:text-white transition-colors"
        >
          {t('deployAnother')}
        </button>
      </div>
    </div>
  );
}
