"use client";

import { useState } from "react";
import ReviewList from "./reviewList";

type Spec = { id: string; label: string; value: string };
type ReviewData = {
  id: string;
  rating: number;
  title: string | null;
  body: string | null;
  isVerifiedPurchase: boolean;
  createdAt: Date;
  user: { firstName: string | null; lastName: string | null };
};

export default function ProductTabs({
  description,
  specs,
  warrantyMonths,
  reviews,
  reviewFormSlot,
}: {
  description: string;
  specs: Spec[];
  warrantyMonths: number;
  reviews: ReviewData[];
  reviewFormSlot: React.ReactNode;
}) {
  const [activeTab, setActiveTab] = useState<"description" | "reviews" | "shipping">("description");

  const tabs = [
    { id: "description" as const, label: "Description" },
    { id: "reviews" as const, label: `Reviews (${reviews.length})` },
    { id: "shipping" as const, label: "Shipping & Returns" },
  ];

  return (
    <div className="mt-16 border-t border-line pt-10">
      <div className="flex gap-8 border-b border-line mb-8">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`pb-3 text-sm font-medium uppercase tracking-wide transition-colors border-b-2 -mb-px ${
              activeTab === tab.id
                ? "border-harbor text-harbor"
                : "border-transparent text-ink/50 hover:text-ink"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === "description" && (
        <div className="max-w-3xl">
          <p className="text-sm text-ink/70 leading-relaxed whitespace-pre-line mb-8">
            {description}
          </p>

          {specs.length > 0 && (
            <div>
              <h3 className="font-display font-semibold uppercase text-sm text-ink mb-4">
                Technical Specifications
              </h3>
              <table className="w-full text-sm">
                <tbody>
                  {specs.map((spec) => (
                    <tr key={spec.id} className="border-b border-line">
                      <td className="py-2.5 text-ink/50 font-mono w-1/3">{spec.label}</td>
                      <td className="py-2.5 text-ink font-medium">{spec.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {activeTab === "reviews" && (
        <div className="grid lg:grid-cols-3 gap-10">
          <div className="lg:col-span-2">
            <ReviewList reviews={reviews} />
          </div>
          <div>{reviewFormSlot}</div>
        </div>
      )}

      {activeTab === "shipping" && (
        <div className="max-w-2xl grid sm:grid-cols-2 gap-8">
          <div>
            <h3 className="font-display font-semibold uppercase text-sm text-ink mb-3">
              Shipping
            </h3>
            <ul className="text-sm text-ink/70 space-y-2">
              <li>Free delivery within Mombasa on orders over KShs 5,000</li>
              <li>Standard delivery: 1-3 business days</li>
              <li>Same-day delivery available in Mombasa</li>
              <li>Pickup available at our Mwembe Tayari store</li>
            </ul>
          </div>
          <div>
            <h3 className="font-display font-semibold uppercase text-sm text-ink mb-3">
              Returns & Warranty
            </h3>
            <ul className="text-sm text-ink/70 space-y-2">
              <li>{warrantyMonths}-month warranty included</li>
              <li>7-day return policy on defective items</li>
              <li>Item must be in original condition</li>
              <li>Contact us to initiate a return</li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
}