'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import StoreLayout from '@/components/layout/StoreLayout';
import { useAuth } from '@/context/AuthContext';
import { useLanguage } from '@/context/LanguageContext';

export default function RegisterPage() {
  const { register } = useAuth();
  const { t, language } = useLanguage();
  const router = useRouter();
  const [form, setForm] = useState({ name: '', email: '', phone: '', password: '', confirm: '' });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (form.password !== form.confirm) {
      setError(language === 'ar' ? 'كلمات المرور غير متطابقة' : 'Passwords do not match');
      return;
    }
    setLoading(true);
    const ok = await register(form.name, form.email, form.password, form.phone);
    setLoading(false);
    if (ok) router.push('/');
    else setError(language === 'ar' ? 'البريد الإلكتروني مستخدم بالفعل' : 'Email already in use');
  };

  return (
    <StoreLayout>
      <div style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '60px 24px' }}>
        <div style={{ width: '100%', maxWidth: '440px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(0,209,255,0.15)', borderRadius: '24px', padding: '40px 36px', backdropFilter: 'blur(20px)', boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }}>
          <div style={{ textAlign: 'center', fontSize: '2.5rem', marginBottom: '20px' }}>🚀</div>
          <h1 style={{ fontFamily: 'Orbitron, Cairo, sans-serif', fontSize: '1.5rem', textAlign: 'center', color: 'var(--text-primary)', marginBottom: '8px' }}>{t.auth.registerTitle}</h1>
          <p style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.88rem', marginBottom: '28px' }}>{t.auth.registerSubtitle}</p>

          {error && <div style={{ background: 'rgba(255,59,92,0.1)', border: '1px solid rgba(255,59,92,0.3)', color: 'var(--error)', padding: '10px 14px', borderRadius: '10px', fontSize: '0.85rem', marginBottom: '16px' }}>{error}</div>}

          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {[
              { key: 'name', label: t.auth.name, type: 'text', placeholder: language === 'ar' ? 'الاسم الكامل' : 'Full Name' },
              { key: 'email', label: t.auth.email, type: 'email', placeholder: 'you@example.com' },
              { key: 'phone', label: t.auth.phone, type: 'tel', placeholder: '+965' },
              { key: 'password', label: t.auth.password, type: 'password', placeholder: '••••••••' },
              { key: 'confirm', label: t.auth.confirmPassword, type: 'password', placeholder: '••••••••' },
            ].map(field => (
              <div className="form-group" key={field.key}>
                <label className="form-label">{field.label}</label>
                <input required type={field.type} className="form-input" placeholder={field.placeholder} value={(form as any)[field.key]} onChange={e => setForm(p => ({ ...p, [field.key]: e.target.value }))} />
              </div>
            ))}
            <button type="submit" className="btn btn-primary btn-full btn-lg" disabled={loading}>
              {loading ? '⏳...' : t.auth.register}
            </button>
          </form>

          <p style={{ textAlign: 'center', fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '20px' }}>
            {t.auth.haveAccount}
            <Link href="/auth/login" style={{ color: 'var(--electric-blue)', fontWeight: '600', marginInlineStart: '4px' }}>{t.auth.signIn}</Link>
          </p>
        </div>
      </div>
    </StoreLayout>
  );
}
