import { useEffect, useState, type FormEvent } from 'react'
import { ChevronLeft, Instagram, Phone } from 'lucide-react'
import PageHeader from '../components/PageHeader'
import OffersHours from '../components/OffersHours'
import chatIcon from '../assets/images/ChatTeardropDots.svg'
import './ContactUsPage.css'

const MAPS = [
  'https://www.openstreetmap.org/export/embed.html?bbox=50.88814616203309%2C34.649502368693994%2C50.901943445205696%2C34.65515083431795&layer=mapnik&marker=34.652326649618004%2C50.895044803619385',
  'https://www.openstreetmap.org/export/embed.html?bbox=50.7892370223999%2C34.58538297329978%2C50.86090564727784%2C34.61848189648619&layer=mapnik&marker=34.60193408382794%2C50.82507133483887',
]

const CONTACT_INFO = [
  {
    title: 'شماره تماس (شعبه یک)',
    value: '۳۷۷۲۸۱۸۱ (۰۲۵)',
    icon: 'phone' as const,
  },
  {
    title: 'شماره تماس (شعبه دو)',
    value: '۳۲۸۵۸۱۸۱ (۰۲۵)',
    icon: 'phone' as const,
  },
  {
    title: 'اینستاگرام',
    value: 'shirini_balout',
    prefix: 'instagram /',
    icon: 'instagram' as const,
    href: 'https://instagram.com/shirini_balout',
  },
]

export default function ContactUsPage() {
  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    subject: '',
    phone: '',
    message: '',
  })

  useEffect(() => {
    document.title = 'شیرینی بلوط - صفحه تماس با ما'
  }, [])

  function handleSubmit(event: FormEvent) {
    event.preventDefault()
  }

  return (
    <div className="contact-page">
      <PageHeader
        icon={chatIcon}
        placeholder="Contact Us"
        secondary="با ما"
        primary="در ارتباط باشید"
        crumbs={[
          { label: 'صفحه اصلی', to: '/' },
          { label: 'تماس با ما' },
        ]}
      />

      <div className="max-container contact-page__body">
        <div className="contact-page__grid">
          <form className="contact-form" onSubmit={handleSubmit}>
            <div className="contact-form__row">
              <label className="contact-field">
                <span>نام</span>
                <input
                  type="text"
                  value={form.firstName}
                  onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
                />
              </label>
              <label className="contact-field">
                <span>نام خانوادگی</span>
                <input
                  type="text"
                  value={form.lastName}
                  onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
                />
              </label>
            </div>

            <div className="contact-form__row">
              <label className="contact-field">
                <span>موضوع</span>
                <input
                  type="text"
                  value={form.subject}
                  onChange={(e) => setForm((f) => ({ ...f, subject: e.target.value }))}
                />
              </label>
              <label className="contact-field">
                <span>شماره همراه</span>
                <input
                  type="tel"
                  value={form.phone}
                  onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
                />
              </label>
            </div>

            <label className="contact-field contact-field--textarea">
              <span>متن پیام</span>
              <textarea
                rows={6}
                value={form.message}
                onChange={(e) => setForm((f) => ({ ...f, message: e.target.value }))}
              />
            </label>

            <div className="contact-form__submit">
              <button type="submit" className="btn-primary">
                مشاهده محصولات
                <ChevronLeft size={14} />
              </button>
            </div>
          </form>

          <aside className="contact-info">
            {CONTACT_INFO.map((item) => (
              <div key={item.title} className="contact-info__item">
                {item.icon === 'phone' ? (
                  <Phone className="contact-info__icon" strokeWidth={1.25} />
                ) : (
                  <Instagram className="contact-info__icon" strokeWidth={1.25} />
                )}
                <div className="contact-info__title">
                  <p className="contact-info__title--primary">{item.title}</p>
                  <p className="contact-info__title--secondary">
                    {item.prefix && (
                      <span className="contact-info__title--span">{item.prefix} </span>
                    )}
                    {item.href ? (
                      <a href={item.href} target="_blank" rel="noopener noreferrer">
                        {item.value}
                      </a>
                    ) : (
                      item.value
                    )}
                  </p>
                </div>
              </div>
            ))}
          </aside>
        </div>

        {MAPS.map((src) => (
          <iframe
            key={src}
            className="contact-page__map"
            title="نقشه شعبه"
            src={src}
            width="100%"
            height="500"
            loading="lazy"
          />
        ))}
      </div>

      <OffersHours showOffers={false} className="offers-hours--compact" />
    </div>
  )
}
