import { type FormEvent, useState } from 'react';
import { CheckCircle2, Clock, FileText, Mail, MapPin, Phone, ShieldCheck } from 'lucide-react';
import { SITE, SERVICES } from '../data/content';
import { PageHero } from '../components/ui/SectionHeading';
import { FadeIn } from '../components/ui/Motion';
import { Button } from '../components/ui/Button';
import { ReferralFormModal } from '../components/tools/ReferralFormModal';

export function ContactPage() {
  const [submitted, setSubmitted] = useState(false);
  const [referralModalOpen, setReferralModalOpen] = useState(false);
  const [selectedService, setSelectedService] = useState('General Enquiry');
  const [planType, setPlanType] = useState('Plan-Managed');

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setSubmitted(true);
  }

  return (
    <>
      <PageHero
        title="Contact & Intake Centre"
        subtitle="Speak with a local care specialist, book a consultation, or submit a participant referral."
      />

      <section className="px-4 py-16">
        <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-5">
          {/* Left Details Card */}
          <FadeIn className="lg:col-span-2 space-y-6">
            <div className="rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-lg space-y-6">
              <div>
                <span className="text-xs font-bold uppercase tracking-wider text-primary">Get In Touch</span>
                <h2 className="text-2xl font-bold text-[var(--color-text)] mt-1">Melbourne Office</h2>
              </div>

              <ul className="space-y-4 text-xs text-muted">
                <li className="flex gap-3 items-start">
                  <Phone className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <div>
                    <strong className="block text-[var(--color-text)] font-semibold">Direct Intake Line</strong>
                    <a href={`tel:${SITE.phone.replace(/\s/g, '')}`} className="hover:text-primary font-bold text-sm text-primary">
                      {SITE.phone}
                    </a>
                  </div>
                </li>

                <li className="flex gap-3 items-start">
                  <Mail className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <div>
                    <strong className="block text-[var(--color-text)] font-semibold">Email Us</strong>
                    <a href={`mailto:${SITE.email}`} className="hover:text-primary">
                      {SITE.email}
                    </a>
                  </div>
                </li>

                <li className="flex gap-3 items-start">
                  <MapPin className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <div>
                    <strong className="block text-[var(--color-text)] font-semibold">Office Address</strong>
                    <span>{SITE.address}</span>
                  </div>
                </li>

                <li className="flex gap-3 items-start">
                  <Clock className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <div>
                    <strong className="block text-[var(--color-text)] font-semibold">Hours of Operation</strong>
                    <span>{SITE.hours.weekdays}</span>
                    <br />
                    <span>{SITE.hours.saturday}</span>
                    <br />
                    <span className="text-primary font-medium">{SITE.hours.sunday}</span>
                  </div>
                </li>
              </ul>

              <div className="pt-4 border-t border-theme">
                <Button
                  onClick={() => setReferralModalOpen(true)}
                  variant="outline"
                  className="w-full justify-center text-xs gap-1.5"
                >
                  <FileText className="h-4 w-4 text-primary" /> Open Referral Portal
                </Button>
              </div>
            </div>

            <div className="rounded-3xl border border-theme bg-[var(--color-bg-alt)] p-6 text-xs text-muted space-y-2">
              <p className="font-bold text-[var(--color-text)] flex items-center gap-1.5">
                <ShieldCheck className="h-4 w-4 text-primary" /> NDIS Registered Provider
              </p>
              <p>Registration ID: {SITE.providerNumber}</p>
              <p>Supporting Plan-Managed, Self-Managed & NDIA Managed participants across Victoria.</p>
            </div>
          </FadeIn>

          {/* Right Form Card */}
          <FadeIn delay={0.1} className="lg:col-span-3">
            <div id="book" className="scroll-mt-28 rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-xl md:p-8">
              <div className="flex items-center justify-between border-b border-theme pb-4 mb-6">
                <div>
                  <h2 className="text-xl font-bold text-[var(--color-text)]">Book A Free NDIS Consultation</h2>
                  <p className="mt-1 text-xs text-muted">
                    Fill out the details below. Our intake specialist will contact you within 24 hours.
                  </p>
                </div>
              </div>

              {submitted ? (
                <div className="py-12 text-center space-y-3">
                  <CheckCircle2 className="mx-auto h-12 w-12 text-primary" />
                  <h3 className="text-xl font-bold text-[var(--color-text)]">Consultation Request Received!</h3>
                  <p className="text-xs text-muted max-w-md mx-auto">
                    Thank you. We have received your booking request for <strong>{selectedService}</strong> and our team will get in touch shortly.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="grid gap-4 sm:grid-cols-2">
                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">First name *</span>
                    <input
                      required
                      placeholder="e.g. Eleanor"
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </label>

                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">Last name *</span>
                    <input
                      required
                      placeholder="e.g. Vance"
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </label>

                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">Email *</span>
                    <input
                      type="email"
                      required
                      placeholder="e.g. eleanor@example.com"
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </label>

                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">Phone *</span>
                    <input
                      type="tel"
                      required
                      placeholder="e.g. 0400 123 456"
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </label>

                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">Primary Support Interest</span>
                    <select
                      value={selectedService}
                      onChange={(e) => setSelectedService(e.target.value)}
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    >
                      <option value="General Enquiry">General NDIS Enquiry</option>
                      {SERVICES.map((s) => (
                        <option key={s.slug} value={s.title}>
                          {s.title}
                        </option>
                      ))}
                    </select>
                  </label>

                  <label className="block sm:col-span-1">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">NDIS Plan Type</span>
                    <select
                      value={planType}
                      onChange={(e) => setPlanType(e.target.value)}
                      className="mt-1 w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    >
                      <option value="Plan-Managed">Plan-Managed</option>
                      <option value="Self-Managed">Self-Managed</option>
                      <option value="Agency-Managed (NDIA)">Agency-Managed (NDIA)</option>
                      <option value="Not yet on NDIS / Applying">Not yet on NDIS / Applying</option>
                    </select>
                  </label>

                  <label className="block sm:col-span-2">
                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text)]">How can we support you? *</span>
                    <textarea
                      required
                      rows={4}
                      placeholder="Tell us about your support needs, location in Victoria, or preferred start dates..."
                      className="mt-1 w-full resize-y rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </label>

                  <div className="sm:col-span-2 flex items-center justify-between pt-2">
                    <Button type="submit">Send Consultation Request</Button>
                    <span className="text-[11px] text-muted hidden sm:inline">100% Confidential · Response in 24h</span>
                  </div>
                </form>
              )}
            </div>
          </FadeIn>
        </div>
      </section>

      <ReferralFormModal isOpen={referralModalOpen} onClose={() => setReferralModalOpen(false)} />
    </>
  );
}