"use client";

import { useState } from 'react';
import '@/styles/Auth.css';

export default function KontaktaOss() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<'success' | 'error' | null>(null);
  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus(null);
    setErrorMessage('');

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      const data = await res.json();

      if (res.ok) {
        setSubmitStatus('success');
        setFormData({ name: '', email: '', subject: '', message: '' });
      } else {
        setSubmitStatus('error');
        setErrorMessage(data.error || 'Något gick fel. Försök igen.');
      }
    } catch (err) {
      console.error('Contact form error:', err);
      setSubmitStatus('error');
      setErrorMessage('Kunde inte skicka meddelandet. Försök igen senare.');
    } finally {
      setIsSubmitting(false);
      setTimeout(() => {
        setSubmitStatus(null);
        setErrorMessage('');
      }, 5000);
    }
  };

  return (
    <div className="auth-page-container">
      <div className="card-xl" style={{ width: '100%', maxWidth: '1600px' }}>
        <div className="flex flex-col items-center mb-12 border-b border-gray-100 dark:border-white/10 pb-8">
          <h2 className="auth-title" style={{ marginBottom: '0.5rem' }}>Kontakta Oss</h2>
          <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '1px' }}>
            Skicka oss ett meddelande så återkopplar vi så snart vi kan
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '2rem', width: '100%' }} className="contact-grid">
          {/* Card 1: Contact Form */}
          <div className="profile-card" style={{ width: '100%', boxSizing: 'border-box' }}>
            <h3 className="auth-subtitle" style={{ marginBottom: '2rem' }}>Skicka Meddelande</h3>

            <form onSubmit={handleSubmit}>
              <div className="form-group" style={{ position: 'relative', marginBottom: '1.5rem' }}>
                <input
                  type="text"
                  name="subject"
                  placeholder="Ämne"
                  className="form-input"
                  value={formData.subject}
                  onChange={handleChange}
                  required
                />
              </div>

              <div className="form-group" style={{ position: 'relative', marginBottom: '1.5rem' }}>
                <input
                  type="text"
                  name="name"
                  placeholder="Namn"
                  className="form-input"
                  value={formData.name}
                  onChange={handleChange}
                  required
                />
              </div>

              <div className="form-group" style={{ position: 'relative', marginBottom: '1.5rem' }}>
                <input
                  type="email"
                  name="email"
                  placeholder="Email"
                  className="form-input"
                  value={formData.email}
                  onChange={handleChange}
                  required
                />
              </div>

              <div className="form-group" style={{ position: 'relative', marginBottom: '1.5rem' }}>
                <textarea
                  name="message"
                  placeholder="Meddelande"
                  className="form-input"
                  value={formData.message}
                  onChange={handleChange}
                  required
                  rows={6}
                  style={{ resize: 'vertical', minHeight: '180px', paddingTop: '1.2rem' }}
                />
              </div>

              <button type="submit" className="auth-button primary" disabled={isSubmitting} style={{ width: '100%' }}>
                {isSubmitting ? 'Skickar...' : 'Skicka Meddelande'}
              </button>

              {submitStatus === 'success' && (
                <div className="auth-success" style={{ marginTop: '1.5rem' }}>
                  Tack för ditt meddelande! Vi återkommer så snart vi kan.
                </div>
              )}
              {submitStatus === 'error' && (
                <div className="auth-error" style={{ marginTop: '1.5rem' }}>
                  {errorMessage}
                </div>
              )}
            </form>
          </div>

          {/* Card 2: Map & Contact Info */}
          <div className="profile-card" style={{ padding: '0', overflow: 'hidden', width: '100%', boxSizing: 'border-box' }}>
            {/* Map */}
            <div style={{ width: '100%', height: '350px', position: 'relative', borderBottom: '2px solid var(--border-color)' }}>
              <iframe
                title="Nordic Storium Location"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127.06584009758762!2d17.878522835224487!3d59.36544698393505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f9fcd5640a071%3A0x14cb18bf7f9ea5c!2sH%C3%A4rjedalsgatan%2014%2C%20162%2066%20V%C3%A4llingby!5e0!3m2!1sen!2sse!4v1748976558911!5m2!1sen!2sse"
                style={{ border: 0, width: '100%', height: '100%' }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>

            {/* Contact Info */}
            <div style={{ padding: 'clamp(1.5rem, 5vw, 3rem)' }}>
              <h3 className="auth-subtitle" style={{ marginBottom: '2rem' }}>Kontaktinformation</h3>

              <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                <div className="contact-info-item">
                  <p style={{
                    fontSize: '0.7rem',
                    color: 'var(--text-secondary)',
                    textTransform: 'uppercase',
                    letterSpacing: '2px',
                    fontWeight: '900',
                    marginBottom: '0.75rem'
                  }}>
                    📍 Adress
                  </p>
                  <p style={{ fontSize: '0.95rem', lineHeight: '1.6', color: 'var(--text-color)' }}>
                    Skarprättarvägen 30<br />
                    176 77 Järfälla
                  </p>
                </div>

                <div className="contact-info-item" style={{ paddingTop: '1.5rem', borderTop: '1px solid var(--border-color)' }}>
                  <p style={{
                    fontSize: '0.7rem',
                    color: 'var(--text-secondary)',
                    textTransform: 'uppercase',
                    letterSpacing: '2px',
                    fontWeight: '900',
                    marginBottom: '0.75rem'
                  }}>
                    🕒 Öppettider
                  </p>
                  <p style={{ fontSize: '0.95rem', lineHeight: '1.6', color: 'var(--text-color)' }}>
                    Måndag - Fredag<br />
                    13:00 - 22:00
                  </p>
                </div>

                <div className="contact-info-item" style={{ paddingTop: '1.5rem', borderTop: '1px solid var(--border-color)' }}>
                  <p style={{
                    fontSize: '0.7rem',
                    color: 'var(--text-secondary)',
                    textTransform: 'uppercase',
                    letterSpacing: '2px',
                    fontWeight: '900',
                    marginBottom: '0.75rem'
                  }}>
                    📧 Email
                  </p>
                  <p style={{ fontSize: '0.95rem', color: 'var(--text-color)' }}>
                    <a
                      href="mailto:vallingby.korakademin@outlook.com"
                      style={{
                        color: 'var(--text-color)',
                        textDecoration: 'none',
                        transition: 'color 0.2s'
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                      onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-color)'}
                    >
                      vallingby.korakademin@outlook.com
                    </a>
                  </p>
                </div>

                <div className="contact-info-item" style={{ paddingTop: '1.5rem', borderTop: '1px solid var(--border-color)' }}>
                  <p style={{
                    fontSize: '0.7rem',
                    color: 'var(--text-secondary)',
                    textTransform: 'uppercase',
                    letterSpacing: '2px',
                    fontWeight: '900',
                    marginBottom: '0.75rem'
                  }}>
                    📱 Telefon
                  </p>
                  <p style={{ fontSize: '0.95rem', color: 'var(--text-color)' }}>
                    <a
                      href="tel:0700342324"
                      style={{
                        color: 'var(--text-color)',
                        textDecoration: 'none',
                        transition: 'color 0.2s'
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                      onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-color)'}
                    >
                      070-034 23 24
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @media (min-width: 900px) {
          .contact-grid {
            grid-template-columns: 1fr 1fr !important;
          }
        }
        
        @media (max-width: 899px) {
          .contact-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </div>
  );
}
