import { useLocale, useTranslations } from "next-intl";
import { Building2, CalendarX2, Hourglass, Link2Off, UserRoundCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/navigation";
import InviteShell from "./InviteShell";
import type { InvitePayload } from "@/lib/invite";

interface InviteUnavailableProps {
  reason: "invalid" | "expired";
  invite?: InvitePayload | null;
  dashboardUrl: string;
}

/**
 * Shown instead of the whole join flow when the link can't be used.
 * Works from both the server page and the client flow (no async APIs).
 */
export default function InviteUnavailable({
  reason,
  invite,
  dashboardUrl,
}: InviteUnavailableProps) {
  const t = useTranslations("InvitePage");
  const locale = useLocale();
  const isExpired = reason === "expired";
  const Icon = isExpired ? Hourglass : Link2Off;

  const expiredOn = invite?.x
    ? new Intl.DateTimeFormat(locale, {
        calendar: "gregory",
        day: "numeric",
        month: "long",
        year: "numeric",
      }).format(new Date(`${invite.x}T00:00:00`))
    : null;

  const rows = isExpired && invite
    ? [
        { icon: Building2, label: t("company"), value: invite.cn },
        ...(expiredOn
          ? [{ icon: CalendarX2, label: t("expiredOn"), value: expiredOn }]
          : []),
      ]
    : [];

  return (
    <InviteShell>
      <div className="flex flex-col items-center text-center gap-6 sm:gap-8">
        <div className="relative flex items-center justify-center">
          <span className="absolute size-32 sm:size-36 rounded-full border border-white/10" />
          <span className="absolute size-24 sm:size-28 rounded-full border border-white/15" />
          <span className="relative flex size-16 sm:size-20 items-center justify-center rounded-full bg-error-lighter/15 text-error-lighter">
            <Icon className="size-8 sm:size-9" strokeWidth={1.75} />
          </span>
        </div>

        <div className="flex flex-col gap-2 pt-4">
          <span className="mx-auto rounded-full bg-error-lighter/15 px-3 py-1 text-[12px] sm:text-[13px] font-bold text-error-lighter">
            {isExpired ? t("expiredBadge") : t("invalidBadge")}
          </span>
          <h1 className="text-[22px] sm:text-[30px] font-bold leading-tight">
            {isExpired ? t("expiredTitle") : t("invalidTitle")}
          </h1>
          <p className="text-[14px] sm:text-[17px] text-white/70 max-w-[440px] mx-auto">
            {isExpired ? t("expiredDescription") : t("invalidDescription")}
          </p>
        </div>

        {rows.length > 0 && (
          <dl className="w-full flex flex-col divide-y divide-white/10 rounded-[16px] border border-white/10 bg-primary-darker/40 px-4 sm:px-5">
            {rows.map(({ icon: RowIcon, label, value }) => (
              <div key={label} className="flex items-center justify-between gap-3 py-3 sm:py-3.5">
                <dt className="flex items-center gap-2.5 text-[13px] sm:text-[15px] text-white/70">
                  <span className="flex size-8 items-center justify-center rounded-full bg-white/10 text-white/80">
                    <RowIcon className="size-4" />
                  </span>
                  {label}
                </dt>
                <dd className="text-[14px] sm:text-[16px] font-bold text-white">{value}</dd>
              </div>
            ))}
          </dl>
        )}

        <div className="w-full flex items-start gap-3 rounded-[16px] bg-secondary-main/10 border border-secondary-main/25 p-4 text-start">
          <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-secondary-main text-primary-main">
            <UserRoundCheck className="size-4" />
          </span>
          <div className="flex flex-col gap-0.5">
            <p className="text-[14px] sm:text-[16px] font-bold">{t("whatNextTitle")}</p>
            <p className="text-[13px] sm:text-[14px] text-white/70">
              {t("whatNextDescription", { company: invite?.cn || t("yourCompany") })}
            </p>
          </div>
        </div>

        <div className="w-full flex flex-col-reverse sm:flex-row gap-3">
          {/* Only useful if they already joined through an earlier link */}
          <Button
            asChild
            variant="outline"
            className="flex-1 border-white/40 text-white hover:bg-white/10 hover:text-white"
          >
            <a href={dashboardUrl}>{t("signIn")}</a>
          </Button>
          <Button asChild className="flex-1 font-bold">
            <Link href="/">{t("backToSite")}</Link>
          </Button>
        </div>
      </div>
    </InviteShell>
  );
}