"use client";

import Link from "next/link";
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { api, ApiError } from "../../lib/api";
import { BrandMark, BrandWord } from "../../components/icons";

function VerifyEmailView() {
  const router = useRouter();
  const params = useSearchParams();
  const [token, setToken] = useState(params.get("token") ?? "");
  const [message, setMessage] = useState<string | null>(null);
  const [isError, setIsError] = useState(false);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    const t = params.get("token");
    if (t) {
      setToken(t);
      void verify(t);
    }
  }, []);

  async function verify(value: string) {
    if (!value.trim()) return;
    setBusy(true);
    setMessage(null);
    setIsError(false);
    try {
      await api.verifyEmail(value.trim());
      setMessage("Email verified. You can sign in now.");
      setTimeout(() => router.push("/login"), 1200);
    } catch (err) {
      setIsError(true);
      setMessage(err instanceof ApiError ? JSON.stringify(err.body) : String(err));
    } finally {
      setBusy(false);
    }
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    await verify(token);
  }

  return (
    <main className="page auth-standalone">
      <div className="auth-card">
        <div className="page-brand">
          <span className="page-brand-chip"><BrandMark /></span>
          <span className="page-brand-word"><BrandWord /></span>
        </div>
        <h1 className="page-title">Verify email</h1>
        <form className="form-stack" onSubmit={onSubmit}>
          <label>
            Verification token
            <input value={token} onChange={(e) => setToken(e.target.value)} required />
          </label>
          <button className="screen-btn primary" type="submit" disabled={busy}>
            {busy ? "Verifying…" : "Verify"}
          </button>
        </form>
        {message && <p className={isError ? "error-text" : "success-text"}>{message}</p>}
        <p className="auth-links"><Link href="/login">Back to login</Link></p>
      </div>
    </main>
  );
}

export default function VerifyEmailPage() {
  return (
    <Suspense fallback={<main className="page"><div className="empty-state">Loading…</div></main>}>
      <VerifyEmailView />
    </Suspense>
  );
}