app/components/Navigation/DesktopSidebar.tsx

'use client';

/**
 * Desktop Sidebar Navigation
 *
 * Vertical sidebar navigation for desktop (≥ 768px).
 * Shows three navigation links: Convo, Edit, Galaxy
 * Highlights the active mode based on app state machine.
 */

import { Stack, NavLink, Box, Text, Group, Image, Divider } from '@mantine/core';
import { IconMessageCircle, IconEdit, IconUniverse } from '@tabler/icons-react';
import { useSelector } from '@xstate/react';
import { useAppMachine } from '@/hooks/useAppMachine';
import { UserMenu } from '@/components/UserMenu';

export function DesktopSidebar() {
  const actor = useAppMachine();
  const state = useSelector(actor, (state) => state);
  const send = actor.send;

  const handleNavigation = (target: 'convo' | 'edit' | 'galaxy') => {
    console.log('[Desktop Nav] Navigating to:', target);

    if (target === 'convo') {
      send({ type: 'NAVIGATE_TO_CONVO' });
    } else if (target === 'edit') {
      send({ type: 'NAVIGATE_TO_EDIT' });
    } else if (target === 'galaxy') {
      send({ type: 'NAVIGATE_TO_GALAXY' });
    }
  };

  const isConvo = state.matches('convo');
  const isEdit = state.matches('edit');
  const isGalaxy = state.matches('galaxy');

  console.log('[Desktop Nav] Current state:', state.value, {
    isConvo,
    isEdit,
    isGalaxy,
  });

  return (
    <Box
      style={{
        width: '100%',
        height: '100%',
        borderRight: '1px solid #dee2e6',
        padding: '1rem',
      }}
    >
      <Stack gap="xs">
        <Group gap="sm" mb="md" align="center">
          <Image
            src="/logo.svg"
            alt="Ponderants logo"
            w={48}
            h={48}
            style={{ flexShrink: 0 }}
          />
          <Text fw={700} size="md" c="dimmed">
            Ponderants
          </Text>
        </Group>

        <NavLink
          label="Convo"
          leftSection={<IconMessageCircle size={20} />}
          active={isConvo}
          onClick={() => handleNavigation('convo')}
          variant="filled"
        />

        <NavLink
          label="Manual"
          leftSection={<IconEdit size={20} />}
          active={isEdit}
          onClick={() => handleNavigation('edit')}
          variant="filled"
        />

        <NavLink
          label="Galaxy"
          leftSection={<IconUniverse size={20} />}
          active={isGalaxy}
          onClick={() => handleNavigation('galaxy')}
          variant="filled"
        />

        <Divider my="md" />

        <Box style={{ padding: '0.5rem' }}>
          <UserMenu />
        </Box>

        {/* Development state panel */}
        {process.env.NODE_ENV === 'development' && (
          <Box mt="xl" p="sm" style={{ border: '1px solid #495057', borderRadius: '4px' }}>
            <Text size="xs" fw={700} c="dimmed" mb="xs">
              DEV: App State
            </Text>
            <Text size="xs" c="dimmed">
              State: {JSON.stringify(state.value)}
            </Text>
            <Text size="xs" c="dimmed">
              Tags: {Array.from(state.tags).join(', ')}
            </Text>
            <Text size="xs" c="dimmed">
              Mode: {state.context.mode}
            </Text>
            {state.context.pendingNodeDraft && (
              <Text size="xs" c="dimmed">
                Draft: {state.context.pendingNodeDraft.title || '(untitled)'}
              </Text>
            )}
            {state.context.currentNodeId && (
              <Text size="xs" c="dimmed">
                Node: {state.context.currentNodeId}
              </Text>
            )}
          </Box>
        )}
      </Stack>
    </Box>
  );
}