import { useEffect, useState } from "react";
import { useDataProvider, useList } from "../../shared/hooks/dataHooks.js";
import { Alert } from "../../components/ui/alert";
import { Button } from "../../components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
import { ConfirmDialog, Field, PageHeader, PageState } from "../../shared/ui/ui.jsx";
import { useTitle } from "../../shared/hooks/hooks.js";

const namePattern = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
const tokenPattern = /^[A-Za-z0-9][A-Za-z0-9._-]{15,127}$/;
function TokenCell({ token, name }) {
  const [visible, setVisible] = useState(false);
  return (
    <div className="flex min-w-0 items-center gap-1">
      <code className="anywhere font-mono text-[13px]">
        {visible ? token : "••••••••••••"}
      </code>
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        aria-label={visible ? `隐藏 ${name} 的令牌` : `显示 ${name} 的令牌`}
        onClick={() => setVisible((current) => !current)}
      >
        <i className={visible ? "ri-eye-off-line" : "ri-eye-line"} aria-hidden="true" />
      </Button>
      {visible ? (
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`复制 ${token}`}
          onClick={() => navigator.clipboard?.writeText(token)}
        >
          <i className="ri-file-copy-line" aria-hidden="true" />
        </Button>
      ) : null}
    </div>
  );
}

function GatewayFormModal({ open, onClose, onSubmit, busy, error, initial }) {
  const editing = initial !== null;
  const [form, setForm] = useState({ name: "", endpoint: "", token: "" });
  useEffect(() => {
    if (!open) return;
    setForm(
      editing
        ? { name: initial.name, endpoint: initial.endpoint, token: "" }
        : { name: "", endpoint: "", token: "" },
    );
  }, [editing, initial, open]);
  const update = (key, value) =>
    setForm((current) => ({ ...current, [key]: value }));
  const token = form.token.trim();
  const valid =
    namePattern.test(form.name) &&
    /^https?:\/\/\S+$/.test(form.endpoint) &&
    (token === "" || tokenPattern.test(token));
  const nameInvalid = form.name !== "" && !namePattern.test(form.name);
  const endpointInvalid =
    form.endpoint !== "" && !/^https?:\/\/\S+$/.test(form.endpoint);
  const tokenInvalid = token !== "" && !tokenPattern.test(token);
  const mode = editing ? "edit" : "create";

  async function submit(event) {
    event.preventDefault();
    if (!valid) return;
    if (
      await onSubmit({
        name: form.name,
        endpoint: form.endpoint,
        token,
      })
    ) {
      setForm({ name: "", endpoint: "", token: "" });
      onClose();
    }
  }

  return (
    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
      <DialogContent>
        <DialogHeader><DialogTitle>{editing ? "编辑网关" : "注册网关"}</DialogTitle></DialogHeader>
        <form id={`gateway-${mode}-form`} onSubmit={submit} noValidate>
        {error ? (
          <Alert variant="destructive" className="mb-4">
            {error.message}
          </Alert>
        ) : null}
        <div className="space-y-4">
          <Field
            id={`gateway-${mode}-name`}
            label="名称"
            required
            error={nameInvalid ? "字母、数字与 . _ -，最长 64 字符" : undefined}
            helper={
              editing
                ? "改名会同步更新引用该网关的环境"
                : "网关唯一标识，如 gw-main"
            }
          >
            <Input
              id={`gateway-${mode}-name`}
              required
              maxLength={64}
              value={form.name}
              onChange={(event) => update("name", event.target.value)}
              placeholder="如 gw-main"
              aria-invalid={nameInvalid || undefined}
            />
          </Field>
          <Field
            id={`gateway-${mode}-endpoint`}
            label="Endpoint"
            required
            error={endpointInvalid ? "须为 http(s) URL" : undefined}
            helper="网关进程的可访问地址"
          >
            <Input
              id={`gateway-${mode}-endpoint`}
              required
              value={form.endpoint}
              onChange={(event) => update("endpoint", event.target.value)}
              placeholder="http://127.0.0.1:8081"
              aria-invalid={endpointInvalid || undefined}
            />
          </Field>
          <Field
            id={`gateway-${mode}-token`}
            label={editing ? "令牌（留空保持不变）" : "令牌（可选）"}
            error={
              tokenInvalid ? "至少 16 个字符，字母、数字与 . _ -" : undefined
            }
            helper={
              editing
                ? "填写时须与网关 GATEWAY_TOKEN 一致"
                : "填写则须与网关 GATEWAY_TOKEN 一致；留空由平台生成"
            }
          >
            <Input
              id={`gateway-${mode}-token`}
              maxLength={128}
              value={form.token}
              onChange={(event) => update("token", event.target.value)}
              placeholder={editing ? "留空保持现有令牌" : "留空由平台生成"}
              aria-invalid={tokenInvalid || undefined}
            />
          </Field>
        </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={onClose} disabled={busy}>取消</Button>
            <Button variant="default" type="submit" form={`gateway-${mode}-form`} disabled={!valid || busy}>
              {busy ? (editing ? "保存中…" : "注册中…") : editing ? "保存" : "注册网关"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

export function GatewayList() {
  const dataProvider = useDataProvider()("default");
  const { result, query } = useList({ resource: "gateways" });
  const error = query.error;
  const isPending = query.isPending;
  const gateways = result.data ?? [];
  const [createOpen, setCreateOpen] = useState(false);
  const [busy, setBusy] = useState("");
  const [createError, setCreateError] = useState(null);
  const [created, setCreated] = useState(null);
  const [editing, setEditing] = useState(null);
  const [editError, setEditError] = useState(null);
  const [deleting, setDeleting] = useState(null);
  useTitle("CreatorHub · 网关管理");

  async function createGateway(data) {
    setBusy("create");
    setCreateError(null);
    try {
      const { data: record } = await dataProvider.create({
        resource: "gateways",
        variables: data,
      });
      setCreated(record);
      await query.refetch();
      return true;
    } catch (reason) {
      setCreateError(reason);
      return false;
    } finally {
      setBusy("");
    }
  }

  async function updateGateway(data) {
    const currentName = editing.name;
    setBusy("edit");
    setEditError(null);
    try {
      await dataProvider.update({
        resource: "gateways",
        id: currentName,
        variables: data,
      });
      await query.refetch();
      setEditing(null);
      return true;
    } catch (reason) {
      setEditError(reason);
      return false;
    } finally {
      setBusy("");
    }
  }

  async function removeGateway() {
    const gateway = deleting;
    setBusy(gateway.name);
    try {
      await dataProvider.deleteOne({ resource: "gateways", id: gateway.name });
      await query.refetch();
      setDeleting(null);
    } finally {
      setBusy("");
    }
  }

  return (
    <div>
      <PageHeader
        icon="ri-git-branch-line"
        title="网关管理"
        description="注册宿主机 native browser gateway；令牌须与 gateway 进程的 GATEWAY_TOKEN 一致"
      >
        <Button variant="default" onClick={() => setCreateOpen(true)}>
          <i className="ri-add-line" aria-hidden="true" />
          注册网关
        </Button>
      </PageHeader>
      {created ? (
        <Alert variant="default" className="mb-4">
          网关 {created.name} 已注册。
          <span className="ml-1 inline-flex items-center gap-1">
            令牌 <code className="font-mono">{created.token}</code>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label={`复制 ${created.token}`}
              onClick={() => navigator.clipboard?.writeText(created.token)}
            >
              <i className="ri-file-copy-line" aria-hidden="true" />
            </Button>
          </span>
          <Button size="sm" onClick={() => setCreated(null)}>
            知道了
          </Button>
        </Alert>
      ) : null}
      {error ? (
        <Alert variant="destructive" className="mb-4">
          {error.message}
        </Alert>
      ) : null}
      <PageState
        pending={isPending}
        error={error}
        empty={gateways.length === 0}
        emptyText="暂无网关；注册后环境即可调度到该网关。"
      >
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>名称</TableHead>
              <TableHead>Endpoint</TableHead>
              <TableHead>令牌</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {gateways.map((gateway) => (
              <TableRow key={gateway.name}>
                <TableCell><span className="font-semibold">{gateway.name}</span></TableCell>
                <TableCell><code className="anywhere font-mono text-[13px]">{gateway.endpoint}</code></TableCell>
                <TableCell><TokenCell token={gateway.token} name={gateway.name} /></TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button variant="ghost" size="sm" aria-label={`编辑 ${gateway.name}`} disabled={busy === gateway.name || busy === "edit"} onClick={() => { setEditing(gateway); setEditError(null); }}>
                      <i className="ri-edit-line" aria-hidden="true" />
                      编辑
                    </Button>
                    <Button variant="destructive" size="sm" aria-label={`删除 ${gateway.name}`} disabled={busy === gateway.name || busy === "edit"} onClick={() => setDeleting(gateway)}>
                      <i className="ri-delete-bin-line" aria-hidden="true" />
                      删除
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </PageState>
      <GatewayFormModal
        open={createOpen}
        initial={null}
        onClose={() => {
          setCreateOpen(false);
          setCreateError(null);
        }}
        onSubmit={createGateway}
        busy={busy === "create"}
        error={createError}
      />
      <GatewayFormModal
        open={editing !== null}
        initial={editing}
        onClose={() => {
          setEditing(null);
          setEditError(null);
        }}
        onSubmit={updateGateway}
        busy={busy === "edit"}
        error={editError}
      />
      <ConfirmDialog
        open={deleting !== null}
        onClose={() => setDeleting(null)}
        onConfirm={removeGateway}
        title="删除网关"
        confirmLabel="确认删除"
        busy={busy === deleting?.name}
        body={`删除网关 ${deleting?.name}？仍被环境引用时删除会被拒绝。`}
      />
    </div>
  );
}