import { useState } from 'react';
import { Stepper } from './Stepper';
import { Typography } from '../../Atoms/Typography/Typography';
import { PrimaryActionButton } from '../../Atoms/PrimaryActionButton/PrimaryActionButton';

const relacionLaboralSteps = [
  { key: 'empresa', label: 'Empresa' },
  { key: 'datos', label: 'Datos laborales' },
  { key: 'confirmacion', label: 'Confirmación' },
];

const cuatroPasosSteps = [
  { key: 'empresa', label: 'Empresa' },
  { key: 'datos', label: 'Datos laborales' },
  { key: 'documentos', label: 'Documentos' },
  { key: 'confirmacion', label: 'Confirmación' },
];

export default {
  title: 'Layout/Stepper',
  component: Stepper,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
};

export const RelacionLaboral = {
  name: 'Relación laboral (3 pasos)',
  render: function RelacionLaboralStory() {
    const [currentStep, setCurrentStep] = useState(0);
    return (
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <Typography
          variant="h2"
          style={{
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeight: 600,
            fontSize: '20px',
            lineHeight: '30px',
            color: '#29474C',
            textAlign: 'center',
            margin: '0 0 24px',
          }}
        >
          Nueva relación laboral
        </Typography>
        <Stepper
          steps={relacionLaboralSteps}
          currentStep={currentStep}
          ariaLabel="Pasos del alta de relación laboral"
          hideStepLabelsOnMobile
        />
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 32 }}>
          <PrimaryActionButton
            variant="outline"
            text="Anterior"
            onClick={() => setCurrentStep((s) => Math.max(0, s - 1))}
            disabled={currentStep === 0}
          />
          <PrimaryActionButton
            variant="primary"
            text="Siguiente"
            onClick={() => setCurrentStep((s) => Math.min(relacionLaboralSteps.length - 1, s + 1))}
            disabled={currentStep === relacionLaboralSteps.length - 1}
          />
        </div>
      </div>
    );
  },
};

export const CuatroPasos = {
  name: 'Cuatro pasos',
  render: function CuatroPasosStory() {
    const [currentStep, setCurrentStep] = useState(0);
    return (
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <Typography
          variant="h2"
          style={{
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeight: 600,
            fontSize: '20px',
            lineHeight: '30px',
            color: '#29474C',
            textAlign: 'center',
            margin: '0 0 24px',
          }}
        >
          Alta con documentación
        </Typography>
        <Stepper
          steps={cuatroPasosSteps}
          currentStep={currentStep}
          ariaLabel="Pasos del flujo de alta"
          hideStepLabelsOnMobile
        />
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 32 }}>
          <PrimaryActionButton
            variant="outline"
            text="Anterior"
            onClick={() => setCurrentStep((s) => Math.max(0, s - 1))}
            disabled={currentStep === 0}
          />
          <PrimaryActionButton
            variant="primary"
            text="Siguiente"
            onClick={() => setCurrentStep((s) => Math.min(cuatroPasosSteps.length - 1, s + 1))}
            disabled={currentStep === cuatroPasosSteps.length - 1}
          />
        </div>
      </div>
    );
  },
};

export const CuatroPasosPasoDos = {
  name: 'Cuatro pasos — paso 2 activo',
  args: {
    steps: cuatroPasosSteps,
    currentStep: 1,
    ariaLabel: 'Pasos del flujo de alta',
  },
};

export const PasoActivo = {
  args: {
    steps: relacionLaboralSteps,
    currentStep: 0,
    ariaLabel: 'Pasos del alta de relación laboral',
  },
};

export const PasoIntermedio = {
  args: {
    steps: relacionLaboralSteps,
    currentStep: 1,
    ariaLabel: 'Pasos del alta de relación laboral',
  },
};

export const Completado = {
  args: {
    steps: relacionLaboralSteps,
    currentStep: 2,
    ariaLabel: 'Pasos del alta de relación laboral',
  },
};

export const SinEtiquetas = {
  args: {
    steps: relacionLaboralSteps,
    currentStep: 1,
    showStepLabels: false,
    ariaLabel: 'Pasos',
  },
};

export const MobileSoloNumeros = {
  name: 'Mobile — solo números',
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
  },
  args: {
    steps: relacionLaboralSteps,
    currentStep: 1,
    hideStepLabelsOnMobile: true,
    ariaLabel: 'Pasos del alta de relación laboral',
  },
};
