'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, Title, Group, Divider, Text } from '@mantine/core';
import { IconMessageCircle, IconEdit, IconChartBubbleFilled } 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 #373A40',
        padding: '1rem',
      }}
    >
      <Stack gap="xs">
        <Group gap="md" mb="lg" align="center" wrap="nowrap">
          <img
            src="/logo.svg"
            alt="Ponderants logo"
            width={48}
            height={48}
            style={{ flexShrink: 0, display: 'block' }}
          />
          <Title order={3} style={{ margin: 0 }}>
            Ponderants
          </Title>
        </Group>

        <NavLink
          label="Convo"
          leftSection={<IconMessageCircle size={20} />}
          active={isConvo}
          onClick={() => handleNavigation('convo')}
          variant="filled"
          color="blue"
          styles={{
            root: {
              borderRadius: '8px',
              fontWeight: isConvo ? 600 : 400,
            },
          }}
        />

        <NavLink
          label="Manual"
          leftSection={<IconEdit size={20} />}
          active={isEdit}
          onClick={() => handleNavigation('edit')}
          variant="filled"
          color="blue"
          styles={{
            root: {
              borderRadius: '8px',
              fontWeight: isEdit ? 600 : 400,
            },
          }}
        />

        <NavLink
          label="Galaxy"
          leftSection={<IconChartBubbleFilled size={20} />}
          active={isGalaxy}
          onClick={() => handleNavigation('galaxy')}
          variant="filled"
          color="blue"
          styles={{
            root: {
              borderRadius: '8px',
              fontWeight: isGalaxy ? 600 : 400,
            },
          }}
        />

        <Divider my="md" color="#373A40" />

        <NavLink
          label="Profile"
          leftSection={<Box style={{ width: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><UserMenu /></Box>}
          variant="filled"
        />

        {/* 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>
  );
}