"use client";

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

interface AboutData {
  pageTitle?: string;
  subtitle?: string;
  heroContent?: string;
  mainDescription?: string;
  mission?: string;
  vision?: string;
  featureSections?: { title: string; description: string; icon?: string }[];
  statistics?: { label: string; value: string; icon?: string }[];
  teamSections?: {
    title?: string;
    description?: string;
    members?: { name: string; role: string; bio?: string }[];
  };
}

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

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const ctx = gsap.context(() => {
      const reveals = root.querySelectorAll<HTMLElement>("[data-reveal]");
      gsap.fromTo(
        reveals,
        { autoAlpha: 0, y: 30 },
        {
          autoAlpha: 1,
          y: 0,
          duration: 0.8,
          ease: "power3.out",
          stagger: 0.1,
        },
      );
      const counters = root.querySelectorAll<HTMLElement>("[data-counter]");
      counters.forEach((el) => {
        const target = el.dataset.counter ?? "0";
        const numeric = parseFloat(target.replace(/[^0-9.]/g, ""));
        if (!Number.isFinite(numeric)) return;
        const obj = { v: 0 };
        gsap.to(obj, {
          v: numeric,
          duration: 1.6,
          ease: "power2.out",
          onUpdate: () => {
            el.textContent = target.replace(
              String(numeric),
              Math.round(obj.v).toLocaleString(),
            );
          },
        });
      });
    }, root);
    return () => ctx.revert();
  }, []);

  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">
        About content is not yet published.
      </div>
    );
  }

  const stats = (data.statistics ?? []).slice(0, 4);

  return (
    <div ref={rootRef} className="space-y-14">
      <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-14 text-white shadow-2xl shadow-rose-500/30 sm:px-12 sm:py-20"
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_15%,rgba(255,255,255,0.4),transparent_55%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_85%_85%,rgba(255,255,255,0.25),transparent_55%)]" />
        <div className="relative max-w-3xl">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/80">
            Our story
          </p>
          <h1 className="mt-3 text-4xl font-bold sm:text-6xl">
            {data.pageTitle ?? "About us"}
          </h1>
          {data.subtitle ? (
            <p className="mt-4 max-w-2xl text-lg text-white/90 sm:text-xl">
              {data.subtitle}
            </p>
          ) : null}
          {data.heroContent ? (
            <p className="mt-4 max-w-2xl text-base text-white/85">
              {data.heroContent}
            </p>
          ) : null}
        </div>
      </section>

      {data.mainDescription ? (
        <section
          data-reveal
          className="mx-auto max-w-3xl text-center text-base leading-relaxed text-foreground/90"
        >
          {data.mainDescription}
        </section>
      ) : null}

      {(data.mission || data.vision) ? (
        <section data-reveal className="grid gap-5 sm:grid-cols-2">
          {data.mission ? (
            <div className="relative overflow-hidden rounded-2xl border border-rose-100 bg-gradient-to-br from-rose-50 via-white to-amber-50 p-6 shadow-sm">
              <div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-rose-200/50 blur-2xl" />
              <span className="inline-grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-md shadow-rose-500/30">
                <TargetIcon className="h-5 w-5" />
              </span>
              <h2 className="mt-3 text-base font-semibold text-rose-700">
                Our mission
              </h2>
              <p className="mt-2 text-sm leading-relaxed text-foreground/90">
                {data.mission}
              </p>
            </div>
          ) : null}
          {data.vision ? (
            <div className="relative overflow-hidden rounded-2xl border border-fuchsia-100 bg-gradient-to-br from-fuchsia-50 via-white to-rose-50 p-6 shadow-sm">
              <div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-fuchsia-200/50 blur-2xl" />
              <span className="inline-grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-rose-600 text-white shadow-md shadow-fuchsia-500/30">
                <EyeIcon className="h-5 w-5" />
              </span>
              <h2 className="mt-3 text-base font-semibold text-fuchsia-700">
                Our vision
              </h2>
              <p className="mt-2 text-sm leading-relaxed text-foreground/90">
                {data.vision}
              </p>
            </div>
          ) : null}
        </section>
      ) : null}

      {stats.length > 0 ? (
        <section
          data-reveal
          className="grid gap-3 rounded-3xl border border-rose-100 bg-gradient-to-r from-rose-50 via-pink-50 to-amber-50 p-6 sm:grid-cols-2 lg:grid-cols-4"
        >
          {stats.map((s, idx) => (
            <div
              key={idx}
              className="rounded-2xl bg-white/80 p-4 text-center shadow-sm backdrop-blur"
            >
              <p
                data-counter={s.value}
                className="text-3xl font-bold text-rose-700"
              >
                {s.value}
              </p>
              <p className="mt-1 text-xs font-medium uppercase tracking-wide text-muted">
                {s.label}
              </p>
            </div>
          ))}
        </section>
      ) : null}

      {data.featureSections && data.featureSections.length > 0 ? (
        <section data-reveal className="space-y-5">
          <div className="text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.22em] text-rose-500">
              What we offer
            </p>
            <h2 className="mt-2 text-2xl font-semibold text-foreground sm:text-3xl">
              Built for every celebration
            </h2>
          </div>
          <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {data.featureSections.map((f, idx) => (
              <li
                key={idx}
                className="group rounded-2xl border border-border bg-surface p-5 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-rose-200 hover:shadow-xl hover:shadow-rose-500/15"
              >
                <span className="grid h-10 w-10 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:rotate-6 group-hover:scale-105">
                  <SparkIcon className="h-5 w-5" />
                </span>
                <h3 className="mt-3 text-sm font-semibold text-foreground">
                  {f.title}
                </h3>
                <p className="mt-1 text-sm leading-relaxed text-muted">
                  {f.description}
                </p>
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      {data.teamSections?.members && data.teamSections.members.length > 0 ? (
        <section data-reveal className="space-y-5">
          <div className="text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.22em] text-rose-500">
              The team
            </p>
            <h2 className="mt-2 text-2xl font-semibold text-foreground sm:text-3xl">
              {data.teamSections.title ?? "Meet our team"}
            </h2>
            {data.teamSections.description ? (
              <p className="mt-2 text-sm text-muted">
                {data.teamSections.description}
              </p>
            ) : null}
          </div>
          <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {data.teamSections.members.map((m, idx) => {
              const initials = m.name
                .split(/\s+/)
                .filter(Boolean)
                .slice(0, 2)
                .map((w) => w[0]?.toUpperCase() ?? "")
                .join("");
              return (
                <li
                  key={idx}
                  className="group rounded-2xl border border-border bg-surface p-5 text-center shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-rose-200 hover:shadow-xl hover:shadow-rose-500/15"
                >
                  <span className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-rose-500 to-fuchsia-600 text-lg font-bold text-white shadow-md shadow-rose-500/30 transition-transform group-hover:scale-105">
                    {initials || "??"}
                  </span>
                  <p className="mt-3 text-sm font-semibold text-foreground">
                    {m.name}
                  </p>
                  <p className="text-xs text-rose-600">{m.role}</p>
                  {m.bio ? (
                    <p className="mt-2 text-sm leading-relaxed text-muted">
                      {m.bio}
                    </p>
                  ) : null}
                </li>
              );
            })}
          </ul>
        </section>
      ) : null}
    </div>
  );
}

function TargetIcon(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" />
      <circle cx="12" cy="12" r="5" />
      <circle cx="12" cy="12" r="1.5" fill="currentColor" />
    </svg>
  );
}
function EyeIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  );
}
function SparkIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 2 14 9l7 2-7 2-2 7-2-7-7-2 7-2z" />
    </svg>
  );
}