import { useState } from 'react';
import { Button } from '../../Atoms/Button/Button';
import {
  VistaDatos,
  VISTA_DATOS_DESKTOP_WIDTH_PX,
  VISTA_DATOS_DESKTOP_HEIGHT_PX,
  VISTA_DATOS_COLUMN_WIDTH_PX,
  VISTA_DATOS_COLUMN_HEIGHT_PX,
  VISTA_DATOS_SECTION_LABEL_STYLE,
  VISTA_DATOS_FILE_NAME_STYLE,
} from './VistaDatos';
import { BadgeAzul } from '../../Atoms/BadgeAzul/BadgeAzul';
import { VistaDatosDetallePanel } from './VistaDatosDetallePanel';
import { VISTA_DATOS_DETALLE_DEFAULTS } from './vistaDatosDetalleDefaults';

const columnPlaceholderStyle = {
  padding: 16,
  fontFamily: 'IBM Plex Sans, sans-serif',
  fontSize: 14,
  lineHeight: '21px',
  color: '#5F5F5F',
  boxSizing: 'border-box',
};

export default {
  title: 'Layout/VistaDatos',
  component: VistaDatos,
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    sectionLabel: 'DATOS DE LA CARGA',
    fileName: 'Política interna 2020 a 2026.zip',
    leftColumnTitle: 'DETALLES',
    rightColumnTitle: 'LISTADO DE DOCUMENTOS',
    rightColumnBadgeLabel: '4 documentos',
    showRightColumnSearch: true,
    rightColumnSearchPlaceholder: 'Buscar por nombre o legajo',
    showDetallePanel: true,
    showDocumentosList: true,
    closeButtonLabel: 'Cerrar',
    downloadReportButtonLabel: 'Descargar informe',
    closeOnOverlayClick: true,
    mobileBreakpoint: 768,
  },
  argTypes: {
    sectionLabel: { control: 'text' },
    fileName: { control: 'text' },
    showDetallePanel: { control: 'boolean' },
    showDocumentosList: { control: 'boolean' },
    showLeftColumnAlert: { control: 'boolean' },
    sectionLabelStyle: { control: false },
    fileNameStyle: { control: false },
    headerStyle: { control: false },
    detallePanelProps: { control: false },
  },
};

export const Default = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir Vista de datos</Button>
        <p style={{ marginTop: 12, fontFamily: 'IBM Plex Sans, sans-serif', color: '#5F5F5F' }}>
          Desktop: {VISTA_DATOS_DESKTOP_WIDTH_PX}×{VISTA_DATOS_DESKTOP_HEIGHT_PX}px
        </p>
        <VistaDatos {...args} isOpen={open} onClose={() => setOpen(false)} />
      </div>
    );
  },
};

export const CabeceraPorDefecto = {
  name: 'Cabecera (valores default)',
  render: (args) => (
    <VistaDatos {...args} isOpen onClose={() => undefined} showDetallePanel={false} />
  ),
};

export const Completo = {
  name: 'Completo (columnas + footer)',
  render: (args) => {
    const [open, setOpen] = useState(true);
    const [search, setSearch] = useState('');
    const [docPage, setDocPage] = useState(1);
    return (
      <VistaDatos
        {...args}
        isOpen={open}
        onClose={() => setOpen(false)}
        showDetallePanel
        showDocumentosList
        showLeftColumnAlert
        onDownloadReport={() => {
          // eslint-disable-next-line no-console
          console.log('Descargar informe');
        }}
        rightColumnSearchValue={search}
        onRightColumnSearchChange={(value) => setSearch(value)}
        documentosCurrentPage={docPage}
        onDocumentosPageChange={setDocPage}
      />
    );
  },
};

export const DetalleConAlerta = {
  name: 'Detalle — alerta visible',
  render: (args) => (
    <VistaDatos
      {...args}
      isOpen
      onClose={() => undefined}
      showFooter={false}
      showDetallePanel
      showDocumentosList
      showLeftColumnAlert
    />
  ),
};

export const DetalleSinAlerta = {
  name: 'Detalle — alerta oculta',
  render: (args) => (
    <VistaDatos
      {...args}
      isOpen
      onClose={() => undefined}
      showFooter={false}
      showDetallePanel
      showDocumentosList
      showLeftColumnAlert={false}
    />
  ),
};

export const ListadoDocumentos = {
  name: 'Listado documentos (scroll + paginado)',
  render: (args) => {
    const [docPage, setDocPage] = useState(1);
    const [search, setSearch] = useState('');
    return (
      <VistaDatos
        {...args}
        isOpen
        onClose={() => undefined}
        showFooter={false}
        showDetallePanel={false}
        showDocumentosList
        rightColumnSearchValue={search}
        onRightColumnSearchChange={setSearch}
        documentosCurrentPage={docPage}
        onDocumentosPageChange={setDocPage}
      />
    );
  },
};

export const PanelDetalle = {
  name: 'Panel detalle (aislado)',
  render: () => (
    <div
      style={{
        padding: 24,
        maxWidth: 485,
        height: 400,
        border: '1px solid #C4C4C4',
        borderRadius: 16,
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <VistaDatosDetallePanel {...VISTA_DATOS_DETALLE_DEFAULTS} />
    </div>
  ),
};

export const PanelDetalleConAlertaSimulada = {
  name: 'Panel detalle — con alerta (altura reducida)',
  render: () => (
    <div style={{ padding: 24, maxWidth: 485 }}>
      <div
        style={{
          marginBottom: 8,
          padding: '12px 16px',
          borderRadius: 8,
          border: '1px solid #CC4908',
          fontFamily: 'IBM Plex Mono, monospace',
          fontWeight: 600,
          fontSize: 14,
          lineHeight: '21px',
          color: '#CC4908',
        }}
      >
        Algunos documentos no pudieron incorporarse
      </div>
      <div
        style={{
          height: 320,
          border: '1px solid #C4C4C4',
          borderRadius: 16,
          boxSizing: 'border-box',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
      >
        <VistaDatosDetallePanel {...VISTA_DATOS_DETALLE_DEFAULTS} />
      </div>
    </div>
  ),
};

export const DosColumnas = {
  name: 'Dos columnas 485×479',
  render: (args) => (
    <VistaDatos
      {...args}
      isOpen
      onClose={() => undefined}
      showFooter={false}
      showDetallePanel
      showDocumentosList
    />
  ),
};

export const CabeceraPersonalizada = {
  name: 'Cabecera personalizada (consumidor)',
  render: () => (
    <VistaDatos
      isOpen
      sectionLabel="REPORTE DE IMPORTACIÓN"
      fileName="legajos_mayo_2026_batch_01.zip"
      onClose={() => undefined}
      showDetallePanel={false}
    />
  ),
};

export const BadgeDocumentos = {
  name: 'Badge azul (contador)',
  render: () => (
    <div style={{ padding: 24, display: 'flex', gap: 12, alignItems: 'center' }}>
      <BadgeAzul count={4} />
      <BadgeAzul>2 tareas completadas</BadgeAzul>
    </div>
  ),
};

export const EstilosExportados = {
  name: 'Referencia estilos exportados',
  render: () => (
    <div style={{ padding: 24, fontFamily: 'IBM Plex Sans, sans-serif' }}>
      <p style={VISTA_DATOS_SECTION_LABEL_STYLE}>DATOS DE LA CARGA</p>
      <h2 style={{ ...VISTA_DATOS_FILE_NAME_STYLE, marginTop: 8 }}>
        Política interna 2020 a 2026.zip
      </h2>
    </div>
  ),
};
