"use client";

import { useEffect, useState } from "react";
import { customerPortalUrl } from "@/lib/config";
import { formatFaDate } from "@/lib/format";
import type { CommentItem } from "@/lib/comments";

export function ProductTabs({
  descriptionHtml,
  comments,
  showDescription = true,
}: {
  descriptionHtml?: string | null;
  comments: CommentItem[];
  showDescription?: boolean;
}) {
  const [tab, setTab] = useState<"description" | "comments">(showDescription ? "description" : "comments");
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    setToken(
      window.localStorage.getItem("accessToken") ||
        window.localStorage.getItem("meshkeeToken") ||
        window.localStorage.getItem("token"),
    );
  }, []);

  return (
    <section className="mt-10 rounded-2xl bg-white p-5 sm:p-7">
      {showDescription ? (
        <div className="flex gap-2 border-b border-line pb-3">
          <button
            type="button"
            onClick={() => setTab("description")}
            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "description" ? "bg-sky text-navy" : "text-muted"}`}
          >
            توضیحات
          </button>
          <button
            type="button"
            onClick={() => setTab("comments")}
            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "comments" ? "bg-sky text-navy" : "text-muted"}`}
          >
            نظرات
          </button>
        </div>
      ) : (
        <h2 className="text-[16px] font-bold text-navy">نظرات</h2>
      )}

      {tab === "description" ? (
        descriptionHtml ? (
          <div className="rich-text mt-5 text-[14px] leading-8 text-ink" dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
        ) : (
          <p className="mt-5 text-[13px] text-muted">توضیحاتی برای این محصول ثبت نشده است.</p>
        )
      ) : (
        <div className="mt-5 space-y-4">
          {comments.length === 0 ? (
            <p className="text-[13px] text-muted">نظری ثبت نشده است.</p>
          ) : (
            comments.map((comment, index) => (
              <article key={comment.id ?? index} className="rounded-xl bg-mist p-4">
                <p className="text-[13px] font-bold text-navy">{comment.authorName || "کاربر"}</p>
                {comment.createdAt ? <p className="mt-1 text-[11px] text-muted">{formatFaDate(comment.createdAt)}</p> : null}
                <p className="mt-2 text-[13px] leading-7 text-ink">{comment.text}</p>
              </article>
            ))
          )}

          {token ? (
            <p className="text-[13px] text-muted">برای مدیریت نظرات از حساب کاربری خود استفاده کنید.</p>
          ) : (
            <div className="rounded-2xl bg-sky p-5">
              <p className="text-[14px] font-bold text-navy">برای ثبت نظر وارد شوید</p>
              <p className="mt-1 text-[13px] text-muted">نظرات فقط برای کاربران واردشده فعال است.</p>
              <a
                href={customerPortalUrl}
                className="mt-4 inline-flex h-11 items-center rounded-xl bg-primary px-5 text-[13px] font-bold text-white"
              >
                ورود / ثبت‌نام
              </a>
            </div>
          )}
        </div>
      )}
    </section>
  );
}