import { Button } from "@/components/ui/button";
import { DirectionalChevron } from "@/components/ui/directional-chevron";
import { Link } from "@/i18n/routing";
import { getLocaleDirection, type Locale } from "@/lib/i18n-utils";
import { BadgeCheck, HandHeart, MessageCircle, Sparkles } from "lucide-react";
import { getLocale, getTranslations } from "next-intl/server";
import Image from "next/image";
import type { LucideIcon } from "lucide-react";
import type {
  WebsiteAboutIdentityCardItem,
  WebsiteAboutIdentityData,
} from "@/lib/api/website/about-types";

type IdentityCard = {
  key: "vision" | "who" | "values" | "mission";
  tone: string;
  iconTone: string;
  Icon: LucideIcon;
};

type OurGoalsProps = {
  data?: WebsiteAboutIdentityData;
};

const identityCards: IdentityCard[] = [
  {
    key: "vision",
    tone: "bg-primary-50",
    iconTone: "text-status-green",
    Icon: MessageCircle,
  },
  {
    key: "who",
    tone: "bg-muted",
    iconTone: "text-primary",
    Icon: BadgeCheck,
  },
  {
    key: "values",
    tone: "bg-primary-50",
    iconTone: "text-primary",
    Icon: HandHeart,
  },
  {
    key: "mission",
    tone: "bg-primary-50",
    iconTone: "text-[var(--yellow-500)]",
    Icon: Sparkles,
  },
];

function getCardText(
  cardConfig: IdentityCard,
  apiCards: WebsiteAboutIdentityCardItem[] | undefined,
  t: Awaited<ReturnType<typeof getTranslations>>,
) {
  const apiCard = apiCards?.find((item) => item.key === cardConfig.key);

  return {
    title: apiCard?.title || t(`${cardConfig.key}.title`),
    description: apiCard?.description || t(`${cardConfig.key}.description`),
  };
}

export default async function OurGoals({ data }: OurGoalsProps) {
  const t = await getTranslations("aboutUs.identity");
  const locale = (await getLocale()) as Locale;
  const direction = getLocaleDirection(locale);

  const badge = data?.badge || t("badge");
  const year = data?.year || t("year");
  const title = data?.title || t("title");
  const description = data?.description || t("description");
  const contactText = data?.contactText || t("contact");
  const contactHref = data?.contactHref || "/contact-us";
  const learnMoreText = data?.learnMoreText || t("learnMore");
  const learnMoreHref = data?.learnMoreHref || "/about-us";
  const imageSrc = data?.image?.src || "/images/services/service-placeholder.jpg";

  return (
    <section className="bg-white px-4 pb-20 pt-12 sm:px-8 lg:px-[120px] lg:pb-24">
      <div className="mx-auto flex max-w-[1180px] flex-col items-center gap-12">
        <div className="flex max-w-[980px] flex-col items-center gap-4 text-center">
          <div className="flex items-center gap-3 text-secondary">
            <span className="h-4 w-4 rounded-full bg-current" />
            <p className="text-[18px] font-semibold">{badge}</p>
          </div>
          <h2 className="flex flex-wrap items-center justify-center gap-3 text-[36px] font-bold leading-[1.35] text-foreground sm:text-[44px]">
            <span className="rounded-2xl bg-primary px-4 py-2 text-white">
              {year}
            </span>
            <span>{title}</span>
          </h2>
          <p className="text-[17px] leading-[1.8] text-muted-foreground">
            {description}
          </p>
        </div>

        <div
          className="grid w-full gap-6 lg:grid-cols-[1fr_370px_1fr] lg:items-stretch"
          dir="ltr"
        >
          <div className="grid gap-6">
            <IdentityInfoCard card={identityCards[0]} direction={direction} data={data} />
            <IdentityInfoCard card={identityCards[2]} direction={direction} data={data} />
          </div>

          <div className="relative min-h-[420px] overflow-hidden rounded-[28px] shadow-[0_18px_50px_rgba(13,52,48,0.14)]">
            <Image
              src={imageSrc}
              alt={data?.image?.alt || t("imageAlt")}
              fill
              className="object-cover"
              sizes="(min-width: 1024px) 370px, 100vw"
              priority
            />
          </div>

          <div className="grid gap-6">
            <IdentityInfoCard card={identityCards[1]} direction={direction} data={data} />
            <IdentityInfoCard card={identityCards[3]} direction={direction} data={data} />
          </div>
        </div>

        <div className="flex flex-wrap items-center justify-center gap-4">
          <Button
            asChild
            variant="outline"
            className="h-12 rounded-full border-primary px-7 text-primary hover:bg-highlights-bg"
          >
            <Link href={contactHref}>{contactText}</Link>
          </Button>
          <Button
            asChild
            className="h-12 rounded-full bg-primary px-7 text-white hover:bg-primary-700"
          >
            <Link href={learnMoreHref}>
              <DirectionalChevron direction={direction} className="h-4 w-4" />
              {learnMoreText}
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
}

async function IdentityInfoCard({
  card,
  direction,
  data,
}: {
  card: IdentityCard;
  direction: "rtl" | "ltr";
  data?: WebsiteAboutIdentityData;
}) {
  const t = await getTranslations("aboutUs.identity");
  const Icon = card.Icon;
  const text = getCardText(card, data?.cards, t);

  return (
    <article
      className={`flex min-h-[205px] flex-col gap-4 rounded-[28px] p-8 text-start ${card.tone}`}
      dir={direction}
    >
      <div className="flex items-start justify-between gap-4">
        <h3 className="text-[24px] font-bold leading-[1.35] text-foreground">
          {text.title}
        </h3>
        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white">
          <Icon className={`h-6 w-6 ${card.iconTone}`} />
        </span>
      </div>
      <p className="text-[16px] leading-[1.8] text-muted-foreground">
        {text.description}
      </p>
    </article>
  );
}