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

export default {
  title: 'Layout/ConfiguracionOverview',
  component: ConfiguracionOverview,
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'Título principal del componente',
    },
    children: {
      control: false,
      description: 'Contenido del overview (ej. resumen, estadísticas, enlaces)',
    },
    slotStates: {
      control: 'object',
      description: "Estados de cada ítem: 'Completado' (check verde) o 'Pendiente' (ellipsis gris). Cada ítem es independiente.",
    },
    slotTitles: {
      control: 'object',
      description: 'Títulos de cada ítem (rectángulo superior). Array de 5 strings.',
    },
    slotSubtitles: {
      control: 'object',
      description: 'Subtítulos de cada ítem (rectángulo inferior). Array de 5 strings.',
    },
    onSlotStateChange: {
      action: 'onSlotStateChange',
      description: 'Callback (índice, nuevoEstado) al modificar un ítem; el padre debe actualizar slotStates para que cambie el icono.',
    },
  },
};

export const Default = {
  args: {
    title: 'Configuración inicial',
    children: null,
    slotStates: ['Completado', 'Completado', 'Pendiente', 'Pendiente', 'Pendiente'],
    slotTitles: [
      'Tenant configurado (nombre/idioma/timezone/logo)',
      'Administradores existentes (al menos 1)',
      'Integración SSO/AD',
      'Configuración de Roles RBAC',
      'Empresas',
    ],
    slotSubtitles: [
      'Parámetros básicos de identidad y localización definidos.',
      'Acceso técnico de administración garantizado.',
      'Conexión con el proveedor de identidad externa.',
      'Definición de matrices de permisos y perfiles.',
      'Carga de razones sociales y estructura legal.',
    ],
  },
};

export const ConContenidoPersonalizado = {
  args: {
    title: 'RESUMEN DE CONFIGURACIÓN',
    children: (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        <Typography variant="body-sm" style={{ color: 'var(--color-main-800)' }}>
          • Localización configurada
        </Typography>
        <Typography variant="body-sm" style={{ color: 'var(--color-main-800)' }}>
          • Marca y tenant definidos
        </Typography>
        <Typography variant="body-sm" style={{ color: 'var(--color-main-800)' }}>
          • Última actualización: hace 1 hora
        </Typography>
      </div>
    ),
  },
};

export const TituloPersonalizado = {
  args: {
    title: 'OVERVIEW',
    children: (
      <Typography variant="body-sm" style={{ color: 'var(--color-main-800)' }}>
        Contenido de ejemplo para el overview.
      </Typography>
    ),
  },
};

/** Cada ítem es independiente; al hacer clic se alterna Completado ↔ Pendiente y se actualiza el icono. */
export const ItemsModificables = {
  render: function ItemsModificablesStory() {
    const [slotStates, setSlotStates] = useState([
      'Completado',
      'Completado',
      'Pendiente',
      'Pendiente',
      'Pendiente',
    ]);
    const handleSlotStateChange = (index, newState) => {
      setSlotStates((prev) => {
        const next = [...prev];
        next[index] = newState;
        return next;
      });
    };
    return (
      <ConfiguracionOverview
        title="Configuración inicial"
        children={null}
        slotStates={slotStates}
        slotTitles={[
          'Tenant configurado (nombre/idioma/timezone/logo)',
          'Administradores existentes (al menos 1)',
          'Integración SSO/AD',
          'Configuración de Roles RBAC',
          'Empresas',
        ]}
        slotSubtitles={[
          'Parámetros básicos de identidad y localización definidos.',
          'Acceso técnico de administración garantizado.',
          'Conexión con el proveedor de identidad externa.',
          'Definición de matrices de permisos y perfiles.',
          'Carga de razones sociales y estructura legal.',
        ]}
        onSlotStateChange={handleSlotStateChange}
      />
    );
  },
};
