"""Built-in login and registration UI."""

from __future__ import annotations

from waft_client.models import ProviderInfo

_CSS = """
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #333;
}
.auth-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}
h1 { font-size: 24px; margin-bottom: 24px; text-align: center; }
.btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #333;
    background: white;
    margin-bottom: 10px;
    transition: background 0.15s;
}
.btn:hover { background: #f8f8f8; }
.btn-google { border-color: #4285f4; color: #4285f4; }
.btn-apple { border-color: #000; color: #000; }
.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #999;
    font-size: 13px;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}
.divider::before { margin-right: 12px; }
.divider::after { margin-left: 12px; }
form { display: flex; flex-direction: column; gap: 12px; }
input[type="email"], input[type="password"] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
}
input:focus { border-color: #4285f4; }
.btn-submit {
    background: #333;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}
.btn-submit:hover { background: #555; }
.footer { text-align: center; margin-top: 20px; font-size: 14px; color: #666; }
.footer a { color: #4285f4; text-decoration: none; }
.error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}
"""


def _oauth_buttons(providers: list[ProviderInfo]) -> str:
    buttons = []
    for p in providers:
        if p.provider_type != "oauth":
            continue
        css_class = f"btn btn-{p.id}"
        buttons.append(f'<a href="/auth/{p.id}" class="{css_class}">Continue with {p.name}</a>')
    return "\n".join(buttons)


def _has_password(providers: list[ProviderInfo]) -> bool:
    return any(p.id == "password" for p in providers)


def login_page(
    providers: list[ProviderInfo],
    register_path: str = "/auth/register",
    error: str = "",
    signup_mode: str = "open",
    dev_login: bool = False,
) -> str:
    """Generate the login page HTML."""
    oauth_html = _oauth_buttons(providers)
    has_pw = _has_password(providers)

    error_html = f'<div class="error">{error}</div>' if error else ""

    dev_html = ""
    if dev_login:
        dev_html = """
        <form action="/auth/dev-login" method="POST">
            <button type="submit" class="btn-submit" style="background:#16a34a">
                Dev Login (dev@waft.dev)
            </button>
        </form>
        <div class="divider">or use credentials</div>
        """

    divider = '<div class="divider">or</div>' if oauth_html and has_pw else ""

    password_form = ""
    if has_pw:
        password_form = """
        <form action="/auth/password/login" method="POST">
            <input type="email" name="email" placeholder="Email" required>
            <input type="password" name="password" placeholder="Password" required>
            <button type="submit" class="btn-submit">Sign In</button>
        </form>
        """

    footer = ""
    if signup_mode == "open":
        footer = f"""
        <div class="footer">
            Don't have an account? <a href="{register_path}">Sign Up</a>
        </div>
        """

    return f"""<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sign In</title><style>{_CSS}</style></head>
<body><div class="auth-container">
<h1>Sign In</h1>
{error_html}
{dev_html}
{oauth_html}
{divider}
{password_form}
{footer}
</div></body></html>"""


def register_page(
    providers: list[ProviderInfo],
    login_path: str = "/auth/login",
    error: str = "",
) -> str:
    """Generate the registration page HTML."""
    oauth_html = _oauth_buttons(providers)
    has_pw = _has_password(providers)

    error_html = f'<div class="error">{error}</div>' if error else ""

    divider = '<div class="divider">or</div>' if oauth_html and has_pw else ""

    password_form = ""
    if has_pw:
        password_form = """
        <form action="/auth/password/register" method="POST">
            <input type="email" name="email" placeholder="Email" required>
            <input type="password" name="password" placeholder="Password" required minlength="8">
            <button type="submit" class="btn-submit">Create Account</button>
        </form>
        """

    return f"""<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sign Up</title><style>{_CSS}</style></head>
<body><div class="auth-container">
<h1>Create Account</h1>
{error_html}
{oauth_html}
{divider}
{password_form}
<div class="footer">
    Already have an account? <a href="{login_path}">Sign In</a>
</div>
</div></body></html>"""
