'use client';

import React from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import StoreLayout from '@/components/layout/StoreLayout';
import { useLanguage } from '@/context/LanguageContext';

export default function CheckoutSuccessPage() {
  const { t, language } = useLanguage();
  const searchParams = useSearchParams();
  const orderId = searchParams.get('order') || 'FTP000000';

  return (
    <StoreLayout>
      <div style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 24px' }}>
        <div style={{ textAlign: 'center', maxWidth: '480px', animation: 'fadeInUp 0.6s ease' }}>
          <div style={{ fontSize: '5rem', marginBottom: '20px', filter: 'drop-shadow(0 0 20px rgba(0,255,136,0.4))' }}>🎉</div>
          <h1 style={{ fontFamily: 'Orbitron, Cairo, sans-serif', color: 'var(--text-primary)', fontSize: 'clamp(1.4rem, 3vw, 2rem)', marginBottom: '12px' }}>
            {t.payment.successTitle}
          </h1>
          <p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>{t.payment.successSubtitle}</p>
          <div style={{ background: 'rgba(0,255,136,0.06)', border: '1px solid rgba(0,255,136,0.2)', borderRadius: '12px', padding: '16px 24px', marginBottom: '32px' }}>
            <div style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{t.payment.orderId}:</div>
            <div style={{ fontFamily: 'Orbitron, monospace', fontSize: '1.4rem', color: 'var(--success)', fontWeight: '700', letterSpacing: '2px' }}>{orderId}</div>
          </div>
          <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link href="/account/orders" className="btn btn-primary btn-lg">{t.payment.viewOrder}</Link>
            <Link href="/products" className="btn btn-outline">{t.payment.backToShop}</Link>
          </div>
        </div>
      </div>
    </StoreLayout>
  );
}
