<template>
  <div class="page-container">
    <div class="log-container">
      <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
        <a-tab-pane key="operation" :tab="t('log.operationLog')">
          <ProTable
            ref="operationTableRef"
            :key="'operation-' + operationRefreshKey"
            :columns="operationColumns"
            :request="loadOperationLogs"
            :toolbar="{ title: t('log.operationLog') }"
          >
            <template #toolbar-actions>
              <a-button danger @click="handleClearOperationLog">
                <DeleteOutlined /> {{ t("log.clearLog") }}
              </a-button>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <a-tag :color="actionColorMap[record.action] || 'default'">
                  {{ t(`log.actionTypes.${record.action}`) || record.action }}
                </a-tag>
              </template>
              <template v-if="column.key === 'status'">
                <ProStatus :value="record.status" :status-map="logStatusMap" />
              </template>
              <template v-if="column.key === 'duration'">
                <span
                  :style="{
                    color:
                      record.duration > 300
                        ? '#ff4d4f'
                        : record.duration > 100
                          ? '#faad14'
                          : '#52c41a',
                  }"
                >
                  {{ record.duration }}ms
                </span>
              </template>
            </template>
          </ProTable>
        </a-tab-pane>

        <a-tab-pane key="login" :tab="t('log.loginLog')">
          <ProTable
            ref="loginTableRef"
            :key="'login-' + loginRefreshKey"
            :columns="loginColumns"
            :request="loadLoginLogs"
            :toolbar="{ title: t('log.loginLog') }"
          >
            <template #toolbar-actions>
              <a-button danger @click="handleClearLoginLog">
                <DeleteOutlined /> {{ t("log.clearLog") }}
              </a-button>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <ProStatus :value="record.status" :status-map="logStatusMap" />
              </template>
            </template>
          </ProTable>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ProTableColumn, ProStatusMap } from "@/types/pro";

import { DeleteOutlined } from "@antdv-next/icons";
import { message, Modal } from "antdv-next";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";

import {
  getOperationLogList,
  getLoginLogList,
  clearOperationLog,
  clearLoginLog,
} from "@/api/log";
import ProStatus from "@/components/Pro/ProStatus/index.vue";
import ProTable from "@/components/Pro/ProTable/index.vue";

const { t } = useI18n();

const logStatusMap = computed<ProStatusMap>(() => ({
  success: { text: t("log.success"), color: "#52c41a" },
  fail: { text: t("log.fail"), color: "#ff4d4f" },
}));

const activeTab = ref("operation");
const operationRefreshKey = ref(0);
const loginRefreshKey = ref(0);

const actionColorMap: Record<string, string> = {
  login: "blue",
  logout: "default",
  create: "green",
  update: "orange",
  delete: "red",
  export: "purple",
  import: "cyan",
  other: "default",
};

// operation log columns
const operationColumns = computed<ProTableColumn[]>(() => [
  {
    title: t("log.operationUser"),
    dataIndex: "username",
    key: "username",
    width: 100,
    search: true,
    searchType: "input",
  },
  {
    title: t("log.operationModule"),
    dataIndex: "module",
    key: "module",
    width: 110,
    search: true,
    searchType: "select",
    searchOptions: [
      { label: t("log.modules.userManagement"), value: "userManagement" },
      { label: t("log.modules.roleManagement"), value: "roleManagement" },
      { label: t("log.modules.menuManagement"), value: "menuManagement" },
      { label: t("log.modules.dictionary"), value: "dictionary" },
      { label: t("log.modules.systemLogin"), value: "systemLogin" },
      { label: t("log.modules.profile"), value: "profile" },
      { label: t("log.modules.dashboard"), value: "dashboard" },
    ],
  },
  {
    title: t("log.operationType"),
    dataIndex: "action",
    key: "action",
    width: 90,
    search: true,
    searchType: "select",
    searchOptions: [
      { label: t("log.actionTypes.login"), value: "login" },
      { label: t("log.actionTypes.logout"), value: "logout" },
      { label: t("log.actionTypes.create"), value: "create" },
      { label: t("log.actionTypes.update"), value: "update" },
      { label: t("log.actionTypes.delete"), value: "delete" },
      { label: t("log.actionTypes.export"), value: "export" },
    ],
  },
  {
    title: t("log.operationDescription"),
    dataIndex: "description",
    key: "description",
    ellipsis: true,
  },
  {
    title: t("log.requestMethod"),
    dataIndex: "method",
    key: "method",
    width: 90,
  },
  {
    title: t("log.ipAddress"),
    dataIndex: "ip",
    key: "ip",
    width: 130,
  },
  {
    title: t("common.status"),
    dataIndex: "status",
    key: "status",
    width: 80,
    search: true,
    searchType: "select",
    searchOptions: [
      { label: t("log.success"), value: "success" },
      { label: t("log.fail"), value: "fail" },
    ],
  },
  {
    title: t("log.duration"),
    dataIndex: "duration",
    key: "duration",
    width: 80,
  },
  {
    title: t("log.operationTime"),
    dataIndex: "createTime",
    key: "createTime",
    width: 170,
  },
]);

// login log columns
const loginColumns = computed<ProTableColumn[]>(() => [
  {
    title: t("log.username"),
    dataIndex: "username",
    key: "username",
    width: 120,
    search: true,
    searchType: "input",
  },
  {
    title: t("log.ipAddress"),
    dataIndex: "ip",
    key: "ip",
    width: 140,
    search: true,
    searchType: "input",
  },
  {
    title: t("log.browser"),
    dataIndex: "browser",
    key: "browser",
    width: 130,
  },
  {
    title: t("log.os"),
    dataIndex: "os",
    key: "os",
    width: 130,
  },
  {
    title: t("common.status"),
    dataIndex: "status",
    key: "status",
    width: 80,
    search: true,
    searchType: "select",
    searchOptions: [
      { label: t("log.success"), value: "success" },
      { label: t("log.fail"), value: "fail" },
    ],
  },
  {
    title: t("log.message"),
    dataIndex: "message",
    key: "message",
    ellipsis: true,
  },
  {
    title: t("log.loginTime"),
    dataIndex: "createTime",
    key: "createTime",
    width: 170,
  },
]);

const handleTabChange = () => {};

const loadOperationLogs = async (params: Record<string, unknown>) => {
  try {
    const response = await getOperationLogList({
      username: params.username as string,
      module: params.module as string,
      action: params.action as string,
      status: params.status as string,
      page: params.current as number,
      pageSize: params.pageSize as number,
    });
    if (response.code === 200) {
      return {
        data: response.data.list,
        total: response.data.total,
        success: true,
      };
    }
  } catch (error: unknown) {
    console.error(t("log.loadOperationLogFailed"), (error as Error).message);
  }
  return { data: [], total: 0, success: false };
};

const loadLoginLogs = async (params: Record<string, unknown>) => {
  try {
    const response = await getLoginLogList({
      username: params.username as string,
      ip: params.ip as string,
      status: params.status as string,
      page: params.current as number,
      pageSize: params.pageSize as number,
    });
    if (response.code === 200) {
      return {
        data: response.data.list,
        total: response.data.total,
        success: true,
      };
    }
  } catch (error: unknown) {
    console.error(t("log.loadLoginLogFailed"), (error as Error).message);
  }
  return { data: [], total: 0, success: false };
};

const handleClearOperationLog = () => {
  Modal.confirm({
    title: t("log.confirmClear"),
    content: t("log.confirmClearOperation"),
    okType: "danger",
    onOk: async () => {
      try {
        const response = await clearOperationLog();
        if (response.code === 200) {
          message.success(t("log.clearSuccess"));
          operationRefreshKey.value++;
        }
      } catch (_error: unknown) {
        message.error(t("log.clearFailed"));
      }
    },
  });
};

const handleClearLoginLog = () => {
  Modal.confirm({
    title: t("log.confirmClear"),
    content: t("log.confirmClearLogin"),
    okType: "danger",
    onOk: async () => {
      try {
        const response = await clearLoginLog();
        if (response.code === 200) {
          message.success(t("log.clearSuccess"));
          loginRefreshKey.value++;
        }
      } catch (_error: unknown) {
        message.error(t("log.clearFailed"));
      }
    },
  });
};
</script>

<style scoped lang="scss">
.log-container {
  background: var(--color-bg-container);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;

  :deep(.ant-tabs) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  :deep(.ant-tabs-content-holder) {
    flex: 1;
    min-height: 0;
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }

  :deep(.ant-tabs-tabpane) {
    height: 100%;
  }

  :deep(.ant-tabs-nav) {
    margin-bottom: 8px;
  }

  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-thead > tr > td) {
    background: var(--color-fill-quaternary);
  }
}
</style>
