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

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

import { commitinfo } from '../../ts/00_commitinfo_data.js';
import { IdpState } from '../states/idp.state.js';

declare global {
  interface HTMLElementTagNameMap {
    'idp-centercontainer': IdpCenterContainer;
  }
}

@customElement('idp-centercontainer')
export class IdpCenterContainer extends DeesElement {
  public static demo = () => html`<idp-centercontainer></idp-centercontainer>`;

  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%);
        --card: hsl(240 6% 6%);

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

      .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: #09090B;
        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 50% -10%, rgb(110 91 230 / 0.18) 0%, transparent 58%),
          radial-gradient(circle at 2px 2px, rgb(255 255 255 / 0.04) 1px, transparent 0) 0 0 / 32px 32px;
        pointer-events: none;
      }

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

      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        font-size: clamp(44px, 6vw, 72px);
        font-weight: 900;
        color: var(--foreground);
        margin: 0 0 8px 0;
        letter-spacing: -0.05em;
        line-height: 1;
      }

      .tagline {
        font-size: 18px;
        color: var(--muted-foreground);
        margin: 0 0 44px 0;
        line-height: 1.65;
        max-width: 420px;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 28px;
        padding: 5px 12px;
        border: 1px solid rgb(255 255 255 / 0.1);
        border-radius: 999px;
        background: rgb(255 255 255 / 0.05);
        color: rgb(255 255 255 / 0.5);
        font-size: 12px;
        font-weight: 500;
      }

      .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #16A34A;
      }

      .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: rgb(255 255 255 / 0.045);
        border: 1px solid rgb(255 255 255 / 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .feature-icon idp-icon {
        color: var(--muted-foreground);
      }

      .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;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      /* Right Panel - Form */
      .form-panel {
        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 48px;
        position: relative;
        overflow: hidden;
      }

      .form-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 400px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        transform: translateY(8px);
        opacity: 0;
        transition: all 0.3s ease;
      }

      .form-content.show {
        transform: translateY(0);
        opacity: 1;
      }

      .form-footer {
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: var(--muted-foreground);
      }

      .form-footer a {
        color: var(--muted-foreground);
        text-decoration: none;
        transition: color 0.15s ease;
      }

      .form-footer a:hover {
        color: var(--foreground);
      }

      .form-footer .separator {
        margin: 0 8px;
        opacity: 0.5;
      }

      .version {
        margin-top: 8px;
        font-size: 11px;
        opacity: 0.6;
      }

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

        .form-panel {
          padding: 32px 24px;
        }

        .form-content {
          padding: 24px;
        }
      }
    `,
  ];

  render() {
    return html`
      <div class="split-container">
        <!-- Left: Branding Panel -->
        <div class="brand-panel">
          <div class="brand-content">
            <h1 class="logo">idp.global</h1>
            <div class="badge"><span class="badge-dot"></span>Open identity infrastructure</div>
            <p class="tagline">One Identity. Any Scale. Yours Forever.</p>

            <div class="features">
              <div class="feature">
                <div class="feature-icon">
                  <idp-icon name="globe" size="18"></idp-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">
                  <idp-icon name="shield" size="18"></idp-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">
                  <idp-icon name="key" size="18"></idp-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">
              <idp-button
                variant="outline"
                @click=${() => window.open('https://about.idp.global', '_blank')}
              >Learn more</idp-button>
              <idp-button
                variant="ghost"
                @click=${() => window.open('https://code.foss.global/idp.global/app', '_blank')}
              >Source code</idp-button>
            </div>
          </div>
        </div>

        <!-- Right: Form Panel -->
        <div class="form-panel">
          <div class="form-content">
            <slot></slot>
          </div>
          <footer class="form-footer">
            <a href="https://legal.task.vc/" target="_blank">Legal</a>
            <span class="separator">·</span>
            <a href="https://task.vc/" target="_blank">Company</a>
            <span class="separator">·</span>
            <a href="https://support.task.vc/" target="_blank">Support</a>
            <div class="version">v${commitinfo.version}</div>
          </footer>
        </div>
      </div>
    `;
  }

  public async show() {
    await this.updateComplete;
    const domtoolsInstance = await this.domtoolsPromise;
    const done = plugins.smartpromise.defer();
    requestAnimationFrame(async () => {
      this.shadowRoot.querySelector('.form-content').classList.add('show');
      await domtoolsInstance.convenience.smartdelay.delayFor(350);
      done.resolve();
    });
    return done.promise;
  }

  public async hide() {
    await this.updateComplete;
    const domtoolsInstance = await this.domtoolsPromise;
    const done = plugins.smartpromise.defer();
    requestAnimationFrame(async () => {
      this.shadowRoot.querySelector('.form-content').classList.remove('show');
      await domtoolsInstance.convenience.smartdelay.delayFor(350);
      done.resolve();
    });
    return done.promise;
  }
}