import { LitElement, html, unsafeCSS } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import globalStyles from "./index.css?inline";
import { type Config, type Rule, type RuleProvider } from "./interface.js";
import axios, { AxiosError } from "axios";
import { base64EncodeUnicode, base64decodeUnicode } from "./utils.js";
import "./components/rule-provider-input.js";
import "./components/rule-input.js";
import "./components/rename-input.js";

@customElement("sub2clash-app")
export class Sub2clashApp extends LitElement {
  static styles = [unsafeCSS(globalStyles)];

  private _config: Config = {
    clashType: 2,
    subscriptions: [],
    proxies: [],
    refresh: false,
    autoTest: false,
    lazy: false,
    ignoreCountryGroup: false,
    useUDP: false,
    template: "",
    sort: "nameasc",
    remove: "",
    nodeList: false,
    ruleProviders: [],
    replace: undefined,
    rules: [],
  };

  @state()
  set config(value: Config) {
    console.log(JSON.stringify(value));
    if (
      (value.subscriptions == null || value.subscriptions.length == 0) &&
      (value.proxies == null || value.proxies.length == 0)
    ) {
      this.configUrl = "";
      return;
    }
    const oldValue = this._config;
    this.configUrl = `${
      window.location.origin
    }${window.location.pathname.replace(
      /\/$/,
      ""
    )}/convert/${base64EncodeUnicode(JSON.stringify(value))
      .replace(/\+/g, "-")
      .replace(/\//g, "_")}`;
    this._config = value;
    this.requestUpdate("config", oldValue);
  }

  get config(): Config {
    return this._config;
  }

  @state({
    hasChanged(value: boolean) {
      localStorage.setItem("theme", value ? "dark" : "light");
      document
        .querySelector("html")
        ?.setAttribute("data-theme", value ? "dark" : "light");
      return true;
    },
  })
  darkTheme: boolean = this.initTheme();

  initTheme(): boolean {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme != null) {
      return savedTheme === "dark" ? true : false;
    }
    const prefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    return prefersDark;
  }

  @state()
  reverseUrl: string = "";

  @state()
  dialogMessage: string = "";

  @state()
  dialogTitle: string = "";

  @query("dialog#my_modal")
  dialog!: HTMLDialogElement;

  showDialog(title: string, message: string): void {
    if (title.trim() === "") {
      title = "警告";
    }
    this.dialogTitle = title;
    this.dialogMessage = message;
    this.dialog.showModal();
  }

  @state()
  configUrl: string = "";

  @state()
  shortLinkID: string = "";

  @state()
  shortLinkPasswd: string = "";

  async copyToClipboard(content: string, e: HTMLButtonElement) {
    try {
      await navigator.clipboard.writeText(content);
      let text = e.textContent;
      e.addEventListener("mouseout", function () {
        e.textContent = text;
      });
      e.textContent = "复制成功";
    } catch (err) {
      console.error("复制到剪贴板失败:", err);
    }
  }

  generateShortLink() {
    if (this.configUrl === "") {
      this.showDialog("", "还未填写配置");
      return;
    }
    axios
      .post(
        "./short",
        {
          config: this.config,
          password: this.shortLinkPasswd,
          id: this.shortLinkID,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      )
      .then((response) => {
        // 设置返回的短链ID和密码
        this.shortLinkID = response.data.id;
        this.shortLinkPasswd = response.data.password;
      })
      .catch((error) => {
        if (error.response && error.response.data) {
          this.showDialog("", "生成短链失败：" + error.response.data);
        } else {
          this.showDialog("", "生成短链失败");
        }
      });
  }

  updateShortLink() {
    if (this.shortLinkID.trim() === "") {
      this.showDialog("", "请输入ID");
      return;
    }
    if (this.shortLinkPasswd.trim() === "") {
      this.showDialog("", "请输入密码");
      return;
    }
    if (this.configUrl === "") {
      this.showDialog("", "还未填写配置");
      return;
    }
    axios
      .put(
        "./short",
        {
          id: this.shortLinkID,
          config: this.config,
          password: this.shortLinkPasswd,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      )
      .then(() => {
        this.showDialog("成功", "更新成功");
      })
      .catch((error) => {
        if (error.response && error.response.status === 401) {
          this.showDialog("", "密码错误");
        } else if (error.response && error.response.data) {
          this.showDialog("", "更新短链失败：" + error.response.data);
        } else {
          this.showDialog("", "更新短链失败");
        }
      });
  }

  deleteShortLink() {
    if (this.shortLinkID.trim() === "") {
      this.showDialog("", "请输入ID");
      return;
    }
    if (this.shortLinkPasswd.trim() === "") {
      this.showDialog("", "请输入密码");
      return;
    }
    const params = new URLSearchParams();
    params.append("password", this.shortLinkPasswd);
    axios
      .delete(`./short/${this.shortLinkID}?${params.toString()}`, {
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then(() => {
        this.showDialog("成功", "删除成功");
      })
      .catch((error) => {
        if (error.response && error.response.status === 401) {
          this.showDialog("", "短链不存在或密码错误");
        } else if (error.response && error.response.data) {
          this.showDialog("", "删除短链失败：" + error.response.data);
        } else {
          this.showDialog("", "删除短链失败");
        }
      });
  }

  getRawConfigFromShortLink() {
    const s = this.reverseUrl.split("/s/");
    if (s.length != 2) {
      this.showDialog("", "解析失败");
      return;
    }

    axios
      .get(`./short/${s[1]}`)
      .then((resp) => {
        this.config = resp.data;
      })
      .catch((err: AxiosError) => {
        if (err.response && err.response.status == 401) {
          this.showDialog("", "短链不存在或密码错误");
        } else if (err.response && err.response.data) {
          this.showDialog("", "获取配置失败：" + err.response.data);
        } else {
          this.showDialog("", "获取配置失败");
        }
      });
  }

  parseConfig() {
    if (this.reverseUrl.trim() === "") {
      this.showDialog("", "无法解析，链接为空");
    }
    if (this.reverseUrl.indexOf("/s/") != -1) {
      this.getRawConfigFromShortLink();
      return;
    }
    let url = new URL(this.reverseUrl);
    const pathSections = url.pathname.split("/");
    if (pathSections.length < 2) {
      this.showDialog("", "无法解析，链接格式错误");
    }
    if (pathSections[pathSections.length - 2] == "convert") {
      let base64Data = pathSections[pathSections.length - 1];
      base64Data = base64Data.replace(/-/g, "+").replace(/_/g, "/");
      try {
        const configData = base64decodeUnicode(base64Data);
        this.config = JSON.parse(configData) as Config;
      } catch (e: any) {
        this.showDialog("", "无法解析 Base64，配置格式错误");
        return;
      }
    } else {
      this.showDialog("", "无法解析，链接格式错误");
    }
  }

  render() {
    return html`
      <dialog id="my_modal" class="modal">
        <div class="modal-box">
          <h3 class="text-lg font-bold">${this.dialogTitle}</h3>
          <p class="py-4">${this.dialogMessage}</p>
          <div class="modal-action">
            <form method="dialog">
              <button class="btn">关闭</button>
            </form>
          </div>
        </div>
      </dialog>
      <div class="max-w-4xl mx-auto p-4 flex flex-col items-center">
        <form class="w-full max-w-2xl bg-base-100">
          <fieldset class="fieldset mb-6">
            <div class="flex flex-row justify-between items-center my-6">
              <legend
                class="fieldset-legend text-2xl font-semibold inline-block m-0 p-0">
                sub2clash
              </legend>
              <label class="swap swap-rotate h-7 w-7">
                <!-- this hidden checkbox controls the state -->
                <input
                  type="checkbox"
                  class="theme-controller"
                  .checked="${!this.darkTheme}"
                  @change="${() => (this.darkTheme = !this.darkTheme)}" />

                <!-- sun icon -->
                <svg
                  class="swap-off h-7 w-7 fill-current"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24">
                  <path
                    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
                </svg>

                <!-- moon icon -->
                <svg
                  class="swap-on h-7 w-7 fill-current"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24">
                  <path
                    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
                </svg>
              </label>
            </div>

            <!-- Input URL -->
            <div class="form-control mb-5">
              <label class="label mb-1 pl-1">解析链接</label>
              <div class="join w-full">
                <input
                  class="input input-bordered w-full join-item"
                  type="text"
                  @change="${(e: Event) => {
                    this.reverseUrl = (e.target as HTMLInputElement).value;
                  }}"
                  placeholder="通过生成的链接重新填写下方设置" />
                <button
                  class="btn btn-primary join-item"
                  @click="${this.parseConfig}"
                  type="button">
                  解析
                </button>
              </div>
            </div>

            <!-- API Endpoint -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="endpoint">客户端类型</label>
              <select
                class="select select-bordered w-full"
                name="endpoint"
                .value="${this.config.clashType == 1 ? "1" : "2"}"
                @change="${(e: Event) => {
                  this.config = {
                    ...this.config,
                    clashType: Number((e.target as HTMLInputElement).value),
                  };
                }}">
                <option value="1">Clash</option>
                <option value="2" selected>Clash.Meta</option>
              </select>
            </div>

            <!-- Template -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="template">模板链接</label>
              <input
                class="input input-bordered w-full"
                name="template"
                placeholder="输入模板链接"
                type="text"
                .value="${this.config.template ?? ""}"
                @change="${(e: Event) => {
                  this.config = {
                    ...this.config,
                    template: (e.target as HTMLInputElement).value,
                  };
                }}" />
            </div>

            <!-- Subscription Link -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="sub">订阅链接</label>
              <div>
                <textarea
                  class="textarea textarea-bordered h-24 w-full"
                  name="sub"
                  placeholder="每行输入一个订阅链接"
                  .value="${this.config.subscriptions
                    ? this.config.subscriptions.join("\n")
                    : ""}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      subscriptions: (e.target as HTMLInputElement).value
                        .split("\n")
                        .filter((e) => e.trim() !== ""),
                    };
                  }}"></textarea>
              </div>
            </div>

            <!-- Proxy Link -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="proxy">节点分享链接</label>
              <div>
                <textarea
                  class="textarea textarea-bordered h-24 w-full"
                  name="proxy"
                  placeholder="每行输入一个节点分享链接"
                  .value="${this.config.proxies
                    ? this.config.proxies.join("\n")
                    : ""}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      proxies: (e.target as HTMLInputElement).value
                        .split("\n")
                        .filter((e) => e.trim() !== ""),
                    };
                  }}"></textarea>
              </div>
            </div>

            <!-- User Agent -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="user-agent">UA 标识</label>
              <div>
                <textarea
                  class="textarea textarea-bordered h-20 w-full"
                  name="user-agent"
                  placeholder="用于获取订阅的 http 请求中的 User-Agent 标识"
                  .value="${this.config.userAgent ?? ""}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      userAgent: (e.target as HTMLInputElement).value,
                    };
                  }}"></textarea>
              </div>
            </div>

            <!-- Sort -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="sort">
                国家策略组排序规则
              </label>
              <select
                class="select select-bordered w-full"
                name="sort"
                .value="${this.config.sort ?? "nameasc"}"
                @change="${(e: Event) => {
                  this.config = {
                    ...this.config,
                    sort: (e.target as HTMLInputElement).value,
                  };
                }}">
                <option value="nameasc">名称（升序）</option>
                <option value="namedesc">名称（降序）</option>
                <option value="sizeasc">节点数量（升序）</option>
                <option value="sizedesc">节点数量（降序）</option>
              </select>
            </div>

            <!-- Remove -->
            <div class="form-control mb-3">
              <label class="label mb-1 pl-1" for="remove">
                <span class="label-text">排除节点</span>
              </label>
              <input
                class="input input-bordered w-full"
                type="text"
                name="remove"
                placeholder="正则表达式"
                .value="${this.config.remove ?? ""}"
                @change="${(e: Event) => {
                  this.config = {
                    ...this.config,
                    remove: (e.target as HTMLInputElement).value,
                  };
                }}" />
            </div>

            <!-- Checkboxes -->
            <div class="form-control mb-3">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="refresh"
                  class="checkbox"
                  .checked="${this.config.refresh ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      refresh: (e.target as HTMLInputElement).checked,
                    };
                  }}" />
                强制重新获取订阅
              </label>
            </div>
            <div class="form-control mb-3">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="nodeList"
                  class="checkbox"
                  .checked="${this.config.nodeList ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      nodeList: (e.target as HTMLInputElement).checked,
                    };
                  }}" />
                输出为 Node List
              </label>
            </div>
            <div class="form-control mb-3">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="autoTest"
                  class="checkbox"
                  .checked="${this.config.autoTest ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      autoTest: (e.target as HTMLInputElement).checked,
                    };
                  }}" />
                国家策略组自动测速
              </label>
            </div>
            <div class="form-control mb-3">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="lazy"
                  class="checkbox"
                  .checked="${this.config.lazy ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      lazy: (e.target as HTMLInputElement).checked,
                    };
                  }}" />
                自动测速启用 lazy 模式
              </label>
            </div>
            <div class="form-control mb-3">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="igcg"
                  class="checkbox"
                  .checked="${this.config.ignoreCountryGroup ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      ignoreCountryGroup: (e.target as HTMLInputElement)
                        .checked,
                    };
                  }}" />
                不输出国家策略组
              </label>
            </div>
            <div class="form-control mb-5">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  name="useUDP"
                  class="checkbox"
                  .checked="${this.config.useUDP ?? false}"
                  @change="${(e: Event) => {
                    this.config = {
                      ...this.config,
                      useUDP: (e.target as HTMLInputElement).checked,
                    };
                  }}" />
                使用 UDP
              </label>
            </div>

            <rule-provider-input
              @change="${(e: CustomEvent<Array<RuleProvider>>) => {
                this.config = {
                  ...this.config,
                  ruleProviders: e.detail,
                };
              }}"></rule-provider-input>

            <rule-input
              @change="${(e: CustomEvent<Array<Rule>>) => {
                this.config = {
                  ...this.config,
                  rules: e.detail,
                };
              }}"></rule-input>
            <rename-input
              @change="${(e: CustomEvent<{ [key: string]: string }>) => {
                this.config = {
                  ...this.config,
                  replace: e.detail,
                };
              }}"></rename-input>
          </fieldset>

          <fieldset class="fieldset mb-8">
            <legend
              class="fieldset-legend text-2xl font-semibold mb-4 text-center">
              输出配置
            </legend>

            <!-- Display the API Link -->
            <div class="form-control mb-5">
              <div class="join w-full mb-2">
                <input
                  class="input input-bordered w-full join-item cursor-not-allowed"
                  type="text"
                  placeholder="链接"
                  .value="${this.configUrl}"
                  readonly />
                <button
                  class="btn btn-primary join-item"
                  @click="${(e: Event) => {
                    this.copyToClipboard(
                      this.configUrl,
                      e.target as HTMLButtonElement
                    );
                  }}"
                  type="button">
                  复制链接
                </button>
              </div>
            </div>

            <div class="form-control mb-2">
              <div class="join w-full">
                <input
                  class="input input-bordered w-1/2 join-item"
                  type="text"
                  placeholder="ID（可选）"
                  .value="${this.shortLinkID}"
                  @change="${(e: Event) => {
                    this.shortLinkID = (e.target as HTMLInputElement).value;
                  }}" />
                <input
                  class="input input-bordered w-1/2 join-item"
                  type="text"
                  placeholder="密码"
                  .value="${this.shortLinkPasswd}"
                  @change="${(e: Event) => {
                    this.shortLinkPasswd = (e.target as HTMLInputElement).value;
                  }}" />
                <button
                  class="btn btn-primary join-item"
                  type="button"
                  @click="${this.generateShortLink}">
                  生成短链
                </button>
                <button
                  class="btn btn-primary join-item"
                  @click="${this.updateShortLink}"
                  type="button">
                  更新短链
                </button>
                <button
                  class="btn btn-primary join-item"
                  @click="${this.deleteShortLink}"
                  type="button">
                  删除短链
                </button>
                <button
                  class="btn btn-primary join-item"
                  type="button"
                  @click="${(e: Event) => {
                    this.copyToClipboard(
                      `${window.location.origin}${window.location.pathname}s/${this.shortLinkID}?password=${this.shortLinkPasswd}`,
                      e.target as HTMLButtonElement
                    );
                  }}">
                  复制短链
                </button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>

      <footer class="footer footer-horizontal footer-center mb-8">
        <aside>
          <p>
            Powered by
            <a class="link" href="https://github.com/bestnite/sub2clash"
              >sub2clash</a
            >
          </p>
          <p>Version: ${import.meta.env.VITE_APP_VERSION ?? "dev"}</p>
        </aside>
      </footer>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sub2clash-app": Sub2clashApp;
  }
}