import { useEffect, useMemo, useState } from "react";
import {
  App as AntApp,
  Button,
  Card,
  Form,
  Input,
  Modal,
  Popconfirm,
  Select,
  Space,
  Table,
  Tag,
  Typography,
} from "antd";
import {
  EditOutlined,
  PlusOutlined,
  ReloadOutlined,
  DeleteOutlined,
  KeyOutlined,
  StopOutlined,
  CheckOutlined,
} from "@ant-design/icons";
import {
  AgentAccount,
  Role,
  Session,
  createAgent,
  deleteAgent,
  listAgents,
  listRoles,
  rotateAgentSecret,
  updateAgent,
} from "./api";
import { permLabel } from "./agentPerms";

type FormValues = {
  name: string;
  role_id: number;
  app_slugs: string[];
};

export function AgentUsersPage(props: {
  session: Session;
  busy: boolean;
  setBusy: (v: boolean) => void;
  setError: (v: string) => void;
  setInfo: (v: string) => void;
}) {
  const { session, busy, setBusy, setError, setInfo } = props;
  const { message, modal } = AntApp.useApp();
  const [agents, setAgents] = useState<AgentAccount[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<AgentAccount | null>(null);
  const [form] = Form.useForm<FormValues>();
  const roleId = Form.useWatch("role_id", form);

  const selectedRole = useMemo(
    () => roles.find((r) => r.role_id === roleId),
    [roles, roleId]
  );

  async function refresh() {
    setLoading(true);
    try {
      const [a, r] = await Promise.all([listAgents(session), listRoles(session)]);
      setAgents(a.items || []);
      setRoles(r.items || []);
    } catch (e: any) {
      const msg = e.message || String(e);
      setError(msg);
      message.error(msg);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session.accessToken]);

  function openCreate() {
    setEditing(null);
    const pref =
      roles.find((x) => x.code === "生成发布" || x.code === "publisher") ||
      roles.find((x) => x.code === "运维" || x.code === "operator") ||
      roles[0];
    form.resetFields();
    form.setFieldsValue({
      name: "",
      role_id: pref?.role_id,
      app_slugs: [],
    });
    setOpen(true);
  }

  function openEdit(a: AgentAccount) {
    setEditing(a);
    form.setFieldsValue({
      name: a.name || "",
      role_id: a.role_id || undefined,
      app_slugs: a.app_slugs || [],
    });
    setOpen(true);
  }

  async function onSubmit(activate = false) {
    const values = await form.validateFields();
    setBusy(true);
    try {
      if (!editing) {
        const res = await createAgent(session, {
          name: values.name.trim(),
          role_id: values.role_id,
          app_slugs: values.app_slugs || [],
        });
        modal.success({
          title: "用户已创建",
          content: (
            <div>
              <p>请立即保存 client_secret（只显示一次）：</p>
              <Typography.Paragraph copyable code>
                {res.client_secret}
              </Typography.Paragraph>
            </div>
          ),
        });
        setInfo(`已创建用户「${values.name.trim()}」`);
      } else {
        await updateAgent(session, editing.agent_id, {
          name: values.name.trim(),
          role_id: values.role_id,
          app_slugs: values.app_slugs || [],
          ...(activate ? { status: "active" } : {}),
        });
        message.success(activate ? "已保存并启用" : "已保存");
        setInfo(activate ? `已保存并启用「${values.name.trim()}」` : `已保存「${values.name.trim()}」`);
      }
      setOpen(false);
      await refresh();
    } catch (e: any) {
      const msg = e.message || String(e);
      setError(msg);
      message.error(msg);
    } finally {
      setBusy(false);
    }
  }

  const statusTag = (s: string) => {
    if (s === "active") return <Tag color="success">active</Tag>;
    if (s === "pending") return <Tag color="warning">pending</Tag>;
    return <Tag>{s}</Tag>;
  };

  return (
    <Card
      title="用户管理"
      extra={
        <Space>
          <Button icon={<ReloadOutlined />} onClick={refresh} loading={loading}>
            刷新
          </Button>
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate} disabled={!roles.length}>
            新建用户
          </Button>
        </Space>
      }
    >
      <Typography.Paragraph type="secondary" style={{ marginTop: 0 }}>
        当前租户 #{session.tenantId}。用户挂在本租户下；同角色跨公司靠租户隔离，不靠再拆一套角色。
        角色请在「角色管理」中维护。
      </Typography.Paragraph>

      <Table
        rowKey="agent_id"
        loading={loading || busy}
        dataSource={agents}
        pagination={{ pageSize: 10 }}
        columns={[
          {
            title: "用户名称",
            dataIndex: "name",
            render: (v, r) => (
              <div>
                <strong>{v || "—"}</strong>
                {r.host_key ? (
                  <div>
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                      host: {r.host_key}
                    </Typography.Text>
                  </div>
                ) : null}
              </div>
            ),
          },
          {
            title: "client_id",
            dataIndex: "client_id",
            render: (v) => <Typography.Text code>{v}</Typography.Text>,
          },
          { title: "状态", dataIndex: "status", width: 110, render: statusTag },
          {
            title: "角色",
            render: (_, r) => r.role_name || r.role_code || "—",
          },
          {
            title: "可访问模块",
            dataIndex: "app_slugs",
            render: (slugs: string[]) =>
              (slugs || []).length ? (
                <Space size={[4, 4]} wrap>
                  {(slugs || []).map((s) => (
                    <Tag key={s}>{s}</Tag>
                  ))}
                </Space>
              ) : (
                "—"
              ),
          },
          {
            title: "操作",
            width: 320,
            render: (_, a) => (
              <Space wrap>
                <Button size="small" icon={<EditOutlined />} onClick={() => openEdit(a)}>
                  编辑
                </Button>
                <Button
                  size="small"
                  icon={a.status === "active" ? <StopOutlined /> : <CheckOutlined />}
                  onClick={async () => {
                    const next = a.status === "active" ? "disabled" : "active";
                    if (next === "active" && !a.role_id && !(a.permissions || []).length) {
                      message.warning("请先编辑并分配角色后再启用");
                      return;
                    }
                    setBusy(true);
                    try {
                      await updateAgent(session, a.agent_id, { status: next });
                      message.success(`已设为 ${next}`);
                      setInfo(`已将「${a.name}」设为 ${next}`);
                      await refresh();
                    } catch (e: any) {
                      message.error(e.message || String(e));
                      setError(e.message || String(e));
                    } finally {
                      setBusy(false);
                    }
                  }}
                >
                  {a.status === "active" ? "停用" : "启用"}
                </Button>
                <Button
                  size="small"
                  icon={<KeyOutlined />}
                  onClick={async () => {
                    setBusy(true);
                    try {
                      const res = await rotateAgentSecret(session, a.agent_id);
                      modal.success({
                        title: "密钥已轮换",
                        content: (
                          <Typography.Paragraph copyable code>
                            {res.client_secret}
                          </Typography.Paragraph>
                        ),
                      });
                      setInfo(`已轮换「${a.name}」的 secret`);
                    } catch (e: any) {
                      message.error(e.message || String(e));
                      setError(e.message || String(e));
                    } finally {
                      setBusy(false);
                    }
                  }}
                >
                  轮换密钥
                </Button>
                <Popconfirm
                  title={`删除用户「${a.name}」？`}
                  onConfirm={async () => {
                    setBusy(true);
                    try {
                      await deleteAgent(session, a.agent_id);
                      message.success("已删除");
                      setInfo(`已删除「${a.name}」`);
                      await refresh();
                    } catch (e: any) {
                      message.error(e.message || String(e));
                      setError(e.message || String(e));
                    } finally {
                      setBusy(false);
                    }
                  }}
                >
                  <Button size="small" danger icon={<DeleteOutlined />}>
                    删除
                  </Button>
                </Popconfirm>
              </Space>
            ),
          },
        ]}
      />

      <Modal
        title={editing ? `编辑用户 #${editing.agent_id}` : "新建用户"}
        open={open}
        onCancel={() => setOpen(false)}
        confirmLoading={busy}
        width={640}
        destroyOnClose
        footer={[
          <Button key="cancel" onClick={() => setOpen(false)}>
            取消
          </Button>,
          editing ? (
            <Button key="activate" onClick={() => onSubmit(true)} loading={busy}>
              保存并启用
            </Button>
          ) : null,
          <Button key="ok" type="primary" onClick={() => onSubmit(false)} loading={busy}>
            {editing ? "保存修改" : "创建用户"}
          </Button>,
        ]}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 12 }}>
          <Form.Item label="用户名称" name="name" rules={[{ required: true, message: "请填写名称" }]}>
            <Input placeholder="例如：产线宿主 A" />
          </Form.Item>
          <Form.Item label="角色" name="role_id" rules={[{ required: true, message: "请选择角色" }]}>
            <Select
              placeholder="请选择角色"
              options={roles.map((r) => ({
                value: r.role_id,
                label: `${r.name}（${r.code}）`,
              }))}
            />
          </Form.Item>
          {selectedRole && (
            <Card size="small" title="角色权限预览" style={{ marginBottom: 16 }}>
              <Space size={[4, 4]} wrap>
                {(selectedRole.permissions || []).map((p) => (
                  <Tag key={p}>{permLabel(p)}</Tag>
                ))}
              </Space>
            </Card>
          )}
          <Form.Item
            label="可访问模块（可选）"
            name="app_slugs"
            extra="留空=可自由发布任意自建模块，无需再逐个授权。仅当需要限制范围时再填写白名单（或 * 表示全部）。"
          >
            <Select
              mode="tags"
              placeholder="可选限制：输入 slug 后回车；留空表示不限制"
              tokenSeparators={[","]}
              allowClear
            />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}
