"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 InviteView() {
  const router = useRouter();
  const params = useSearchParams();
  const workspaceId = params.get("workspaceId");
  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 fromQuery = params.get("token");
    if (fromQuery) setToken(fromQuery);
  }, [params]);

  async function accept(e: React.FormEvent) {
    e.preventDefault();
    if (!token.trim()) return;
    setBusy(true);
    setMessage(null);
    setIsError(false);
    try {
      const result = (await api.acceptInvite(token.trim())) as { id?: string };
      setMessage("Invite accepted. Opening workspace…");
      const dest = result.id ?? workspaceId;
      router.push(dest ? `/workspace?id=${dest}` : "/workspaces");
    } catch (err) {
      setIsError(true);
      if (err instanceof ApiError && err.status === 401) {
        setMessage("Sign in first, then accept the invite.");
        setTimeout(() => router.push("/login"), 1200);
      } else {
        setMessage(err instanceof ApiError ? JSON.stringify(err.body) : String(err));
      }
    } finally {
      setBusy(false);
    }
  }

  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">Accept invite</h1>
        <p className="page-kicker">Paste the invite token from your admin, or open the invite link directly.</p>
        <form className="form-stack" onSubmit={accept}>
          <label>
            Invite token
            <input value={token} onChange={(e) => setToken(e.target.value)} required placeholder="invite token" />
          </label>
          <button className="screen-btn primary" type="submit" disabled={busy}>
            {busy ? "Accepting…" : "Join workspace"}
          </button>
        </form>
        {message && <p className={isError ? "error-text" : "success-text"}>{message}</p>}
        <p className="auth-links">
          <Link href="/workspaces">Back to workspaces</Link>
          {workspaceId && <> · <Link href={`/admin?workspaceId=${workspaceId}`}>Admin</Link></>}
        </p>
      </div>
    </main>
  );
}

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