"""Researcher Identity setup and the compact submission workflow."""
from html import escape


def render_identity_summary(username: str | None, identity: dict) -> str:
    heading = '<h3>Researcher Identity</h3>'
    if not username:
        return heading + '<p>Sign in with Hugging Face to create or load your Researcher Identity.</p>'
    if not identity:
        return heading + '<p>Create your identity once to submit evaluations and manage your results.</p>'
    affiliation = identity.get("affiliation") or ""
    description = str(identity["role"]) + (f" · {affiliation}" if affiliation else "")
    return (
        heading + f'<strong class="identity-account">{escape(username or identity["hf_username"])}</strong>'
        f'<p>ORCID {escape(identity["orcid_id"])} ✓</p><p>{escape(description)}</p>'
    )


def render_setup_checklist(signed_in: bool, verified: bool, profile_valid: bool, rules_accepted: bool,
                           verification_id: str = "") -> str:
    items = (("Hugging Face", signed_in), ("ORCID", verified),
             ("Profile", profile_valid), ("Leaderboard Rules", rules_accepted))
    checks = ''.join(
        f'<span class="setup-check {"complete" if complete else "pending"}">'
        f'<span aria-hidden="true">{"✓" if complete else "○"}</span> {label}</span>'
        for label, complete in items
    )
    note = (f'<p>ORCID {escape(verification_id)} verified for this setup. Complete identity creation within 15 minutes.</p>'
            if verified else '')
    return f'<div class="identity-checks">{checks}</div>{note}'


def render_submission_workflow(signed_in: bool, identity_ready: bool) -> str:
    steps = (("guide", "Read Guide"), ("identity", "Create Researcher Identity"),
             ("submit", "Submit Evaluation"), ("queue", "Active Queue"),
             ("history", "History & Publish"))
    current = "submit" if identity_ready else "identity" if signed_in else "guide"
    buttons = ''.join(
        f'<button type="button" data-workflow-step="{step}" '
        f'class="workflow-step{" is-current" if step == current else ""}">'
        f'<span class="workflow-status">{"✓" if step == "identity" and identity_ready else index}</span>'
        f'<span>{label}</span></button>'
        for index, (step, label) in enumerate(steps, start=1)
    )
    return (
        f'<nav class="submission-workflow" aria-label="Submission workflow" '
        f'data-identity-ready="{str(identity_ready).lower()}" '
        f'data-hf-ready="{str(signed_in).lower()}">{buttons}</nav>'
    )


identity_workflow_js = r"""() => {
    if (window.physIdentityWorkflowInstalled) return;
    window.physIdentityWorkflowInstalled = true;
    const sync = () => {
        document.querySelectorAll('.submission-workflow').forEach(workflow => {
            const panel = workflow.closest('.submission-panel');
            if (!panel) return;
            const ready = workflow.dataset.identityReady === 'true';
            let guideRead = false;
            const key = `physinone-guide-read-${panel.id}`;
            try { guideRead = sessionStorage.getItem(key) === '1'; } catch (_) {}
            if (panel.querySelector('.submission-guide > button.label-wrap.open')) {
                guideRead = true;
                try { sessionStorage.setItem(key, '1'); } catch (_) {}
            }
            const selectedTab = panel.querySelector('.utility-tabs > .tab-wrapper [role="tab"][aria-selected="true"]');
            const selectedStep = selectedTab?.id.match(/-utility-(submit|queue|history)-button$/)?.[1] || 'submit';
            const current = selectedTab ? selectedStep :
                (workflow.dataset.hfReady === 'true' || guideRead ? 'identity' : 'guide');
            const done = {guide: guideRead, identity: ready};
            workflow.querySelectorAll('[data-workflow-step]').forEach((button, index) => {
                const step = button.dataset.workflowStep;
                button.classList.toggle('is-complete', Boolean(done[step]));
                button.classList.toggle('is-current', step === current);
                if (step === current) button.setAttribute('aria-current', 'step');
                else button.removeAttribute('aria-current');
                const marker = button.querySelector('.workflow-status');
                const text = done[step] ? '✓' : String(index + 1);
                if (marker.textContent !== text) marker.textContent = text;
            });
        });
    };
    document.addEventListener('click', event => {
        const button = event.target.closest('.submission-workflow [data-workflow-step]');
        if (!button) return;
        const panel = button.closest('.submission-panel');
        const workflow = button.closest('.submission-workflow');
        const step = button.dataset.workflowStep;
        const group = panel.id.slice('submit-'.length);
        let target;
        if (step === 'guide') {
            target = panel.querySelector('.submission-guide');
        } else if (step === 'identity' || (step === 'submit' && workflow.dataset.identityReady !== 'true')) {
            target = panel.querySelector('.researcher-identity');
            const manage = target.querySelector('.profile-manage-button');
            if (manage?.getClientRects().length) manage.click();
            else {
                const profileToggle = target.querySelector('.profile-settings > button.label-wrap');
                if (profileToggle && !profileToggle.classList.contains('open')) profileToggle.click();
            }
        } else {
            document.getElementById(`${group}-utility-${step}-button`)?.click();
            target = panel.querySelector('.utility-tabs');
        }
        const toggle = target?.querySelector(':scope > button.label-wrap');
        if (toggle && !toggle.classList.contains('open')) toggle.click();
        target?.scrollIntoView({behavior: 'smooth', block: 'start'});
        setTimeout(sync, 80);
    });
    new MutationObserver(sync).observe(document.body, {subtree: true, childList: true, characterData: true,
                                                      attributes: true, attributeFilter: ['aria-selected']});
    sync();
}"""


identity_setup_css = """
#main-tabs .submission-panel {
    --submission-gutter: 20px;
    --submission-section-gap: 20px;
    --submission-control-gap: 14px;
}
#main-tabs .submission-panel > div:not(.wrap) { padding: var(--submission-gutter) !important; }
#main-tabs .submission-panel > div:not(.wrap) > .column { gap: var(--submission-section-gap) !important; }
#main-tabs .submission-workflow-container, #main-tabs .submission-guide, #main-tabs .researcher-identity, #main-tabs .utility-tabs { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; }
#main-tabs .submission-workflow-container, #main-tabs .submission-workflow-container .html-container { padding: 0 !important; border: 0 !important; }
#main-tabs .submission-workflow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px; border: 1px solid #e7e3f3; border-radius: 12px; background: #faf9ff; }
#main-tabs .workflow-step { display: flex; flex: 1 1 150px; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #706b83; font-size: 12px; text-align: left; cursor: pointer; }
#main-tabs .workflow-step.is-current { border-color: #c6bef0; background: #f0ecff; color: #5145a0; font-weight: 600; }
#main-tabs .workflow-step.is-complete { color: #615397; }
#main-tabs .workflow-step:hover { background: #f1edff; }
.workflow-status { display: inline-flex; flex: 0 0 20px; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eae5f9; font-size: 12px; }
#main-tabs .submission-guide > button.label-wrap { padding: 10px 20px !important; }
#main-tabs .submission-card { margin: 0 !important; padding: var(--submission-gutter) !important; border: 1px solid #e7e3f1 !important; border-radius: 14px !important; background: #fff !important; box-sizing: border-box; }
#main-tabs .submission-card > .styler { display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .submission-card *, #main-tabs .submission-disclosure { box-sizing: border-box; }
#main-tabs .submission-card .row, #main-tabs .submission-card .column, #main-tabs .selected-content, #main-tabs .selected-content > .styler { min-width: 0 !important; max-width: 100% !important; }
#main-tabs .researcher-identity .identity-status, #main-tabs .researcher-identity .identity-checklist { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#main-tabs .researcher-identity .html-container { padding: 0 !important; }
#main-tabs .researcher-identity h3 { margin: 0 0 8px; color: #30304b; font-size: 17px; font-weight: 600; }
#main-tabs .researcher-identity .identity-status p { margin: 4px 0 0 !important; color: #6d6780 !important; font-size: 13px !important; }
.identity-account { color: #353251; font-size: 16px; font-weight: 600; }
.identity-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #746e84; font-size: 13px; }
.setup-check { display: inline-flex; align-items: center; gap: 5px; }
.setup-check.complete { color: #615397; }
.identity-checklist p { margin: 8px 0 0; color: #746e84; font-size: 12px; }
#main-tabs .identity-actions { align-items: center !important; justify-content: flex-start !important; gap: var(--submission-control-gap) !important; margin: 0 !important; }
#main-tabs .identity-actions .submission-access, #main-tabs .identity-actions .submission-access > .styler, #main-tabs .identity-actions .form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0 !important; }
#main-tabs .identity-actions .submission-access { flex: 0 1 auto !important; width: auto !important; align-items: flex-start !important; }
#main-tabs .identity-actions .block { padding: 0 !important; }
#main-tabs .researcher-identity .auth-signed-in, #main-tabs .researcher-identity .submission-access .block:has(.auth-signed-in), #main-tabs .researcher-identity .submission-access.is-signed-in .block:has(.auth-intro) { display: none !important; }
#main-tabs .researcher-identity .auth-intro { margin: 0; align-items: flex-start; }
#main-tabs .researcher-identity > .styler, #main-tabs .identity-actions .submission-access > .styler { gap: var(--submission-control-gap) !important; }
#main-tabs .profile-manage-button { flex: 0 0 auto !important; align-self: center !important; min-width: max-content !important; width: auto !important; min-height: 34px !important; margin: 0 !important; padding: 7px 12px !important; border: 1px solid #ded9f0 !important; border-radius: 8px !important; background: #f8f6ff !important; color: #5149a0 !important; font-size: 12px !important; white-space: nowrap; box-shadow: none !important; }
#main-tabs .profile-settings { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#main-tabs .submission-disclosure { --disclosure-inset: var(--submission-control-gap); }
#main-tabs .submission-disclosure > button.label-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-height: 42px !important; padding: 10px var(--disclosure-inset) !important; }
#main-tabs .profile-settings > button.label-wrap { border: 1px solid #e7e3f1 !important; border-radius: 8px !important; background: #faf9ff !important; color: #48425e !important; }
#main-tabs .profile-settings > button.label-wrap > span { position: static !important; height: auto !important; margin: 0 !important; font-size: 13px !important; line-height: 20px !important; }
#main-tabs .profile-settings button.label-wrap > .icon { flex: 0 0 auto; transform: rotate(0deg) !important; font-size: 11px !important; }
#main-tabs .profile-settings button.label-wrap.open > .icon { transform: rotate(180deg) !important; }
#main-tabs .profile-settings > button.label-wrap::before { display: none !important; }
#main-tabs .submission-disclosure > div:not(.wrap) { padding: var(--submission-control-gap) var(--disclosure-inset) !important; }
#main-tabs .profile-settings > div > .column { gap: var(--submission-section-gap) !important; }
#main-tabs .profile-card, #main-tabs .profile-rules, #main-tabs .profile-card > .styler, #main-tabs .profile-rules > .styler { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .profile-card > .styler, #main-tabs .profile-rules > .styler { display: flex; flex-direction: column; gap: var(--submission-control-gap) !important; }
#main-tabs .profile-rules { padding-top: var(--submission-section-gap) !important; border-top: 1px solid #eeecf6 !important; }
#main-tabs .profile-settings .form, #main-tabs .profile-settings .row, #main-tabs .profile-settings .column { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; gap: var(--submission-control-gap) !important; }
#main-tabs .profile-settings .block:not(.profile-rules-content) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .profile-card h4, #main-tabs .profile-rules h4 { margin: 0 !important; color: #30304b; font-size: 15px !important; }
#main-tabs .profile-settings p { margin: 0 !important; color: #655f78; font-size: 13px; line-height: 1.6; }
#main-tabs .profile-settings [data-testid="block-label"], #main-tabs .profile-settings [data-testid="block-info"], #main-tabs .profile-settings label > span { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #605b70 !important; font-size: 13px !important; font-weight: 500 !important; }
#main-tabs .profile-settings [data-testid="block-info"] { margin: 0 0 8px !important; }
#main-tabs .profile-settings .wrap:not(.default), #main-tabs .profile-settings .secondary-wrap { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .profile-settings textarea, #main-tabs .profile-settings input:not([type="checkbox"]):not([role="combobox"]), #main-tabs .profile-settings .wrap-inner { border: 1px solid #dcd8ea !important; border-radius: 10px !important; background: #fff !important; color: #374151 !important; min-height: 44px; box-shadow: none !important; }
#main-tabs .profile-settings textarea { padding: 10px 12px !important; font-family: inherit !important; font-size: 14px !important; }
#main-tabs .profile-settings .wrap-inner { height: 44px !important; padding: 0 12px !important; box-sizing: border-box; }
#main-tabs .profile-settings .wrap-inner input[role] { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .profile-settings textarea:focus, #main-tabs .profile-settings .wrap-inner:focus-within { border-color: #9a8ce3 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.08) !important; }
#main-tabs .profile-rules-content { --disclosure-inset: 0px; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
#main-tabs .rules-acceptance label { display: flex !important; align-items: center !important; gap: 9px !important; cursor: pointer; }
#main-tabs .rules-acceptance input[type="checkbox"] { appearance: auto !important; flex: 0 0 18px; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #7164d9; cursor: pointer; }
#main-tabs .rules-acceptance label > span { line-height: 1.5 !important; }
#main-tabs .identity-save-button { align-self: flex-start !important; width: auto !important; min-width: 0 !important; min-height: 34px !important; padding: 7px 13px !important; border: 1px solid #8075df !important; border-radius: 8px !important; background: #7164d9 !important; color: #fff !important; box-shadow: none !important; }
#main-tabs .identity-save-button:disabled { opacity: .45; cursor: not-allowed; }
#main-tabs .identity-refresh, #global-identity-refresh { display: none !important; }
#main-tabs .orcid-connect-link { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 13px; border: 1px solid #ded9f0; border-radius: 8px; background: #f8f6ff; color: #5149a0; font-size: 13px; text-decoration: none; }
#main-tabs .profile-settings button:focus-visible, #main-tabs .rules-acceptance input:focus-visible { outline: 2px solid #9a8ce3; outline-offset: 2px; }
#main-tabs .private-submission-content, #main-tabs .private-submission-content > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .utility-tabs { gap: 0 !important; }
#main-tabs .utility-tabs > .tab-wrapper { margin: 0 !important; padding: 0 !important; }
#main-tabs .utility-tabs > .tabitem { margin: 0 !important; padding: var(--submission-section-gap) 0 0 !important; border: 0 !important; }
#main-tabs .history-track-tabs, #main-tabs .history-track-tabs > .tabitem { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#main-tabs .submission-history-body .submission-table-frame { margin: 0 !important; }
#main-tabs .submission-history-body .submission-table-frame > .styler { padding: var(--submission-control-gap) !important; display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; }
#main-tabs .submission-history-body .property-table-title, #main-tabs .submission-history-body .property-table-title h4 { margin: 0 !important; padding: 0 !important; }
#main-tabs .history-result-section, #main-tabs .history-result-section > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .history-result-section > .styler { display: flex; flex-direction: column; gap: var(--submission-control-gap) !important; }
#main-tabs .property-material-tabs > .tabitem { padding: var(--submission-control-gap) 0 0 !important; border: 0 !important; }
#main-tabs .history-table { margin: 0 !important; min-height: 0 !important; padding: 0 !important; border: 1px solid #e0ddf0 !important; border-radius: 10px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; }
#main-tabs .history-table .table-container, #main-tabs .history-table .table-wrap { height: auto !important; min-height: 0 !important; max-width: 100% !important; align-items: stretch !important; justify-content: flex-start !important; }
#main-tabs .history-table .table-wrap { width: 100% !important; min-width: 0 !important; max-height: 320px !important; overflow-x: auto !important; overflow-y: auto !important; }
#main-tabs .history-table > .table-container > .table-wrap { max-height: none !important; overflow: visible !important; }
#main-tabs .history-table table:not([aria-hidden="true"]) { width: var(--table-content-width, 100%) !important; min-width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; }
#main-tabs .history-table button.disable_click { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; font: inherit !important; }
#main-tabs .history-table th, #main-tabs .history-table td, #main-tabs .history-table .cell-wrap, #main-tabs .history-table .header-button, #main-tabs .history-table .text { font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; }
#main-tabs .history-table th { height: 50px !important; padding: 0 12px !important; font-weight: 600 !important; background: #f6f4fc !important; }
#main-tabs .history-table th .text { font-weight: 600 !important; }
#main-tabs .history-table th .cell-wrap, #main-tabs .history-table .header-button { padding: 0 !important; min-height: 0 !important; }
#main-tabs .history-table td { height: 52px !important; padding: 0 12px !important; font-weight: 400 !important; }
#main-tabs .history-table.is-empty::after { content: "No completed submissions yet."; display: block; padding: var(--submission-control-gap); color: #777283; font-size: 13px; }
#main-tabs .selected-content, #main-tabs .selected-content > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-tabs .submission-stack > .styler { display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; }
#main-tabs .selected-content > .styler > .block { padding: 0 !important; }
#main-tabs .selected-summary, #main-tabs .selected-summary .html-container { padding: 0 !important; }
#main-tabs .selected-summary-card > * { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
#main-tabs .selected-actions { margin: 0 !important; }
#main-tabs .selected-content .publication-editor { margin: 0 !important; padding: var(--submission-control-gap) !important; }
#main-tabs .selected-content .publication-editor > .styler { padding: 0 !important; gap: var(--submission-control-gap) !important; }
#main-tabs .selected-content .publication-editor .block, #main-tabs .selected-report-panel .block { padding: 0 !important; }
#main-tabs .selected-report-panel { margin: 0 !important; padding: 0 !important; }
#main-tabs .property-results .method-cell { white-space: nowrap; }
#main-tabs .submission-panel .queue-head-row { flex-wrap: nowrap !important; align-items: center !important; gap: var(--submission-control-gap) !important; }
#main-tabs .submission-panel .queue-head-row > .submission-section-title { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; }
#main-tabs .submission-panel button.history-refresh-button, #main-tabs .submission-panel button.queue-refresh-button { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; white-space: nowrap !important; overflow: visible !important; }
"""