"use client";

import { useState } from "react";
import type { EntityComment, TechnicalInfoValue } from "@/lib/types";

type Tab = "description" | "technical" | "reviews";

export default function ProductInfoTabs({
  title,
  descriptionHtml,
  technicalValues,
  comments,
}: {
  title: string;
  descriptionHtml?: string;
  technicalValues: TechnicalInfoValue[];
  comments: EntityComment[];
}) {
  const [tab, setTab] = useState<Tab>("description");

  const tabs: { key: Tab; label: string }[] = [
    { key: "description", label: "توضیحات" },
    { key: "technical", label: "مشخصات فنی" },
    { key: "reviews", label: `دیدگاه کاربران${comments.length > 0 ? ` (${comments.length})` : ""}` },
  ];

  return (
    <div className="mt-14 md:mt-20">
      <div className="flex flex-wrap gap-2 border-b border-line pb-px">
        {tabs.map((t) => (
          <button
            key={t.key}
            type="button"
            onClick={() => setTab(t.key)}
            className={`rounded-t-lg px-5 h-11 text-sm font-bold transition-colors border-b-2 -mb-px ${
              tab === t.key
                ? "border-brand text-brand"
                : "border-transparent text-body hover:text-ink"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      <div className="pt-8">
        {tab === "description" && (
          <div>
            <h2 className="text-lg md:text-xl font-extrabold text-ink mb-4">معرفی {title}</h2>
            {descriptionHtml ? (
              <div
                className="rich-text text-body leading-8"
                dangerouslySetInnerHTML={{ __html: descriptionHtml }}
              />
            ) : (
              <p className="text-sm text-body">توضیحی برای این محصول ثبت نشده است.</p>
            )}
          </div>
        )}

        {tab === "technical" && (
          <div>
            {technicalValues.length > 0 ? (
              <dl className="divide-y divide-line rounded-xl border border-line overflow-hidden">
                {technicalValues.map((v, i) => (
                  <div key={i} className="flex justify-between gap-4 px-4 py-3 text-sm odd:bg-surface">
                    <dt className="text-body">{v.labelFa || v.label || v.key}</dt>
                    <dd className="font-bold text-ink">{v.value}</dd>
                  </div>
                ))}
              </dl>
            ) : (
              <p className="text-sm text-body">مشخصات فنی این محصول ثبت نشده است.</p>
            )}
          </div>
        )}

        {tab === "reviews" && (
          <div>
            {comments.length > 0 ? (
              <ul className="space-y-4">
                {comments.map((c) => (
                  <li key={c.id} className="rounded-xl border border-line p-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-bold text-ink">{c.authorName || "کاربر"}</span>
                      {c.createdAt && (
                        <span className="font-en text-xs text-body/60">{c.createdAt.slice(0, 10)}</span>
                      )}
                    </div>
                    {c.text && <p className="mt-2 text-sm text-body leading-7">{c.text}</p>}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-sm text-body">
                هنوز دیدگاهی برای این محصول ثبت نشده است.
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}