import config from "../config.ts";
import { formatDate, formatDateTime } from "../lib/formatDate.ts";
import type { SessionUser } from "../middleware/session.ts";
import { Avatar } from "./Avatar.tsx";
import { Layout } from "./layout.tsx";

interface SettingsProps {
    user: SessionUser;
    hasPassword: boolean;
    passkeys: { id: number; created_at: string }[];
    sshKeys: {
        id: number;
        name: string;
        fingerprint: string;
        created_at: string;
    }[];
    theme: string;
    success: string | null;
    error: string | null;
    pendingUsers: {
        id: number;
        username: string;
        register_application: string | null;
        created_at: string;
    }[];
}

const successMessages: Record<string, string> = {
    password: "Password updated.",
    password_removed: "Password removed.",
    passkey_revoked: "Passkey revoked.",
    theme: "Theme preference saved.",
    user_created: "Account created.",
    user_deleted: "Account deleted.",
    user_approved: "Account approved.",
    user_denied: "Account denied.",
    all_approved: "All pending accounts approved.",
    all_denied: "All pending accounts denied.",
    ssh_key_added: "SSH key added.",
    ssh_key_deleted: "SSH key removed.",
};

export function Settings({
    user,
    hasPassword,
    passkeys,
    sshKeys,
    theme,
    success,
    error,
    pendingUsers,
}: SettingsProps) {
    const successMsg = success ? (successMessages[success] ?? null) : null;

    return (
        <Layout user={user} title="Settings">
            <div class="container container-narrow">
                <h1 class="page-title">Settings</h1>

                {successMsg && <p class="form-success">{successMsg}</p>}
                {error && <p class="form-error">{error}</p>}

                {/* Avatar */}
                <div class="form-card">
                    <h2 class="section-title">Avatar</h2>
                    <div class="avatar-settings">
                        <Avatar
                            userId={user.id}
                            version={user.avatar_version}
                            size={80}
                        />
                        <div class="avatar-actions">
                            <form
                                method="POST"
                                action="/settings/avatar"
                                enctype="multipart/form-data"
                            >
                                <div class="form-group">
                                    <input
                                        type="file"
                                        name="avatar"
                                        accept="image/*"
                                        class="form-input"
                                        required
                                    />
                                </div>
                                <div class="form-actions">
                                    <button
                                        type="submit"
                                        class="btn btn-sm btn-primary"
                                    >
                                        Upload avatar
                                    </button>
                                </div>
                            </form>
                            <form
                                method="POST"
                                action="/settings/avatar/delete"
                                class="inline-form"
                            >
                                <button type="submit" class="btn btn-sm">
                                    Remove avatar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                {/* Appearance */}
                <div class="form-card">
                    <h2 class="section-title">Appearance</h2>
                    <form method="POST" action="/settings/theme">
                        <div class="theme-options">
                            <label class="theme-option">
                                <input
                                    type="radio"
                                    name="theme"
                                    value="auto"
                                    checked={
                                        theme === "auto" ? true : undefined
                                    }
                                />
                                Auto
                            </label>
                            <label class="theme-option">
                                <input
                                    type="radio"
                                    name="theme"
                                    value="light"
                                    checked={
                                        theme === "light" ? true : undefined
                                    }
                                />
                                Light
                            </label>
                            <label class="theme-option">
                                <input
                                    type="radio"
                                    name="theme"
                                    value="dark"
                                    checked={
                                        theme === "dark" ? true : undefined
                                    }
                                />
                                Dark
                            </label>
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" type="submit">
                                Save
                            </button>
                        </div>
                    </form>
                </div>

                {/* Password */}
                <div class="form-card">
                    <h2 class="section-title">Password</h2>
                    <p class="text-muted">
                        {hasPassword ? "Password is set." : "No password set."}
                    </p>
                    <form
                        method="POST"
                        action="/settings/password"
                        class="settings-form"
                    >
                        {hasPassword && (
                            <div class="form-group">
                                <label
                                    class="form-label"
                                    for="current_password"
                                >
                                    Current password
                                </label>
                                <input
                                    class="form-input"
                                    type="password"
                                    id="current_password"
                                    name="current_password"
                                    autocomplete="current-password"
                                    maxlength={config.MAX_PASSWORD_BYTES}
                                />
                            </div>
                        )}
                        <div class="form-group">
                            <label class="form-label" for="new_password">
                                {hasPassword ? "New password" : "Password"}
                            </label>
                            <input
                                class="form-input"
                                type="password"
                                id="new_password"
                                name="new_password"
                                autocomplete="new-password"
                                maxlength={config.MAX_PASSWORD_BYTES}
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="confirm_password">
                                Confirm password
                            </label>
                            <input
                                class="form-input"
                                type="password"
                                id="confirm_password"
                                name="confirm_password"
                                autocomplete="new-password"
                                maxlength={config.MAX_PASSWORD_BYTES}
                            />
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" type="submit">
                                {hasPassword
                                    ? "Change password"
                                    : "Set password"}
                            </button>
                        </div>
                    </form>
                    {hasPassword && passkeys.length > 0 && (
                        <form
                            method="POST"
                            action="/settings/password/remove"
                            style="margin-top: var(--space-4)"
                        >
                            <button
                                class="btn btn-danger btn-sm"
                                type="submit"
                                data-confirm="Remove password? You will need a passkey to sign in."
                            >
                                Remove password
                            </button>
                        </form>
                    )}
                </div>

                {/* Passkeys */}
                <div class="form-card">
                    <h2 class="section-title">Passkeys</h2>
                    {passkeys.length > 0 && (
                        <div class="passkey-list">
                            {passkeys.map((pk) => (
                                <div class="passkey-item">
                                    <span class="passkey-date">
                                        Added {formatDate(pk.created_at)}
                                    </span>
                                    <form
                                        method="POST"
                                        action="/settings/passkey/revoke"
                                    >
                                        <input
                                            type="hidden"
                                            name="id"
                                            value={String(pk.id)}
                                        />
                                        <button
                                            class="btn btn-danger btn-sm"
                                            type="submit"
                                            disabled={
                                                !hasPassword &&
                                                passkeys.length <= 1
                                                    ? true
                                                    : undefined
                                            }
                                            title={
                                                !hasPassword &&
                                                passkeys.length <= 1
                                                    ? "Register another auth method first"
                                                    : undefined
                                            }
                                        >
                                            Revoke
                                        </button>
                                    </form>
                                </div>
                            ))}
                        </div>
                    )}
                    <div id="passkey-section" style="display:none">
                        <button
                            id="add-passkey-btn"
                            class="btn btn-secondary"
                            type="button"
                        >
                            Add passkey
                        </button>
                        <p id="passkey-status" class="text-muted"></p>
                    </div>
                    <noscript>
                        <p class="text-muted">
                            Enable JavaScript to register or add passkeys.
                        </p>
                    </noscript>
                </div>

                {/* SSH Keys */}
                <div class="form-card">
                    <h2 class="section-title">SSH Keys</h2>
                    {sshKeys.length > 0 && (
                        <div class="passkey-list">
                            {sshKeys.map((key) => (
                                <div class="passkey-item">
                                    <div class="ssh-key-info">
                                        <span class="ssh-key-name">
                                            {key.name}
                                        </span>
                                        <span class="passkey-date ssh-key-fingerprint">
                                            {key.fingerprint}
                                        </span>
                                        <span class="passkey-date">
                                            Added {formatDate(key.created_at)}
                                        </span>
                                    </div>
                                    <form
                                        method="POST"
                                        action="/settings/ssh-keys/delete"
                                    >
                                        <input
                                            type="hidden"
                                            name="id"
                                            value={String(key.id)}
                                        />
                                        <button
                                            class="btn btn-danger btn-sm"
                                            type="submit"
                                        >
                                            Remove
                                        </button>
                                    </form>
                                </div>
                            ))}
                        </div>
                    )}
                    <form
                        method="POST"
                        action="/settings/ssh-keys"
                        class="settings-form"
                        style="margin-top: var(--space-4)"
                    >
                        <div class="form-group">
                            <label class="form-label" for="ssh_key_name">
                                Name
                            </label>
                            <input
                                class="form-input"
                                type="text"
                                id="ssh_key_name"
                                name="name"
                                placeholder="e.g. My laptop"
                                autocomplete="off"
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="ssh_public_key">
                                Public key
                            </label>
                            <textarea
                                class="form-input form-textarea"
                                id="ssh_public_key"
                                name="public_key"
                                placeholder="ssh-ed25519 AAAA..."
                                rows="3"
                                required
                            ></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" type="submit">
                                Add SSH key
                            </button>
                        </div>
                    </form>
                </div>

                {/* Admin: Registration Queue */}
                {user.isAdmin && pendingUsers !== undefined && (
                    <div class="form-card">
                        <h2 class="section-title">Registration queue</h2>
                        {pendingUsers.length === 0 ? (
                            <p style="font-size: var(--text-sm); color: var(--color-text-muted); margin: 0">
                                No pending registrations.
                            </p>
                        ) : (
                            <div>
                                <div class="queue-bulk-actions">
                                    <form
                                        method="POST"
                                        action="/admin/users/approve-all"
                                    >
                                        <button
                                            class="btn btn-sm btn-primary"
                                            type="submit"
                                        >
                                            Accept all
                                        </button>
                                    </form>
                                    <form
                                        method="POST"
                                        action="/admin/users/deny-all"
                                    >
                                        <button
                                            class="btn btn-sm btn-danger"
                                            type="submit"
                                        >
                                            Deny all
                                        </button>
                                    </form>
                                </div>
                                <ul class="queue-list">
                                    {pendingUsers.map((u) => (
                                        <li class="queue-item">
                                            <div class="queue-item-meta">
                                                <div class="queue-item-header">
                                                    <strong>
                                                        {u.username}
                                                    </strong>
                                                    <span class="queue-item-date">
                                                        {formatDateTime(
                                                            u.created_at,
                                                        )}
                                                    </span>
                                                </div>
                                                {u.register_application && (
                                                    <p class="queue-item-answer">
                                                        {u.register_application}
                                                    </p>
                                                )}
                                            </div>
                                            <div class="queue-item-actions">
                                                <form
                                                    method="POST"
                                                    action="/admin/users/approve"
                                                >
                                                    <input
                                                        type="hidden"
                                                        name="id"
                                                        value={String(u.id)}
                                                    />
                                                    <button
                                                        class="btn btn-sm btn-primary"
                                                        type="submit"
                                                    >
                                                        Accept
                                                    </button>
                                                </form>
                                                <form
                                                    method="POST"
                                                    action="/admin/users/deny"
                                                >
                                                    <input
                                                        type="hidden"
                                                        name="id"
                                                        value={String(u.id)}
                                                    />
                                                    <button
                                                        class="btn btn-sm btn-danger"
                                                        type="submit"
                                                    >
                                                        Deny
                                                    </button>
                                                </form>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}
                    </div>
                )}

                {/* Admin: User Management */}
                {user.isAdmin && (
                    <div class="form-card">
                        <h2 class="section-title">User Management</h2>
                        <h3>Create account</h3>
                        <form
                            method="POST"
                            action="/admin/users"
                            class="settings-form"
                            style="margin-top: var(--space-4)"
                        >
                            <div class="form-group">
                                <label class="form-label" for="new_username">
                                    Username
                                </label>
                                <input
                                    class="form-input"
                                    type="text"
                                    id="new_username"
                                    name="username"
                                    autocomplete="off"
                                />
                            </div>
                            <div class="form-group">
                                <label
                                    class="form-label"
                                    for="new_user_password"
                                >
                                    Password
                                </label>
                                <input
                                    class="form-input"
                                    type="password"
                                    id="new_user_password"
                                    name="password"
                                    autocomplete="new-password"
                                />
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-primary" type="submit">
                                    Create account
                                </button>
                            </div>
                        </form>
                        <h3 style="margin-top: var(--space-6)">
                            Delete account
                        </h3>
                        <form
                            method="POST"
                            action="/admin/users/delete"
                            class="settings-form"
                            style="margin-top: var(--space-4)"
                        >
                            <div class="form-group">
                                <label class="form-label" for="del_username">
                                    Username
                                </label>
                                <input
                                    class="form-input"
                                    type="text"
                                    id="del_username"
                                    name="username"
                                    autocomplete="off"
                                />
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-danger" type="submit">
                                    Delete account
                                </button>
                            </div>
                        </form>
                    </div>
                )}
            </div>

            <script type="module" src="/assets/passkey-settings.js"></script>
        </Layout>
    );
}