import * as plugins from '../plugins.js';
import * as elements from '../elements/index.js';

import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
  directives
} from '@design.estate/dees-element';

import type { IdpViewcontainer } from '../views/viewcontainer.js';
import { IdpState } from '../states/idp.state.js';

@customElement('idp-welcome')
export class IdpWelcome extends DeesElement {
  viewContainer: IdpViewcontainer;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        --foreground: hsl(0 0% 98%);
        --muted-foreground: hsl(240 5% 64.9%);

        display: block;
        color: var(--foreground);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      }

      :host([hidden]) {
        display: none;
      }

      .form-header {
        margin-bottom: 32px;
        text-align: center;
      }

      .form-header h2 {
        font-size: 24px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 8px 0;
        letter-spacing: -0.02em;
      }

      .form-header p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
      }

      .button-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .secondary-actions {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid hsla(240 3.7% 15.9% / 0.5);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .greeting {
        font-size: 14px;
        color: var(--muted-foreground);
        text-align: center;
        margin-bottom: 8px;
      }

      .greeting strong {
        color: var(--foreground);
        font-weight: 600;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <idp-centercontainer>
        ${directives.resolveExec(async () => {
          const idpState = await IdpState.getSingletonInstance();
          await idpState.idpClient.determineLoginStatus();
          const data = await idpState.idpClient.whoIs().catch();
          if (data?.user) {
            return html`
              <div class="form-header">
                <h2>Welcome back</h2>
                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
              </div>
              <div class="button-group">
                <dees-button
                  @click=${async () => {
                    const idpState = await IdpState.getSingletonInstance();
                    idpState.domtools.router.pushUrl('/account');
                  }}
                >Manage your account</dees-button>
                <dees-button
                  type="secondary"
                  @click=${async () => {
                    const idpState = await IdpState.getSingletonInstance();
                    idpState.domtools.router.pushUrl('/logout');
                  }}
                >Sign out</dees-button>
              </div>
            `;
          }
          return html`
            <div class="form-header">
              <h2>Welcome</h2>
              <p>Sign in to your account or create a new one</p>
            </div>
            <div class="button-group">
              <dees-button
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/login');
                }}
              >Sign In</dees-button>
              <dees-button
                type="secondary"
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/register');
                }}
              >Create Account</dees-button>
            </div>
          `;
        })}
        <div class="secondary-actions">
          <dees-button
            type="discreet"
            @click=${() => {
              window.open('https://code.foss.global/idp.global/idp.global', '_blank');
            }}
          >View Source Code</dees-button>
        </div>
      </idp-centercontainer>
    `;
  }

  public async show() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.show();
  }

  public async hide() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.hide();
  }
}