feat: vapi working

Backend/app/api/v1/api.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter
-from app.api.v1.endpoints import auth, quiz, notes
+from app.api.v1.endpoints import auth, quiz, notes, interview
 
 api_router = APIRouter()
 
@@ -23,3 +23,9 @@ api_router.include_router(
     prefix="/notes",
     tags=["notes"]
 )
+
+api_router.include_router(
+    interview.router,
+    prefix="/interview",
+    tags=["Interview"]
+)

Backend/app/api/v1/endpoints/interview.py

@@ -0,0 +1,135 @@
+import os
+import uvicorn
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from app.config import settings
+from vapi import Vapi
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+router = APIRouter()
+
+
+# --- CONFIGURATION ---
+VAPI_PRIVATE_KEY = os.getenv("VAPI_PRIVATE_KEY")
+VAPI_ASSISTANT_ID = os.getenv("VAPI_ASSISTANT_ID")
+# The SERVER_URL MUST be set to your public ngrok HTTPS URL for external webhooks to work.
+SERVER_URL = os.getenv("SERVER_URL", "http://localhost:8000") 
+
+# Initialize Vapi Server SDK
+try:
+    vapi_server = Vapi(token=VAPI_PRIVATE_KEY)
+except Exception as e:
+    print(f"Vapi SDK Initialization Error: {e}")
+    print("Ensure VAPI_PRIVATE_KEY is set in .env")
+
+# --- CORS SETUP ---
+# app.add_middleware(
+#     CORSMiddleware,
+#     # Allow communication from the frontend running on localhost:5173 
+#     # and also allow the ngrok base URL for safety.
+#     allow_origins=["http://localhost:5173", "http://127.0.0.1:5173", SERVER_URL],
+#     allow_credentials=True,
+#     allow_methods=["*"],
+#     allow_headers=["*"],
+# )
+
+# --- SCHEMAS ---
+class ConfigRequest(BaseModel):
+    name: str
+    job_role: str
+    experience: str
+
+# --- ENDPOINTS ---
+
+@router.post("/api/get-vapi-config")
+async def get_vapi_config(data: ConfigRequest):
+    """
+    Endpoint called by the Frontend to get the dynamically generated Assistant configuration.
+    """
+    if VAPI_ASSISTANT_ID == "asst_11111111111111111111":
+        raise HTTPException(
+            status_code=503, 
+            detail="VAPI_ASSISTANT_ID not configured in .env. Please set your ID."
+        )
+
+    try:
+        print(f"\n--- New Interview Request ---")
+        print(f"👤 User: {data.name}, Role: {data.job_role}, Exp: {data.experience}")
+
+        # 1. Construct the Dynamic System Prompt
+        system_prompt = (
+            f"You are a strict technical interviewer. You are interviewing {data.name} for a {data.job_role} role. "
+            f"They have {data.experience} years of experience. "
+            f"Ask short, concise questions. Wait for their answer. Do not lecture. "
+            f"Start by asking them to introduce themselves and briefly describe their experience."
+        )
+
+        # 2. Dynamic Webhook URL (for this call only)
+        # Vapi will send webhooks to the public URL defined in SERVER_URL, 
+        # specifically hitting this backend's /api/webhook route.
+        webhook_url = f"{SERVER_URL}/api/webhook"
+        
+        # 3. Construct the Overrides Payload
+        assistant_overrides = {
+            "model": {
+                "provider": "openai", 
+                "model": "gpt-4o-mini", # or "gpt-4", "gpt-3.5-turbo"
+                "messages": [
+                    {"role": "system", "content": system_prompt}
+                ]
+            },
+            "server": {
+                "url": webhook_url
+            },
+            # ... keep metadata as is ...
+            "metadata": {
+                "user_name": data.name,
+                "job_role": data.job_role,
+                "environment": "standalone-test"
+            }
+        }
+
+        # 4. Return the necessary config to the frontend Web SDK
+        return {
+            "assistantId": VAPI_ASSISTANT_ID,
+            "overrides": assistant_overrides
+        }
+
+    except Exception as e:
+        print(f"❌ Vapi Configuration Error: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to configure agent: {str(e)}")
+
+
+@router.post("/api/webhook")
+async def vapi_webhook_receiver(request: Request):
+    """
+    Endpoint that receives asynchronous events from Vapi's servers.
+    """
+    payload = await request.json()
+    message = payload.get("message", {})
+    
+    # Log incoming transcripts in real-time
+    if message.get("type") == "transcript" and message.get("transcriptType") == "final":
+        print(f"🗣️ [Transcript] {message.get('role').upper()}: {message.get('transcript')}")
+        
+    # Log the final report (contains summary, full conversation, etc.)
+    elif message.get("type") == "end-of-call-report":
+        metadata = payload.get("assistant", {}).get("metadata", {})
+        print(f"\n--- 🏁 Call Ended Report ---")
+        print(f"  User: {metadata.get('user_name')}, Role: {metadata.get('job_role')}")
+        print(f"  Summary: {message.get('summary', 'N/A')}")
+        print(f"---------------------------\n")
+
+    # Vapi expects a 200 OK response
+    return {"status": "ok"}
+
+@router.get("/")
+async def root():
+    return {"message": "Vapi Standalone Backend is running on port 8000."}
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

Backend/app/config.py

@@ -18,6 +18,10 @@ class Settings(BaseSettings):
 
     GROQ_API_KEY:str
 
+    VAPI_ASSISTANT_ID: str = "your-vapi-assistant-id"
+    VAPI_PRIVATE_KEY: str
+    VAPI_PUBLIC_KEY: str
+
     class Config:
         env_file = ".env"
         extra = "ignore"  # quiz

Backend/requirements.txt

@@ -23,4 +23,5 @@ llama-index-embeddings-huggingface
 groq 
 websockets 
 pyaudio 
-SpeechRecognition
+SpeechRecognition
+vapi-python

Frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@splinetool/react-spline": "^4.1.0",
         "@splinetool/runtime": "^1.11.2",
         "@tailwindcss/vite": "^4.1.17",
+        "@vapi-ai/web": "^2.5.2",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
@@ -73,7 +74,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -277,6 +277,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -325,6 +334,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@daily-co/daily-js": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.85.0.tgz",
+      "integrity": "sha512-lpl111ZWNTUWDnwYcPuNi9PGJPbLCeCw6LzmEY40nG0hv1jg5JLVW8Rq3Cj/+lOCP6W6h4PXm211ss0FFnxITQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@sentry/browser": "^8.33.1",
+        "bowser": "^2.8.1",
+        "dequal": "^2.0.3",
+        "events": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1537,6 +1562,81 @@
         "win32"
       ]
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.0.tgz",
+      "integrity": "sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.55.0.tgz",
+      "integrity": "sha512-cP3BD/Q6pquVQ+YL+rwCnorKuTXiS9KXW8HNKu4nmmBAyf7urjs+F6Hr1k9MXP5yQ8W3yK7jRWd09Yu6DHWOiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.55.0.tgz",
+      "integrity": "sha512-roCDEGkORwolxBn8xAKedybY+Jlefq3xYmgN2fr3BTnsXjSYOPC7D1/mYqINBat99nDtvgFvNfRcZPiwwZ1hSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.55.0.tgz",
+      "integrity": "sha512-nIkfgRWk1091zHdu4NbocQsxZF1rv1f7bbp3tTIlZYbrH62XVZosx5iHAuZG0Zc48AETLE7K4AX9VGjvQj8i9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.55.0.tgz",
+      "integrity": "sha512-1A31mCEWCjaMxJt6qGUK+aDnLDcK6AwLAZnqpSchNysGni1pSn1RWSmk9TBF8qyTds5FH8B31H480uxMPUJ7Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.0",
+        "@sentry-internal/feedback": "8.55.0",
+        "@sentry-internal/replay": "8.55.0",
+        "@sentry-internal/replay-canvas": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.55.0.tgz",
+      "integrity": "sha512-6g7jpbefjHYs821Z+EBJ8r4Z7LT5h80YSWRJaylGS4nW5W5Z2KXzpdnyFarv37O7QjauzVC2E+PABmpkw5/JGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/@splinetool/react-spline": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.1.0.tgz",
@@ -1563,7 +1663,6 @@
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.11.2.tgz",
       "integrity": "sha512-rFz3KOQQRHQGzWBvPKRZcI7fZe5qxNYX1FmmCqzsbJkAU/hJdifaxpyN4xESpbkdta6s7riSmoz5lmPGIpZRRQ==",
-      "peer": true,
       "dependencies": {
         "on-change": "^4.0.0",
         "semver-compare": "^1.0.0"
@@ -2007,7 +2106,6 @@
       "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2017,7 +2115,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2090,7 +2187,6 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2322,6 +2418,19 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@vapi-ai/web": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@vapi-ai/web/-/web-2.5.2.tgz",
+      "integrity": "sha512-mT4DjApi0/0+EK77h2xOLq3qVBa7rv3JNQ+gFWuhFE4YdGYxI51+fn8bQI9N535+zU/Z4jFKXotdBHQJ3filHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@daily-co/daily-js": "^0.85.0",
+        "events": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.0.tgz",
@@ -2349,7 +2458,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2457,6 +2565,12 @@
       "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
       "license": "MIT"
     },
+    "node_modules/bowser": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.13.1.tgz",
+      "integrity": "sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2501,7 +2615,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -3091,7 +3204,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3279,6 +3391,15 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -5483,7 +5604,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5493,7 +5613,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5550,7 +5669,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -5651,8 +5769,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -6028,7 +6145,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6107,7 +6223,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6339,7 +6454,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -6431,7 +6545,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },

Frontend/package.json

@@ -13,6 +13,7 @@
     "@splinetool/react-spline": "^4.1.0",
     "@splinetool/runtime": "^1.11.2",
     "@tailwindcss/vite": "^4.1.17",
+    "@vapi-ai/web": "^2.5.2",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",

Frontend/src/api/interviewService.ts

@@ -0,0 +1,16 @@
+import API from "./api";
+
+export const getVapiConfig = async (
+  name: string,
+  jobRole: string,
+  experience: number,
+  level: string
+) => {
+  const response = await API.post("/interview/config", {
+    name,
+    job_role: jobRole,
+    experience,
+    level,
+  });
+  return response.data;
+};

Frontend/src/pages/AiInterview.tsx

@@ -1,155 +1,275 @@
-import React, { useState } from "react";
-import { Send, Settings, CheckCircle } from "lucide-react";
-
-// Define the structure for the interview state
-type InterviewState = 'config' | 'chat' | 'results';
-
-const AIInterview: React.FC = () => {
-  const [interviewState, setInterviewState] = useState<InterviewState>('config');
-  const [jobRole, setJobRole] = useState('');
-  const [experience, setExperience] = useState('');
-  const [level, setLevel] = useState('Medium');
-
-  // Placeholder for the AI Chat bubble/ball
-  const InterviewBall: React.FC = () => (
-    <div className="flex items-center justify-center w-24 h-24 bg-purple-600 rounded-full shadow-2xl animate-pulse cursor-pointer">
-      <span className="text-white font-bold text-xl">AI</span>
-    </div>
-  );
+import React, { useEffect, useState } from "react";
+import Vapi from "@vapi-ai/web";
+import { Mic, PhoneOff, Volume2, Loader2, Activity } from "lucide-react";
+
+// --- CONFIG ---
+// 1. Put your Vapi Public Key here
+const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488";
+// 2. Point this to your FastAPI backend
+const BACKEND_URL = "http://localhost:8000";
+
+const vapi = new Vapi(VAPI_PUBLIC_KEY);
+
+function App() {
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [status, setStatus] = useState("Idle");
+
+  // Form State
+  const [name, setName] = useState("Jane Doe");
+  const [role, setRole] = useState("Senior Frontend Engineer");
+  const [exp, setExp] = useState("7");
+
+  useEffect(() => {
+    // Vapi Event Listeners
+    vapi.on("call-start", () => {
+      setStatus("Connected (AI is listening)");
+      setIsSessionActive(true);
+    });
+
+    vapi.on("call-end", () => {
+      setStatus("Call Ended");
+      setIsSessionActive(false);
+      setIsSpeaking(false);
+    });
+
+    vapi.on("speech-start", () => {
+      setStatus("AI is speaking...");
+      setIsSpeaking(true);
+    });
+
+    vapi.on("speech-end", () => {
+      if (isSessionActive) {
+        setStatus("Connected (Listening)");
+        setIsSpeaking(false);
+      }
+    });
+
+    vapi.on("error", (e) => {
+      console.error("Vapi Error:", e);
+      setStatus(`Error: ${e.message}`);
+      setIsSessionActive(false);
+    });
+
+    return () => {
+      // Cleanup
+      vapi.stop();
+      vapi.removeAllListeners();
+    };
+  }, []);
+
+  const startInterview = async () => {
+    if (VAPI_PUBLIC_KEY === "YOUR_PUBLIC_KEY_HERE") {
+      alert("Please update VAPI_PUBLIC_KEY in src/App.tsx");
+      return;
+    }
 
-  // --- RENDER FUNCTIONS ---
-
-  // 1. Configuration Phase
-  const renderConfig = () => (
-    <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
-      <h3 className="text-2xl font-semibold mb-6 flex items-center gap-2 text-blue-700">
-        <Settings size={24} /> Configure Your Interview
-      </h3>
-      
-      <div className="space-y-6">
-        {/* Job Role Input */}
-        <label className="block">
-          <span className="text-gray-700 font-medium">1. Job Role/Position (e.g., Senior Frontend Developer)</span>
+    setStatus("Configuring...");
+
+    try {
+      // 1. Call your backend to get the dynamic config
+      const response = await fetch(
+        `${BACKEND_URL}/api/v1/interview/api/get-vapi-config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, job_role: role, experience: exp }),
+        }
+      );
+
+      const data = await response.json();
+
+      if (!data.assistantId || !data.overrides) {
+        throw new Error("Invalid config from backend");
+      }
+
+      setStatus("Connecting...");
+
+      // 2. Start Vapi with the config from backend
+      vapi.start(data.assistantId, data.overrides);
+    } catch (err: any) {
+      console.error("Start Call API Error:", err);
+      setStatus(
+        `Failed: ${err.message || "Check FastAPI terminal for details."}`
+      );
+    }
+  };
+
+  const stopInterview = () => {
+    vapi.stop();
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#1f2937" /* Slate 800 */,
+        padding: "2.5rem",
+        borderRadius: "1rem",
+        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.5)",
+        maxWidth: "450px",
+        width: "100%",
+        textAlign: "center",
+        color: "#f9fafb" /* Gray 50 */,
+      }}
+    >
+      <h1
+        style={{
+          fontSize: "2rem",
+          fontWeight: "bold",
+          marginBottom: "1.5rem",
+          color: "#60a5fa",
+        }}
+      >
+        Vapi Interview Tester
+      </h1>
+
+      {/* --- FORM --- */}
+      {!isSessionActive && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            marginBottom: "1.5rem",
+          }}
+        >
           <input
             type="text"
-            value={jobRole}
-            onChange={(e) => setJobRole(e.target.value)}
-            placeholder="Enter the job role for tailored questions"
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+            placeholder="Your Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            style={inputStyle}
+          />
+          <input
+            type="text"
+            placeholder="Target Role"
+            value={role}
+            onChange={(e) => setRole(e.target.value)}
+            style={inputStyle}
           />
-        </label>
-
-        {/* Experience Input */}
-        <label className="block">
-          <span className="text-gray-700 font-medium">2. Years of Professional Experience</span>
           <input
             type="number"
-            min="0"
-            value={experience}
-            onChange={(e) => setExperience(e.target.value)}
-            placeholder="e.g., 5"
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+            placeholder="Experience (Years)"
+            value={exp}
+            onChange={(e) => setExp(e.target.value)}
+            style={inputStyle}
           />
-        </label>
-
-        {/* Level Select */}
-        <label className="block">
-          <span className="text-gray-700 font-medium">3. Difficulty Level</span>
-          <select
-            value={level}
-            onChange={(e) => setLevel(e.target.value)}
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
-          >
-            <option value="Basic">Basic (Beginner)</option>
-            <option value="Medium">Medium (Intermediate)</option>
-            <option value="Hard">Hard (Senior/Expert)</option>
-          </select>
-        </label>
-      </div>
+        </div>
+      )}
 
-      <button
-        onClick={() => {
-          if (jobRole && experience) {
-            setInterviewState('chat');
-          } else {
-            alert('Please fill in the Job Role and Experience.');
-          }
-        }}
-        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2"
-        disabled={!jobRole || !experience}
+      {/* --- VISUALIZER --- */}
+      <div
+        style={{ margin: "2rem 0", display: "flex", justifyContent: "center" }}
       >
-        <Send size={20} /> Start Interview
-      </button>
-    </div>
-  );
-
-  // 2. Chat/Interview Phase
-  const renderChat = () => (
-    <div className="flex flex-col items-center bg-white p-6 rounded-xl shadow-lg h-[600px] overflow-hidden relative">
-      <h3 className="text-xl font-bold mb-4">Interview in Progress</h3>
-      <p className="text-gray-600 mb-6">
-        Role: {jobRole} | Experience: {experience} yrs | Level: {level}
-      </p>
-
-      {/* The AI Ball UI Element */}
-      <InterviewBall />
-      
-      {/* Placeholder for Chat Messages */}
-      <div className="flex-1 w-full mt-4 p-4 border border-dashed border-gray-300 rounded-lg overflow-y-auto bg-gray-50">
-        <div className="bg-purple-100 p-3 rounded-lg text-purple-800 mb-2">
-          **AI:** Welcome! Based on your configuration, let's start with your first question...
+        <div
+          style={{
+            width: "120px",
+            height: "120px",
+            borderRadius: "50%",
+            backgroundColor: isSpeaking
+              ? "#a855f7"
+              : isSessionActive
+              ? "#2563eb"
+              : "#4b5563",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            transition: "all 0.3s ease",
+            transform: isSpeaking ? "scale(1.1)" : "scale(1)",
+            boxShadow: isSpeaking
+              ? "0 0 30px rgba(168, 85, 247, 0.8)"
+              : "0 0 20px rgba(37, 99, 235, 0.4)",
+          }}
+        >
+          {!isSessionActive ? (
+            <Mic size={48} />
+          ) : isSpeaking ? (
+            <Volume2 size={48} />
+          ) : (
+            <Activity size={48} />
+          )}
         </div>
-        {/* User messages and AI responses would go here */}
       </div>
 
-      {/* Input area */}
-      <div className="w-full flex gap-2 mt-4">
-        <input
-          type="text"
-          placeholder="Type your answer here..."
-          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
-        />
-        <button className="px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
-          <Send size={20} />
-        </button>
+      {/* --- CONTROLS --- */}
+      <div style={{ display: "flex", justifyContent: "center", gap: "1rem" }}>
+        {!isSessionActive ? (
+          <button
+            onClick={startInterview}
+            style={btnPrimary}
+            disabled={status === "Connecting..." || status === "Configuring..."}
+          >
+            {status === "Connecting..." || status === "Configuring..." ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <Mic />
+            )}
+            {status === "Connecting..." || status === "Configuring..."
+              ? "Starting..."
+              : "Start Interview"}
+          </button>
+        ) : (
+          <button onClick={stopInterview} style={btnDestructive}>
+            <PhoneOff /> End Call
+          </button>
+        )}
       </div>
-      
-      <button 
-        onClick={() => setInterviewState('results')} 
-        className="mt-4 text-sm text-red-500 hover:text-red-700 underline"
-      >
-        End Interview
-      </button>
-    </div>
-  );
-  
-  // 3. Results Phase (Simple Placeholder)
-  const renderResults = () => (
-    <div className="bg-green-50 p-8 rounded-xl shadow-xl text-center">
-      <CheckCircle size={48} className="text-green-600 mx-auto mb-4" />
-      <h3 className="text-3xl font-bold text-green-700 mb-2">Interview Ended</h3>
-      <p className="text-gray-700 mb-6">Thank you for practicing! Your detailed feedback and results are being compiled now.</p>
-      <button 
-        onClick={() => setInterviewState('config')} 
-        className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-150"
+
+      <p
+        style={{ marginTop: "1.5rem", color: "#9ca3af", fontSize: "0.875rem" }}
       >
-        Start New Interview
-      </button>
+        Status:{" "}
+        <strong
+          style={{ color: status.includes("Error") ? "#f87171" : "#e5e7eb" }}
+        >
+          {status}
+        </strong>
+      </p>
     </div>
   );
+}
 
-  // --- MAIN RENDER ---
+// Simple inline styles for standalone testing
+const inputStyle = {
+  padding: "0.75rem",
+  borderRadius: "0.5rem",
+  border: "1px solid #475569" /* Slate 600 */,
+  fontSize: "1rem",
+  backgroundColor: "#0f172a" /* Slate 900 */,
+  color: "#f9fafb" /* Gray 50 */,
+};
 
-  return (
-    <div className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">AI Interview Practice 🤖</h1>
-      
-      {/* State rendering */}
-      {interviewState === 'config' && renderConfig()}
-      {interviewState === 'chat' && renderChat()}
-      {interviewState === 'results' && renderResults()}
-    </div>
-  );
+const btnPrimary = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  backgroundColor: "#2563eb" /* Blue 600 */,
+  color: "white",
+  padding: "0.75rem 1.5rem",
+  borderRadius: "0.5rem",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "1rem",
+  fontWeight: "bold",
+  transition: "background-color 0.2s",
+  outline: "none",
+};
+
+const btnDestructive = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  backgroundColor: "#dc2626" /* Red 600 */,
+  color: "white",
+  padding: "0.75rem 1.5rem",
+  borderRadius: "0.5rem",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "1rem",
+  fontWeight: "bold",
+  transition: "background-color 0.2s",
+  outline: "none",
 };
 
-export default AIInterview;
+export default App;