'use client';

import React, { useState } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import api from '@/lib/api';

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

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus({ type: null, message: '' });

    try {
      await api.submitContactUs({
        name: formData.name,
        email: formData.email,
        phone: formData.phone || undefined,
        subject: formData.subject || undefined,
        message: formData.message,
      });

      setSubmitStatus({
        type: 'success',
        message: 'Thank you for contacting us. We will get back to you soon.',
      });

      setFormData({
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
      });
    } catch (error: unknown) {
      setSubmitStatus({
        type: 'error',
        message: error instanceof Error ? error.message : 'Failed to submit form. Please try again.',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const fieldClass =
    'w-full rounded-lg border border-secondary-300 bg-white px-4 py-3 text-sm outline-none transition-all focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20';

  return (
    <div className="min-h-screen bg-white">
      <Header />

      <section className="relative overflow-hidden border-b border-secondary-200 bg-white pt-28 pb-12 sm:pt-32 sm:pb-16">
        <div className="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="pointer-events-none absolute -right-16 bottom-0 h-56 w-56 rounded-full bg-navy-800/5 blur-3xl" />

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <span className="inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-primary-700">
            <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
            Get in touch
          </span>

          <h1 className="mt-5 text-4xl font-black leading-tight text-neutral-900 sm:text-5xl md:text-6xl">
            Contact{' '}
            <span className="relative inline-block text-primary-600">
              us
              <svg
                className="pointer-events-none absolute inset-x-0 top-full mt-1 h-2.5 w-full text-primary-400 sm:h-3"
                viewBox="0 0 80 12"
                preserveAspectRatio="none"
                aria-hidden
              >
                <path d="M2 9C22 2 58 2 78 9" stroke="currentColor" strokeWidth="4" strokeLinecap="round" fill="none" />
              </svg>
            </span>
          </h1>

          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-neutral-600">
            Questions about our programmes, partnerships, or how to get involved? Send a message —
            we are happy to help.
          </p>
        </div>
      </section>

      <section className="py-12 md:py-16">
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
          <div className="lg:col-span-4">
            <div className="rounded-2xl border border-secondary-200 bg-secondary-50 p-6 sm:p-8 lg:sticky lg:top-24">
              <h2 className="text-xl font-black text-neutral-900">Contact information</h2>
              <p className="mt-2 text-sm leading-relaxed text-neutral-600">
                SSEOA offices in Kabul, or reach us by email and phone.
              </p>

              <ul className="mt-8 space-y-6">
                <li>
                  <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Email</p>
                  <a
                    href="mailto:info@sseoa.af"
                    className="mt-1 block font-semibold text-navy-800 hover:text-primary-600"
                  >
                    info@sseoa.af
                  </a>
                </li>
                <li>
                  <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Phone</p>
                  <a
                    href="tel:+93729070021"
                    className="mt-1 inline-block cursor-pointer font-semibold text-navy-800 hover:text-primary-600"
                  >
                    +93 72 907 0021
                  </a>
                </li>
                <li>
                  <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Address</p>
                  <address className="mt-1 not-italic font-semibold leading-relaxed text-neutral-800">
                    House #6, Street #7
                    <br />
                    Qala-e-Fatullah
                    <br />
                    Kabul, Afghanistan
                  </address>
                </li>
              </ul>
            </div>
          </div>

          <div className="lg:col-span-8">
            <div className="rounded-2xl border border-secondary-200 bg-white p-6 sm:p-8 md:p-10">
              <h2 className="text-2xl font-black text-neutral-900">Send us a message</h2>

              {submitStatus.type && (
                <div
                  className={`mt-6 rounded-xl border px-4 py-3 text-sm font-medium ${
                    submitStatus.type === 'success'
                      ? 'border-emerald-200 bg-emerald-50 text-emerald-800'
                      : 'border-red-200 bg-red-50 text-red-800'
                  }`}
                >
                  {submitStatus.message}
                </div>
              )}

              <form onSubmit={handleSubmit} className="mt-8 space-y-5">
                <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                  <div>
                    <label htmlFor="name" className="mb-2 block text-sm font-semibold text-neutral-800">
                      Full name <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      required
                      value={formData.name}
                      onChange={handleChange}
                      className={fieldClass}
                      placeholder="Your full name"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="mb-2 block text-sm font-semibold text-neutral-800">
                      Email <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      required
                      value={formData.email}
                      onChange={handleChange}
                      className={fieldClass}
                      placeholder="you@example.com"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                  <div>
                    <label htmlFor="phone" className="mb-2 block text-sm font-semibold text-neutral-800">
                      Phone
                    </label>
                    <input
                      type="tel"
                      id="phone"
                      name="phone"
                      value={formData.phone}
                      onChange={handleChange}
                      className={fieldClass}
                      placeholder="Optional"
                    />
                  </div>
                  <div>
                    <label htmlFor="subject" className="mb-2 block text-sm font-semibold text-neutral-800">
                      Subject
                    </label>
                    <input
                      type="text"
                      id="subject"
                      name="subject"
                      value={formData.subject}
                      onChange={handleChange}
                      className={fieldClass}
                      placeholder="Optional"
                    />
                  </div>
                </div>

                <div>
                  <label htmlFor="message" className="mb-2 block text-sm font-semibold text-neutral-800">
                    Message <span className="text-red-500">*</span>
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    required
                    rows={6}
                    maxLength={5000}
                    value={formData.message}
                    onChange={handleChange}
                    className={`${fieldClass} resize-none`}
                    placeholder="How can we help?"
                  />
                  <p className="mt-1 text-xs text-neutral-400">{formData.message.length}/5000</p>
                </div>

                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="inline-flex cursor-pointer items-center justify-center rounded-lg bg-navy-800 px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-navy-700 disabled:cursor-wait disabled:opacity-60"
                >
                  {isSubmitting ? 'Sending…' : 'Send message'}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}