"use client";

import { useState } from "react";

import { cn } from "@/lib/utils";

interface TabItem {
  label: string;
  value: string;
  content?: React.ReactNode;
}

interface TabsProps {
  tabs?: TabItem[];
  defaultValue?: string;
  onChange?: (value: string) => void;
  className?: string;
}

const ratingBreakdown = [
  { stars: 5, count: 50 },
  { stars: 4, count: 4 },
  { stars: 3, count: 8 },
  { stars: 2, count: 8 },
  { stars: 1, count: 0 },
];

const reviews = [
  {
    name: "Shehani Randima N.",
    date: "30 Dec 2025",
    text: "I've been using this handbag for a few weeks now, and I'm genuinely impressed by both the quality and the attention to detail. The material feels durable yet soft to the touch, and the stitching is neat and strong, which gives me confidence that it will last a long time.",
  },
  {
    name: "Michelle Perera",
    date: "30 Dec 2025",
    text: "I'm genuinely impressed by both the quality and the attention to detail.",
  },
  {
    name: "Michelle Perera",
    date: "30 Dec 2025",
    text: "The material feels durable yet soft to the touch, and the stitching is neat and strong, which gives me confidence that it will last a long time even with regular use.",
  },
  {
    name: "Michelle Perera",
    date: "30 Dec 2025",
    text: "Impressed by both the quality and the attention to detail.",
  },
  {
    name: "Michelle Perera",
    date: "30 Dec 2025",
    text: "Impressed by both the quality and the attention to detail.",
  },
];

function StarRow({ value = 5, size = "sm" }: { value?: number; size?: "xs" | "sm" }) {
  return (
    <div className="flex items-center gap-0.5">
      {Array.from({ length: 5 }).map((_, index) => (
        <svg
          key={index}
          className={cn(
            size === "xs" ? "h-3 w-3" : "h-4 w-4",
            index < value ? "text-[#FFB800]" : "text-gray-300"
          )}
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
        </svg>
      ))}
    </div>
  );
}

function ReviewsContent() {
  const maxCount = Math.max(...ratingBreakdown.map((item) => item.count));

  return (
    <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
      <div className="flex items-start gap-6">
        <div>
          <div className="text-5xl font-medium text-[#101936]">4.5</div>
          <p className="mt-3 text-xs text-gray-500">50 New Reviews</p>
        </div>

        <div className="min-w-0 flex-1 space-y-3">
          {ratingBreakdown.map((item) => (
            <div key={item.stars} className="flex items-center gap-2">
              <span className="w-5 text-xs font-medium text-red-500">{item.stars}</span>
              <svg className="h-3 w-3 shrink-0 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
              </svg>
              <div className="h-1.5 flex-1 rounded-full bg-gray-100">
                <div
                  className="h-full rounded-full bg-[#101936]"
                  style={{ width: `${maxCount ? (item.count / maxCount) * 100 : 0}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="space-y-3">
        <div className="flex justify-end">
          <select className="h-8 rounded-full border border-[#00AFC1] bg-white px-4 text-xs font-medium text-[#00AFC1] outline-none">
            <option>Sort</option>
            <option>Most Favourable</option>
            <option>Most Helpful</option>
            <option>Most Critical</option>
            <option>Most Recent</option>
          </select>
        </div>

        <div className="space-y-3">
          {reviews.map((review, index) => (
            <article key={`${review.name}-${index}`} className="rounded-md border border-gray-100 bg-white p-4 shadow-sm">
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                <h3 className="text-xs font-semibold text-gray-900">{review.name}</h3>
                <StarRow value={5} size="xs" />
                <span className="text-[11px] text-gray-500">{review.date}</span>
              </div>
              <p className="mt-2 text-xs leading-5 text-gray-700">{review.text}</p>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

const defaultTabs = [
  {
    label: "Product Description",
    value: "description",
    content: (
      <div className="space-y-4 text-xs leading-5 text-gray-700">
        <p>
          I&apos;ve been using this handbag for Designed for everyday elegance,
          this structured handbag combines style with practicality-perfect for
          work, travel, or casual outings.
        </p>

        <div>
          <h3 className="font-semibold text-gray-900">Product Information</h3>
          <ul className="mt-1 list-disc space-y-0.5 pl-4">
            <li>Item No: CK2-30781483_EP.BRW_XL</li>
            <li>Material: Premium Calf PU</li>
            <li>Closure Type: Magnetic fastening</li>
            <li>Weight: 775 g</li>
          </ul>
        </div>

        <div>
          <h3 className="font-semibold text-gray-900">Dimensions</h3>
          <ul className="mt-1 list-disc space-y-0.5 pl-4">
            <li>Width: S - 39.5 cm</li>
            <li>Height: M - 31 cm</li>
            <li>Depth: XXL - 20 cm</li>
          </ul>
        </div>

        <div>
          <h3 className="font-semibold text-gray-900">Care Instructions</h3>
          <p className="mt-1">
            To keep your CHARLES &amp; KEITH product looking its best, store it
            in a cool, dry place and avoid prolonged exposure to moisture or
            direct sunlight.
          </p>
          <p className="mt-1">
            For detailed care guidance, visit our Product Care page. Few weeks
            now, and I&apos;m genuinely impressed by both the quality and the
            attention to detail. The material feels durable yet soft to the
            touch, and the stitching is neat and strong, which gives me
            confidence that it will last a long time even with regular use.
          </p>
        </div>
      </div>
    ),
  },
  {
    label: "Ratings & Reviews",
    value: "reviews",
    content: <ReviewsContent />,
  },
];

export default function Tabs({
  tabs = defaultTabs,
  defaultValue,
  onChange,
  className,
}: TabsProps) {
  const [activeTab, setActiveTab] = useState(defaultValue ?? tabs[0]?.value);
  const activeContent = tabs.find((tab) => tab.value === activeTab)?.content;

  const handleTabClick = (value: string) => {
    setActiveTab(value);
    onChange?.(value);
  };

  return (
    <div className={cn("w-full", className)}>
      <div className="flex items-end gap-8 overflow-x-auto border-b border-gray-200">
        {tabs.map((tab) => {
          const active = activeTab === tab.value;

          return (
            <button
              key={tab.value}
              type="button"
              onClick={() => handleTabClick(tab.value)}
              className={cn(
                "relative h-10 shrink-0 text-sm font-medium transition-colors",
                active ? "text-[#00AFC1]" : "text-gray-500 hover:text-gray-800"
              )}
            >
              {tab.label}
              {active && (
                <span className="absolute bottom-0 left-0 h-0.5 w-full rounded-full bg-[#00AFC1]" />
              )}
            </button>
          );
        })}
      </div>

      {activeContent && (
        <div className="pt-6">
          {activeContent}
        </div>
      )}
    </div>
  );
}
