# components/login_page.py

import gradio as gr
from utils.auth import AuthService


class LoginPage:
    """UI elements + event wiring for the login screen (centered & narrow)."""

    def __init__(self):
        with gr.Row(visible=True) as self.container:
            gr.Column(scale=1)  # left spacer

            with gr.Column(scale=0) as self.form_col:
                # components with min_width control overall width
                self.username = gr.Text(label="Username", min_width=300)
                self.password = gr.Text(
                    label="Password", type="password", min_width=300
                )
                self.login_btn = gr.Button("Log in", min_width=300)

                # ↓ removed min_width (Markdown doesn't accept it)
                self.message = gr.Markdown()

            gr.Column(scale=1)  # right spacer

    # event wiring unchanged …
    def register_callbacks(self, dashboard_page, session_state, review_dashboard_page=None):
        header = dashboard_page.header
        btn = self.login_btn

        # Prepare outputs based on whether we have a review dashboard
        login_outputs = [
            self.message,
            self.container,
            dashboard_page.container, # Phase 1 dashboard
        ]
        if review_dashboard_page:
            login_outputs.append(review_dashboard_page.container) # Phase 2 dashboard
            login_outputs.append(review_dashboard_page.load_trigger) # Trigger for loading review data
        else:
            login_outputs.append(gr.update()) # Placeholder for review_dashboard_page.container
            login_outputs.append(gr.update()) # Placeholder for review_dashboard_page.load_trigger
        
        login_outputs.extend([
            header.welcome,
            # These are for the main dashboard_page, 
            # review_dashboard_page will load its own data via the trigger
            dashboard_page.items_state, 
            dashboard_page.idx_state,
            dashboard_page.tts_id,
            dashboard_page.filename,
            dashboard_page.sentence,
            dashboard_page.ann_sentence,
        ])

        (
            btn.click(
                fn=lambda: gr.update(value="🔒 Logging in…", interactive=False),
                outputs=btn,
            )
            .then(
                fn=AuthService.login,
                inputs=[self.username, self.password, session_state],
                outputs=login_outputs,
            )
            .then(
                fn=lambda: gr.update(value="Login", interactive=True),
                outputs=btn,
            )
        )