import { SaludoConFechaDashboard } from './SaludoConFechaDashboard';

export default {
  title: 'Layout/SaludoConFechaDashboard',
  component: SaludoConFechaDashboard,
  tags: ['autodocs'],
  argTypes: {
    userName: { control: 'text', description: 'Nombre del usuario' },
    titleText: { control: 'text', description: 'Texto del título grande (fila 2), distinto al ítem breadcrumb' },
    saludo: { control: 'text', description: 'Texto del saludo (ej. Hola, Bienvenido)' },
    date: { control: 'date', description: 'Fecha a mostrar' },
    locale: { control: 'text', description: 'Locale para formatear fecha (es-AR, pt-BR, en-US)' },
    showDate: { control: 'boolean', description: 'Mostrar u ocultar la fecha' },
    showSaludo: { control: 'boolean', description: 'Mostrar saludo (false = solo título/nombre con estilo 24px)' },
    useHolaStyleForTitle: { control: 'boolean', description: 'Cuando showSaludo=false, fuerza estilo “Hola Usuario” (28px/400) para el título' },
    useBreadcrumbTypography: { control: 'boolean', description: 'Con showSaludo=false: fila 1 usa tipografía breadcrumb (sección 14px Regular, ítem 14px Bold)' },
    breadcrumbButtonText: { control: 'text', description: 'Con useBreadcrumbTypography: texto del botón primary a la derecha inferior' },
    showBreadcrumbButton: { control: 'boolean', description: 'Muestra u oculta el botón breadcrumb (si corresponde)' },
    showSaludoFecha: { control: 'boolean', description: 'Mostrar fila de saludo+fecha (false = oculta pero mantiene espacio)' },
    capitalizeDate: { control: 'boolean', description: 'Capitalizar primera letra de la fecha' },
    showInicio: { control: 'boolean', description: 'Mostrar breadcrumb Inicio' },
    inicioText: { control: 'text', description: 'Texto del breadcrumb (ej. Inicio, Admin Sistemas)' },
    showInicioIcon: { control: 'boolean', description: 'Mostrar ícono junto al breadcrumb' },
    inicioIconName: { control: 'text', description: 'Nombre del ícono Heroicons' },
    greetingPrefix: { control: 'text', description: 'Prefijo del saludo (ej. ¡)' },
    greetingSuffix: { control: 'text', description: 'Sufijo del saludo (ej. !)' },
    breadcrumbTitleGap: { control: 'text', description: 'Separación entre breadcrumb y título (ej. 24px)' },

    // Back button responsive
    showBackButtonOnMobile: { control: 'boolean', description: 'Muestra flecha “volver” solo en responsive (<= breakpoint)' },
    backButtonTo: { control: 'text', description: 'Ruta para navegar (si no se provee onBackButtonClick)' },
    backButtonAriaLabel: { control: 'text', description: 'Texto aria-label para la flecha de volver' },
  },
};

// ─── Modo completo (saludo + nombre + fecha) ─────────────────────────────────

export const Default = {
  args: {
    saludo: 'Hola',
    userName: 'Juan',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

export const SinNombre = {
  args: {
    saludo: 'Bienvenido',
    userName: '',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

export const SinFecha = {
  args: {
    saludo: 'Hola',
    userName: 'María',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

export const SinInicio = {
  args: {
    saludo: 'Hola',
    userName: 'Pedro',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showInicio: false,
  },
};

export const SinIconoInicio = {
  args: {
    saludo: 'Hola',
    userName: 'Ana',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: false,
  },
};

// ─── Idiomas / locale ──────────────────────────────────────────────────────

export const Portugues = {
  args: {
    saludo: 'Olá',
    userName: 'Mariana',
    date: new Date(),
    locale: 'pt-BR',
    showDate: true,
    showInicio: true,
    inicioText: 'Início',
    showInicioIcon: true,
  },
};

export const Ingles = {
  args: {
    saludo: 'Hello',
    userName: 'John',
    date: new Date(),
    locale: 'en-US',
    showDate: true,
    showInicio: true,
    inicioText: 'Home',
    showInicioIcon: true,
    greetingPrefix: '',
    greetingSuffix: '',
  },
};

// ─── Modo solo título (showSaludo = false, estilo 24px) ─────────────────────

export const SoloInicio = {
  args: {
    saludo: 'Hola',
    userName: '',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

export const TituloAdminSistemas = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    showInicio: true,
    inicioText: 'Admin Sistemas',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

// Tipografía breadcrumb: sección 14px Regular (var(--color-cyan-19)), ítem 14px Bold (var(--color-cyan-19))
export const BreadcrumbTypography = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    useBreadcrumbTypography: true,
    showInicio: true,
    inicioText: 'ADMIN SISTEMAS',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

// Breadcrumb typography + botón primary a la derecha inferior
export const BreadcrumbTypographyConBoton = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showSaludo: false,
    useBreadcrumbTypography: true,
    breadcrumbButtonText: 'Crear empresa',
    onBreadcrumbButtonClick: () => console.log('Breadcrumb button'),
    showInicio: true,
    inicioText: 'ADMIN SISTEMAS',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

export const TituloConFecha = {
  args: {
    saludo: 'Hola',
    userName: 'Overview',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showSaludo: false,
    showInicio: true,
    inicioText: 'Dashboard',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

export const TituloConNombreUsuario = {
  args: {
    saludo: 'Hola',
    userName: 'Mi Tenant',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    showInicio: true,
    inicioText: 'Admin Sistemas',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
  },
};

// ─── Saludo sin signos / personalizado ──────────────────────────────────────

export const SaludoSinExclamacion = {
  args: {
    saludo: 'Hola',
    userName: 'Carlos',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    greetingPrefix: '',
    greetingSuffix: '',
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

export const NombreLargo = {
  args: {
    saludo: 'Hola',
    userName: 'María García López de Mendoza',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

// ─── Estilos custom ─────────────────────────────────────────────────────────

export const EstilosCustom = {
  args: {
    saludo: 'Hola',
    userName: 'Dashboard',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    className: 'p-4 bg-white rounded-lg border border-gray-200',
    rightClassName: 'bg-gray-50 px-3 py-1 rounded-lg border border-gray-200',
    dateTextClassName: 'color-gray-700',
    inicioContainerClassName: 'opacity-80',
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

export const TituloSectionPersonalizado = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    showInicio: true,
    inicioText: 'Admin Sistemas',
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
    titleSectionStyle: { fontWeight: 600 },
    inicioTextStyle: { color: 'var(--color-cyan-19)' },
  },
};

// ─── Casos extremos ─────────────────────────────────────────────────────────

export const SoloSaludoSinNombreNiFecha = {
  args: {
    saludo: 'Bienvenido',
    userName: '',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

export const FilaSaludoOculta = {
  args: {
    saludo: 'Hola',
    userName: 'Juan',
    date: new Date(),
    locale: 'es-AR',
    showDate: true,
    showSaludoFecha: false,
    showInicio: true,
    inicioText: 'Inicio',
    showInicioIcon: true,
  },
};

// ─── Breadcrumb typography con título diferente (sin “Hola”) ─────────────
export const MisDocumentos = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#29474C' }}>
        <Story />
      </div>
    ),
  ],
  args: {
    textTone: 'light',
    showSaludo: false,
    useBreadcrumbTypography: true,
    showInicio: true,
    inicioText: 'Inicio',
    userName: 'Mis documentos',
    titleText: 'Mis documentos',
    showDate: false,
    showInicioIcon: true,
    inicioIconName: 'ChevronRightIcon',
    breadcrumbTitleGap: '24px',
  },
};

export const BreadcrumbTypography_TituloDiferenteSinHola = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant', // ítem breadcrumb (fila 1)
    titleText: 'Dashboard', // título grande (fila 2), distinto al ítem breadcrumb
    date: new Date(),
    locale: 'es-AR',
    showDate: false, // 2 oculta
    showSaludo: false, // no es “Hola”
    useHolaStyleForTitle: true, // pero toma estilo “Hola Usuario”
    useBreadcrumbTypography: true,
    showInicio: true,
    inicioText: 'ADMIN SISTEMAS', // sección breadcrumb (fila 1)
    showInicioIcon: true,
    showBreadcrumbButton: false, // botón no se renderiza
  },
};

export const BreadcrumbTypography_TituloDiferenteConBoton = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    titleText: 'Dashboard',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    useHolaStyleForTitle: true,
    useBreadcrumbTypography: true,
    breadcrumbButtonText: 'Crear empresa',
    onBreadcrumbButtonClick: () => console.log('Breadcrumb button'),
    showBreadcrumbButton: true,
    showInicio: true,
    inicioText: 'ADMIN SISTEMAS',
    showInicioIcon: true,
  },
};

export const BreadcrumbTypography_TituloDiferenteConFlechaVolverMobile = {
  args: {
    saludo: 'Hola',
    userName: 'Tenant',
    titleText: 'Dashboard',
    date: new Date(),
    locale: 'es-AR',
    showDate: false,
    showSaludo: false,
    useHolaStyleForTitle: true,
    useBreadcrumbTypography: true,
    showInicio: true,
    inicioText: 'ADMIN SISTEMAS',
    showInicioIcon: true,
    showBreadcrumbButton: false,

    showBackButtonOnMobile: true,
    backButtonTo: '/dashboard',
    backButtonAriaLabel: 'Volver al dashboard',
  },
};
