import { useState } from 'react';
import { Tabs, buildTabItems, TAB_IDS, clampTabIndex } from './Tabs';
import { TabsLegacy } from './TabsLegacy';

const panelStyle = {
  marginTop: '24px',
  padding: '24px',
  border: '1px solid #C4C4C4',
  borderRadius: '16px',
  background: '#FFFFFF',
  fontFamily: 'IBM Plex Sans, sans-serif',
  color: '#29474C',
};

function TabsDemo({ mode = 'create', items, initialIndex = 0, headerBelowNav, showPanel = true }) {
  const resolvedItems = items ?? buildTabItems({ mode });
  const [activeIndex, setActiveIndex] = useState(() =>
    clampTabIndex(initialIndex, resolvedItems.length),
  );
  const activeId = resolvedItems[activeIndex]?.id;

  return (
    <div style={{ width: '100%', maxWidth: '960px', padding: '24px', boxSizing: 'border-box' }}>
      <Tabs
        items={resolvedItems}
        activeIndex={activeIndex}
        onChange={(index) => setActiveIndex(index)}
        headerBelowNav={headerBelowNav}
      />
      {showPanel ? (
        <div style={panelStyle}>
          <strong>Contenido del host</strong>
          <p style={{ margin: '8px 0 0' }}>
            Pestaña activa: índice {activeIndex} · id «{activeId}»
          </p>
        </div>
      ) : null}
    </div>
  );
}

const legacyTabItems = [
  {
    label: 'Pestaña 1',
    content: <div className="p-4"><p>Contenido embebido (TabsLegacy).</p></div>,
  },
  {
    label: 'Pestaña 2',
    content: <div className="p-4"><p>Segunda pestaña.</p></div>,
  },
];

export default {
  title: 'Layout/Tabs',
  component: Tabs,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    viewport: {
      viewports: {
        tabsMobile: {
          name: 'SM/MD (1023px)',
          styles: { width: '390px', height: '800px' },
        },
        tabsDesktop: {
          name: 'Desktop (1280px)',
          styles: { width: '1280px', height: '800px' },
        },
      },
    },
  },
  argTypes: {
    mode: {
      control: 'radio',
      options: ['create', 'edit'],
      description: 'Si no pasás `items`, genera las pestañas del flujo persona (como AltaEdicionPersonas).',
    },
  },
};

export const ModoAlta = {
  name: 'Alta (2 pestañas)',
  render: () => <TabsDemo mode="create" />,
};

export const ModoEdicion = {
  name: 'Edición (3 pestañas)',
  render: () => <TabsDemo mode="edit" />,
};

export const DocumentosActivo = {
  name: 'Edición · Documentos activo',
  render: () => <TabsDemo mode="edit" initialIndex={2} />,
};

export const SoloNav = {
  render: () => (
    <Tabs
      mode="edit"
      defaultActiveIndex={1}
      onChange={(index, item) => {
        // eslint-disable-next-line no-console
        console.log('tab', index, item?.id);
      }}
    />
  ),
};

export const ConCabeceraDebajo = {
  name: 'Con cabecera bajo tabs',
  render: () => (
    <TabsDemo
      mode="edit"
      initialIndex={1}
      headerBelowNav={
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: '8px',
            padding: '0 8px',
            fontFamily: 'IBM Plex Sans, sans-serif',
          }}
        >
          <span style={{ fontWeight: 600, color: '#29474C' }}>Relaciones laborales</span>
          <button
            type="button"
            style={{
              height: '40px',
              padding: '8px 12px',
              borderRadius: '8px',
              border: '1px solid #38656D',
              background: '#38656D',
              color: '#fff',
              cursor: 'pointer',
            }}
          >
            Agregar
          </button>
        </div>
      }
    />
  ),
};

export const ItemsPersonalizados = {
  name: 'Items custom',
  render: () => (
    <TabsDemo
      items={[
        { id: 'a', label: 'Pestaña A' },
        { id: 'b', label: 'Pestaña B' },
        { id: 'c', label: 'Pestaña C', disabled: true },
      ]}
    />
  ),
};

export const ModoAltaMobile = {
  name: 'Alta · viewport móvil',
  parameters: { viewport: { defaultViewport: 'tabsMobile' } },
  render: () => <TabsDemo mode="create" />,
};

export const ModoEdicionDesktop = {
  name: 'Edición · viewport desktop',
  parameters: { viewport: { defaultViewport: 'tabsDesktop' } },
  render: () => <TabsDemo mode="edit" />,
};

/** @deprecated API anterior con `content` en cada ítem. */
export const LegacyConContenido = {
  name: 'Legacy (content embebido)',
  render: () => <TabsLegacy items={legacyTabItems} />,
};

export { TAB_IDS, buildTabItems, clampTabIndex };
