import { UXDesignerAgent } from '../agents/ux-designer';
import { DesignSystem, Component } from '../design-system/components';
import { KnowledgeGraph } from '../knowledge-graph';
import { AgentWorkflowSystem } from '../agent-workflow';

jest.mock('../knowledge-graph');
jest.mock('../agent-workflow');

describe('UX Integration Tests', () => {
  let uxDesigner: UXDesignerAgent;
  let designSystem: DesignSystem;
  let mockKnowledgeGraph: jest.Mocked<KnowledgeGraph>;
  let mockWorkflow: jest.Mocked<AgentWorkflowSystem>;

  beforeEach(() => {
    mockKnowledgeGraph = new KnowledgeGraph() as jest.Mocked<KnowledgeGraph>;
    mockWorkflow = new AgentWorkflowSystem(mockKnowledgeGraph) as jest.Mocked<AgentWorkflowSystem>;
    uxDesigner = new UXDesignerAgent(mockKnowledgeGraph, mockWorkflow);
    designSystem = new DesignSystem(mockKnowledgeGraph);
  });

  describe('Wireframe with Design System Components', () => {
    it('creates wireframe with validated components', async () => {
      // Add design system component
      const component: Component = {
        id: 'button-primary',
        type: 'atom',
        name: 'Primary Button',
        description: 'Main CTA button',
        tokens: [],
        props: { variant: 'primary' },
        variants: ['default'],
        accessibility: {
          role: 'button',
          ariaProps: { 'aria-pressed': 'false' }
        }
      };
      await designSystem.addComponent(component);

      // Create wireframe
      const wireframe = await uxDesigner.createWireframe(
        'Login Form',
        'User authentication interface'
      );

      // Add design system component to wireframe
      await uxDesigner.addComponentToWireframe(wireframe.id, {
        id: 'login-submit',
        type: 'button-primary',
        position: { x: 100, y: 200 },
        size: { width: 120, height: 40 },
        props: { label: 'Sign In' }
      });

      // Validate wireframe
      const validation = await uxDesigner.validateWireframe(wireframe.id);
      expect(validation.valid).toBe(true);

      // Verify knowledge graph interactions
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith(
        expect.objectContaining({
          type: 'component'
        })
      );
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith(
        expect.objectContaining({
          type: 'wireframe'
        })
      );
    });

    it('integrates user research with design decisions', async () => {
      // Conduct user research
      const research = await uxDesigner.conductUserResearch('usability', {
        target: 'login-flow',
        participants: 5
      });

      // Create component based on research
      const component: Component = {
        id: 'login-form',
        type: 'organism',
        name: 'Login Form',
        description: `Form component based on usability research ${research.id}`,
        tokens: [],
        props: {
          fields: ['email', 'password'],
          submitLabel: 'Sign In'
        },
        variants: ['default', 'signup'],
        accessibility: {
          role: 'form',
          ariaProps: { 'aria-label': 'Login form' }
        }
      };

      await designSystem.addComponent(component);
      const isValid = await designSystem.validateComponent(component);
      expect(isValid).toBe(true);

      // Create wireframe using the research-based component
      const wireframe = await uxDesigner.createWireframe(
        'Enhanced Login',
        'Research-based login interface'
      );

      await uxDesigner.addComponentToWireframe(wireframe.id, {
        id: 'main-login-form',
        type: 'login-form',
        position: { x: 50, y: 100 },
        size: { width: 400, height: 300 },
        props: { variant: 'default' }
      });

      // Verify knowledge graph captures the relationships
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith(
        expect.objectContaining({
          type: 'user_research'
        })
      );
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith(
        expect.objectContaining({
          type: 'component'
        })
      );
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith(
        expect.objectContaining({
          type: 'wireframe'
        })
      );
    });
  });
});