import { Cpu, RefreshCw, Server, SquareTerminal } 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 { StatusBadge } from "../../components/ui/status-badge";
import { serviceKey } from "../../lib/model";
import { servicesFrom } from "../../lib/view-state";
import type { PageProps } from "../types";

export default function InstancesPage(props: PageProps) {
  const services = createMemo(() => servicesFrom(props.state()));
  const running = createMemo(
    () => services().filter((service) => service.status === "running").length,
  );

  return (
    <main class="page">
      <PageHeading
        eyebrow="ACTORS"
        title="运行实例"
        description={`${running()} 个 Actor 保持独立 Store 与串行 mailbox。`}
        actions={
          <button class="icon-btn" title="刷新" onClick={() => props.command({ type: "refresh" })}>
            <RefreshCw size={16} />
          </button>
        }
      />
      <Show
        when={services().length > 0}
        fallback={
          <div class="panel">
            <EmptyState icon={Server} title="暂无实例" detail="先注册一个组件包。" />
          </div>
        }
      >
        <section class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
          <For each={services()}>
            {(service) => (
              <article class="panel p-5">
                <div class="flex items-start justify-between gap-3">
                  <div class="flex min-w-0 items-center gap-3">
                    <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-cyan-soft text-cyan-strong">
                      <Cpu size={18} />
                    </span>
                    <div class="min-w-0">
                      <strong class="block truncate">{service.id}</strong>
                      <span class="code mt-1 block truncate text-muted">{service.revision}</span>
                    </div>
                  </div>
                  <StatusBadge status={service.status} />
                </div>
                <dl class="mt-5 grid grid-cols-2 gap-x-4 gap-y-3 border-t border-line pt-4 text-xs">
                  <div>
                    <dt class="text-muted">内存上限</dt>
                    <dd class="mt-1 font-semibold">{service.memoryMb} MB</dd>
                  </div>
                  <div>
                    <dt class="text-muted">Mailbox</dt>
                    <dd class="mt-1 font-semibold">{service.mailbox}</dd>
                  </div>
                  <div>
                    <dt class="text-muted">Deadline</dt>
                    <dd class="mt-1 font-semibold">{service.deadlineMs} ms</dd>
                  </div>
                  <div>
                    <dt class="text-muted">最近延迟</dt>
                    <dd class="mt-1 font-semibold">
                      {service.latencyMs === null ? "—" : `${service.latencyMs} ms`}
                    </dd>
                  </div>
                </dl>
                <div class="mt-5 flex justify-end gap-2">
                  <Show when={service.status === "running"}>
                    <button
                      class="btn btn-secondary h-9"
                      onClick={() =>
                        props.command({
                          type: "open-invoke",
                          serviceKey: serviceKey(service),
                        })
                      }
                    >
                      <SquareTerminal size={15} />
                      调用
                    </button>
                  </Show>
                  <button
                    class="btn btn-secondary h-9"
                    disabled={props.state()?.serviceAction !== null}
                    onClick={() =>
                      props.command({
                        type: "service-action",
                        serviceKey: serviceKey(service),
                        action: service.status === "running" ? "stop" : "start",
                      })
                    }
                  >
                    {service.status === "running" ? "停止" : "启动"}
                  </button>
                </div>
              </article>
            )}
          </For>
        </section>
      </Show>
    </main>
  );
}
