import { useState } from 'react';
import { Button } from '../../Atoms/Button/Button';
import { Badge } from '../../Atoms/Badge/Badge';
import { VistaDocumento } from './VistaDocumento';

const SAMPLE_PDF =
  'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';

export default {
  title: 'Layout/VistaDocumento',
  component: VistaDocumento,
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    title: 'Contrato de trabajo',
    tagLabel: 'Confidencial',
    legajo: 'LEG-1004',
    colaborador: 'Pedro Sanchez Carmona',
    empresa: 'TechCorp Argentina',
    fechaImportacion: '02-08-2026',
    periodo: '2026-08',
    closeButtonLabel: 'Cerrar',
    downloadButtonLabel: 'Descargar PDF',
    mobileBreakpoint: 768,
    previewTitle: 'Vista previa del PDF',
    previewSubtitle: 'Contrato de trabajo',
    previewDescription: 'El documento se mostraria embebido aqui con scroll interno.',
    previewBackgroundColor: '#FFFFFF',
  },
};

export const ConPdf = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir VistaDocumento</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          forcePreviewError={false}
          showErrorStateOnPreviewFailure={false}
          headerBadge={<Badge variant="primary">Confidencial</Badge>}
          pdfUrl={SAMPLE_PDF}
          onClose={() => setOpen(false)}
          onDownload={() => window.open(SAMPLE_PDF, '_blank', 'noopener,noreferrer')}
        />
      </div>
    );
  },
};

export const ConPdfDebug = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir VistaDocumento (Debug)</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          forcePreviewError={false}
          showErrorStateOnPreviewFailure
          headerBadge={<Badge variant="primary">Confidencial</Badge>}
          pdfUrl={SAMPLE_PDF}
          onClose={() => setOpen(false)}
          onDownload={() => window.open(SAMPLE_PDF, '_blank', 'noopener,noreferrer')}
          onPreviewLoadError={(error) => console.error('react-pdf error:', error)}
        />
      </div>
    );
  },
};

export const SinPdfPlaceholder = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir sin PDF</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          forcePreviewError={false}
          showErrorStateOnPreviewFailure={false}
          pdfUrl=""
          onClose={() => setOpen(false)}
        />
      </div>
    );
  },
};

export const MobileForzado = {
  ...ConPdf,
  args: {
    mobileBreakpoint: 9999,
  },
};

export const Point = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir VistaDocumento (Point)</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          pdfUrl=""
          onClose={() => setOpen(false)}
        />
      </div>
    );
  },
  args: {
    point: true,
    title: 'Ultimo recibo',
    recibo: 'REC-2024-001',
    colaborador: 'Pedro Sanchez Carmona',
    empresa: 'TechCorp Argentina',
    infoFields: ['persona', 'empresa', 'recibo'],
  },
};

export const SoloTresCampos = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir VistaDocumento (3 campos)</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          pdfUrl=""
          onClose={() => setOpen(false)}
        />
      </div>
    );
  },
  args: {
    title: 'Contrato de trabajo',
    colaborador: 'Pedro Sanchez Carmona',
    empresa: 'TechCorp Argentina',
    legajo: 'LEG-1004',
    infoFields: ['persona', 'empresa', 'legajo'],
  },
};

export const ErrorBackend = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ minHeight: '100vh', padding: 24, boxSizing: 'border-box' }}>
        <Button onClick={() => setOpen(true)}>Abrir error backend</Button>
        <VistaDocumento
          {...args}
          isOpen={open}
          forcePreviewError
          showErrorStateOnPreviewFailure
          previewErrorRetryLabel="Reintentar"
          onPreviewRetry={() => console.log('Reintentar preview')}
          previewRetryButtonProps={{ 'aria-label': 'Reintentar previsualizacion' }}
          onPreviewLoadError={(error) => console.error('Error de preview', error)}
          onClose={() => setOpen(false)}
        />
      </div>
    );
  },
};
