'use client';

import { useState } from 'react';

interface ProductTabsProps {
  description?: string;
  ingredients?: string;
  usage?: string;
  dosage?: string;
  contraindications?: string;
  side_effects?: string;
  storage?: string;
  registration_number?: string;
}

const ALL_TABS = [
  { key: 'mo-ta', label: 'Mô tả' },
  { key: 'thanh-phan', label: 'Thành phần' },
  { key: 'chi-dinh', label: 'Chỉ định' },
  { key: 'lieu-dung', label: 'Liều dùng' },
  { key: 'chong-chi-dinh', label: 'Chống chỉ định' },
  { key: 'tac-dung-phu', label: 'Tác dụng phụ' },
  { key: 'thong-tin-khac', label: 'Thông tin khác' },
];

function hasContent(val?: string) {
  if (!val) return false;
  const stripped = val.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').trim();
  return stripped.length > 0;
}

export default function ProductTabs({
  description,
  ingredients,
  usage,
  dosage,
  contraindications,
  side_effects,
  storage,
  registration_number,
}: ProductTabsProps) {
  const [activeTab, setActiveTab] = useState('');

  const visibleTabs = ALL_TABS.filter((tab) => {
    if (tab.key === 'mo-ta') return hasContent(description);
    if (tab.key === 'thanh-phan') return hasContent(ingredients);
    if (tab.key === 'chi-dinh') return hasContent(usage);
    if (tab.key === 'lieu-dung') return hasContent(dosage);
    if (tab.key === 'chong-chi-dinh') return hasContent(contraindications);
    if (tab.key === 'tac-dung-phu') return hasContent(side_effects);
    if (tab.key === 'thong-tin-khac') return true;
    return false;
  });

  const currentActive =
    visibleTabs.some((t) => t.key === activeTab)
      ? activeTab
      : visibleTabs[0]?.key ?? 'mo-ta';

  return (
    <div className="bg-white rounded-2xl shadow-card border border-surface-100 overflow-hidden">
      {/* Tab Bar */}
      <div className="flex overflow-x-auto border-b border-surface-200 scrollbar-hide">
        {visibleTabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`
              relative px-6 py-4 font-semibold text-sm whitespace-nowrap transition-all duration-200 shrink-0
              ${currentActive === tab.key
                ? 'text-primary-600 bg-white'
                : 'text-dark-400 hover:text-primary-500 bg-surface-50/50 hover:bg-white'
              }
            `}
          >
            {tab.label}
            {currentActive === tab.key && (
              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-500 rounded-t-full" />
            )}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      <div className="p-6 md:p-10 min-h-[200px]">
        {currentActive === 'mo-ta' && (
          <div
            className="prose prose-sm max-w-none text-dark-500 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: description || '<p>Đang cập nhật</p>' }}
          />
        )}

        {currentActive === 'thanh-phan' && (
          <div>
            <p className="text-xs font-bold text-primary-600 uppercase tracking-wider mb-3">THÀNH PHẦN:</p>
            <div
              className="prose prose-sm max-w-none text-dark-600 leading-relaxed"
              dangerouslySetInnerHTML={{ __html: ingredients || '<p>Đang cập nhật</p>' }}
            />
          </div>
        )}

        {currentActive === 'chi-dinh' && (
          <div
            className="prose prose-sm max-w-none text-dark-500 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: usage || '<p>Đang cập nhật</p>' }}
          />
        )}

        {currentActive === 'lieu-dung' && (
          <div
            className="prose prose-sm max-w-none text-dark-500 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: dosage || '<p>Đang cập nhật</p>' }}
          />
        )}

        {currentActive === 'chong-chi-dinh' && (
          <div
            className="prose prose-sm max-w-none text-dark-500 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: contraindications || '<p>Đang cập nhật</p>' }}
          />
        )}

        {currentActive === 'tac-dung-phu' && (
          <div
            className="prose prose-sm max-w-none text-dark-500 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: side_effects || '<p>Đang cập nhật</p>' }}
          />
        )}

        {currentActive === 'thong-tin-khac' && (
          <div className="space-y-5 text-dark-500">
            {registration_number && (
              <div>
                <p className="text-xs font-bold text-primary-600 uppercase tracking-wider mb-1">SỐ ĐĂNG KÝ:</p>
                <p className="leading-relaxed">{registration_number}</p>
              </div>
            )}
            <div>
              <p className="text-xs font-bold text-primary-600 uppercase tracking-wider mb-1">BẢO QUẢN:</p>
              <p className="leading-relaxed">
                {storage || 'Để nơi khô ráo, thoáng mát, tránh ánh sáng trực tiếp.'}
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}