import React, { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router";
import { useToast } from "../components/ToastProvider";
import Logo from "../assets/logo.png";
import { LuLink2Off, LuChevronLeft, LuRefreshCcw, LuCopy } from "react-icons/lu";

const decodeMaybe = (v) => {
  try {
    return v ? decodeURIComponent(v) : "";
  } catch {
    return v || "";
  }
};

async function copyText(text) {
  const value = String(text || "");
  if (!value) return false;

  try {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(value);
      return true;
    }
  } catch (_) {}

  try {
    const ta = document.createElement("textarea");
    ta.value = value;
    ta.setAttribute("readonly", "");
    ta.style.position = "fixed";
    ta.style.top = "-9999px";
    ta.style.left = "-9999px";
    document.body.appendChild(ta);
    ta.select();
    const ok = document.execCommand("copy");
    document.body.removeChild(ta);
    return ok;
  } catch (_) {
    return false;
  }
}

function humanReason(reason) {
  const r = (reason || "").toLowerCase();
  if (r === "revoked") return "این لینک توسط فرستنده لغو شده است.";
  if (r === "expired") return "مدت اعتبار این لینک به پایان رسیده است.";
  if (r === "not_found") return "این لینک معتبر نیست یا اشتباه وارد شده است.";
  if (r === "file_missing") return "فایل مربوط به این لینک در دسترس نیست.";
  return "این لینک منقضی یا نامعتبر است.";
}

export default function ShareExpired() {
  const navigate = useNavigate();
  const { error: toastError, success, info } = useToast();

  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState("");

  const parsed = useMemo(() => {
    const url = new URL(window.location.href);
    const token = url.searchParams.get("token") || "";
    const reason = (url.searchParams.get("reason") || "expired").toLowerCase();
    const original = decodeMaybe(url.searchParams.get("original") || "");
    return { token, reason, original };
  }, []);

  useEffect(() => {
    // این صفحه بک‌اند verify نمی‌کنه، فقط پیام نشون می‌ده
    info("در حال بررسی لینک اشتراک...", { title: "اشتراک‌گذاری" });
    const msg =
      "لینک منقضی شده است. از فرستنده بخواهید فایل را دوباره به اشتراک بگذارد و لینک جدید را ارسال کند.\n\n" +
      humanReason(parsed.reason);

    setMessage(msg);
    setLoading(false);

    toastError("لینک اشتراک معتبر نیست ❌", { title: "اشتراک‌گذاری" });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onCopyToken = async () => {
    const ok = await copyText(parsed.token);
    if (ok) success("توکن کپی شد ✅", { title: "کپی" });
    else toastError("کپی انجام نشد", { title: "کپی" });
  };

  return (
    <div className="dark:text-white min-h-screen w-full flex items-center justify-center p-4">
      <div className="w-full max-w-xl rounded-3xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#16325b] shadow overflow-hidden">
        <div className="p-6 border-b border-black/10 dark:border-white/10 flex items-center gap-4">
          <img src={Logo} alt="netnest" className="h-12 w-12 rounded-xl object-contain" />
          <div className="min-w-0">
            <div className="text-lg font-extrabold">لینک اشتراک‌گذاری</div>
            <div className="text-xs text-black/60 dark:text-white/70 truncate">
              {parsed.token ? `کد لینک: ${parsed.token.slice(0, 10)}...` : "کد لینک نامشخص"}
            </div>
          </div>
        </div>

        <div className="p-6">
          <div className="p-4 rounded-2xl border shadow flex items-start gap-3 border-red-500/30 bg-red-500/10">
            <div className="pt-0.5">
              <LuLink2Off className="w-6 h-6" />
            </div>

            <div className="min-w-0">
              <div className="font-bold text-base">
                {loading ? "در حال بررسی..." : "لینک منقضی شده / نامعتبر ❌"}
              </div>

              <div className="text-sm mt-1 text-black/70 dark:text-white/80 whitespace-pre-line break-words">
                {message || (loading ? "لطفاً چند لحظه صبر کنید." : "")}
              </div>

              {!loading && (
                <div className="text-xs mt-2 opacity-70">
                  اگر به فرستنده پیام می‌دهید، می‌توانید کد لینک را هم برای پیدا کردن سریع‌تر ارسال کنید.
                </div>
              )}
            </div>
          </div>

          {/* Token box */}
          {!!parsed.token && (
            <div className="mt-4 rounded-2xl border border-black/10 dark:border-white/10 bg-white/60 dark:bg-white/5 p-3">
              <div className="text-xs text-black/60 dark:text-white/70 mb-2">کد لینک</div>
              <div className="flex gap-2">
                <input
                  value={parsed.token}
                  readOnly
                  className="flex-1 rounded-xl px-3 py-2 text-xs sm:text-sm border border-black/10 dark:border-white/10 bg-white/70 dark:bg-[#0b1f35] outline-none"
                />
                <button
                  type="button"
                  onClick={onCopyToken}
                  className="rounded-xl px-3 py-2 text-sm font-bold border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center gap-2"
                >
                  <LuCopy className="w-4 h-4" />
                  کپی
                </button>
              </div>
            </div>
          )}

          <div className="mt-5 grid sm:grid-cols-2 gap-3">
            <button
              type="button"
              onClick={() => navigate("/")}
              className="px-4 py-3 rounded-2xl shadow bg-[#43BEFF] hover:bg-[#34b6ff] text-white text-sm font-semibold transition"
            >
              رفتن به صفحه اصلی
            </button>

            <button
              type="button"
              onClick={() => window.location.reload()}
              className="px-4 py-3 rounded-2xl shadow bg-white dark:bg-[#001F3F] border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10 text-sm font-semibold transition inline-flex items-center justify-center gap-2"
            >
              <LuRefreshCcw className="w-4 h-4" />
              تلاش مجدد (رفرش)
            </button>

            <button
              type="button"
              onClick={() => navigate(-1)}
              className="sm:col-span-2 px-4 py-2 rounded-2xl text-sm text-black/60 dark:text-white/70 inline-flex items-center justify-center gap-2 hover:underline"
            >
              <LuChevronLeft className="w-4 h-4" />
              برگشت
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
