'use client';

import { useEffect, useState } from 'react';
import { getTranslation, Language, useLanguage } from '@/lib/i18n';
import { Phone, Mail, MapPin, Send, Loader } from 'lucide-react';

const styles = `
  .contact-hero {
    padding: 60px 20px;
    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
    text-align: center;
    color: #111827;
  }
  
  .dark .contact-hero {
    color: #f3f4f6;
  }
  
  .contact-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
  }
  
  .dark .contact-hero h1 {
    color: #f3f4f6;
  }
  
  .contact-hero p {
    font-size: 1.125rem;
    color: #6b7280;
  }
  
  .dark .contact-hero p {
    color: #9ca3af;
  }
  
  .contact-grid {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 60px 20px;
    background-color: white;
  }
  
  .dark .contact-grid {
    background-color: #111827;
  }
  
  .contact-card {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
  }
  
  .dark .contact-card {
    background: #1f2937;
    border-color: #374151;
  }
  
  .contact-card:hover {
    border-color: rgb(20, 113, 76);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  .contact-icon {
    width: 48px;
    height: 48px;
    background: rgb(20, 113, 76);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  
  .contact-card h3 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
  }
  
  .dark .contact-card h3 {
    color: #f3f4f6;
  }
  
  .contact-card p {
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  .dark .contact-card p {
    color: #9ca3af;
  }
  
  .contact-card a {
    color: #6b7280;
    text-decoration: none;
  }
  
  .contact-card a:hover {
    color: rgb(20, 113, 76);
  }
  
  .form-section {
    padding: 60px 20px;
    background-color: #f9fafb;
  }
  
  .dark .form-section {
    background-color: #0f1117;
  }
  
  .form-container {
    max-width: 42rem;
    margin: 0 auto;
    background: white;
    border-radius: 18px;
    padding: 32px;
    border: 1px solid #e5e7eb;
  }
  
  .dark .form-container {
    background: #1f2937;
    border-color: #374151;
  }
  
  .form-container h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111827;
  }
  
  .dark .form-container h2 {
    color: #f3f4f6;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
  }
  
  .dark .form-group label {
    color: #d1d5db;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
    background: white;
    color: #111827;
  }
  
  .dark .form-group input,
  .dark .form-group textarea {
    background: #111827;
    color: #f3f4f6;
    border-color: #374151;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: rgb(20, 113, 76);
    box-shadow: 0 0 0 3px rgba(20, 113, 76, 0.1);
  }
  
  .form-submit {
    width: 100%;
    padding: 14px 20px;
    background-color: rgb(20, 113, 76);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }
  
  .form-submit:hover {
    background-color: rgb(16, 89, 60);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  .form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
  }
  
  .alert-success {
    background-color: #dbeafe;
    color: #1e40af;
  }
  
  .dark .alert-success {
    background-color: rgba(20, 113, 76, 0.1);
    color: #a7f3d0;
  }
  
  .alert-error {
    background-color: #fee2e2;
    color: #991b1b;
  }
  
  .dark .alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
  }
`;

export default function Contact() {
  const [lang, setLang] = useState<Language>('en');
  const [formData, setFormData] = useState({ name: '', email: '', subject: '', message: '' });
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const { getLang } = useLanguage();
  const t = (key: string) => getTranslation(lang, key);

  useEffect(() => {
    setLang(getLang());
    const handleLanguageChange = (e: any) => setLang(e.detail);
    window.addEventListener('languageChange', handleLanguageChange);
    return () => window.removeEventListener('languageChange', handleLanguageChange);
  }, [getLang]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      setMessage({ type: 'success', text: t('contact.success') });
      setFormData({ name: '', email: '', subject: '', message: '' });
    } catch (error) {
      setMessage({ type: 'error', text: t('contact.error') });
    } finally {
      setLoading(false);
    }
  };

  const contactInfo = [
    { icon: Phone, title: t('contact.phone'), value: '+251 911 000 000', link: 'tel:+251911000000' },
    { icon: Mail, title: t('contact.email'), value: 'support@edr.et', link: 'mailto:support@edr.et' },
    { icon: MapPin, title: t('contact.address'), value: 'Addis Ababa, Ethiopia', link: '#' },
  ];

  return (
    <>
      <style>{styles}</style>
      <main>
        <section className="contact-hero">
          <h1>{t('contact.title')}</h1>
          <p>{t('contact.subtitle')}</p>
        </section>

        <section className="contact-grid">
          {contactInfo.map((info, idx) => {
            const Icon = info.icon;
            return (
              <a key={idx} href={info.link} className="contact-card">
                <div className="contact-icon">
                  <Icon size={24} color="white" />
                </div>
                <h3>{info.title}</h3>
                <p>{info.value}</p>
              </a>
            );
          })}
        </section>

        <section className="form-section">
          <div className="form-container">
            <h2>{t('contact.form')}</h2>

            {message && (
              <div className={`alert alert-${message.type === 'success' ? 'success' : 'error'}`}>
                {message.text}
              </div>
            )}

            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <label>{t('contact.name')}</label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                />
              </div>

              <div className="form-group">
                <label>{t('contact.emailField')}</label>
                <input
                  type="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                />
              </div>

              <div className="form-group">
                <label>{t('contact.subject')}</label>
                <input
                  type="text"
                  required
                  value={formData.subject}
                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                />
              </div>

              <div className="form-group">
                <label>{t('contact.message')}</label>
                <textarea
                  required
                  rows={5}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                />
              </div>

              <button type="submit" disabled={loading} className="form-submit">
                {loading ? (
                  <>
                    <Loader size={18} />
                    {t('contact.sending')}
                  </>
                ) : (
                  <>
                    <Send size={18} />
                    {t('contact.send')}
                  </>
                )}
              </button>
            </form>
          </div>
        </section>
      </main>
    </>
  );
}
