import gradio as gr
from carebridge_client import CareBridgeTranslator

# --- Initialize Client (Lazy) ---
translator = None

def load_translator():
    global translator
    if translator is None:
        translator = CareBridgeTranslator()
    return translator

# --- Languages ---
LANGUAGES = [
    "English", "Polish", "Romanian", "Punjabi", "Urdu", 
    "Portuguese", "Spanish", "Arabic", "Bengali", "Gujarati", "Italian"
]

# --- Minimal CSS (Gemini Dictation Inspired) ---
CUSTOM_CSS = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { font-family: 'Inter', sans-serif !important; }

.gradio-container {
    max-width: 900px !important;
    margin: auto !important;
    background: #f8fafc !important;
    min-height: 100vh !important;
}

/* --- Header --- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: white;
}
.app-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}
.lang-pills {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lang-pill {
    background: #e0e7ff;
    color: #4338ca;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}
.lang-arrow { color: #94a3b8; font-size: 1.2rem; }

/* --- Document Area --- */
.document-area {
    background: white;
    border-radius: 16px;
    margin: 24px;
    padding: 32px;
    min-height: 400px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}
.output-text {
    font-size: 1.75rem !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    min-height: 200px !important;
    text-align: center;
    padding: 40px 20px;
}
.placeholder-text {
    color: #94a3b8;
    font-style: italic;
}

/* --- Floating Controls --- */
.floating-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    align-items: center;
    background: white;
    padding: 12px 24px;
    border-radius: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100;
}
.fab-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.fab-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.fab-primary {
    background: linear-gradient(135deg, #4F46E5, #6366f1) !important;
    color: white !important;
    width: 72px !important;
    height: 72px !important;
}
.fab-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* Hide Gradio footer */
footer { display: none !important; }

/* Input modals */
.input-modal {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin: 0 24px 100px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}
"""

# --- Translation Functions ---
def translate_text(text, source_lang, target_lang):
    if not text:
        return "Enter text above to translate..."
    yield "⏳ Translating..."
    t = load_translator()
    result = t.translate_text(text, source_lang, target_lang)
    yield result

def translate_speech(audio, source_lang, target_lang):
    if audio is None:
        return "Record audio using the microphone..."
    yield "🎧 Processing speech..."
    t = load_translator()
    result = t.translate_audio(audio, source_lang, target_lang)
    yield result

def translate_document(image, source_lang, target_lang):
    if image is None:
        return "Upload a document image..."
    yield "📄 Scanning document..."
    t = load_translator()
    result = t.translate_image(image, source_lang, target_lang)
    yield result

def get_tts(text, lang):
    if not text or text.startswith("⏳") or text.startswith("🎧") or text.startswith("📄"):
        return None
    t = load_translator()
    return t.speak_text(text, lang)

# --- App Layout ---
with gr.Blocks(css=CUSTOM_CSS, title="SIMBOTI Live") as app:

    # State for current mode
    mode = gr.State("text")

    # --- Header ---
    with gr.Row(elem_classes="app-header"):
        gr.HTML("<span class='app-title'>🌐 SIMBOTI</span>")
        with gr.Row(elem_classes="lang-pills"):
            source_lang = gr.Dropdown(LANGUAGES, value="English", show_label=False, container=False, scale=0, min_width=120)
            gr.HTML("<span class='lang-arrow'>→</span>")
            target_lang = gr.Dropdown(LANGUAGES, value="Polish", show_label=False, container=False, scale=0, min_width=120)

    # --- Document Output Area ---
    with gr.Column(elem_classes="document-area"):
        output_display = gr.Textbox(
            value="Your translation will appear here...",
            show_label=False,
            interactive=False,
            lines=8,
            elem_classes="output-text"
        )
        audio_output = gr.Audio(label="Listen", autoplay=True, visible=True)

    # --- Input Section (Toggleable) ---
    with gr.Column(elem_classes="input-modal", visible=True) as text_input_section:
        text_input = gr.Textbox(label="Type your message", placeholder="e.g., Where does it hurt?", lines=2)
        text_submit = gr.Button("Translate", variant="primary")

    with gr.Column(elem_classes="input-modal", visible=False) as audio_input_section:
        audio_input = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Record")
        audio_submit = gr.Button("Translate Speech", variant="primary")

    with gr.Column(elem_classes="input-modal", visible=False) as doc_input_section:
        doc_input = gr.Image(type="pil", label="📷 Upload Document")
        doc_submit = gr.Button("Scan & Translate", variant="primary")

    # --- Mode Switchers ---
    with gr.Row(elem_classes="floating-bar"):
        text_mode_btn = gr.Button("⌨️", elem_classes="fab-btn fab-secondary")
        mic_mode_btn = gr.Button("🎤", elem_classes="fab-btn fab-primary")
        doc_mode_btn = gr.Button("📎", elem_classes="fab-btn fab-secondary")

    # --- Mode Toggle Logic ---
    def show_text_mode():
        return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
    def show_audio_mode():
        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
    def show_doc_mode():
        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)

    text_mode_btn.click(show_text_mode, outputs=[text_input_section, audio_input_section, doc_input_section])
    mic_mode_btn.click(show_audio_mode, outputs=[text_input_section, audio_input_section, doc_input_section])
    doc_mode_btn.click(show_doc_mode, outputs=[text_input_section, audio_input_section, doc_input_section])

    # --- Translation Triggers ---
    text_submit.click(translate_text, inputs=[text_input, source_lang, target_lang], outputs=[output_display]).then(
        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
    )
    audio_submit.click(translate_speech, inputs=[audio_input, source_lang, target_lang], outputs=[output_display]).then(
        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
    )
    doc_submit.click(translate_document, inputs=[doc_input, source_lang, target_lang], outputs=[output_display]).then(
        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
    )

# Launch
if __name__ == "__main__":
    app.launch(ssr_mode=False)