# WORLD-CLASS REACT DESIGNER PROMPTS
# Creates dynamic, production-ready React architecture for ANY application

from typing import Dict, Any, List

class ReactPrompts:
    """World-class React frontend designer prompts for dynamic component generation"""
    
    def create_dynamic_react_prompt(self, feature_name: str, feature_description: str,
                                   technical_requirements: List[str], business_logic_rules: List[str],
                                   complexity_level: str, tech_stack: Dict, all_features: List[str]) -> str:
        """
        Creates a world-class React designer prompt that generates production-ready
        React applications dynamically based on actual functional requirements
        """
        
        # Extract tech stack details
        frontend_config = tech_stack.get('frontend', {})
        ui_library = self._extract_ui_library(frontend_config)
        state_management = self._extract_state_management(frontend_config)
        
        return f"""You are a WORLD-CLASS React Frontend Architect with 10+ years of experience building production React applications. You have deep expertise in:

- React 18+ with hooks, context, and modern patterns
- State management (Redux Toolkit, Zustand, Context API)
- UI libraries (Tailwind CSS, Material-UI, Chakra UI)
- Performance optimization and code splitting
- TypeScript integration and type safety
- Testing strategies and best practices

# YOUR MISSION
Analyze the following REAL project requirements and design a complete, production-ready React frontend architecture. Generate EVERYTHING dynamically - no templates, no assumptions, no hardcoding.

# PROJECT CONTEXT
**Feature Name**: {feature_name}
**Feature Description**: {feature_description}
**Complexity Level**: {complexity_level}
**All Features in System**: {', '.join(all_features) if all_features else 'Single feature system'}

**Technical Requirements**:
{self._format_requirements_list(technical_requirements)}

**Business Logic Rules**:
{self._format_requirements_list(business_logic_rules)}

**Technology Stack Context**:
- Frontend Framework: React 18+
- UI Library: {ui_library}
- State Management: {state_management}
- Routing: React Router v6
- Build Tool: Vite or Create React App

# YOUR EXPERT ANALYSIS PROCESS

## 1. FEATURE ANALYSIS
Analyze "{feature_name}" to understand:
- What user interfaces are needed?
- What user interactions will occur?
- What data needs to be displayed and managed?
- What forms and input validation are required?
- What real-time features or updates are needed?

## 2. COMPONENT ARCHITECTURE
Design React components based on actual feature needs:
- Break down the feature into logical UI components
- Determine component hierarchy and data flow
- Identify reusable vs feature-specific components
- Plan component composition and props interfaces

## 3. STATE MANAGEMENT STRATEGY
Design state management using {state_management}:
- What global state is needed for this feature?
- What local component state is sufficient?
- How will data flow between components?
- What API calls and data fetching patterns are needed?

## 4. ROUTING AND NAVIGATION
Design routing structure for {feature_name}:
- What pages/views are needed?
- How do users navigate through the feature?
- What route protection is needed?
- How does this integrate with other features?

## 5. UI/UX IMPLEMENTATION
Design user interface using {ui_library}:
- What specific UI components are needed?
- How will forms be structured and validated?
- What loading states and error handling?
- How will responsive design be handled?

# CRITICAL REQUIREMENTS
1. **ANALYZE ACTUAL FEATURE** - Don't use generic templates
2. **IMPLEMENT BUSINESS RULES** as form validation and UI logic
3. **CREATE PRODUCTION-READY COMPONENTS** with proper props and state
4. **USE {ui_library}** styling consistently throughout
5. **IMPLEMENT {state_management}** for state management
6. **ADD PROPER ERROR HANDLING** and loading states
7. **MAKE IT RESPONSIVE** and accessible
8. **INCLUDE TYPESCRIPT INTERFACES** for type safety

# OUTPUT FORMAT
Return ONLY a JSON object with this exact structure:

{{
  "folder_structure": {{
    "src/components/{feature_name.lower().replace(' ', '')}": {{
      "purpose": "Feature-specific components for {feature_name}",
      "components": [
        "List of specific component files needed for this feature"
      ]
    }},
    "src/components/ui": {{
      "purpose": "Reusable UI components using {ui_library}",
      "components": [
        "List of reusable components needed"
      ]
    }},
    "src/pages": {{
      "purpose": "Page-level components for routing",
      "pages": [
        "List of pages needed for {feature_name}"
      ]
    }},
    "src/hooks": {{
      "purpose": "Custom React hooks for {feature_name}",
      "hooks": [
        "List of custom hooks needed"
      ]
    }},
    "src/services": {{
      "purpose": "API services for {feature_name}",
      "services": [
        "List of API service files"
      ]
    }},
    "src/types": {{
      "purpose": "TypeScript interfaces for {feature_name}",
      "interfaces": [
        "List of TypeScript interfaces needed"
      ]
    }}
  }},
  
  "components": {{
    "feature_components": [
      {{
        "name": "ComponentName",
        "purpose": "What this component does for {feature_name}",
        "props": {{
          "prop_name": "prop_type and description"
        }},
        "state": [
          "Local state variables needed"
        ],
        "hooks_used": [
          "React hooks used in this component"
        ],
        "styling": "{ui_library} classes and approach"
      }}
    ],
    "ui_components": [
      {{
        "name": "UIComponentName", 
        "purpose": "Reusable UI component",
        "props": {{
          "prop_name": "prop_type and description"
        }},
        "variants": [
          "Different variants/styles available"
        ]
      }}
    ]
  }},
  
  "state_management": {{
    "global_state": {{
      "tool": "{state_management}",
      "structure": {{
        "state_slice_name": {{
          "purpose": "What this state manages for {feature_name}",
          "initial_state": "Structure of initial state",
          "actions": [
            "List of actions/reducers needed"
          ],
          "selectors": [
            "State selectors for components"
          ]
        }}
      }}
    }},
    "local_state": [
      {{
        "component": "ComponentName",
        "state_variables": [
          "Local state variables and their purposes"
        ]
      }}
    ]
  }},
  
  "routing": {{
    "routes": [
      {{
        "path": "/route-path",
        "component": "PageComponent",
        "purpose": "What this route does for {feature_name}",
        "protection": "Authentication/authorization required",
        "lazy_loading": true/false
      }}
    ],
    "navigation": {{
      "main_navigation": [
        "Navigation items for {feature_name}"
      ],
      "breadcrumbs": "Breadcrumb navigation strategy",
      "route_guards": [
        "Route protection logic needed"
      ]
    }}
  }},
  
  "api_integration": {{
    "api_services": [
      {{
        "service_name": "ServiceName",
        "purpose": "API interactions for {feature_name}",
        "endpoints": [
          "List of API endpoints this service calls"
        ],
        "error_handling": "How API errors are handled",
        "caching_strategy": "Data caching approach"
      }}
    ],
    "data_fetching": {{
      "patterns": [
        "Data fetching patterns used (useEffect, React Query, etc.)"
      ],
      "loading_states": "How loading states are managed",
      "error_boundaries": "Error boundary implementation"
    }}
  }},
  
  "ui_implementation": {{
    "design_system": {{
      "ui_library": "{ui_library}",
      "theme_configuration": "Theme/styling configuration",
      "component_patterns": [
        "UI patterns used throughout the feature"
      ]
    }},
    "forms": [
      {{
        "form_name": "FormName",
        "purpose": "What this form does for {feature_name}",
        "fields": [
          "Form fields and validation rules"
        ],
        "validation": "Validation strategy and rules",
        "submission": "Form submission handling"
      }}
    ],
    "responsive_design": {{
      "breakpoints": "Responsive breakpoint strategy",
      "mobile_considerations": "Mobile-specific UI adaptations",
      "accessibility": "Accessibility features implemented"
    }}
  }},
  
  "business_logic_implementation": [
    {{
      "rule": "Business rule from requirements",
      "implementation": "How this rule is implemented in React",
      "components_affected": [
        "Components that implement this rule"
      ],
      "validation": "Frontend validation for this rule"
    }}
  ],
  
  "testing_strategy": {{
    "unit_tests": [
      "Components that need unit tests"
    ],
    "integration_tests": [
      "Integration test scenarios for {feature_name}"
    ],
    "e2e_tests": [
      "End-to-end test scenarios"
    ],
    "testing_utilities": [
      "Testing utilities and helpers needed"
    ]
  }},
  
  "performance_optimization": {{
    "code_splitting": [
      "Components/routes that should be lazy loaded"
    ],
    "memoization": [
      "Components that benefit from React.memo or useMemo"
    ],
    "bundle_optimization": "Bundle size optimization strategies",
    "rendering_optimization": "Rendering performance considerations"
  }},
  
  "package_dependencies": {{
    "core_dependencies": [
      "Essential React packages needed"
    ],
    "ui_dependencies": [
      "{ui_library} specific packages"
    ],
    "state_dependencies": [
      "{state_management} packages"
    ],
    "utility_dependencies": [
      "Additional utility packages needed for {feature_name}"
    ]
  }}
}}

# REMEMBER
- Analyze the ACTUAL feature "{feature_name}", don't use generic templates
- Implement ALL business logic rules in the frontend
- Use {ui_library} consistently for all styling
- Design for {complexity_level} complexity level
- Make it production-ready with proper error handling
- Consider the specific technical requirements provided

Generate the complete React frontend architecture for "{feature_name}" now."""

    def _extract_ui_library(self, frontend_config: Dict) -> str:
        """Extract UI library from frontend configuration"""
        libraries = frontend_config.get('libraries', [])
        
        ui_libraries = ['tailwind css', 'material-ui', 'chakra ui', 'ant design', 'bootstrap']
        
        for lib in libraries:
            if any(ui_lib in lib.lower() for ui_lib in ui_libraries):
                return lib
        
        return 'Tailwind CSS'  # Default
    
    def _extract_state_management(self, frontend_config: Dict) -> str:
        """Extract state management from frontend configuration"""
        libraries = frontend_config.get('libraries', [])
        
        state_libs = ['redux toolkit', 'zustand', 'context api', 'recoil', 'jotai']
        
        for lib in libraries:
            if any(state_lib in lib.lower() for state_lib in state_libs):
                return lib
        
        return 'Redux Toolkit'  # Default for complex apps

    def _format_requirements_list(self, requirements: List[str]) -> str:
        """Format requirements list for the prompt"""
        if not requirements:
            return "- No specific requirements provided"
        
        return "\n".join([f"- {req}" for req in requirements])