"use client";

import { useState } from "react";
import { Button } from "@/components/ui/Button";

export function ClassLink({
  url,
  onEnter,
  entering = false,
  enterLabel = "ورود به کلاس",
  showOpen = true,
  hint,
}: {
  url?: string | null;
  onEnter?: () => void;
  entering?: boolean;
  enterLabel?: string;
  showOpen?: boolean;
  hint?: string;
}) {
  const [copied, setCopied] = useState(false);

  if (!url) {
    return <p className="text-sm text-[var(--muted)]">لینک بعد از آماده‌شدن اتاق اینجا نشان داده می‌شود.</p>;
  }

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2000);
    } catch {
      setCopied(false);
    }
  };

  return (
    <div className="space-y-2">
      <p className="break-all text-sm" dir="ltr">
        {url}
      </p>
      <div className="flex flex-wrap gap-2">
        <Button type="button" variant="secondary" onClick={copy}>
          {copied ? "کپی شد" : "کپی لینک"}
        </Button>
        {showOpen && onEnter ? (
          <Button type="button" onClick={onEnter} disabled={entering}>
            {entering ? "در حال ساخت ورود…" : enterLabel}
          </Button>
        ) : null}
        {showOpen && !onEnter ? (
          <a
            href={url}
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center rounded-xl bg-[var(--primary)] px-4 py-2 text-sm font-medium text-white"
          >
            {enterLabel}
          </a>
        ) : null}
      </div>
      <p className="text-xs text-[var(--muted)]">
        {hint ??
          (onEnter
            ? "ورود با نام ثبت‌شده شما در مدرسه انجام می‌شود و ادوبی دیگر نام نمی‌پرسد. لینک کپی‌شده مخصوص مهمان است."
            : "این لینک خودِ کلاس است. لازم نیست وارد پنل مدیریت سرور شوید.")}
      </p>
    </div>
  );
}