"use client";

import { useState } from "react";
import { EmptyState } from "@/components/ui/EmptyState";
import type { TechnicalInfoField } from "@/lib/meshkee";

type Tab = "specs" | "review" | "comments";

const TABS: { id: Tab; label: string }[] = [
  { id: "specs", label: "مشخصات فنی" },
  { id: "review", label: "نقد و بررسی" },
  { id: "comments", label: "نظرات کاربران" },
];

export function ProductTabs({
  technicalInfo,
  descriptionHtml,
}: {
  technicalInfo: TechnicalInfoField[];
  descriptionHtml?: string;
}) {
  const [active, setActive] = useState<Tab>("specs");
  const activeLabel = TABS.find((t) => t.id === active)?.label ?? "";

  return (
    <div className="mt-10">
      <div className="flex items-center gap-8 border-b border-border">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActive(tab.id)}
            className={`relative pb-4 text-sm transition-colors ${
              active === tab.id ? "font-bold text-foreground" : "text-muted hover:text-red"
            }`}
          >
            {tab.label}
            {active === tab.id && (
              <span className="absolute inset-x-0 -bottom-px h-0.5 bg-foreground" />
            )}
          </button>
        ))}
      </div>

      <div className="pt-8">
        <h2 className="mb-5 flex items-center gap-2 text-lg font-bold">
          <span className="h-2 w-2 shrink-0 rounded-full bg-red" aria-hidden />
          {activeLabel}
        </h2>

        {active === "specs" &&
          (technicalInfo.length === 0 ? (
            <EmptyState message="هنوز مشخصات فنی‌ای برای این محصول ثبت نشده است." />
          ) : (
            <div className="grid gap-3 sm:grid-cols-2">
              {technicalInfo.map((field) => (
                <div key={field.label} className="rounded-xl bg-background p-4">
                  <p className="mb-1 text-sm font-bold">{field.label} :</p>
                  <p className="text-sm text-muted">{field.value}</p>
                </div>
              ))}
            </div>
          ))}

        {active === "review" &&
          (descriptionHtml ? (
            <div
              className="prose prose-sm max-w-none"
              dangerouslySetInnerHTML={{ __html: descriptionHtml }}
            />
          ) : (
            <EmptyState message="هنوز نقد و بررسی‌ای برای این محصول ثبت نشده است." />
          ))}

        {active === "comments" && (
          <EmptyState message="هنوز نظری برای این محصول ثبت نشده است." />
        )}
      </div>
    </div>
  );
}