import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import {
  get,
  publish,
  subscribe,
} from "@supersoniks/concorde/decorators";
import type {
  APIConfiguration,
  ApiGetResult,
} from "@supersoniks/concorde/core/utils/api";
import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
import { sub } from "@supersoniks/concorde/directives";
import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
import { tailwind } from "../tailwind";
import "./decorators-demo-init";
import {
  docsDemoDynApiConfKeyTemplate,
  docsDemoGeoApiConfigurationKey,
  geoCommunesApiGetEndpoint,
  geoCommunesApiGetEndpointDynamic,
  geoCommunesApiGetPublishKey,
  type GeoCommuneRow,
} from "./decorators-demo-geo";

type PublishDemoData = {
  email: string;
  message: string;
};

const publishDemoKey = new DataProviderKey<PublishDemoData>("publishDemo");

@customElement("demo-publish")
export class DemoPublish extends LitElement {
  static styles = [tailwind];

  @publish(publishDemoKey.email)
  @state()
  email = "";

  @publish(publishDemoKey.message)
  @state()
  message = "";

  connectedCallback() {
    super.connectedCallback();
    PublisherManager.get("publishDemo").set({ email: "", message: "" });
  }

  render() {
    return html`
      <div class="space-y-4">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          Les champs publient vers le publisher ; les valeurs ci-dessous passent
          par <code>sub()</code>.
        </p>
        <sonic-input
          .value=${this.email}
          @input=${(e: Event) =>
            (this.email = (e.target as HTMLInputElement).value)}
          label="Email"
          placeholder="your@email.com"
        ></sonic-input>
        <sonic-input
          .value=${this.message}
          @input=${(e: Event) =>
            (this.message = (e.target as HTMLInputElement).value)}
          label="Message"
          placeholder="Type a message..."
        ></sonic-input>
        <div
          class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
        >
          <p
            class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"
          >
            Published values (from sub):
          </p>
          <p>Email: ${sub("publishDemo.email") || "—"}</p>
          <p>Message: ${sub("publishDemo.message") || "—"}</p>
        </div>
      </div>
    `;
  }
}

@customElement("demo-api-get")
export class DemoApiGet extends LitElement {
  static styles = [tailwind];

  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey)
  @state()
  geoApiPayload?: ApiGetResult<GeoCommuneRow[]>;

  render() {
    const rows = this.geoApiPayload?.result;
    const status = this.geoApiPayload?.response?.status;
    return html`
      <div class="space-y-2">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          <code>@get</code> — même service que
          <code>sonic-queue</code> (<code>https://geo.api.gouv.fr/</code>).
          Propriété typée <code>ApiGetResult&lt;T&gt;</code>.
        </p>
        ${status != null
          ? html`<p class="text-xs text-neutral-500">HTTP ${status}</p>`
          : ""}
        ${this.geoApiPayload === null
          ? html`<p class="text-neutral-500">Chargement…</p>`
          : !rows || rows.length === 0
            ? html`<p class="text-neutral-500">Aucune commune</p>`
            : html`
                <ul class="list-disc pl-5 space-y-1">
                  ${rows.map(
                    (c) =>
                      html`<li>
                        <span class="font-medium">${c.nom}</span>
                        <span class="text-neutral-500 text-sm">
                          — ${c.code}</span
                        >
                      </li>`,
                  )}
                </ul>
              `}
      </div>
    `;
  }
}

@customElement("demo-api-get-configuration-key")
export class DemoApiGetConfigurationKey extends LitElement {
  static styles = [tailwind];

  @property({ type: String })
  configSlot: "A" | "B" = "A";

  @property({ type: Number })
  communeLimit = 5;

  @get(geoCommunesApiGetEndpointDynamic, docsDemoDynApiConfKeyTemplate)
  @state()
  geoApiPayloadDyn?: ApiGetResult<GeoCommuneRow[]>;

  private touchCurrentConfigPublisher() {
    const id = `docsDemoDynApiConf${this.configSlot}`;
    const pub = PublisherManager.get(id);
    const cur = pub.get() as APIConfiguration;
    pub.set({
      ...cur,
      blockUntilDone: !cur.blockUntilDone,
    });
  }

  render() {
    const rows = this.geoApiPayloadDyn?.result;
    const status = this.geoApiPayloadDyn?.response?.status;
    return html`
      <div class="space-y-3">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          Config dynamique (<code>docsDemoDynApiConf\${configSlot}</code>) +
          path d’endpoint avec <code>communeLimit</code>. « Toucher la config »
          déclenche un nouveau GET.
        </p>
        <div class="flex flex-wrap gap-2 items-center">
          <span class="text-xs text-neutral-500">Limite API :</span>
          ${[3, 5, 10].map(
            (n) => html`
              <sonic-button
                size="sm"
                type=${this.communeLimit === n ? "primary" : "neutral"}
                @click=${() => {
                  this.communeLimit = n;
                }}
                >${n}</sonic-button
              >
            `,
          )}
        </div>
        <div class="flex flex-wrap gap-2 items-center">
          <span class="text-xs text-neutral-500">Publisher config :</span>
          <sonic-button
            size="sm"
            type=${this.configSlot === "A" ? "primary" : "neutral"}
            @click=${() => {
              this.configSlot = "A";
            }}
            >docsDemoDynApiConfA</sonic-button
          >
          <sonic-button
            size="sm"
            type=${this.configSlot === "B" ? "primary" : "neutral"}
            @click=${() => {
              this.configSlot = "B";
            }}
            >docsDemoDynApiConfB</sonic-button
          >
          <sonic-button
            size="sm"
            @click=${() => this.touchCurrentConfigPublisher()}
            >Toucher la config</sonic-button
          >
        </div>
        ${status != null
          ? html`<p class="text-xs text-neutral-500">
              HTTP ${status} · limit=${this.communeLimit} · conf=
              docsDemoDynApiConf${this.configSlot}
            </p>`
          : ""}
        ${this.geoApiPayloadDyn === null
          ? html`<p class="text-neutral-500">Chargement…</p>`
          : !rows || rows.length === 0
            ? html`<p class="text-neutral-500">Aucune commune</p>`
            : html`
                <ul class="list-disc pl-5 space-y-1">
                  ${rows.map(
                    (c) =>
                      html`<li>
                        <span class="font-medium">${c.nom}</span>
                        <span class="text-neutral-500 text-sm">
                          — ${c.code}</span
                        >
                      </li>`,
                  )}
                </ul>
              `}
      </div>
    `;
  }
}

@customElement("demo-api-get-publish-subscribe")
export class DemoApiGetPublishSubscribe extends LitElement {
  static styles = [tailwind];

  @get(geoCommunesApiGetEndpoint)
  @publish(geoCommunesApiGetPublishKey)
  @state()
  geoApiPayloadPublished: ApiGetResult<GeoCommuneRow[]> | null = null;

  @state()
  @subscribe(geoCommunesApiGetPublishKey.result)
  geoCommunesFromSubscribe: GeoCommuneRow[] | null = null;

  render() {
    const rows =
      this.geoCommunesFromSubscribe ?? this.geoApiPayloadPublished?.result;
    const status = this.geoApiPayloadPublished?.response?.status;
    return html`
      <div class="space-y-2">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          <code>@get</code> (scoped) + <code>@publish</code> sur la clé du
          payload + <code>@subscribe</code> sur <code>.result</code> — même
          rendu que <code>&lt;demo-api-get&gt;</code> (doc @get).
        </p>
        ${status != null
          ? html`<p class="text-xs text-neutral-500">HTTP ${status}</p>`
          : ""}
        ${this.geoApiPayloadPublished === null
          ? html`<p class="text-neutral-500">Chargement…</p>`
          : !rows || rows.length === 0
            ? html`<p class="text-neutral-500">Aucune commune</p>`
            : html`
                <ul class="list-disc pl-5 space-y-1">
                  ${rows.map(
                    (c) =>
                      html`<li>
                        <span class="font-medium">${c.nom}</span>
                        <span class="text-neutral-500 text-sm">
                          — ${c.code}</span
                        >
                      </li>`,
                  )}
                </ul>
              `}
      </div>
    `;
  }
}

type User = { firstName: string; lastName: string; email: string };

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

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

  @subscribe(new DataProviderKey<User>("demoUsers.${userIndex}"))
  @state()
  user: User | null = null;

  render() {
    return html`
      <div class="space-y-4">
        <p class="text-sm text-neutral-600 dark:text-neutral-400">
          <code>@subscribe</code> avec chemin dynamique
          <code>demoUsers.\${userIndex}</code>
        </p>
        <sonic-input
          type="number"
          .value=${String(this.userIndex)}
          @input=${(e: Event) =>
            (this.userIndex = parseInt((e.target as HTMLInputElement).value))}
          min="0"
          max="9"
          label="User index"
        ></sonic-input>
        ${this.user
          ? html`
              <div
                class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
              >
                <p>${this.user.firstName} ${this.user.lastName}</p>
                <p class="text-sm text-neutral-500">${this.user.email}</p>
              </div>
            `
          : html`<p class="text-neutral-500">
              No user at index ${this.userIndex}
            </p>`}
      </div>
    `;
  }
}