"use client";

import { use, useState } from "react";
import Link from "next/link";
import { MailX, CheckCircle2, Loader2 } from "lucide-react";

interface PageProps {
  params: Promise<{ contactId: string }>;
}

export default function UnsubscribePage({ params }: PageProps) {
  const { contactId } = use(params);
  const [status, setStatus] = useState<"idle" | "submitting" | "done">("idle");

  async function handleUnsubscribe() {
    setStatus("submitting");
    try {
      await fetch(`/api/unsubscribe/${contactId}`, { method: "POST" });
    } finally {
      setStatus("done");
    }
  }

  return (
    <div className="min-h-screen bg-zinc-50 flex items-center justify-center p-4 text-zinc-900 font-sans">
      <div className="max-w-md w-full bg-white border border-zinc-200/80 rounded-2xl p-8 shadow-xs text-center space-y-4">
        <div className="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center mx-auto">
          {status === "done" ? <CheckCircle2 className="w-6 h-6" /> : <MailX className="w-6 h-6" />}
        </div>

        {status === "done" ? (
          <div className="space-y-1">
            <h1 className="text-xl font-extrabold text-zinc-900">Descadastro confirmado</h1>
            <p className="text-xs text-zinc-600">
              Você não receberá mais e-mails desta lista. Se mudar de ideia, pode se cadastrar novamente
              a qualquer momento.
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="space-y-1">
              <h1 className="text-xl font-extrabold text-zinc-900">Cancelar inscrição</h1>
              <p className="text-xs text-zinc-600">
                Tem certeza que deseja parar de receber e-mails desta lista?
              </p>
            </div>
            <button
              type="button"
              onClick={handleUnsubscribe}
              disabled={status === "submitting"}
              className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold shadow-xs transition-all disabled:opacity-60"
            >
              {status === "submitting" && <Loader2 className="w-4 h-4 animate-spin" />}
              <span>{status === "submitting" ? "Processando..." : "Confirmar descadastro"}</span>
            </button>
          </div>
        )}

        <div className="pt-2">
          <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-700 underline">
            Voltar ao início
          </Link>
        </div>
      </div>
    </div>
  );
}