import { createSignal, For, onMount, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { sendMessage } from "../App";

interface TrashViewProps {
  onBack: () => void;
  onRestored: () => void;
}

export function TrashView(props: TrashViewProps) {
  const [deleted, setDeleted] = createSignal<VaultEntry[]>([]);
  const [loading, setLoading] = createSignal(true);
  const [confirmPurgeId, setConfirmPurgeId] = createSignal<string | null>(null);
  const [confirmPurgeAll, setConfirmPurgeAll] = createSignal(false);

  onMount(async () => {
    await reload();
  });

  async function reload() {
    setLoading(true);
    const res = await sendMessage({ type: "GET_DELETED_ENTRIES" });
    setDeleted((res as { ok: boolean; data?: VaultEntry[] }).data ?? []);
    setLoading(false);
  }

  async function restore(id: string) {
    await sendMessage({ type: "RESTORE_ENTRY", payload: { id } });
    props.onRestored();
    await reload();
  }

  async function purge(id: string) {
    await sendMessage({ type: "PURGE_ENTRY", payload: { id } });
    setConfirmPurgeId(null);
    await reload();
  }

  async function purgeAll() {
    for (const entry of deleted()) {
      await sendMessage({ type: "PURGE_ENTRY", payload: { id: entry.id } });
    }
    setConfirmPurgeAll(false);
    await reload();
  }

  function formatDate(ts?: number): string {
    if (!ts) return "";
    return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric" });
  }

  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex">
      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
          onClick={props.onBack}
          aria-label="Back"
        >
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 1L1 6L6 11" />
          </svg>
        </button>
        <span class="peach-overlay-title">trash</span>
        <div class="peach-overlay-spacer" />
      </div>

      <div class="peach-settings-body">
        <Show when={loading()}>
          <div class="peach-list-empty"><span>loading...</span></div>
        </Show>

        <Show when={!loading() && deleted().length === 0}>
          <div class="peach-list-empty" style="padding:48px 20px;flex-direction:column;gap:6px">
            <span style="font-size:13px;color:var(--peach-t1)">Trash is empty.</span>
            <span style="font-size:11px;color:var(--peach-t2)">Deleted entries appear here before being removed permanently.</span>
          </div>
        </Show>

        <Show when={!loading() && deleted().length > 0}>
          <div class="peach-settings-group peach-trash-list">
            <p class="peach-settings-sub-label">
              {deleted().length} {deleted().length === 1 ? "entry" : "entries"}
            </p>

            <For each={deleted()}>
              {(entry) => (
                <div class="peach-trash-entry-row">
                  <div class="peach-trash-entry-info">
                    <span class="peach-trash-entry-title">{entry.title}</span>
                    <span class="peach-trash-entry-meta">
                      {formatDate(entry.deletedAt)}
                      {entry.url ? ` · ${entry.url.replace(/^https?:\/\//, "").split("/")[0]}` : ""}
                    </span>
                  </div>
                  <div class="peach-trash-entry-actions">
                    <button
                      class="peach-btn peach-btn--subtle peach-btn--sm"
                      onClick={() => void restore(entry.id)}
                    >
                      restore
                    </button>
                    <Show
                      when={confirmPurgeId() === entry.id}
                      fallback={
                        <button
                          class="peach-trash-delete-btn"
                          onClick={() => setConfirmPurgeId(entry.id)}
                          aria-label="Delete permanently"
                        >
                          ×
                        </button>
                      }
                    >
                      <button
                        class="peach-btn peach-btn--sm peach-btn--danger"
                        onClick={() => void purge(entry.id)}
                      >
                        delete
                      </button>
                      <button
                        class="peach-btn peach-btn--ghost peach-btn--sm"
                        onClick={() => setConfirmPurgeId(null)}
                      >
                        cancel
                      </button>
                    </Show>
                  </div>
                </div>
              )}
            </For>

            <div class="peach-trash-footer">
              <Show
                when={confirmPurgeAll()}
                fallback={
                  <button class="peach-trash-purge-all" onClick={() => setConfirmPurgeAll(true)}>
                    permanently delete all
                  </button>
                }
              >
                <span class="peach-trash-purge-confirm-label">delete all permanently?</span>
                <button
                  class="peach-btn peach-btn--sm peach-btn--danger"
                  onClick={() => void purgeAll()}
                >
                  yes
                </button>
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm"
                  onClick={() => setConfirmPurgeAll(false)}
                >
                  cancel
                </button>
              </Show>
            </div>
          </div>
        </Show>
      </div>
    </div>
  );
}