"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

interface ContactData {
  pageTitle?: string;
  description?: string;
  supportEmail?: string;
  phone?: string;
  address?: string;
  businessHours?: string;
  mapLocation?: string;
  socialLinks?: { platform: string; url: string }[];
  formEnabled?: boolean;
}

export function ContactView({ data }: { data: ContactData | null }) {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const targets = root.querySelectorAll<HTMLElement>("[data-reveal]");
    if (targets.length === 0) return;
    gsap.fromTo(
      targets,
      { autoAlpha: 0, y: 28 },
      {
        autoAlpha: 1,
        y: 0,
        duration: 0.7,
        ease: "power3.out",
        stagger: 0.08,
        delay: 0.05,
      },
    );
  }, []);

  if (!data) {
    return (
      <div className="mx-auto mt-10 max-w-2xl rounded-2xl border border-dashed border-rose-200 bg-rose-50/40 p-8 text-center text-muted">
        Contact content is not yet published.
      </div>
    );
  }

  const items: { icon: React.ReactNode; title: string; lines: React.ReactNode }[] =
    [];

  if (data.supportEmail) {
    items.push({
      icon: <MailIcon className="h-5 w-5" />,
      title: "Email us",
      lines: (
        <a
          href={`mailto:${data.supportEmail}`}
          className="text-sm font-medium text-rose-700 hover:underline"
        >
          {data.supportEmail}
        </a>
      ),
    });
  }
  if (data.phone) {
    items.push({
      icon: <PhoneIcon className="h-5 w-5" />,
      title: "Call us",
      lines: (
        <a
          href={`tel:${data.phone.replace(/\s+/g, "")}`}
          className="text-sm font-medium text-rose-700 hover:underline"
        >
          {data.phone}
        </a>
      ),
    });
  }
  if (data.address) {
    items.push({
      icon: <PinIcon className="h-5 w-5" />,
      title: "Visit us",
      lines: (
        <span className="whitespace-pre-line text-sm font-medium text-foreground">
          {data.address}
        </span>
      ),
    });
  }
  if (data.businessHours) {
    items.push({
      icon: <ClockIcon className="h-5 w-5" />,
      title: "Business hours",
      lines: (
        <span className="text-sm font-medium text-foreground">
          {data.businessHours}
        </span>
      ),
    });
  }

  return (
    <div ref={rootRef} className="space-y-10">
      <section
        data-reveal
        className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-rose-500 via-pink-600 to-fuchsia-600 px-6 py-12 text-white shadow-2xl shadow-rose-500/30 sm:px-12 sm:py-16"
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_15%_20%,rgba(255,255,255,0.35),transparent_55%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_85%_85%,rgba(255,255,255,0.2),transparent_60%)]" />
        <div className="relative max-w-3xl">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/80">
            We&apos;d love to hear from you
          </p>
          <h1 className="mt-3 text-3xl font-bold sm:text-5xl">
            {data.pageTitle ?? "Contact us"}
          </h1>
          {data.description ? (
            <p className="mt-4 max-w-2xl text-base text-white/90 sm:text-lg">
              {data.description}
            </p>
          ) : (
            <p className="mt-4 max-w-2xl text-base text-white/90 sm:text-lg">
              Have a question, a story, or a dream event in mind? Reach out and
              we&apos;ll respond within one business day.
            </p>
          )}
          <div className="mt-6 flex flex-wrap gap-3">
            {data.supportEmail ? (
              <a
                href={`mailto:${data.supportEmail}`}
                className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-rose-700 shadow-md hover:bg-rose-50"
              >
                <MailIcon className="h-4 w-4" />
                Email us
              </a>
            ) : null}
            {data.phone ? (
              <a
                href={`tel:${data.phone.replace(/\s+/g, "")}`}
                className="inline-flex items-center gap-2 rounded-full border border-white/40 bg-white/10 px-5 py-2.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/20"
              >
                <PhoneIcon className="h-4 w-4" />
                {data.phone}
              </a>
            ) : null}
          </div>
        </div>
      </section>

      <section data-reveal className="grid gap-4 sm:grid-cols-2">
        {items.map((it) => (
          <div
            key={it.title}
            className="group flex items-start gap-4 rounded-2xl border border-border bg-surface p-5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-rose-200 hover:shadow-lg hover:shadow-rose-500/10"
          >
            <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-md shadow-rose-500/30 transition-transform group-hover:scale-105">
              {it.icon}
            </span>
            <div className="min-w-0">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted">
                {it.title}
              </p>
              <div className="mt-1">{it.lines}</div>
            </div>
          </div>
        ))}
      </section>

      {data.socialLinks && data.socialLinks.length > 0 ? (
        <section data-reveal>
          <h2 className="text-lg font-semibold text-foreground">Follow us</h2>
          <div className="mt-3 flex flex-wrap gap-2">
            {data.socialLinks.map((s, idx) => (
              <a
                key={idx}
                href={s.url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-white px-4 py-2 text-sm font-medium text-rose-700 transition-all hover:bg-rose-50 hover:shadow-md"
              >
                <span className="grid h-6 w-6 place-items-center rounded-full bg-rose-100 text-[10px] font-bold uppercase">
                  {s.platform?.[0]?.toUpperCase() ?? "•"}
                </span>
                {s.platform}
              </a>
            ))}
          </div>
        </section>
      ) : null}

      {data.formEnabled ? (
        <section data-reveal className="rounded-2xl border border-border bg-surface p-6 shadow-sm">
          <h2 className="text-base font-semibold text-foreground">
            Send a message
          </h2>
          <p className="mt-1 text-sm text-muted">
            Form delivery is wired up in a later phase. For now, please email us
            at{" "}
            <a
              className="font-medium text-rose-700 hover:underline"
              href={`mailto:${data.supportEmail}`}
            >
              {data.supportEmail}
            </a>
            .
          </p>
        </section>
      ) : null}

      {data.mapLocation ? (
        <section data-reveal className="rounded-2xl border border-border bg-surface p-6 shadow-sm">
          <h2 className="text-base font-semibold text-foreground">Find us</h2>
          <div
            className="prose prose-sm mt-3 max-w-none"
            dangerouslySetInnerHTML={{ __html: data.mapLocation }}
          />
        </section>
      ) : null}
    </div>
  );
}

function MailIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  );
}
function PhoneIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1l-2.22 2.2Z" />
    </svg>
  );
}
function PinIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z" />
    </svg>
  );
}
function ClockIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  );
}