# app.py
import gradio as gr
import os
from openai import OpenAI

# -----------------------------
# 1️⃣ AI Interview logic
# -----------------------------
def groq_ask(question, job_role, api_key):
    """
    Sends question + job_role to OpenAI (replace model with Groq Llama-3 when available)
    """
    if not api_key.strip():
        return "❌ Please provide API key."
    
    client = OpenAI(api_key=api_key)
    prompt = f"Act as an interviewer for the role of {job_role}. Question: {question}"
    
    try:
        response = client.chat.completions.create(
            model="gpt-4",
            messages=[{"role": "user", "content": prompt}],
            temperature=0.7
        )
        return response.choices[0].message.content
    except Exception as e:
        return f"❌ Error: {e}"

def analyze_answer(user_answer):
    """
    Returns confidence score and feedback
    """
    confidence = round(min(len(user_answer)/100, 1.0)*100, 2)
    feedback = "✅ Good answer!" if confidence > 50 else "⚠️ Needs improvement."
    return f"Confidence Score: {confidence}%\nFeedback: {feedback}"

def interview_app(job_role, user_question, user_answer, api_key):
    ai_response = groq_ask(user_question, job_role, api_key)
    feedback = analyze_answer(user_answer)
    return ai_response, feedback

# -----------------------------
# 2️⃣ Gradio 3D UI Layout
# -----------------------------
with gr.Blocks(css="""
    body {background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);}
    .gradio-container {color:white;}
    .gr-button {background-color:#ff4b2b; color:white; border-radius:10px;}
    .gr-textbox {background-color:#1c1c3c; color:white; border-radius:10px;}
""") as demo:

    gr.HTML("""
    <div style='display:flex; align-items:center; justify-content:center; margin-bottom:20px;'>
        <h1 style='color:#00ffe5;'>💡 AI Interview Coach 3D</h1>
    </div>
    """)

    with gr.Row():
        with gr.Column(scale=1):
            job_role_input = gr.Textbox(label="Job Role", placeholder="Software Developer")
            user_question_input = gr.Textbox(label="Your Question to AI", placeholder="Type a question")
            user_answer_input = gr.Textbox(label="Your Answer", placeholder="Type your answer here")
            api_key_input = gr.Textbox(label="OpenAI/Groq API Key", placeholder="Enter API key")
            
            ai_response_output = gr.Textbox(label="AI Interviewer's Response")
            feedback_output = gr.Textbox(label="Feedback & Confidence Score")
            
            gr.Button("Submit").click(
                interview_app,
                inputs=[job_role_input, user_question_input, user_answer_input, api_key_input],
                outputs=[ai_response_output, feedback_output]
            )

        with gr.Column(scale=1):
            gr.HTML("""
            <div id="3d-avatar" style="width:100%; height:400px;"></div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
            <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(400, 400);
            document.getElementById('3d-avatar').appendChild(renderer.domElement);
            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshStandardMaterial({color:0x00ffe5});
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(5,5,5);
            scene.add(light);
            camera.position.z = 3;
            function animate(){requestAnimationFrame(animate); cube.rotation.y += 0.01; renderer.render(scene,camera);}
            animate();
            </script>
            """)

# -----------------------------
# 3️⃣ Launch app
# -----------------------------
demo.launch()