import { useMemo, useState } from 'react';
import { AltaEdicionPersonas } from './AltaEdicionPersonas';
import { DEFAULT_TABLA_COLUMNS, DEFAULT_TABLA_ROWS } from '../Tabla/Tabla';
import {
  isoMaxFechaNacimientoParaEdadMinima,
  isoMinFechaNacimientoParaEdadMaxima,
} from './fechaNacimientoHelpers';
import { I18nProvider } from '../../../providers/I18nProvider';

const opcionesPais = [
  { value: '', label: 'Seleccionar' },
  { value: 'AR', label: 'Argentina' },
  { value: 'ES', label: 'España' },
  { value: 'UY', label: 'Uruguay' },
];

const opcionesProvincia = [
  { value: '', label: 'Seleccionar' },
  { value: 'CABA', label: 'Ciudad Autónoma de Buenos Aires' },
  { value: 'BA', label: 'Buenos Aires' },
];

/** Ejemplo de textos que vendrían del i18n / constantes del proyecto consumidor. */
const mensajesRequeridosConsumidor = {
  nombreRequiredMessage: 'El nombre es obligatorio.',
  apellidoRequiredMessage: 'El apellido es obligatorio.',
};

const mensajeEdadFechaConsumidor = {
  fechaNacimientoEdadErrorMessage: 'Debés tener al menos 16 años.',
};

const opcionesEmpresaAltaRelacionLaboral = [
  { value: 'nucleus', label: 'Nucleus S.A.' },
  { value: 'bayton', label: 'Bayton Consulting S.A.' },
];

const relacionesLaboralesEjemplo = [
  {
    id: 'rl-1',
    empresa: 'Nucleus S.A.',
    codigoLegajo: 'LEG - 2022 - 004891',
    estado: 'Activa',
    tipoRelacion: 'Relación de dependencia',
    modalidad: 'Híbrido',
    fechaInicio: '01-03-2022',
    historial: [
      {
        id: 'evt-1',
        iconName: 'BriefcaseIcon',
        titulo: 'Relación laboral creada como borrador',
        fecha: '01-02-2016',
        hora: '10:00',
        usuario: 'Admin Sistema',
      },
      {
        id: 'evt-2',
        iconName: 'CheckCircleIcon',
        titulo: 'Relación laboral activada',
        detalle: 'Legajo generado: LEG-2016-000891',
        fecha: '15-02-2016',
        hora: '09:00',
        usuario: 'Admin Sistema',
      },
    ],
  },
  {
    id: 'rl-2',
    empresa: 'Bayton Consulting S.A.',
    codigoLegajo: 'LEG - 2023 - 001102',
    estado: 'Borrador',
    tipoRelacion: 'Relación de dependencia',
    modalidad: 'Remoto',
    fechaInicio: '15-06-2023',
  },
  {
    id: 'rl-3',
    empresa: 'Nucleus S.A.',
    codigoLegajo: 'LEG-2022-004891',
    estado: 'Inactiva',
    tipoRelacion: 'Freelance',
    modalidad: 'Remoto',
    fechaInicio: '01-03-2020',
    fechaFin: '01-03-2022',
  },
];

const personaEditEjemplo = {
  nombre: 'Ana',
  apellido: 'Pérez Gurgone',
  fechaNacimiento: '1990-05-12',
  genero: 'Femenino',
  nacionalidad: 'AR',
  tipoDocumento: 'DNI',
  numeroDocumento: '12345678',
  paisEmision: 'AR',
  emailPersonal: 'ana.perez@ejemplo.com',
  telefonoMovil: '541155551234',
  calle: 'Av. Corrientes',
  numero: '1234',
  piso: '3',
  departamento: 'B',
  pais: 'AR',
  provincia: 'CABA',
  ciudad: 'Buenos Aires',
  codigoPostal: 'C1043',
  notasAdicionales: 'Contactar preferentemente por la mañana.',
  fotoUrl: 'https://i.pravatar.cc/160?img=47',
};

export default {
  title: 'Layout/AltaEdicionPersonas',
  component: AltaEdicionPersonas,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider language="es-AR">
        <Story />
      </I18nProvider>
    ),
  ],
  argTypes: {
    mode: { control: 'select', options: ['create', 'edit'] },
    onSave: { action: 'save' },
    onCancel: { action: 'cancel' },
    onVolverListadoPersonas: {
      action: 'volverListadoPersonas',
      description:
        'Opcional: flecha junto al título para volver al listado de personas (navegación del host).',
    },
    onAddRelacionLaboral: { action: 'addRelacionLaboral' },
    onRelacionLaboralAltaEmpresaSiguiente: { action: 'relacionLaboralAltaEmpresaSiguiente' },
    onRelacionLaboralAltaGuardarBorrador: { action: 'relacionLaboralAltaGuardarBorrador' },
    onRelacionLaboralAltaActivar: { action: 'relacionLaboralAltaActivar' },
    onRelacionLaboralAltaFinalizar: { action: 'relacionLaboralAltaFinalizar' },
    relacionLaboralAltaBloquearEmpresaEnEdicionActiva: {
      control: 'boolean',
      description:
        'Si es true, al editar una relación Activa el campo Empresa (paso 1) se renderiza disabled.',
    },
    relacionLaboralAltaBloquearFechaInicioEnEdicionActiva: {
      control: 'boolean',
      description:
        'Si es true, al editar una relación Activa el campo Fecha de inicio (paso 2) se renderiza disabled.',
    },
    relacionLaboralAltaEmpresaOptions: {
      control: 'object',
      description: 'Opciones del select Empresa en el paso 1 del alta de relación laboral.',
    },
    relacionesLaborales: {
      control: 'object',
      description:
        'Lista de relaciones en la pestaña Datos laborales (grid 2 columnas en desktop).',
    },
    initialActiveTab: {
      control: 'inline-radio',
      options: [0, 1, 2],
      description: '0 = Información personal, 1 = Datos laborales, 2 = Documentos (solo en mode edit).',
    },
    onRelacionLaboralEditar: { action: 'relacionLaboralEditar' },
    onRelacionLaboralAccionSecundaria: { action: 'relacionLaboralAccionSecundaria' },
    onRelacionLaboralReingresar: {
      action: 'relacionLaboralReingresar',
      description:
        'Opcional: al pulsar Reingresar (abre el wizard precargado). El DS abre el wizard siempre; el host puede enganchar telemetría aquí.',
    },
    imageError: {
      control: 'text',
      description:
        'Error bajo el bloque foto (controlado por el consumidor). validatePersonaFotoFile vive en el paquete para usar en el host.',
    },
    imageErrorTitle: { control: 'text' },
    imageErrorSubtitle: { control: 'text' },
    onFotoSelect: { action: 'fotoSelect' },
    nombreRequiredMessage: {
      control: 'text',
      description:
        'Mensaje si nombre vacío al guardar (desde el consumidor). Si no se define, el DS usa su clave i18n.',
    },
    apellidoRequiredMessage: {
      control: 'text',
      description: 'Igual para apellido.',
    },
    emailError: {
      control: 'text',
      description: 'Error remoto bajo email (host). Vacío + formato local si hay texto inválido.',
    },
    telefonoError: {
      control: 'text',
      description: 'Error remoto bajo teléfono. El campo solo acepta dígitos (8–15 si no está vacío).',
    },
    emailFormatMessage: { control: 'text', description: 'Override mensaje formato email.' },
    telefonoFormatMessage: { control: 'text', description: 'Override mensaje cantidad de dígitos.' },
    fechaNacimientoMin: { control: 'text', description: 'YYYY-MM-DD → min nativo.' },
    fechaNacimientoMax: { control: 'text', description: 'YYYY-MM-DD → max nativo.' },
    fechaNacimientoError: { control: 'text' },
    onFechaNacimientoChange: { action: 'fechaNacimientoChange' },
    fechaNacimientoEdadMinimaAnios: {
      control: 'number',
      description:
        'Al guardar valida con cumpleEdadMinima (vale fecha escrita / pegada, no solo el calendario).',
    },
    fechaNacimientoEdadErrorMessage: { control: 'text' },
    fechaNacimientoOmitirMaxNativo: {
      control: 'boolean',
      description:
        'true = sin max en el input (probar error escribiendo 2022). false = calendario acotado con max.',
    },
  },
};

export const NuevaPersona = {
  args: {
    mode: 'create',
    initialValues: {},
    paisOptions: opcionesPais,
    nacionalidadOptions: opcionesPais,
    provinciaOptions: opcionesProvincia,
    relacionLaboralAltaEmpresaOptions: opcionesEmpresaAltaRelacionLaboral,
    ...mensajesRequeridosConsumidor,
  },
};

export const EditarPersonaPrecargada = {
  args: {
    mode: 'edit',
    initialActiveTab: 1,
    initialValues: personaEditEjemplo,
    paisOptions: opcionesPais,
    nacionalidadOptions: opcionesPais,
    provinciaOptions: opcionesProvincia,
    relacionesLaborales: relacionesLaboralesEjemplo,
    relacionLaboralAltaEmpresaOptions: opcionesEmpresaAltaRelacionLaboral,
    relacionLaboralAltaBloquearEmpresaEnEdicionActiva: true,
    relacionLaboralAltaBloquearFechaInicioEnEdicionActiva: true,
    ...mensajesRequeridosConsumidor,
  },
};

/** Edición: pestaña «Documentos» abierta; sin `documentosContent` se muestra el panel por defecto (Tabla + filtros aplicados / avanzados, misma UX que Layout/Tabla «FiltrosAplicados»). */
export const EditarPersonaPestañaDocumentos = {
  name: 'Editar · pestaña Documentos',
  args: {
    ...EditarPersonaPrecargada.args,
    initialActiveTab: 2,
  },
};

const COLUMNAS_DOCUMENTOS_CUSTOM = [
  ...DEFAULT_TABLA_COLUMNS,
  {
    field: 'notasDoc',
    headerName: 'Notas documento',
    flex: 1,
    minWidth: 140,
    headerClassName: 'anima-tabla__grid-header',
  },
];

const FILAS_DOCUMENTOS_CUSTOM = DEFAULT_TABLA_ROWS.map((row) => ({
  ...row,
  notasDoc: `Ejemplo fila ${row.id}`,
}));

/** Ejemplo: el host pasa `documentosTableColumns` / `documentosTableUsers` (y el resto de props `documentos*`) sin usar `documentosContent`. */
export const EditarPersonaDocumentosTablaCustom = {
  name: 'Editar · Documentos (columnas y filas custom)',
  args: {
    ...EditarPersonaPrecargada.args,
    initialActiveTab: 2,
    documentosTableColumns: COLUMNAS_DOCUMENTOS_CUSTOM,
    documentosTableUsers: FILAS_DOCUMENTOS_CUSTOM,
  },
};

/** Pestaña Datos laborales abierta por defecto; sin relaciones → `VistaSinDatos` (Agregar abre alta paso Empresa). */
export const DatosLaboralesVistaSinDatos = {
  name: 'Datos laborales · sin relaciones (VistaSinDatos)',
  args: {
    mode: 'edit',
    initialActiveTab: 1,
    initialValues: personaEditEjemplo,
    paisOptions: opcionesPais,
    nacionalidadOptions: opcionesPais,
    provinciaOptions: opcionesProvincia,
    relacionesLaborales: [],
    relacionLaboralAltaEmpresaOptions: opcionesEmpresaAltaRelacionLaboral,
    ...mensajesRequeridosConsumidor,
  },
};

/** Misma caja roja / tipografía que ConfiguracionMarcaTenant (error desde el servidor u otro origen controlado). */
export const ErrorImagenControlado = {
  args: {
    ...NuevaPersona.args,
    imageError: 'La imagen seleccionada, no cumple las especificaciones.',
    imageErrorTitle: 'La imagen seleccionada, no cumple las especificaciones.',
    imageErrorSubtitle: 'Inténtelo nuevamente.',
  },
};

/**
 * Por defecto: `min`/`max` nativos (calendario acotado) + validación JS por edad al guardar y al completar fecha.
 */
function StoryFechaNacimientoEdadMinima16() {
  const fechaMax = useMemo(() => isoMaxFechaNacimientoParaEdadMinima(16), []);
  const fechaMin = useMemo(() => isoMinFechaNacimientoParaEdadMaxima(120), []);
  const [savePayload, setSavePayload] = useState(null);

  return (
    <div>
      <p
        style={{
          fontSize: 13,
          color: '#444',
          marginBottom: 16,
          maxWidth: 560,
          lineHeight: 1.45,
        }}
      >
        El calendario del navegador respeta <code>min</code>/<code>max</code> (hasta la fecha máxima para
        tener 16 años). No deberías poder elegir del picker una fecha posterior a ese tope. La validación
        por edad sigue activa por si hay datos incoherentes.
      </p>
      <AltaEdicionPersonas
        mode="create"
        initialValues={{
          nombre: 'Nombre',
          apellido: 'Apellido',
          fechaNacimiento: '2000-05-10',
        }}
        paisOptions={opcionesPais}
        nacionalidadOptions={opcionesPais}
        provinciaOptions={opcionesProvincia}
        {...mensajesRequeridosConsumidor}
        {...mensajeEdadFechaConsumidor}
        fechaNacimientoMin={fechaMin}
        fechaNacimientoMax={fechaMax}
        fechaNacimientoEdadMinimaAnios={16}
        fechaNacimientoOmitirMaxNativo={false}
        onSave={(data) => setSavePayload(data)}
        onCancel={() => setSavePayload(null)}
      />
      {savePayload ? (
        <pre
          style={{
            marginTop: 16,
            padding: 12,
            background: '#f0f0f0',
            fontSize: 12,
            borderRadius: 8,
          }}
        >
          {JSON.stringify(
            { fechaNacimiento: savePayload.fechaNacimiento, nombre: savePayload.nombre },
            null,
            2,
          )}
        </pre>
      ) : null}
    </div>
  );
}

export const FechaNacimientoEdadMinima16 = {
  render: () => <StoryFechaNacimientoEdadMinima16 />,
};

/** Misma lógica de edad pero sin `max` nativo: podés escribir 2022 a mano y ver el error bajo el campo. */
function StoryFechaNacimientoOmitirMaxNativo() {
  const fechaMax = useMemo(() => isoMaxFechaNacimientoParaEdadMinima(16), []);
  const fechaMin = useMemo(() => isoMinFechaNacimientoParaEdadMaxima(120), []);

  return (
    <div>
      <p style={{ fontSize: 13, color: '#444', marginBottom: 16, maxWidth: 560, lineHeight: 1.45 }}>
        <code>fechaNacimientoOmitirMaxNativo=true</code>: el calendario ya no limita el año; probá escribir
        una fecha demasiado reciente (p. ej. 2022-01-01) y ver el mensaje al completar o al guardar.
      </p>
      <AltaEdicionPersonas
        mode="create"
        initialValues={{ nombre: 'Nombre', apellido: 'Apellido', fechaNacimiento: '' }}
        paisOptions={opcionesPais}
        nacionalidadOptions={opcionesPais}
        provinciaOptions={opcionesProvincia}
        {...mensajesRequeridosConsumidor}
        {...mensajeEdadFechaConsumidor}
        fechaNacimientoMin={fechaMin}
        fechaNacimientoMax={fechaMax}
        fechaNacimientoEdadMinimaAnios={16}
        fechaNacimientoOmitirMaxNativo
      />
    </div>
  );
}

export const FechaNacimientoSinMaxNativoEscritura = {
  render: () => <StoryFechaNacimientoOmitirMaxNativo />,
};
