import { IdpState } from '../states/idp.state.js';
import * as plugins from '../plugins.js';
import {
  customElement,
  DeesElement,
  property,
  state,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('idp-registration-stepper')
export class IdpRegistrationStepper extends DeesElement {
  @state()
  accessor usedSubTemplate: TemplateResult;

  @state()
  accessor storedData = {
    validationTokenUrlParam: 'string',
    email: '',
    refreshToken: '',
    jwt: '',
    oneTimeTransferToken: '',
  };

  constructor() {
    super();
  }

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

        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--background);
        color: var(--foreground);
      }

      .split-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
      }

      /* Left Panel - Branding */
      .brand-panel {
        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px;
        position: relative;
        overflow: hidden;
      }

      .brand-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
        pointer-events: none;
      }

      .brand-content {
        position: relative;
        z-index: 1;
        max-width: 400px;
      }

      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        font-size: 42px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
      }

      .tagline {
        font-size: 18px;
        color: var(--muted-foreground);
        margin: 0 0 48px 0;
        line-height: 1.5;
      }

      .features {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      .feature {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }

      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: hsla(240 10% 20% / 0.5);
        border: 1px solid hsla(240 10% 30% / 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .feature-icon dees-icon {
        color: var(--muted-foreground);
        font-size: 18px;
      }

      .feature-text h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 4px 0;
      }

      .feature-text p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
        line-height: 1.4;
      }

      .learn-more {
        margin-top: 48px;
      }

      /* Right Panel - Stepper */
      .stepper-panel {
        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
        position: relative;
        overflow: hidden;
      }

      .stepper-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
      }

      .error-message {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        color: var(--muted-foreground);
        font-size: 14px;
        line-height: 1.6;
      }

      .spinner-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      dees-stepper {
        --dees-stepper-background: transparent;
        height: 100%;
      }

      /* Mobile Responsive */
      @media (max-width: 900px) {
        .split-container {
          grid-template-columns: 1fr;
          grid-template-rows: auto 1fr;
        }

        .brand-panel {
          padding: 32px 24px;
          min-height: auto;
        }

        .brand-content {
          max-width: 100%;
        }

        .logo {
          font-size: 32px;
        }

        .tagline {
          font-size: 16px;
          margin-bottom: 24px;
        }

        .features {
          display: none;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="split-container">
        <!-- Left: Branding Panel -->
        <div class="brand-panel">
          <div class="brand-content">
            <h1 class="logo">idp.global</h1>
            <p class="tagline">Your permanent identity on the web</p>

            <div class="features">
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:code'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Open Source</h3>
                  <p>Fully transparent, community-driven, no vendor lock-in</p>
                </div>
              </div>

              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Always Free</h3>
                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
                </div>
              </div>

              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Permanent Identity</h3>
                  <p>One identity across all your applications</p>
                </div>
              </div>
            </div>

            <div class="learn-more">
              <dees-button
                type="secondary"
                @click=${() => window.open('https://about.idp.global', '_blank')}
              >Learn more</dees-button>
            </div>
          </div>
        </div>

        <!-- Right: Stepper Panel -->
        <div class="stepper-panel">
          <div class="stepper-content">
            ${this.usedSubTemplate
              ? this.usedSubTemplate
              : html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
          </div>
        </div>
      </div>
    `;
  }

  public async firstUpdated() {
    const idpState = await IdpState.getSingletonInstance();
    await this.domtoolsPromise;
    const parsedUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
    this.storedData.validationTokenUrlParam = parsedUrl.searchParams['validationtoken'];
    console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
    if (!this.storedData.validationTokenUrlParam) {
      this.usedSubTemplate = html`
        <div class="error-message">
          You need a validation token, but we couldn't find one.<br/>
          Please contact support for assistance.
        </div>
      `;
      await this.domtools.convenience.smartdelay.delayFor(5000);
      window.location.href = '/';
      return;
    }
    // lets verify the info;
    let tokenErrorMessage: string;
    const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
      .fire({
        token: this.storedData.validationTokenUrlParam,
      })
      .catch(
        (
          err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
        ) => {
          tokenErrorMessage = err.errorText;
          return;
        }
      );

    console.log(resAfterRegEmailClicked);

    if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
      this.usedSubTemplate = html`
        <div class="error-message">
          The supplied validation token does not match any registration sessions.<br/>
          ${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
        </div>
      `;
      await this.domtools.convenience.smartdelay.delayFor(5000);
      idpState.domtools.router.pushUrl('/');
      return;
    } else {
      this.storedData.email = resAfterRegEmailClicked.email;
    }

    // lets continue with UI
    this.usedSubTemplate = html`<dees-stepper
      .steps=${[
        {
          title: 'What is your name?',
          content: html`
            <dees-form>
              <dees-input-text
                key="email"
                label="Your Email"
                value="${this.storedData.email}"
                disabled
              ></dees-input-text>
              <dees-input-text key="firstName" required label="First Name"></dees-input-text>
              <dees-input-text key="lastName" required label="Last Name"></dees-input-text>
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
          validationFunc: async (stepperArg, elementArg) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
              const response = await idpState.idpClient.requests.setData
                .fire({
                  token: this.storedData.validationTokenUrlParam,
                  userData: {
                    name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
                    connectedOrgs: null,
                    email: null,
                    status: null,
                    username: null,
                  },
                })
                .catch(
                  (
                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                  ) => {
                    deesForm.setStatus('error', errArg.errorText);
                  }
                );
              deesForm.setStatus('success', 'ok!');
              stepperArg.goNext();
            });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            const deesForm = stepElementArg.querySelector('dees-form');
            deesForm.setStatus('normal', 'Edit and Next');
          },
        },
        {
          title: 'What is your mobile number?',
          content: html`
            <dees-form>
              <dees-input-text
                key="mobileNumber"
                required
                label="Your Mobile Number"
              ></dees-input-text>
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
          validationFunc: async (stepperArg, elementArg) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
              const response = await idpState.idpClient.requests.mobileNumberVerification
                .fire({
                  token: this.storedData.validationTokenUrlParam,
                  mobileNumber: eventArg.detail.data.mobileNumber,
                })
                .catch(
                  (
                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                  ) => {
                    deesForm.setStatus('error', errArg.errorText);
                  }
                );
              deesForm.setStatus('success', 'ok!');
              stepperArg.goNext();
            });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            const deesForm = stepElementArg.querySelector('dees-form');
            deesForm.setStatus('normal', 'Edit and Next');
          },
        },
        {
          title: 'What is the Verification Code?',
          content: html`
            <dees-form>
              <dees-input-text
                key="verificationCode"
                required
                label="Verification Code"
              ></dees-input-text>
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
          validationFunc: async (stepperArg, elementArg) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
              const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
                token: this.storedData.validationTokenUrlParam,
                verificationCode: eventArg.detail.data.verificationCode,
              });

              if (response.verficationCodeOk) {
                deesForm.setStatus('success', 'ok!');
                stepperArg.goNext();
              } else {
                deesForm.setStatus('error', 'wrong code!');
                await this.domtools.convenience.smartdelay.delayFor(3000);
                deesForm.setStatus('normal', 'Retry And Next!');
              }
            });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            stepperArg.goBack();
            const deesForm = stepElementArg.querySelector('dees-form');
            deesForm.setStatus('normal', 'Next');
          },
        },
        {
          title: 'Create a secure password:',
          content: html`
            <dees-form>
              <dees-input-text
                key="password"
                required
                label="Your New Secure Password"
              ></dees-input-text>
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
          validationFunc: async (stepperArg, elementArg) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
              const response = await idpState.idpClient.requests.setData.fire({
                token: this.storedData.validationTokenUrlParam,
                userData: {
                  username: null,
                  email: null,
                  name: null,
                  connectedOrgs: null,
                  status: null,
                  password: eventArg.detail.data.password,
                },
              });
              const finishRegistrationResponse =
                await idpState.idpClient.requests.finishRegistration.fire({
                  token: this.storedData.validationTokenUrlParam,
                });
              deesForm.setStatus('pending', 'User created!');
              await this.domtools.convenience.smartdelay.delayFor(500);
              deesForm.setStatus('pending', 'Obtaining Refresh Token...');
              const loginResponse =
                await idpState.idpClient.requests.loginWithUserNameAndPassword.fire({
                  username: this.storedData.email,
                  password: eventArg.detail.data.password,
                });
              this.storedData.refreshToken = loginResponse.refreshToken;

              deesForm.setStatus('pending', 'Obtaining JWT...');
              const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
                refreshToken: this.storedData.refreshToken,
              });

              deesForm.setStatus('success', 'Ok! Lets Go!');
              await idpState.idpClient.setJwt(jwtResponse.jwt);
              idpState.domtools.router.pushUrl('/account');
            });
          },
        },
      ] as plugins.deesCatalog.IStep[]}
    ></dees-stepper>`;
    await this.domtools.convenience.smartdelay.delayFor(100);
  }

  public async show() {
    await this.updateComplete;
  }

  public async hide() {
    await this.updateComplete;
  }
}