graph TB
    subgraph Client["🖥️ Frontend (React + Vite)"]
        UI[User Interface]
        RB[Request Builder]
        RV[Response Viewer]
        AI[AI Debug Panel]
        CF[Common Fixes]
        RH[Request History]
    end

    subgraph Services["⚙️ Core Services"]
        AS[API Service]
        GS[Gemini AI Service]
        HF[HuggingFace Fallback]
        HS[History State Manager]
    end

    subgraph External["🌐 External APIs"]
        GA[Gemini API]
        HFA[HuggingFace Inference API]
        TB["Test APIs<br/>(HTTPBin, JSONPlaceholder)"]
        PS[Polar.sh Payments]
    end

    UI --> RB
    UI --> RV
    UI --> AI
    UI --> CF
    UI --> RH

    RB --> AS
    AS --> TB
    AS --> RV

    RV --> AI
    AI --> GS
    GS --> GA
    GS -.->|Fallback| HF
    HF --> HFA

    RH --> HS
    UI --> PS

    style Client fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Services fill:#252542,stroke:#8b5cf6,color:#fff
    style External fill:#0f0f1a,stroke:#a855f7,color:#fff

sequenceDiagram
    participant U as 👤 User
    participant RB as 🔧 Request Builder
    participant AS as ⚙️ API Service
    participant EA as 🌐 External API
    participant RV as 📊 Response Viewer
    participant AI as 🤖 AI Assistant

    U->>RB: Configure Request
    Note over RB: URL, Method, Headers, Body
    
    RB->>AS: Execute Request
    AS->>EA: HTTP Request
    EA-->>AS: Response
    AS-->>RV: Display Results

    alt Failed Request (4xx/5xx)
        RV->>AI: Auto-trigger Debug
        AI->>AI: Analyze with Gemini/HF
        AI-->>U: Show Fixes & Suggestions
    else User Clicks Debug
        U->>AI: Manual Debug Request
        AI-->>U: Detailed Analysis
    end

    U->>RB: Apply One-Click Fix
    RB->>AS: Retry Request

flowchart LR
    A[📝 Enter API Details] --> B{Valid?}
    B -->|Yes| C[🚀 Send Request]
    B -->|No| D[⚠️ Show Validation]
    D --> A
    
    C --> E{Response?}
    E -->|2xx ✅| F[Green Status]
    E -->|3xx ⚡| G[Yellow Status]
    E -->|4xx/5xx ❌| H[Red Status]
    
    F & G & H --> I[💾 Save to History]
    
    H --> J{Debug?}
    J -->|Yes| K[🤖 AI Analysis]
    K --> L[💡 Suggestions]
    L --> M{Apply Fix?}
    M -->|Yes| A
    M -->|No| N[✏️ Manual Edit]
    N --> A

    style A fill:#6366f1,color:#fff
    style C fill:#10b981,color:#fff
    style K fill:#8b5cf6,color:#fff