"use client";

import React from "react";
import Link from "next/link";
import { AlertTriangle, ArrowRight, Clock, XCircle } from "lucide-react";
import { useI18n } from "@/lib/i18n/context";

export type ResetLinkIssue = "expired" | "invalid" | "unavailable";

/** Dead-end states for a reset link, each ending on a way forward. */
export function ResetLinkProblem({ issue }: { issue: ResetLinkIssue }) {
  const { language } = useI18n();
  const isDe = language === "de";

  const content = {
    expired: {
      icon: <Clock className="w-6 h-6 text-[#B45309]" aria-hidden="true" />,
      tone: "border-[#B45309]",
      eyebrow: isDe ? "Abgelaufen" : "Expired",
      title: isDe ? "Link ist abgelaufen" : "This link has expired",
      body: isDe
        ? "Reset-Links gelten aus Sicherheitsgründen nur 1 Stunde. Fordere einfach einen neuen an."
        : "Reset links last only 1 hour for safety. Just request a fresh one.",
    },
    invalid: {
      icon: <XCircle className="w-6 h-6 text-[#BA1A1A]" aria-hidden="true" />,
      tone: "border-[#BA1A1A]",
      eyebrow: isDe ? "Ungültig" : "Invalid",
      title: isDe ? "Link ist ungültig" : "This link isn't valid",
      body: isDe
        ? "Der Link wurde bereits benutzt, ist unvollständig oder wurde durch einen neueren ersetzt."
        : "The link was already used, is incomplete, or was replaced by a newer one.",
    },
    unavailable: {
      icon: <AlertTriangle className="w-6 h-6 text-[#B45309]" aria-hidden="true" />,
      tone: "border-[#B45309]",
      eyebrow: isDe ? "Nicht erreichbar" : "Unavailable",
      title: isDe ? "Gerade nicht möglich" : "Not right now",
      body: isDe
        ? "Die Datenbank ist derzeit nicht erreichbar. Bitte öffne den Link später erneut."
        : "The database is unreachable at the moment. Please open the link again later.",
    },
  }[issue];

  return (
    <div>
      <div className={`w-12 h-12 border ${content.tone} flex items-center justify-center mb-5`}>
        {content.icon}
      </div>

      <div className="flex items-center gap-2 mb-3">
        <span className="w-2 h-2 bg-black" aria-hidden="true" />
        <span className="font-mono text-[11px] uppercase tracking-caps text-[#475569] font-bold">
          {content.eyebrow}
        </span>
      </div>

      <h1 className="font-display text-[28px] sm:text-[32px] font-bold tracking-tighter text-black leading-[1.1]">
        {content.title}
      </h1>
      <p className="text-[14px] text-[#64748B] mt-2.5 leading-relaxed">{content.body}</p>

      {issue !== "unavailable" && (
        <Link
          href="/auth/forgot-password"
          className="mt-7 w-full h-12 flex items-center justify-center gap-2 bg-black text-white font-mono text-[12px] uppercase tracking-caps font-medium hover:bg-[#334155] transition-colors"
        >
          <span>{isDe ? "Neuen Link anfordern" : "Request a new link"}</span>
          <ArrowRight className="w-3.5 h-3.5" aria-hidden="true" />
        </Link>
      )}

      <Link
        href="/auth/login"
        className="mt-2.5 w-full h-11 flex items-center justify-center border border-[#E2E8F0] bg-white text-[#475569] font-mono text-[11px] uppercase tracking-caps hover:border-black hover:text-black transition-colors"
      >
        {isDe ? "Zur Anmeldung" : "To sign in"}
      </Link>
    </div>
  );
}
