import { useState } from 'react';
import { Organigrama } from './Organigrama';
import { OrganigramaUnitCard } from './OrganigramaUnitCard';
import { OrganigramaOperacionesDemo } from './OrganigramaOperacionesDemo';
import { ORGANIGRAMA_DEFAULT_TREE } from './organigramaDefaults';

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

export const Default = {
  name: 'Organigrama completo (con operaciones)',
  render: () => (
    <div style={{ padding: 24, background: '#F9FAFB', minHeight: '100vh' }}>
      <OrganigramaOperacionesDemo height={720} />
    </div>
  ),
};

export const ZoomBajo = {
  name: 'Zoom 34% (con operaciones)',
  render: () => (
    <div style={{ padding: 24, background: '#F9FAFB', minHeight: '100vh' }}>
      <OrganigramaOperacionesDemo height={720} defaultZoom={0.34} />
    </div>
  ),
};

export const ZoomControlado = {
  name: 'Zoom controlado (con operaciones)',
  render: function ZoomControladoStory() {
    const [zoom, setZoom] = useState(0.6);
    return (
      <div style={{ padding: 24, background: '#F9FAFB', minHeight: '100vh' }}>
        <p style={{ fontFamily: 'IBM Plex Sans, sans-serif', color: '#29474C', marginBottom: 16 }}>
          Zoom actual:
          {' '}
          {Math.round(zoom * 100)}
          % — Ctrl + rueda para ajustar en el canvas.
        </p>
        <OrganigramaOperacionesDemo height={640} zoom={zoom} onZoomChange={setZoom} />
      </div>
    );
  },
};

const arbolPequeno = {
  id: 'unit-raiz',
  nombre: 'Dirección General',
  empresaNombre: 'Nucleus Argentina S.A.',
  responsable: {
    nombre: 'María González',
    avatarSrc:
      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face',
  },
  miembros: [
    { id: 'p1', avatarSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=face' },
  ],
  miembrosCount: 1,
  children: [
    {
      id: 'unit-ops',
      nombre: 'Operaciones',
      empresaNombre: 'Nucleus Argentina S.A.',
      responsable: null,
      miembros: [],
      miembrosCount: 0,
      children: [],
    },
    {
      id: 'unit-comercial',
      nombre: 'Comercial',
      empresaNombre: 'Nucleus Argentina S.A.',
      responsable: {
        nombre: 'Luis Fernández',
        avatarSrc:
          'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&fit=crop&crop=face',
      },
      miembros: [],
      miembrosCount: 2,
      children: [],
    },
  ],
};

export const ArbolPequeno = {
  name: 'Árbol pequeño (con operaciones)',
  render: () => (
    <div style={{ padding: 24, background: '#F9FAFB', minHeight: '100vh' }}>
      <OrganigramaOperacionesDemo tree={arbolPequeno} defaultZoom={0.9} height={480} />
    </div>
  ),
};

export const NodoUnico = {
  name: 'Card de unidad (aislada)',
  render: function NodoUnicoStory() {
    const [openDetalle, setOpenDetalle] = useState(false);
    const unit = ORGANIGRAMA_DEFAULT_TREE.children[0];
    return (
      <div style={{ padding: 24, background: '#F3F4F6' }}>
        <OrganigramaUnitCard
          unit={unit}
          onCreateSubunit={() => {}}
          onEditUnit={() => {}}
          onAssignPerson={() => {}}
          onDeleteUnit={() => {}}
          onUnitClick={() => setOpenDetalle(true)}
          onAssignMembersClick={() => {}}
        />
        {openDetalle ? (
          <p style={{ marginTop: 16, fontFamily: 'IBM Plex Sans, sans-serif', color: '#29474C' }}>
            Click en card — usá la story principal para ver modales completos.
          </p>
        ) : null}
      </div>
    );
  },
};

export const SinResponsable = {
  name: 'Unidad sin responsable',
  render: () => (
    <div style={{ padding: 24, background: '#F3F4F6' }}>
      <OrganigramaUnitCard
        unit={ORGANIGRAMA_DEFAULT_TREE}
        onCreateSubunit={() => {}}
        onEditUnit={() => {}}
        onAssignPerson={() => {}}
        onDeleteUnit={() => {}}
      />
    </div>
  ),
};
