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

const unidadConPersonas = {
  id: 'unit-rrhh',
  nombre: 'Recursos Humanos',
  empresaNombre: 'Nucleus Argentina S.A.',
  responsable: {
    nombre: 'Pedro Sanchez Carnero',
    avatarSrc: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face',
  },
};

const miembros = [
  {
    id: 'resp',
    nombre: 'Pedro Sanchez Carnero',
    avatarSrc: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop&crop=face',
    esResponsable: true,
  },
  { id: 'm1', nombre: 'Gerente de RRHH', rol: 'Gerente de RRHH', avatarSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=face' },
  { id: 'm2', nombre: 'Analista de RRHH', rol: 'Analista de RRHH', avatarSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=face' },
];

export default {
  title: 'Layout/ModalDetalleUnidad',
  component: ModalDetalleUnidad,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
};

export const Vacio = {
  render: function DetalleVacioStory() {
    const [open, setOpen] = useState(true);
    return (
      <div style={{ minHeight: '100vh', padding: 24 }}>
        <Button onClick={() => setOpen(true)}>Abrir detalle vacío</Button>
        <ModalDetalleUnidad
          isOpen={open}
          onClose={() => setOpen(false)}
          unidad={{ id: 'unit-nucleus', nombre: 'Nucleus', empresaNombre: 'Nucleus Argentina S.A.' }}
          miembros={[]}
          onDelete={() => setOpen(false)}
          onAssignPerson={() => {}}
          onEditUnit={() => {}}
        />
      </div>
    );
  },
};

export const ConPersonas = {
  render: function DetalleConPersonasStory() {
    const [open, setOpen] = useState(true);
    return (
      <div style={{ minHeight: '100vh', padding: 24 }}>
        <Button onClick={() => setOpen(true)}>Abrir detalle con personas</Button>
        <ModalDetalleUnidad
          isOpen={open}
          onClose={() => setOpen(false)}
          unidad={unidadConPersonas}
          responsable={unidadConPersonas.responsable}
          miembros={miembros}
          detalle={{ nodoPadreNombre: 'Dirección Ejecutiva', descripcion: 'Área de gestión de personas.' }}
          onDelete={() => setOpen(false)}
          onAssignPerson={() => {}}
          onEditUnit={() => {}}
        />
      </div>
    );
  },
};
