flowchart TB
    subgraph Client["🌐 Client Layer"]
        Browser["Browser"]
        Mobile["Mobile App"]
    end

    subgraph Frontend["📱 Frontend (Next.js 13.5)"]
        NextApp["Next.js Application"]
        Components["React Components"]
        Services["API Services"]
    end

    subgraph Gateway["🚪 API Gateway Layer"]
        APIGateway["API Gateway<br/>(Spring Cloud Gateway)"]
        SecurityFilter["JWT Security Filter"]
    end

    subgraph Discovery["🔍 Service Discovery"]
        Eureka["Netflix Eureka<br/>Service Registry"]
    end

    subgraph Microservices["⚙️ Microservices Layer"]
        AuthService["Auth Service<br/>(JWT Token Management)"]
        UserService["User Service<br/>(User Management)"]
        ProductService["Product Service<br/>(Product Catalog)"]
        PaymentService["Payment Service<br/>(Orders, Cart, Payments)"]
    end

    subgraph Databases["🗄️ Data Layer"]
        MongoDB[(MongoDB<br/>Products, Users, Cart, Orders)]
        PostgreSQL[(PostgreSQL<br/>Payment Transactions)]
    end

    subgraph External["☁️ External Services"]
        Stripe["Stripe API<br/>(Payment Processing)"]
    end

    Browser --> NextApp
    Mobile --> NextApp
    NextApp --> APIGateway
    
    APIGateway --> SecurityFilter
    SecurityFilter --> AuthService
    APIGateway --> UserService
    APIGateway --> ProductService
    APIGateway --> PaymentService
    
    AuthService -.->|Register| Eureka
    UserService -.->|Register| Eureka
    ProductService -.->|Register| Eureka
    PaymentService -.->|Register| Eureka
    
    UserService --> MongoDB
    ProductService --> MongoDB
    PaymentService --> MongoDB
    PaymentService --> PostgreSQL
    PaymentService --> Stripe
    
    APIGateway -.->|Discover| Eureka

flowchart LR
    subgraph MS["Microservices"]
        direction TB
        SD["🔍 Service Discovery<br/>Port: 8761"]
        GW["🚪 API Gateway<br/>Port: 9000"]
        AS["🔐 Auth Service<br/>Port: 8084"]
        US["👤 User Service<br/>Port: 8083"]
        PS["📦 Product Service<br/>Port: 8080"]
        PY["💳 Payment Service<br/>Port: 8085"]
    end

    GW --> SD
    AS --> SD
    US --> SD
    PS --> SD
    PY --> SD

sequenceDiagram
    participant C as Client
    participant GW as API Gateway
    participant AS as Auth Service
    participant US as User Service
    participant PS as Protected Service

    C->>US: 1. Login (username, password)
    US->>AS: 2. Request JWT Token
    AS-->>US: 3. Return JWT Token
    US-->>C: 4. Return Token to Client
    
    C->>GW: 5. Request with JWT Bearer Token
    GW->>GW: 6. Validate JWT Locally
    GW->>PS: 7. Forward Request (if valid)
    PS-->>GW: 8. Response
    GW-->>C: 9. Return Response

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant C as Cart Service
    participant O as Order Service
    participant P as Payment Service
    participant S as Stripe

    U->>F: 1. Add items to cart
    F->>C: 2. POST /cart/{userId}
    C-->>F: 3. Cart updated
    
    U->>F: 4. Proceed to checkout
    F->>O: 5. POST /orders
    O-->>F: 6. Order created
    
    F->>P: 7. POST /payments/create
    P->>S: 8. Create PaymentIntent
    S-->>P: 9. Return client_secret
    P-->>F: 10. Return client_secret
    
    F->>S: 11. Confirm payment (Stripe.js)
    S-->>F: 12. Payment result
    
    F->>P: 13. POST /payments/{id}/confirm
    P->>O: 14. Update order status
    O-->>F: 15. Order confirmed

flowchart TB
    subgraph Docker["Docker Compose"]
        MongoDB[(MongoDB)]
        SD["Service Discovery"]
        GW["API Gateway"]
        AS["Auth Service"]
        US["User Service"]
        PS["Product Service"]
        PY["Payment Service"]
    end
    
    subgraph Volume["Persistent Storage"]
        Data[("mongodb_data")]
    end
    
    MongoDB --> Data
    SD --> MongoDB
    GW --> SD
    AS --> SD
    US --> SD
    PS --> SD
    PY --> SD