import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import SiteHero from "@/components/site/SiteHero";
import {
  HexPatternBg,
  PlaceholderMedia,
} from "@/components/site/PlaceholderMedia";
import { INTL } from "@/config/intlAssets";
import { contentApi } from "@/services";

const FALLBACK_MEMBERS = [
  { id: 1, name: "Gordon Guyatt", org: "McMaster University, Canada" },
  { id: 2, name: "Gordon Guyatt", org: "McMaster University, Canada" },
  { id: 3, name: "Gordon Guyatt", org: "McMaster University, Canada" },
  { id: 4, name: "Gordon Guyatt", org: "McMaster University, Canada" },
];

export default function PeoplePage() {
  const [members, setMembers] = useState(FALLBACK_MEMBERS);

  useEffect(() => {
    let alive = true;
    contentApi
      .listProfessors({ limit: 8 })
      .then((res) => {
        if (!alive) return;
        const list = res?.results || [];
        if (list.length) {
          setMembers(
            list.slice(0, 4).map((p) => ({
              id: p.id,
              name: p.name || p.name_en || "Member",
              org: p.organization_name || p.title || "Affiliation",
              logo: p.logo,
            })),
          );
        }
      })
      .catch(() => {});
    return () => {
      alive = false;
    };
  }, []);

  return (
    <div className="bg-white">
      <SiteHero />

      <HexPatternBg className="pb-16">
        {/* Mission & Vision */}
        <section className="site-container grid grid-cols-1 items-center gap-10 py-12 md:grid-cols-2 md:py-16">
          <img
            src={INTL.bgMission}
            alt="Mission & Vision"
            className="aspect-[5/4] w-full rounded-tr-[80px] object-cover"
          />
          <div>
            <h2 className="mb-3 text-xl font-bold italic text-(--star-accent)">
              — Mission
            </h2>
            <p className="mb-8 text-[15px] leading-7 text-[#334]">
              Promote trustworthy, transparent, and applicable clinical practice
              guidelines through rigorous evaluation and open collaboration.
              Placeholder mission text for redesign preview.
            </p>
            <h2 className="mb-3 text-xl font-bold italic text-(--star-accent)">
              — Vision
            </h2>
            <p className="text-[15px] leading-7 text-[#334]">
              A world where guideline users can quickly identify recommendations
              worth applying. Placeholder vision text for redesign preview.
            </p>
          </div>
        </section>

        {/* Advisory Committees */}
        <section id="committees" className="site-container pb-6">
          <h2 className="mb-10 text-center text-2xl font-bold italic text-[#1a2b56] md:text-[30px]">
            Advisory Committees
          </h2>
          <div className="grid grid-cols-2 gap-5 md:grid-cols-4 md:gap-6">
            {members.map((m) => (
              <article key={m.id} className="text-center">
                {m.logo ? (
                  <img
                    src={m.logo}
                    alt={m.name}
                    className="mb-0 aspect-[3/4] w-full object-cover"
                  />
                ) : (
                  <PlaceholderMedia
                    label="Portrait"
                    tone="warm"
                    className="aspect-[3/4] w-full"
                  />
                )}
                <div
                  className="relative -mt-px bg-(--star-primary) px-3 py-2.5 text-sm font-semibold text-white"
                  style={{
                    clipPath: "polygon(0 0, 100% 0, 92% 100%, 0 100%)",
                  }}
                >
                  {m.name}
                </div>
                <p className="mt-2 text-xs text-[#778]">{m.org}</p>
              </article>
            ))}
          </div>
          <div className="mt-10 text-center">
            <Link
              to="/specialist"
              className="inline-flex items-center gap-1 text-sm text-(--star-accent) no-underline hover:underline"
            >
              View team members
              <img src={INTL.iconMore} alt="" className="h-3 w-3" />
            </Link>
          </div>
        </section>
      </HexPatternBg>
    </div>
  );
}