"use client";

import { FormEvent, useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { ApiError, apiGet, apiPost } from "@/lib/api";
import { onlineClassMessage } from "@/lib/online-class-labels";

export default function GuestJoinPage() {
  const { roomId } = useParams<{ roomId: string }>();
  const [title, setTitle] = useState("کلاس آنلاین");
  const [name, setName] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    apiGet<{ title?: string }>(`/online-class/rooms/${roomId}/guest`)
      .then((row) => {
        if (row.title) setTitle(row.title);
      })
      .catch((err) => {
        setError(onlineClassMessage(err instanceof ApiError ? err.message : "اتاق پیدا نشد."));
      });
  }, [roomId]);

  const submit = async (event: FormEvent) => {
    event.preventDefault();
    const trimmed = name.trim();
    if (trimmed.length < 2) {
      setError("نام را وارد کنید.");
      return;
    }

    setBusy(true);
    setError(null);
    try {
      const res = await apiPost<{ join_url?: string }>(`/online-class/rooms/${roomId}/guest-join`, {
        name: trimmed,
      });
      if (!res.join_url) {
        setError("لینک ورود ساخته نشد.");
        setBusy(false);
        return;
      }
      window.location.assign(res.join_url);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "ورود انجام نشد."));
      setBusy(false);
    }
  };

  return (
    <main className="mx-auto flex min-h-screen max-w-md items-center px-4">
      <form onSubmit={submit} className="w-full rounded-2xl border border-[var(--border)] bg-white p-6 shadow-card">
        <h1 className="text-lg font-bold">{title}</h1>
        <p className="mt-2 text-sm text-[var(--muted)]">
          نام مهمان را اینجا وارد کنید. در ادوبی کانکت دیگر نام پرسیده نمی‌شود.
        </p>
        {error ? <p className="mt-3 text-sm text-red-600">{error}</p> : null}
        <label className="mt-4 block text-sm font-medium" htmlFor="guest-name">
          نام
        </label>
        <input
          id="guest-name"
          className="mt-1 w-full rounded-xl border border-[var(--border)] px-3 py-2"
          value={name}
          onChange={(event) => setName(event.target.value)}
          autoFocus
          maxLength={80}
        />
        <button
          type="submit"
          disabled={busy}
          className="mt-4 rounded-xl bg-[var(--primary)] px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
        >
          {busy ? "در حال ورود…" : "ورود به کلاس"}
        </button>
      </form>
    </main>
  );
}