import type { Metadata } from 'next'
import { ContactBlock } from '@/components/Contact'
import { Shell } from '@/components/Shell'
import { pageMeta } from '@/lib/meta'
import { type Locale, loadPage, loadSite } from '@/lib/site'
import { submitLead } from '../pricing/actions'

type Props = { params: Promise<{ locale: Locale }>; searchParams: Promise<Record<string, string | undefined>> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params
  const p = (await loadPage('contactpage' as never, locale)) as any
  return pageMeta(locale, '/contact', p.seo?.title, p.seo?.description)
}

/**
 * «اتصل بنا»: one short form that reaches the team, the ways to reach us without a form, and a line that says
 * starting costs nothing. The message is saved as an interest request, which is where the team already looks.
 */
export default async function ContactPage({ params, searchParams }: Props) {
  const { locale } = await params
  const q = await searchParams
  const [{ settings: s, courses }, p, pricing] = await Promise.all([
    loadSite(locale),
    loadPage('contactpage' as never, locale) as Promise<any>,
    loadPage('pricing', locale) as Promise<any>,
  ])
  const f = pricing.fields || {}

  return (
    <Shell locale={locale} path="/contact" settings={s} courses={courses}>
      <main id="main">
        <section className="section">
          <div className="wrap narrow">
            <h1>{p.h1}</h1>
            {p.lead ? <p className="lead">{p.lead}</p> : null}

            <div className="contact-grid">
              <div id="form">
                <h2 className="card-title">{p.formTitle}</h2>
                {p.formLead ? <p className="muted">{p.formLead}</p> : null}

                {q.sent ? (
                  <div className="alert alert--info" role="status" style={{ marginTop: 'var(--tk-space-4)' }}>
                    <span aria-hidden="true">✓</span>
                    <p style={{ margin: 0 }}>{pricing.sent}</p>
                  </div>
                ) : (
                  <form className="form" action={submitLead} style={{ marginTop: 'var(--tk-space-4)' }}>
                    {q.error ? (
                      <div className="alert alert--warn" role="alert">
                        <span aria-hidden="true">!</span>
                        <p style={{ margin: 0 }}>{pricing.invalid}</p>
                      </div>
                    ) : null}
                    <input type="hidden" name="locale" value={locale} />
                    <input type="hidden" name="from" value="contact" />
                    {/* a field nobody sees; the machines that fill it are the ones we drop */}
                    <div className="field" aria-hidden="true" style={{ position: 'absolute', insetInlineStart: '-9999px' }}>
                      <label htmlFor="website">Website</label>
                      <input id="website" name="website" tabIndex={-1} autoComplete="off" />
                    </div>
                    <div className="field">
                      <label htmlFor="name">{f.name}</label>
                      <input id="name" name="name" autoComplete="name" required minLength={2} maxLength={120} />
                    </div>
                    <div className="field">
                      <label htmlFor="email">{f.email}</label>
                      <input id="email" name="email" type="email" autoComplete="email" required maxLength={200} dir="ltr" />
                    </div>
                    <div className="field">
                      <label htmlFor="phone">{f.phone}</label>
                      <input id="phone" name="phone" type="tel" autoComplete="tel" inputMode="tel" maxLength={20} dir="ltr" />
                    </div>
                    <div className="field">
                      <label htmlFor="note">{f.note}</label>
                      <textarea id="note" name="note" rows={4} maxLength={2000} />
                    </div>
                    <p className="form-note">{pricing.privacy}</p>
                    <div className="btn-row">
                      <button className="btn btn--primary" type="submit">
                        {pricing.submit}
                      </button>
                    </div>
                  </form>
                )}
              </div>

              <aside className="contact-side">
                {p.waysTitle ? <h2 className="card-title">{p.waysTitle}</h2> : null}
                <ContactBlock settings={s} />
                {p.reassure?.title || p.reassure?.text ? (
                  <div className="reassure">
                    {p.reassure?.title ? <strong>{p.reassure.title}</strong> : null}
                    {p.reassure?.text ? <p>{p.reassure.text}</p> : null}
                  </div>
                ) : null}
              </aside>
            </div>
          </div>
        </section>
      </main>
    </Shell>
  )
}