"use client";

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

export type VerificationStatus =
  | "success"
  | "already_verified"
  | "expired"
  | "invalid"
  | "unavailable"
  | "error";

/**
 * Landing state for the emailed confirmation link.
 *
 * Every outcome ends on an action rather than a dead end: a confirmed account
 * goes to sign-in, a stale link explains how to get a fresh one.
 */
export function VerificationResult({ status }: { status: VerificationStatus }) {
  const { language } = useI18n();
  const isDe = language === "de";

  const content = {
    success: {
      icon: <CheckCircle2 className="w-6 h-6 text-emerald-600" aria-hidden="true" />,
      eyebrow: isDe ? "Bestätigt" : "Confirmed",
      title: isDe ? "E-Mail bestätigt" : "Email confirmed",
      body: isDe
        ? "Dein Konto ist aktiv. Melde dich jetzt an, um loszulegen."
        : "Your account is active. Sign in now to get started.",
      tone: "border-emerald-600",
    },
    already_verified: {
      icon: <CheckCircle2 className="w-6 h-6 text-emerald-600" aria-hidden="true" />,
      eyebrow: isDe ? "Bereits bestätigt" : "Already confirmed",
      title: isDe ? "Alles erledigt" : "Nothing to do",
      body: isDe
        ? "Diese E-Mail-Adresse wurde bereits bestätigt. Du kannst dich direkt anmelden."
        : "This email address was already confirmed. You can sign in directly.",
      tone: "border-emerald-600",
    },
    expired: {
      icon: <Clock className="w-6 h-6 text-[#B45309]" aria-hidden="true" />,
      eyebrow: isDe ? "Abgelaufen" : "Expired",
      title: isDe ? "Link ist abgelaufen" : "This link has expired",
      body: isDe
        ? "Bestätigungslinks gelten 24 Stunden. Melde dich an — dort kannst du dir einen neuen Link senden lassen."
        : "Confirmation links last 24 hours. Head to sign-in, where you can request a fresh one.",
      tone: "border-[#B45309]",
    },
    invalid: {
      icon: <XCircle className="w-6 h-6 text-[#BA1A1A]" aria-hidden="true" />,
      eyebrow: isDe ? "Ungültig" : "Invalid",
      title: isDe ? "Link ist ungültig" : "This link isn't valid",
      body: isDe
        ? "Der Link wurde bereits benutzt oder ist unvollständig. Fordere über die Anmeldung einen neuen an."
        : "The link was already used or is incomplete. Request a new one from the sign-in page.",
      tone: "border-[#BA1A1A]",
    },
    unavailable: {
      icon: <AlertTriangle className="w-6 h-6 text-[#B45309]" aria-hidden="true" />,
      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.",
      tone: "border-[#B45309]",
    },
    error: {
      icon: <AlertTriangle className="w-6 h-6 text-[#BA1A1A]" aria-hidden="true" />,
      eyebrow: isDe ? "Fehler" : "Error",
      title: isDe ? "Etwas ist schiefgelaufen" : "Something went wrong",
      body: isDe
        ? "Die Bestätigung konnte nicht abgeschlossen werden. Bitte versuche es erneut."
        : "We couldn't complete the confirmation. Please try again.",
      tone: "border-[#BA1A1A]",
    },
  }[status];

  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>

      <Link
        href="/auth/login"
        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 ? "Zur Anmeldung" : "Go to sign in"}</span>
        <ArrowRight className="w-3.5 h-3.5" aria-hidden="true" />
      </Link>

      <Link
        href="/"
        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 Startseite" : "Back to home"}
      </Link>
    </div>
  );
}
