import i18next from "i18next";
import { ItemView, Notice, WorkspaceLeaf, TFile } from "obsidian";
import type HaloPlugin from "../main";

export const SYNC_STATUS_VIEW_TYPE = "halo-sync-status";

interface SyncHistoryItem {
  id: string;
  action: "publish" | "update" | "pull" | "delete";
  title: string;
  timestamp: number;
  success: boolean;
}

export class SyncStatusView extends ItemView {
  private plugin: HaloPlugin;
  private history: SyncHistoryItem[] = [];

  constructor(leaf: WorkspaceLeaf, plugin: HaloPlugin) {
    super(leaf);
    this.plugin = plugin;
    this.loadHistory();
  }

  getViewType(): string {
    return SYNC_STATUS_VIEW_TYPE;
  }

  getDisplayText(): string {
    return i18next.t("sync_panel.title");
  }

  async onOpen() {
    this.render();
  }

  private loadHistory() {
    const stored = this.plugin.loadData();
    this.history = stored?.syncHistory || [];
  }

  private saveHistory() {
    const data = this.plugin.loadData() || {};
    data.syncHistory = this.history.slice(-50);
    this.plugin.saveData(data);
  }

  addToHistory(action: "publish" | "update" | "pull" | "delete", title: string, success: boolean) {
    this.history.push({
      id: Date.now().toString(),
      action,
      title,
      timestamp: Date.now(),
      success,
    });
    this.saveHistory();
  }

  private getPublishedPosts() {
    const publishedPosts: Array<{
      file: TFile;
      title: string;
      slug: string;
      haloName: string;
      haloSite: string;
      publishStatus: boolean;
    }> = [];

    for (const file of this.plugin.app.vault.getFiles()) {
      if (file.extension !== "md") continue;

      const cache = this.plugin.app.metadataCache.getFileCache(file);
      if (!cache?.frontmatter?.halo?.name) continue;

      publishedPosts.push({
        file,
        title: cache.frontmatter.title || file.basename,
        slug: cache.frontmatter.slug || "",
        haloName: cache.frontmatter.halo.name,
        haloSite: cache.frontmatter.halo.site || "",
        publishStatus: cache.frontmatter.halo.publish ?? false,
      });
    }

    return publishedPosts;
  }

  private async render() {
    const container = this.containerEl;
    container.empty();

    const header = container.createDiv("sync-header");
    header.createEl("h2", { text: i18next.t("sync_panel.title") });

    const actions = header.createDiv("sync-actions");
    actions.createEl("button", {
      text: i18next.t("sync_panel.button_refresh"),
      cls: "sync-action-btn"
    }).addEventListener("click", () => this.render());

    actions.createEl("button", {
      text: i18next.t("sync_panel.button_history"),
      cls: "sync-action-btn"
    }).addEventListener("click", () => this.showHistory());

    actions.createEl("button", {
      text: i18next.t("sync_panel.button_clear_history"),
      cls: "sync-action-btn danger"
    }).addEventListener("click", () => this.clearHistory());

    const posts = this.getPublishedPosts();

    if (posts.length === 0) {
      container.createEl("p", { 
        text: i18next.t("sync_panel.empty"),
        cls: "sync-empty"
      });
      return;
    }

    const list = container.createDiv("sync-list");

    for (const post of posts) {
      const item = list.createDiv("sync-item");
      
      const statusIcon = item.createSpan({
        text: post.publishStatus ? "✅" : "📝",
        cls: "sync-status-icon"
      });

      const info = item.createDiv("sync-info");
      info.createEl("span", { text: post.title, cls: "sync-title" });
      info.createEl("span", { text: `Slug: ${post.slug}`, cls: "sync-slug" });

      const itemActions = item.createDiv("sync-item-actions");
      
      itemActions.createEl("button", {
        text: i18next.t("sync_panel.button_update"),
        cls: "sync-item-btn"
      }).addEventListener("click", async () => {
        const site = this.plugin.settings.sites.find(s => s.url === post.haloSite);
        if (!site) {
          new Notice(i18next.t("service.error_site_not_match"));
          return;
        }
        
        const { default: HaloService } = await import("../service");
        const service = new HaloService(this.plugin.app, this.plugin.settings, site);
        await service.updatePost();
        this.addToHistory("update", post.title, true);
        new Notice(i18next.t("command.update_post.success"));
        this.render();
      });

      itemActions.createEl("button", {
        text: i18next.t("sync_panel.button_pull"),
        cls: "sync-item-btn"
      }).addEventListener("click", async () => {
        const site = this.plugin.settings.sites.find(s => s.url === post.haloSite);
        if (!site) {
          new Notice(i18next.t("service.error_site_not_match"));
          return;
        }
        
        const { default: HaloService } = await import("../service");
        const service = new HaloService(this.plugin.app, this.plugin.settings, site);
        await service.pullPost(post.haloName);
        this.addToHistory("pull", post.title, true);
        this.render();
      });
    }

    const stats = container.createDiv("sync-stats");
    stats.createEl("span", { text: i18next.t("sync_panel.total_posts", { count: posts.length }) });
  }

  private showHistory() {
    const modal = document.createElement("div");
    modal.className = "sync-history-modal";
    modal.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    `;

    const content = modal.createDiv("sync-history-content");
    content.style.cssText = `
      background: var(--background-primary);
      padding: 20px;
      border-radius: 8px;
      max-width: 500px;
      max-height: 80vh;
      overflow-y: auto;
    `;

    content.createEl("h3", { text: i18next.t("sync_history.title") });

    const closeBtn = content.createEl("button", { text: i18next.t("common.button_close") });
    closeBtn.style.cssText = "margin-bottom: 15px;";
    closeBtn.addEventListener("click", () => modal.remove());

    if (this.history.length === 0) {
      content.createEl("p", { text: i18next.t("sync_history.empty") });
    } else {
      const list = content.createDiv("sync-history-list");
      
      for (const item of [...this.history].reverse()) {
        const historyItem = list.createDiv("history-item");
        const time = new Date(item.timestamp).toLocaleString();
        const actionText = i18next.t(`sync_history.action_${item.action}`);
        const icon = item.success ? "✅" : "❌";
        
        historyItem.createEl("span", { text: `${icon} ${actionText}: ${item.title}` });
        historyItem.createEl("span", { text: time, cls: "history-time" });
      }
    }

    modal.addEventListener("click", (e) => {
      if (e.target === modal) modal.remove();
    });

    document.body.appendChild(modal);
  }

  private clearHistory() {
    if (confirm(i18next.t("sync_history.confirm_clear"))) {
      this.history = [];
      this.saveHistory();
      this.render();
      new Notice(i18next.t("sync_history.notice_cleared"));
    }
  }
}