import { CloudUpload, Download, FileCode2, Search } from "lucide-solid";
import { createMemo, For, Show } from "solid-js";
import { EmptyState } from "../../components/ui/empty-state";
import { PageHeading } from "../../components/ui/page-heading";
import { witPackageDownloadUrl } from "../../lib/api";
import type { PageProps } from "../types";

export default function WitPackagesPage(props: PageProps) {
  const packages = createMemo(() => {
    const state = props.state();
    const query = state?.query.trim().toLowerCase() ?? "";
    return (
      state?.snapshot?.witPackages.filter(
        (item) =>
          !query ||
          item.name.toLowerCase().includes(query) ||
          item.version.toLowerCase().includes(query) ||
          item.sha256.toLowerCase().includes(query),
      ) ?? []
    );
  });

  return (
    <main class="page">
      <PageHeading
        eyebrow="INTERFACES"
        title="WIT 包"
        description="管理不可变、版本化的 Component 接口依赖。"
        actions={
          <button
            class="btn btn-primary"
            onClick={() => props.command({ type: "open-wit-publish" })}
          >
            <CloudUpload size={16} />
            发布 WIT 包
          </button>
        }
      />
      <section class="panel">
        <div class="panel-header">
          <div>
            <h2>Registry</h2>
            <p>{packages().length} 个匹配包版本</p>
          </div>
        </div>
        <Show
          when={packages().length > 0}
          fallback={
            <EmptyState icon={Search} title="没有匹配的 WIT 包" detail="发布或调整搜索关键词。" />
          }
        >
          <div class="table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>包</th>
                  <th>版本</th>
                  <th>直接依赖</th>
                  <th>SHA-256</th>
                  <th>
                    <span class="sr-only">下载</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <For each={packages()}>
                  {(item) => (
                    <tr>
                      <td>
                        <span class="flex items-center gap-2">
                          <FileCode2 size={15} class="text-cyan-strong" />
                          <strong>{item.name}</strong>
                        </span>
                      </td>
                      <td class="code">{item.version}</td>
                      <td class="text-xs text-muted">
                        {item.dependencies.length
                          ? item.dependencies
                              .map((dependency) => `${dependency.name}@${dependency.version}`)
                              .join(", ")
                          : "无"}
                      </td>
                      <td class="code max-w-64 truncate text-muted" title={item.sha256}>
                        {item.sha256}
                      </td>
                      <td class="text-right">
                        <a
                          class="icon-btn"
                          title="下载"
                          href={witPackageDownloadUrl(props.state()?.apiBase ?? "", item)}
                        >
                          <Download size={15} />
                        </a>
                      </td>
                    </tr>
                  )}
                </For>
              </tbody>
            </table>
          </div>
        </Show>
      </section>
    </main>
  );
}