'use client';

import { useState } from 'react';
import MergePreviewForm from '../../admin/products/MergePreviewForm';
import AdminProductList from '../../admin/products/AdminProductList';
import ExpandableCreateProductSection from '../../admin/products/ExpandableCreateProductSection';
import ResetProductsButton from '../../admin/products/ResetProductsButton';
import DeletedProductsView from '../../admin/products/DeletedProductsView';

const subTabs = [
  { id: 'varor', label: '📦 Varor' },
  { id: 'skapa-merge', label: '➕ Skapa / Slå ihop' },
  { id: 'papperskorg', label: '🗑️ Papperskorg' },
] as const;

type SubTabId = typeof subTabs[number]['id'];

const tabStyle = (active: boolean): React.CSSProperties => ({
  padding: '0.4rem 1rem',
  border: 'none',
  borderBottom: active ? '2.5px solid #333' : '2.5px solid transparent',
  background: 'none',
  cursor: 'pointer',
  fontWeight: active ? 600 : 400,
  color: active ? '#111' : '#666',
  fontSize: '0.95rem',
  transition: 'color 0.15s, border-color 0.15s',
});

export default function DatabsTab() {
  const [activeSubTab, setActiveSubTab] = useState<SubTabId>('varor');

  return (
    <div>
      {/* Undertabbar */}
      <div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
        {subTabs.map((tab) => (
          <button
            key={tab.id}
            style={tabStyle(activeSubTab === tab.id)}
            onClick={() => setActiveSubTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeSubTab === 'varor' && (
        <div>
          <p style={{ color: '#555', marginBottom: '1rem' }}>
            Granska och standardisera produktnamn samt hantera kategorier.
          </p>
          <AdminProductList />
        </div>
      )}

      {activeSubTab === 'skapa-merge' && (
        <div>
          <p style={{ color: '#555', marginBottom: '1rem' }}>
            Skapa ny produkt, återställ produktdatabas eller slå ihop dubbletter.
          </p>
          <ExpandableCreateProductSection />
          <ResetProductsButton />
          <MergePreviewForm />
        </div>
      )}

      {activeSubTab === 'papperskorg' && <DeletedProductsView />}
    </div>
  );
}