import { MCPServer } from '../mcp/server';
import { KnowledgeGraph } from '../knowledge-graph';
import { AgentWorkflowSystem } from '../agent-workflow';
import { Component, DesignToken } from '../design-system/components';

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

describe('MCP UX Tools Integration', () => {
  let mcpServer: MCPServer;
  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>;
    mcpServer = new MCPServer(mockKnowledgeGraph, mockWorkflow);
  });

  describe('UX Research Tools', () => {
    it('conducts user research', async () => {
      const tools = mcpServer.registerTools();
      const research = await tools.conductResearch('persona', {
        userType: 'developer',
        experience: 'senior'
      });

      expect(research).toHaveProperty('id');
      expect(research).toHaveProperty('type', 'persona');
      expect(research).toHaveProperty('insights');
      expect(research).toHaveProperty('recommendations');
    });
  });

  describe('Wireframe Tools', () => {
    it('creates and manages wireframes', async () => {
      const tools = mcpServer.registerTools();
      
      // Create wireframe
      const wireframe = await tools.createWireframe(
        'Dashboard',
        'Main user dashboard'
      );
      expect(wireframe).toHaveProperty('id');
      expect(wireframe.name).toBe('Dashboard');

      // Add component
      const component = {
        id: 'stats-widget',
        type: 'widget',
        position: { x: 0, y: 0 },
        size: { width: 300, height: 200 },
        props: { title: 'Statistics' }
      };
      await tools.addWireframeComponent(wireframe.id, component);

      // Add interaction
      const interaction = {
        sourceId: 'stats-widget',
        targetId: 'stats-widget',
        type: 'click',
        description: 'Open detailed view'
      };
      await tools.addWireframeInteraction(wireframe.id, interaction);

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

  describe('Design System Tools', () => {
    it('manages design system components and tokens', async () => {
      const tools = mcpServer.registerTools();

      // Add token
      const token: DesignToken = {
        type: 'color',
        name: 'brand-primary',
        value: '#1a73e8'
      };
      await tools.addDesignToken(token);

      // Add component
      const component: Component = {
        id: 'data-card',
        type: 'molecule',
        name: 'Data Card',
        description: 'Card displaying data metrics',
        tokens: [token],
        props: { showHeader: true },
        variants: ['compact', 'detailed'],
        accessibility: {
          role: 'article',
          ariaProps: { 'aria-label': 'Data metrics card' }
        }
      };
      await tools.addDesignComponent(component);

      // Get component
      const retrieved = await tools.getDesignComponent('data-card');
      expect(retrieved).toEqual(component);

      // Get by type
      const molecules = await tools.getComponentsByType('molecule');
      expect(molecules).toContainEqual(component);

      // Validate
      const isValid = await tools.validateDesignComponent(component);
      expect(isValid).toBe(true);

      // Generate docs
      const docs = await tools.generateDesignDocs();
      expect(docs).toContain('# Design System Documentation');
      expect(docs).toContain('Data Card');
      expect(docs).toContain('brand-primary');
    });
  });

  describe('End-to-End Workflow', () => {
    it('executes complete UX workflow', async () => {
      const tools = mcpServer.registerTools();

      // 1. Conduct research
      const research = await tools.conductResearch('usability', {
        feature: 'data-visualization'
      });

      // 2. Create design token based on research
      const token: DesignToken = {
        type: 'spacing',
        name: 'chart-padding',
        value: '24px'
      };
      await tools.addDesignToken(token);

      // 3. Create component using research insights
      const component: Component = {
        id: 'data-viz',
        type: 'organism',
        name: 'Data Visualization',
        description: `Visualization component based on ${research.id}`,
        tokens: [token],
        props: { type: 'bar-chart' },
        variants: ['bar', 'line', 'pie'],
        accessibility: {
          role: 'figure',
          ariaProps: { 'aria-label': 'Data visualization' }
        }
      };
      await tools.addDesignComponent(component);

      // 4. Create wireframe using the component
      const wireframe = await tools.createWireframe(
        'Analytics Dashboard',
        'Data visualization dashboard'
      );

      // 5. Add component to wireframe
      await tools.addWireframeComponent(wireframe.id, {
        id: 'main-chart',
        type: 'data-viz',
        position: { x: 100, y: 100 },
        size: { width: 600, height: 400 },
        props: { type: 'bar-chart' }
      });

      // 6. Validate everything
      const componentValid = await tools.validateDesignComponent(component);
      const wireframeValid = await tools.validateWireframe(wireframe.id);
      
      expect(componentValid).toBe(true);
      expect(wireframeValid.valid).toBe(true);

      // 7. Generate documentation
      const docs = await tools.generateDesignDocs();
      expect(docs).toContain('Data Visualization');
      expect(docs).toContain('chart-padding');
    });
  });
});