import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import {
  ancestorAttribute,
  onAssign,
  autoSubscribe,
  awaitConnectedAncestors,
  dispatchConnectedEvent,
} from "@supersoniks/concorde/decorators";
import {
  PublisherManager,
  PublisherProxy,
} from "@supersoniks/concorde/core/utils/PublisherProxy";
import { Objects } from "@supersoniks/concorde/utils";
import { tailwind } from "../tailwind";
import "./decorators-demo-bind-demos";
import "./decorators-demo-subscribe-publish-get-demos";

@customElement("demo-ancestor-attribute")
export class DemoAncestorAttribute extends LitElement {
  @ancestorAttribute("dataProvider")
  dataProvider: string | null = null;

  @ancestorAttribute("testAttribute")
  testAttribute: string | null = null;

  render() {
    return html`
      <section>
        <p>
          DataProvider property initialized from ancestor:
          <strong>${this.dataProvider || "null"}</strong>
        </p>
        <p>
          TestAttribute property initialized from ancestor:
          <strong>${this.testAttribute || "null"}</strong>
        </p>
      </section>
    `;
  }
}

@customElement("demo-on-assign")
export class DemoOnAssign extends LitElement {
  static styles = [tailwind];

  @state() userWithSettings: any = null;
  @state() isReady: boolean = false;
  @state() lastUpdate: string = "";

  @onAssign("demoUser", "demoUserSettings")
  handleDataReady(user: any, settings: any) {
    this.isReady =
      Object.keys(user).length > 0 && Object.keys(settings).length > 0;
    this.userWithSettings = { ...user, ...settings };
    this.lastUpdate = new Date().toLocaleTimeString();
    this.requestUpdate();
  }

  render() {
    const { name, email, theme, language } = this.userWithSettings;
    return html`
      <div class="mt-2">
        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
      </div>
      <div class="p-3">
        ${this.isReady === false
          ? html`<p>No settings yet...</p>`
          : html`<p>${name || "N/A"}</p>
              <p>${email || "N/A"}</p>
              <p>${theme || "N/A"}</p>
              <p>${language || "N/A"}</p>
              <p><small>Last updated: ${this.lastUpdate}</small></p> `}
      </div>
    `;
  }

  updateData() {
    const user = PublisherManager.get("demoUser");
    const userSettings = PublisherManager.get("demoUserSettings");
    const userNumber = Math.floor(Math.random() * 100);
    user.set({
      name: `User n°${userNumber}`,
      email: `user-${userNumber}@example.com`,
    });

    userSettings.set({
      theme: ["light", "dark", "auto"][Math.floor(Math.random() * 3)],
      language: ["en", "fr", "es"][Math.floor(Math.random() * 3)],
    });
  }
}

@customElement("demo-on-assign-dynamic")
export class DemoOnAssignDynamic extends LitElement {
  static styles = [tailwind];

  @property({ type: String })
  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";

  @property({ type: Number })
  userIndex: number = 0;

  @state() user: any = null;
  @state() userSettings: any = null;

  @onAssign(
    "${dataProvider}.${userIndex}",
    "${dataProvider}Settings.${userIndex}",
  )
  handleUserDataReady(user: any, settings: any) {
    this.user = user;
    this.userSettings = settings;
  }

  updateUserIndex(e: Event) {
    this.userIndex = parseInt((e.target as HTMLInputElement).value);
  }

  updateDataProvider(e: Event) {
    this.dataProvider = (e.target as HTMLSelectElement).value as
      | "demoUsers"
      | "demoUsersAlt";
  }

  updateCurrentUserData() {
    const usersPublisher = PublisherManager.get(this.dataProvider);
    const settingsPublisher = PublisherManager.get(
      `${this.dataProvider}Settings`,
    );
    const userPublisher = Objects.traverse(usersPublisher, [
      String(this.userIndex),
    ]) as PublisherProxy;
    const settingPublisher = Objects.traverse(settingsPublisher, [
      String(this.userIndex),
    ]) as PublisherProxy;

    if (userPublisher && settingPublisher) {
      const randomNames = [
        { firstName: "Alice", lastName: "Wonder" },
        { firstName: "Bob", lastName: "Builder" },
        { firstName: "Charlie", lastName: "Chaplin" },
        { firstName: "Diana", lastName: "Prince" },
        { firstName: "Eve", lastName: "Adams" },
      ];
      const randomThemes = ["light", "dark", "auto"];
      const randomLanguages = ["en", "fr", "es", "de", "it"];

      const randomName =
        randomNames[Math.floor(Math.random() * randomNames.length)];
      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
      const randomTheme =
        randomThemes[Math.floor(Math.random() * randomThemes.length)];
      const randomLanguage =
        randomLanguages[Math.floor(Math.random() * randomLanguages.length)];

      const currentUser = userPublisher.get() || {};
      userPublisher.set({
        ...currentUser,
        firstName: randomName.firstName,
        lastName: randomName.lastName,
        email: randomEmail,
      });

      settingPublisher.set({
        theme: randomTheme,
        language: randomLanguage,
      });
    }
  }

  render() {
    return html`
      <div class="flex flex-col gap-2">
        <sonic-select label="Users set" @change=${this.updateDataProvider}>
          <option value="demoUsers">First set of users</option>
          <option value="demoUsersAlt">Second set of users</option>
        </sonic-select>
        <sonic-input
          type="number"
          .value=${this.userIndex}
          @input=${this.updateUserIndex}
          min="0"
          max="9"
          label="Index"
          class="block"
        >
        </sonic-input>
        <sonic-button @click=${this.updateCurrentUserData}
          >Update current user data</sonic-button
        >
        <div class="flex flex-col gap-2 border p-2">
          <div>
            <sonic-icon name="user" library="heroicons"></sonic-icon>
            ${this.user?.firstName} ${this.user?.lastName}
          </div>
          <div>
            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
            ${this.user?.email}
          </div>
          <div>
            Theme: ${this.userSettings?.theme} | Language:
            ${this.userSettings?.language}
          </div>
        </div>
      </div>
    `;
  }
}

@customElement("demo-auto-subscribe")
export class DemoAutoSubscribe extends LitElement {
  static styles = [tailwind];

  @state() displayText: string = "";
  @state() computedValue: number = 0;

  @autoSubscribe()
  updateDisplay() {
    const value1 = PublisherManager.get("autoValue1").get() || 0;
    const value2 = PublisherManager.get("autoValue2").get() || 0;

    this.computedValue = value1 + value2;
    this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
  }

  render() {
    return html`
      <p><strong>${this.displayText}</strong></p>
      <div>
        <sonic-button @click=${() => this.randomizeValue("autoValue1")}>
          Randomize Value 1
        </sonic-button>
        <sonic-button @click=${() => this.randomizeValue("autoValue2")}>
          Randomize Value 2
        </sonic-button>
      </div>
    `;
  }

  randomizeValue(publisherId: string) {
    const value = PublisherManager.get(publisherId);
    value.set(Math.floor(Math.random() * 100));
  }
}

@dispatchConnectedEvent()
export class DemoWaitAncestorContainer extends LitElement {
  render() {
    return html`<slot></slot>`;
  }
}

@customElement("demo-wait-ancestor-value")
@awaitConnectedAncestors("demo-wait-ancestor-container[dataProvider]")
export class DemoWaitAncestorValue extends LitElement {
  @ancestorAttribute("dataProvider")
  dataProvider: string | null = null;

  @state() initializedAt = "";

  connectedCallback() {
    super.connectedCallback();
    this.initializedAt = new Date().toISOString();
  }

  render() {
    return html`
      <p>
        DataProvider from ancestor:
        <strong>${this.dataProvider || "—"}</strong>
      </p>
      <p>Initialized at: ${this.initializedAt || "(waiting for parent…)"}</p>
    `;
  }
}

@customElement("demo-wait-ancestors-section")
export class DemoWaitAncestorsSection extends LitElement {
  static styles = [tailwind];

  @state() parentRegistered = false;

  registerParent() {
    if (customElements.get("demo-wait-ancestor-container")) {
      this.parentRegistered = true;
      return;
    }
    customElements.define(
      "demo-wait-ancestor-container",
      DemoWaitAncestorContainer,
    );
    this.parentRegistered = true;
  }

  render() {
    return html`
      <div class="space-y-4">
        <sonic-button
          ?disabled=${this.parentRegistered}
          @click=${this.registerParent}
        >
          ${this.parentRegistered
            ? "Parent already registered"
            : "Register parent component"}
        </sonic-button>
        <demo-wait-ancestor-container dataProvider="waitAncestorDemo">
          <demo-wait-ancestor-value></demo-wait-ancestor-value>
        </demo-wait-ancestor-container>
      </div>
    `;
  }
}

@dispatchConnectedEvent()
export class DemoWaitAncestorOuter extends LitElement {
  render() {
    return html`<slot></slot>`;
  }
}

@dispatchConnectedEvent()
export class DemoWaitAncestorInner extends LitElement {
  render() {
    return html`<slot></slot>`;
  }
}

@customElement("demo-wait-ancestor-value-multi")
@awaitConnectedAncestors("demo-wait-ancestor-outer", "demo-wait-ancestor-inner")
export class DemoWaitAncestorValueMulti extends LitElement {
  @ancestorAttribute("dataProvider")
  dataProvider: string | null = null;

  @state() initializedAt = "";

  connectedCallback() {
    super.connectedCallback();
    this.initializedAt = new Date().toISOString();
  }

  render() {
    return html`
      <p>
        DataProvider from ancestor:
        <strong>${this.dataProvider || "—"}</strong>
      </p>
      <p>
        Initialized at: ${this.initializedAt || "(waiting for both ancestors…)"}
      </p>
    `;
  }
}

@customElement("demo-wait-ancestors-multi-section")
export class DemoWaitAncestorsMultiSection extends LitElement {
  static styles = [tailwind];

  @state() outerRegistered = false;
  @state() innerRegistered = false;

  registerOuter() {
    if (!customElements.get("demo-wait-ancestor-outer")) {
      customElements.define("demo-wait-ancestor-outer", DemoWaitAncestorOuter);
    }
    this.outerRegistered = true;
  }

  registerInner() {
    if (!customElements.get("demo-wait-ancestor-inner")) {
      customElements.define("demo-wait-ancestor-inner", DemoWaitAncestorInner);
    }
    this.innerRegistered = true;
  }

  render() {
    return html`
      <div class="space-y-4">
        <div class="flex gap-2 flex-wrap">
          <sonic-button
            ?disabled=${this.outerRegistered}
            @click=${this.registerOuter}
          >
            ${this.outerRegistered ? "Outer registered" : "Register outer"}
          </sonic-button>
          <sonic-button
            ?disabled=${this.innerRegistered}
            @click=${this.registerInner}
          >
            ${this.innerRegistered ? "Inner registered" : "Register inner"}
          </sonic-button>
        </div>
        <demo-wait-ancestor-outer>
          <demo-wait-ancestor-inner dataProvider="waitAncestorDemo">
            <demo-wait-ancestor-value-multi></demo-wait-ancestor-value-multi>
          </demo-wait-ancestor-inner>
        </demo-wait-ancestor-outer>
      </div>
    `;
  }
}

@customElement("demo-wait-ancestor-ready")
@dispatchConnectedEvent()
export class DemoWaitAncestorReady extends LitElement {
  render() {
    return html`<slot></slot>`;
  }
}

@customElement("demo-wait-ancestor-value-ready")
@awaitConnectedAncestors("demo-wait-ancestor-ready")
export class DemoWaitAncestorValueReady extends LitElement {
  @ancestorAttribute("dataProvider")
  dataProvider: string | null = null;

  @state() initializedAt = "";

  connectedCallback() {
    super.connectedCallback();
    this.initializedAt = new Date().toISOString();
  }

  render() {
    return html`
      <p>DataProvider: <strong>${this.dataProvider || "—"}</strong></p>
      <p>Initialized at: ${this.initializedAt}</p>
    `;
  }
}

@customElement("demo-wait-ancestors-ready-section")
export class DemoWaitAncestorsReadySection extends LitElement {
  static styles = [tailwind];

  @state() childInDom = false;

  addChild() {
    this.childInDom = true;
  }

  render() {
    return html`
      <div class="space-y-4">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          Parent défini au chargement. Ajout dynamique de l’enfant — initialisation
          immédiate si l’ancêtre est prêt.
        </p>
        <sonic-button ?disabled=${this.childInDom} @click=${this.addChild}>
          ${this.childInDom ? "Child added" : "Add child dynamically"}
        </sonic-button>
        <demo-wait-ancestor-ready dataProvider="waitAncestorDemo">
          ${this.childInDom
            ? html`<demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>`
            : html``}
        </demo-wait-ancestor-ready>
      </div>
    `;
  }
}

@customElement("demo-wait-ancestors-static-section")
export class DemoWaitAncestorsStaticSection extends LitElement {
  static styles = [tailwind];

  render() {
    return html`
      <p class="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
        Parent et enfant présents dès le chargement — pas de délai.
      </p>
      <demo-wait-ancestor-ready dataProvider="waitAncestorDemo">
        <demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>
      </demo-wait-ancestor-ready>
    `;
  }
}