import { ConfiguracionMarcaTenant } from './ConfiguracionMarcaTenant';

export default {
  title: 'Layout/ConfiguracionMarcaTenant',
  component: ConfiguracionMarcaTenant,
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'Título principal del componente',
    },
    labelText: {
      control: 'text',
      description: 'Texto del label del input',
    },
    inputPlaceholder: {
      control: 'text',
      description: 'Placeholder del input',
    },
    identidadVisualTitle: {
      control: 'text',
      description: 'Título de la sección de identidad visual',
    },
    marcaActualTitle: {
      control: 'text',
      description: 'Título de la marca actual',
    },
    marcaActualNucleusText: {
      control: 'text',
      description: 'Texto que se muestra si no hay imagen (iniciales)',
    },
    formatoText: {
      control: 'text',
      description: 'Texto del área de formato',
    },
    uploadButtonText: {
      control: 'text',
      description: 'Texto del botón de subir imagen',
    },
    actualizacionLabel: {
      control: 'text',
      description: 'Label de la sección (línea 1, junto al icono)',
    },
    actualizacionText: {
      control: 'text',
      description: 'Texto de detalle (línea 2, ej. fecha/hora)',
    },
    guardarButtonDisabled: {
      control: 'boolean',
      description: 'Si está deshabilitado (gris) o habilitado (verde, como Subir imagen)',
    },
    imageError: {
      control: 'text',
      description: 'Mensaje de error de imagen (string o vacío). Si tiene valor se muestra la caja roja antes de Guardar.',
    },
    imageErrorTitle: {
      control: 'text',
      description: 'Título del error de imagen (cuando imageError es truthy y no es string)',
    },
    imageErrorSubtitle: {
      control: 'text',
      description: 'Subtítulo del error de imagen',
    },
    loading: {
      control: 'boolean',
      description: 'Muestra skeleton de carga en lugar del contenido',
    },
  },
};

export const Default = {
  args: {
    title: 'CONFIGURACIÓN DE MARCA',
    labelText: 'Nombre comercial',
    inputPlaceholder: 'Ingrese el nombre',
    inputValue: '',
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualNucleusText: 'N',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
};

export const ConImagen = {
  args: {
    title: 'CONFIGURACIÓN DE MARCA',
    labelText: 'Nombre comercial',
    inputPlaceholder: 'Ingrese el nombre',
    inputValue: 'Mi Tenant',
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualImage: 'https://via.placeholder.com/72',
    marcaActualImageAlt: 'Logo del tenant',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => alert('Guardar'),
  },
};

export const SinImagen = {
  args: {
    title: 'CONFIGURACIÓN DE MARCA',
    labelText: 'Nombre comercial',
    inputPlaceholder: 'Ingrese el nombre',
    inputValue: '',
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualNucleusText: 'NT',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
};

export const Loading = {
  args: {
    loading: true,
    title: 'CONFIGURACIÓN DE MARCA',
    labelText: 'Nombre comercial',
    inputPlaceholder: 'Ingrese el nombre',
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    actualizacionLabel: 'Última actualización:',
    actualizacionText: 'hace 2 horas',
    guardarButtonText: 'Guardar',
  },
};

export const ConErrorImagen = {
  args: {
    ...ConImagen.args,
    imageError: 'La imagen seleccionada, no cumple las especificaciones.',
    imageErrorTitle: 'La imagen seleccionada, no cumple las especificaciones.',
    imageErrorSubtitle: 'Inténtelo nuevamente.',
  },
};

