import { CustomNodeForm } from "./custom-node-form";
import { ActionForm } from "@/components/action-form";
import { buttonVariants } from "@/components/ui/button";
import { CopyButton } from "@/components/copy-button";
import { FilterList } from "@/components/filter-list";
import { Input } from "@/components/ui/input";
import { SubmitButton } from "@/components/submit-button";
import { getRequestOrigin } from "@/lib/request-origin";
import { formatLocalDateTime } from "@/lib/datetime";
import { buildNodeHy2Config } from "@/lib/subscription";
import {
  buildNodeAuthUrl,
  buildTrafficStatsUrl,
  getNodeProxyName,
  listNodes,
} from "@/lib/store";

import {
  createNodeAction,
  deleteNodeAction,
  updateNodeAction,
} from "./actions";

function getNodePills(node: {
  enabled: number;
  node_type: "hy2" | "custom";
  last_error_message: string | null;
}) {
  return [
    {
      label: node.enabled ? "已启用" : "已禁用",
      className: `status-pill ${node.enabled ? "status-pill--ok" : "status-pill--off"}`,
    },
    node.node_type === "custom"
      ? { label: "自定义 YAML", className: "status-pill status-pill--ink" }
      : node.last_error_message
        ? { label: "同步异常", className: "status-pill status-pill--danger" }
        : { label: "同步正常", className: "status-pill status-pill--sage" },
  ];
}

export default async function NodesPage() {
  const [nodes, origin] = await Promise.all([listNodes(), getRequestOrigin()]);

  return (
    <main className="page-stack management-page">
      <section className="hero-panel">
        <div className="hero-copy">
          <span className="eyebrow">节点</span>
          <h2>节点管理</h2>
          <a href="/admin/certificates" className={buttonVariants({ variant: "outline", size: "sm" })}>证书托管 / 自动安装节点</a>
          <div className="badge-row">
            <span className="status-pill status-pill--ok">
              启用 {nodes.filter((node) => node.enabled).length}
            </span>
            <span className="status-pill status-pill--neutral">
              总数 {nodes.length}
            </span>
          </div>
        </div>
      </section>

      <section className="panel-card compact-create-panel">
        <details>
          <summary className="compact-create-summary">
            <div>
              <h3>新增 HY2 节点</h3>
            </div>
            <span className="status-pill status-pill--warm">展开</span>
          </summary>
          <ActionForm
            action={createNodeAction}
            className="dense-form-grid dense-form-grid--nodes"
          >
            <input type="hidden" name="node_type" value="hy2" />
            <label className="field">
              <span>Slug</span>
              <Input name="slug" placeholder="tokyo-01" required />
            </label>
            <label className="field">
              <span>显示名</span>
              <Input name="name" placeholder="Tokyo 01" required />
            </label>
            <label className="field">
              <span>客户端地址</span>
              <Input
                name="server_host"
                placeholder="jp1.example.com"
                required
              />
            </label>
            <label className="field">
              <span>hy2 监听地址</span>
              <Input
                name="hy2_listen"
                defaultValue=":443"
                placeholder=":443 或 0.0.0.0:443"
              />
            </label>
            <label className="field">
              <span>对外端口</span>
              <Input
                name="server_port"
                type="number"
                min="1"
                max="65535"
                defaultValue={443}
                required
              />
            </label>
            <label className="field">
              <span>Clash 节点名</span>
              <Input name="client_name" placeholder="JP1 - 30M - hy2" />
            </label>
            <label className="field">
              <span>鉴权 Token</span>
              <Input name="auth_token" placeholder="留空自动生成" />
            </label>
            <label className="field">
              <span>上行带宽 Mbps</span>
              <Input
                name="bandwidth_up_mbps"
                type="number"
                min="1"
                defaultValue={30}
                required
              />
            </label>
            <label className="field">
              <span>下行带宽 Mbps</span>
              <Input
                name="bandwidth_down_mbps"
                type="number"
                min="1"
                defaultValue={30}
                required
              />
            </label>
            <label className="field">
              <span>SNI</span>
              <Input name="sni" placeholder="留空使用默认" />
            </label>
            <label className="checkbox">
              <input name="skip_cert_verify" type="checkbox" />
              <span>跳过证书校验</span>
            </label>
            <label className="field">
              <span>trafficStats 监听</span>
              <Input
                name="traffic_stats_listen"
                defaultValue=":9999"
                required
              />
            </label>
            <label className="field">
              <span>trafficStats URL</span>
              <Input name="traffic_stats_url" placeholder="留空自动推导" />
            </label>
            <label className="field">
              <span>trafficStats Secret</span>
              <Input name="traffic_stats_secret" placeholder="留空自动生成" />
            </label>
            <label className="field">
              <span>轮询间隔（秒）</span>
              <Input
                name="poll_interval_seconds"
                type="number"
                min="10"
                max="30"
                defaultValue={15}
                required
              />
            </label>
            <label className="checkbox">
              <input name="enabled" type="checkbox" defaultChecked />
              <span>启用节点</span>
            </label>
            <SubmitButton variant="default">创建节点</SubmitButton>
          </ActionForm>
        </details>
      </section>

      <section className="panel-card compact-create-panel">
        <details>
          <summary className="compact-create-summary">
            <h3>新增自定义订阅节点</h3>
          </summary>
          <CustomNodeForm />
        </details>
      </section>

      <section className="panel-card dense-panel">
        <div className="section-title">
          <h3>节点列表</h3>
          <span className="status-pill status-pill--neutral">
            {nodes.length} 个节点
          </span>
        </div>
        <FilterList
          className="entity-table entity-table--nodes"
          placeholder="搜索节点、地址、Slug…"
          statuses={[
            { value: "enabled", label: "已启用" },
            { value: "disabled", label: "已禁用" },
          ]}
          header={
            <div className="entity-table__head node-row-grid">
              <span>节点</span>
              <span>状态</span>
              <span>对外地址</span>
              <span>trafficStats</span>
              <span>在线/流</span>
              <span>最近同步</span>
              <span>操作</span>
            </div>
          }
          items={nodes.map((node) => {
            const isCustom = node.node_type === "custom";
            const proxyName = getNodeProxyName(node);
            const authUrl = buildNodeAuthUrl(
              node.slug,
              node.auth_token,
              origin,
            );
            const suggestedTrafficStatsUrl = buildTrafficStatsUrl(
              node.server_host,
              node.traffic_stats_listen,
            );

            return {
              id: node.id,
              text: `${node.name} ${node.slug} ${node.server_host} ${proxyName} ${isCustom ? "自定义 YAML custom" : "HY2"}`,
              status: node.enabled ? "enabled" : "disabled",
              content: (
                <details key={node.id} className="entity-table__item">
                  <summary className="entity-table__summary node-row-grid">
                    <span className="entity-main-cell">
                      <strong>{node.name}</strong>
                      <span className="muted mono">/{node.slug}</span>
                    </span>
                    <span className="badge-row entity-status-cell">
                      {getNodePills(node).map((pill) => (
                        <span key={pill.label} className={pill.className}>
                          {pill.label}
                        </span>
                      ))}
                    </span>
                    <span className="entity-code-cell">
                      {isCustom
                        ? proxyName
                        : `${node.server_host}:${node.server_port}`}
                      <small>
                        {isCustom ? "自定义订阅节点" : `hy2 ${node.hy2_listen}`}
                      </small>
                    </span>
                    <span className="entity-code-cell break-all">
                      {isCustom ? "不轮询" : node.traffic_stats_url}
                      <small>
                        {isCustom ? "仅订阅" : node.traffic_stats_listen}
                      </small>
                    </span>
                    <span className="entity-number-cell">
                      <strong>
                        {isCustom
                          ? "—"
                          : `${node.last_online_users} / ${node.last_stream_count}`}
                      </strong>
                      <span>{isCustom ? "无流量统计" : "用户 / 流"}</span>
                    </span>
                    <span className="entity-muted-cell">
                      {isCustom
                        ? "—"
                        : formatLocalDateTime(node.last_sync_ok_at)}
                      {!isCustom && node.last_error_at ? (
                        <small>
                          错误 {formatLocalDateTime(node.last_error_at)}
                        </small>
                      ) : null}
                    </span>
                    <span className="entity-expand-label">
                      <span className="when-closed">编辑</span>
                      <span className="when-open">收起</span>
                    </span>
                  </summary>
                  <div className="entity-table__details">
                    {isCustom ? (
                      <CustomNodeForm node={node} />
                    ) : (
                      <>
                        <div className="dense-code-grid">
                          <div className="dense-code-line">
                            <span>鉴权 URL</span>
                            <div className="copy-line">
                              <code>{authUrl}</code>
                              <CopyButton value={authUrl} />
                            </div>
                          </div>
                          <div className="dense-code-line">
                            <span>自动推导 trafficStats</span>
                            <code>{suggestedTrafficStatsUrl}</code>
                          </div>
                        </div>

                        <ActionForm
                          action={updateNodeAction}
                          className="dense-form-grid dense-form-grid--nodes"
                        >
                          <input name="id" type="hidden" value={node.id} />
                          <input name="node_type" type="hidden" value="hy2" />
                          <label className="field">
                            <span>Slug</span>
                            <Input
                              name="slug"
                              defaultValue={node.slug}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>显示名</span>
                            <Input
                              name="name"
                              defaultValue={node.name}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>客户端地址</span>
                            <Input
                              name="server_host"
                              defaultValue={node.server_host}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>hy2 监听地址</span>
                            <Input
                              name="hy2_listen"
                              defaultValue={node.hy2_listen}
                              placeholder=":443 或 0.0.0.0:443"
                            />
                          </label>
                          <label className="field">
                            <span>对外端口</span>
                            <Input
                              name="server_port"
                              type="number"
                              min="1"
                              max="65535"
                              defaultValue={node.server_port}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>Clash 节点名</span>
                            <Input
                              name="client_name"
                              defaultValue={node.client_name}
                            />
                          </label>
                          <label className="field">
                            <span>鉴权 Token</span>
                            <Input
                              name="auth_token"
                              defaultValue={node.auth_token}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>上行带宽 Mbps</span>
                            <Input
                              name="bandwidth_up_mbps"
                              type="number"
                              min="1"
                              defaultValue={node.bandwidth_up_mbps}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>下行带宽 Mbps</span>
                            <Input
                              name="bandwidth_down_mbps"
                              type="number"
                              min="1"
                              defaultValue={node.bandwidth_down_mbps}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>SNI</span>
                            <Input name="sni" defaultValue={node.sni ?? ""} />
                          </label>
                          <label className="checkbox">
                            <input
                              name="skip_cert_verify"
                              type="checkbox"
                              defaultChecked={Boolean(node.skip_cert_verify)}
                            />
                            <span>跳过证书校验</span>
                          </label>
                          <label className="field">
                            <span>trafficStats 监听</span>
                            <Input
                              name="traffic_stats_listen"
                              defaultValue={node.traffic_stats_listen}
                              required
                            />
                          </label>
                          <label className="field">
                            <span>trafficStats URL</span>
                            <Input
                              name="traffic_stats_url"
                              defaultValue={node.traffic_stats_url}
                            />
                          </label>
                          <label className="field">
                            <span>trafficStats Secret</span>
                            <Input
                              name="traffic_stats_secret"
                              defaultValue={node.traffic_stats_secret}
                              placeholder="留空保持当前值"
                            />
                          </label>
                          <label className="field">
                            <span>轮询间隔（秒）</span>
                            <Input
                              name="poll_interval_seconds"
                              type="number"
                              min="10"
                              max="30"
                              defaultValue={node.poll_interval_seconds}
                              required
                            />
                          </label>
                          <label className="checkbox">
                            <input
                              name="enabled"
                              type="checkbox"
                              defaultChecked={Boolean(node.enabled)}
                            />
                            <span>启用节点</span>
                          </label>
                          <SubmitButton variant="outline">
                            保存节点
                          </SubmitButton>
                        </ActionForm>

                        <details className="config-collapse">
                          <summary>查看 hy2 config.yaml</summary>
                          <pre>{buildNodeHy2Config(node, origin)}</pre>
                          <a
                            className={buttonVariants({
                              variant: "outline",
                              size: "sm",
                            })}
                            href={`/api/admin/nodes/${node.slug}/config`}
                          >
                            下载 hy2 config.yaml
                          </a>
                        </details>

                        {node.last_error_message ? (
                          <p className="error-text">
                            {node.last_error_message}
                          </p>
                        ) : null}
                      </>
                    )}

                    <div className="entity-action-strip">
                      <ActionForm action={deleteNodeAction}>
                        <input name="id" type="hidden" value={node.id} />
                        <SubmitButton
                          variant="destructive"
                          confirm={`将永久删除节点「${node.name}」及其面板配置。`}
                        >
                          删除节点
                        </SubmitButton>
                      </ActionForm>
                    </div>
                  </div>
                </details>
              ),
            };
          })}
        />
      </section>
    </main>
  );
}