Final Assembly: Composing the Astryx Application

'use client';

import { useState, type ReactNode } from 'react';
import { Section } from '@astryxdesign/core/Section';
import {
  Layout,
  LayoutHeader,
  LayoutContent,
  HStack,
  VStack,
} from '@astryxdesign/core/Layout';
import { styles } from '../styles';
import { BoardCard } from './BoardCard';
import { BoardColumn } from './BoardColumn';
import { BoardToolbar } from './BoardToolbar';
import { FloatingCard } from './FloatingCard';
import { useKanbanDrag } from '../hooks/useKanbanDrag';
import { COLUMNS, INITIAL_ITEMS } from '../data';
import type { ColumnId, WorkItem } from '../types';

export default function KanbanBoard() {
  const [items, setItems] = useState<WorkItem[]>(INITIAL_ITEMS);
  const [sprint, setSprint] = useState('003');

  const { drag, itemsByColumn, getColumnRef, getCardRef, onCardPointerDown } =
    useKanbanDrag(items, setItems);

  const moveItem = (id: string, to: ColumnId) => {
    setItems(prev =>
      prev.map(item => (item.id === id ? { ...item, column: to } : item)),
    );
  };

  const renderColumnCards = (colId: ColumnId): ReactNode => {
    const colItems = itemsByColumn[colId];
    const visible = drag ? colItems.filter(it => it.id !== drag.id) : colItems;
    const ghostTarget =
      drag && drag.target && drag.target.column === colId ? drag : null;

    if (visible.length === 0 && !ghostTarget) {
      return null;
    }

    const nodes: ReactNode[] = visible.map(it => (
      <BoardCard
        key={it.id}
        item={it}
        cardRef={getCardRef(it.id)}
        onPointerDown={onCardPointerDown}
        onMove={moveItem}
      />
    ));

    if (ghostTarget && ghostTarget.target) {
      const index = Math.min(ghostTarget.target.index, nodes.length);
      nodes.splice(
        index,
        0,
        <VStack key="drag-ghost" xstyle={styles.ghost(ghostTarget.height)} />,
      );
    }

    return <VStack gap={2}>{nodes}</VStack>;
  };

  const draggedItem = drag ? items.find(it => it.id === drag.id) : undefined;

  return (
    <Section height="100dvh">
      <Layout
        height="fill"
        header={
          <LayoutHeader hasDivider padding={4}>
            <BoardToolbar
              totalTasks={items.length}
              sprint={sprint}
              onSprintChange={setSprint}
              dragStatus={
                drag
                  ? `Dragging ${drag.id} → ${
                      drag.target
                        ? `${drag.target.column} #${drag.target.index}`
                        : 'no target'
                    }`
                  : undefined
              }
            />
          </LayoutHeader>
        }
        content={
          <LayoutContent padding={0}>
            <HStack gap={4} xstyle={styles.boardColumns}>
              {COLUMNS.map(meta => (
                <BoardColumn
                  key={meta.id}
                  meta={meta}
                  count={itemsByColumn[meta.id].length}
                  contentRef={getColumnRef(meta.id)}
                >
                  {renderColumnCards(meta.id)}
                </BoardColumn>
              ))}
            </HStack>
          </LayoutContent>
        }
      />
      {drag && draggedItem ? (
        <FloatingCard drag={drag} item={draggedItem} />
      ) : null}
    </Section>
  );
}