import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { GraphNodeList } from './graph-node-list';
import type { GraphEdge, GraphNode } from './graph.types';

const NODES: GraphNode[] = [
  { id: 'processo', label: 'Processo', type: 'Classe' },
  { id: 'documento', label: 'Documento', type: 'Classe' },
  { id: 'parte', label: 'Parte', type: 'Classe' },
  { id: 'peticao', label: 'Petição inicial', type: 'Subclasse' },
  { id: 'sentenca', label: 'Sentença', type: 'Subclasse' },
  { id: 'proc-0001', label: 'Processo 0001-23', type: 'Indivíduo' },
];

const EDGES: GraphEdge[] = [
  { source: 'peticao', target: 'documento', label: 'é subclasse de' },
  { source: 'sentenca', target: 'documento', label: 'é subclasse de' },
  { source: 'documento', target: 'processo', label: 'compõe' },
  { source: 'parte', target: 'processo', label: 'figura em' },
  { source: 'proc-0001', target: 'processo', label: 'é instância de' },
];

const meta: Meta<typeof GraphNodeList> = {
  title: 'UI/GraphNodeList',
  component: GraphNodeList,
  parameters: { layout: 'centered' },
  argTypes: { showRelations: { control: 'boolean' } },
};

export default meta;
type Story = StoryObj<typeof GraphNodeList>;

function Controlled(args: React.ComponentProps<typeof GraphNodeList>) {
  const [selectedId, setSelectedId] = React.useState<string | null>(null);

  return (
    <div style={{ width: 'min(100vw - 48px, 360px)' }}>
      <GraphNodeList {...args} selectedId={selectedId} onSelect={setSelectedId} />
      <p className="mt-3 text-xs text-muted-foreground">
        Tab entra na lista, setas navegam, Enter seleciona, Esc limpa.
      </p>
    </div>
  );
}

/** Every node with its relationships stated in words. */
export const Default: Story = {
  args: { nodes: NODES, edges: EDGES, title: 'Nós e relações', onSelect: () => {} },
  render: args => <Controlled {...args} />,
};

/** Names only, when the graph beside it already carries the relationships. */
export const WithoutRelations: Story = {
  args: {
    nodes: NODES,
    edges: EDGES,
    title: 'Nós',
    showRelations: false,
    onSelect: () => {},
  },
  render: args => <Controlled {...args} />,
};

/** Scrolls once the ontology outgrows its container. */
export const Scrollable: Story = {
  args: {
    nodes: [...NODES, ...NODES.map(n => ({ ...n, id: `${n.id}-b`, label: `${n.label} (b)` }))],
    edges: EDGES,
    title: 'Nós e relações',
    maxHeight: '260px',
    onSelect: () => {},
  },
  render: args => <Controlled {...args} />,
};

export const Empty: Story = {
  args: { nodes: [], title: 'Nós', onSelect: () => {} },
  render: args => <Controlled {...args} />,
};