import { useState } from 'react';
import { VistaRapidaPerfil, VISTA_RAPIDA_PERFIL_HEIGHT_PX, VISTA_RAPIDA_PERFIL_WIDTH_PX, VISTA_RAPIDA_PERFIL_DEFAULT_RESPONSIVE_MAX_PX } from './VistaRapidaPerfil';
import { Button } from '../../Atoms/Button/Button';

const perfilEjemplo = {
  nombreCompleto: 'Ana Pérez Gurgone',
  rol: 'RRHH',
  email: 'ana.perez@nucleus.com',
  fechaCreacion: '2023-01-10',
  fotoUrl: 'https://i.pravatar.cc/192?img=5',
  estadoLabel: 'Activa',
  estadoBadgeVariant: 'success',
};

export default {
  title: 'Layout/VistaRapidaPerfil',
  component: VistaRapidaPerfil,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: `Panel fijo a la **derecha** (${VISTA_RAPIDA_PERFIL_WIDTH_PX}×${VISTA_RAPIDA_PERFIL_HEIGHT_PX}px, escritorio). Con viewport ≤ \`responsiveMaxWidthPx\` (por defecto ${VISTA_RAPIDA_PERFIL_DEFAULT_RESPONSIVE_MAX_PX}px) ocupa **todo el ancho y alto** (\`100dvh\`). Overlay, X, backdrop o Escape.`,
      },
    },
  },
  argTypes: {
    isOpen: { control: 'boolean' },
    onClose: { action: 'onClose' },
    title: { control: 'text' },
    perfil: { control: 'object', description: 'nombreCompleto, rol, email, fechaCreacion, fotoUrl, estadoLabel, estadoBadgeVariant' },
    informacionTitle: { control: 'text' },
    emailLabel: { control: 'text' },
    fechaCreacionLabel: { control: 'text' },
    legajoDigitalLabel: { control: 'text', description: 'Texto del botón principal (CTA); default “Ver legajo digital”.' },
    onLegajoDigitalClick: {
      action: 'onLegajoDigitalClick',
      description: 'Consumidor: clic en el botón principal (navegar, abrir modal, window.open, etc.). Sin handler el botón queda disabled.',
    },
    responsiveMaxWidthPx: {
      control: { type: 'number', min: 320, max: 1200, step: 1 },
      description: `≤ este ancho de viewport (px) = pantalla completa. Default ${VISTA_RAPIDA_PERFIL_DEFAULT_RESPONSIVE_MAX_PX}.`,
    },
  },
};

export const Default = {
  render: (args) => {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ padding: 24, fontFamily: 'IBM Plex Sans, sans-serif' }}>
        <Button type="button" onClick={() => setOpen(true)}>
          Abrir vista rápida perfil
        </Button>
        <VistaRapidaPerfil
          {...args}
          isOpen={open}
          onClose={() => {
            args.onClose?.();
            setOpen(false);
          }}
          onLegajoDigitalClick={args.onLegajoDigitalClick ?? (() => {})}
        />
      </div>
    );
  },
  args: {
    title: 'Perfil',
    perfil: perfilEjemplo,
    informacionTitle: 'Información',
    emailLabel: 'Email',
    fechaCreacionLabel: 'Fecha de creación',
    legajoDigitalLabel: 'Ver legajo digital',
    responsiveMaxWidthPx: VISTA_RAPIDA_PERFIL_DEFAULT_RESPONSIVE_MAX_PX,
  },
};

/** Útil para capturas o Chromatic: panel abierto sin botón (el canvas debe ser alto). */
export const Abierto = {
  render: (args) => (
    <div style={{ minHeight: '100vh', background: '#E5E7EB' }}>
      <VistaRapidaPerfil
        {...args}
        isOpen
        onClose={() => args.onClose?.()}
        onLegajoDigitalClick={args.onLegajoDigitalClick ?? (() => {})}
      />
    </div>
  ),
  args: {
    title: 'Perfil',
    perfil: perfilEjemplo,
    legajoDigitalLabel: 'Ver legajo digital',
    responsiveMaxWidthPx: VISTA_RAPIDA_PERFIL_DEFAULT_RESPONSIVE_MAX_PX,
  },
};
