'use client';

import { useState, useEffect } from 'react';
import { useLanguage } from '@/lib/i18n';

const gold = '#E8A849';
const navy = '#010D1E';
const cream = '#f5f0e8';

const copy = {
  en: {
    title: 'Contact Us',
    subtitle: 'Get in touch with us',
    phone: 'Phone',
    email: 'Email',
    whatsapp: 'WhatsApp',
    location: 'Location',
    send_message: 'Send us a message',
    form_name: 'Your Name',
    form_email: 'Your Email',
    form_message: 'Message',
    form_submit: 'Send Message',
    form_sending: 'Sending...',
    form_success: 'Message sent successfully!',
    form_error: 'Failed to send message. Please try again.',
  },
  es: {
    title: 'Contáctenos',
    subtitle: 'Póngase en contacto con nosotros',
    phone: 'Teléfono',
    email: 'Correo',
    whatsapp: 'WhatsApp',
    location: 'Ubicación',
    send_message: 'Envíenos un mensaje',
    form_name: 'Su Nombre',
    form_email: 'Su Correo',
    form_message: 'Mensaje',
    form_submit: 'Enviar Mensaje',
    form_sending: 'Enviando...',
    form_success: '¡Mensaje enviado exitosamente!',
    form_error: 'Error al enviar el mensaje. Intente de nuevo.',
  },
};

export default function ContactPage() {
  const language = useLanguage();
  const t = copy[language];
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
  const [config, setConfig] = useState<{ phone?: string; email?: string; whatsapp_url?: string; address?: string }>({});

  useEffect(() => {
    fetch('/api/site-assets')
      .then(res => res.json())
      .then(data => setConfig(data.data || {}))
      .catch(() => {});
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setStatus('success');
        setForm({ name: '', email: '', message: '' });
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };

  return (
    <main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream, padding: '3rem 2rem' }}>
      <div style={{ maxWidth: '900px', margin: '0 auto' }}>
        <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 400, fontStyle: 'italic', marginBottom: '0.5rem', color: cream }}>
          {t.title}
        </h1>
        <p style={{ fontSize: '16px', color: 'rgba(245,240,232,0.7)', marginBottom: '3rem' }}>
          {t.subtitle}
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '2rem', marginBottom: '3rem' }}>
          {/* Phone */}
          <div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
            <div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📞</div>
            <div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.phone}</div>
            <div style={{ fontSize: '16px' }}>{config.phone || '+593 99 XXX XXXX'}</div>
          </div>

          {/* Email */}
          <div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
            <div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>✉️</div>
            <div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.email}</div>
            <div style={{ fontSize: '16px' }}>{config.email || 'info@lahuasca.com'}</div>
          </div>

          {/* WhatsApp */}
          <div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
            <div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>💬</div>
            <div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.whatsapp}</div>
            <div style={{ fontSize: '16px' }}>{config.whatsapp_url ? <a href={config.whatsapp_url} target="_blank" rel="noopener noreferrer" style={{ color: cream, textDecoration: 'underline' }}>WhatsApp</a> : (config.phone || '+593 99 XXX XXXX')}</div>
          </div>

          {/* Location */}
          <div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
            <div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📍</div>
            <div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.location}</div>
            <div style={{ fontSize: '16px' }}>{config.address || 'Otavalo, Imbabura, Ecuador'}</div>
          </div>
        </div>

        {/* Contact Form */}
        <div style={{ background: 'rgba(245,240,232,0.04)', borderRadius: '16px', padding: '2rem', border: '1px solid rgba(245,240,232,0.1)' }}>
          <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '1.5rem', color: cream }}>
            {t.send_message}
          </h2>
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <input
              type="text"
              placeholder={t.form_name}
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              required
              style={{
                padding: '0.875rem 1rem',
                background: 'rgba(245,240,232,0.08)',
                border: '1px solid rgba(245,240,232,0.2)',
                borderRadius: '8px',
                color: cream,
                fontSize: '15px',
              }}
            />
            <input
              type="email"
              placeholder={t.form_email}
              value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })}
              required
              style={{
                padding: '0.875rem 1rem',
                background: 'rgba(245,240,232,0.08)',
                border: '1px solid rgba(245,240,232,0.2)',
                borderRadius: '8px',
                color: cream,
                fontSize: '15px',
              }}
            />
            <textarea
              placeholder={t.form_message}
              value={form.message}
              onChange={(e) => setForm({ ...form, message: e.target.value })}
              required
              rows={5}
              style={{
                padding: '0.875rem 1rem',
                background: 'rgba(245,240,232,0.08)',
                border: '1px solid rgba(245,240,232,0.2)',
                borderRadius: '8px',
                color: cream,
                fontSize: '15px',
                resize: 'vertical',
              }}
            />
            <button
              type="submit"
              disabled={status === 'sending'}
              style={{
                padding: '0.875rem 1.5rem',
                background: gold,
                color: navy,
                border: 'none',
                borderRadius: '8px',
                fontSize: '15px',
                fontWeight: 600,
                cursor: status === 'sending' ? 'wait' : 'pointer',
                opacity: status === 'sending' ? 0.7 : 1,
                transition: 'opacity 200ms',
              }}
            >
              {status === 'sending' ? t.form_sending : t.form_submit}
            </button>
            {status === 'success' && (
              <p style={{ color: '#4CAF50', margin: 0 }}>{t.form_success}</p>
            )}
            {status === 'error' && (
              <p style={{ color: '#f44336', margin: 0 }}>{t.form_error}</p>
            )}
          </form>
        </div>
      </div>
    </main>
  );
}