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;
}

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.",
    ssh_key_added: "SSH key added.",
    ssh_key_deleted: "SSH key removed.",
};

export function Settings({
    user,
    hasPassword,
    passkeys,
    sshKeys,
    theme,
    success,
    error,
}: 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 btn-ghost"
                                >
                                    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"
                                />
                            </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"
                            />
                        </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"
                            />
                        </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"
                                onclick="return 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{" "}
                                        {new Date(
                                            pk.created_at,
                                        ).toLocaleDateString()}
                                    </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{" "}
                                            {new Date(
                                                key.created_at,
                                            ).toLocaleDateString()}
                                        </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: 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">{`
        import { startRegistration } from '/assets/simplewebauthn-browser.js';
        document.getElementById('passkey-section').style.display = 'block';
        document.getElementById('add-passkey-btn').addEventListener('click', async () => {
          const status = document.getElementById('passkey-status');
          try {
            status.textContent = 'Starting...';
            const optsResp = await fetch('/auth/passkey/register/options', { method: 'POST' });
            const opts = await optsResp.json();
            const result = await startRegistration({ optionsJSON: opts });
            const verResp = await fetch('/auth/passkey/register/verify', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(result),
            });
            if (verResp.ok) {
              window.location.reload();
            } else {
              const err = await verResp.json();
              status.textContent = 'Error: ' + (err.error ?? 'Registration failed');
            }
          } catch (e) {
            status.textContent = 'Error: ' + e.message;
          }
        });
      `}</script>
        </Layout>
    );
}