import AddOutlined from "@mui/icons-material/AddOutlined";
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import LinkOutlined from "@mui/icons-material/LinkOutlined";
import TextField from "@mui/material/TextField";
import { formatMillis } from "@/shared/utils/time.js";
import { AdminFormDialog, AdminFormFieldGrid, AdminFormSection } from "@/shared/ui/AdminFormDialog.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import {
  AdminActionIconButton,
  AdminListBody,
  AdminListPage,
  AdminListToolbar,
  AdminRowActions
} from "@/shared/ui/AdminListLayout.jsx";
import { useH5ConfigPage } from "@/features/app-config/hooks/useH5ConfigPage.js";
import styles from "@/features/app-config/app-config.module.css";

const baseColumns = [
  {
    key: "label",
    label: "配置项",
    width: "minmax(180px, 0.8fr)"
  },
  {
    key: "key",
    label: "Key",
    width: "minmax(200px, 0.9fr)"
  },
  {
    key: "url",
    label: "H5链接",
    render: (item) => <span className={styles.linkText}>{item.url || "-"}</span>,
    width: "minmax(360px, 1.8fr)"
  },
  {
    key: "updatedAtMs",
    label: "更新时间",
    render: (item) => formatMillis(item.updatedAtMs),
    width: "minmax(170px, 0.8fr)"
  }
];

export function H5ConfigPage() {
  const page = useH5ConfigPage();
  const items = page.data.items || [];
  const saving = page.loadingAction === "create" || page.loadingAction === "edit";
  const columns = page.abilities.canUpdate
    ? [
        ...baseColumns,
        {
          key: "actions",
          label: "操作",
          render: (item) => <H5LinkActions item={item} page={page} />,
          width: "minmax(124px, 0.5fr)"
        }
      ]
    : baseColumns;

  return (
    <AdminListPage>
      <AdminListToolbar
        actions={
          page.abilities.canUpdate ? (
            <Button startIcon={<AddOutlined fontSize="small" />} variant="primary" onClick={page.openCreate}>
              新增H5配置
            </Button>
          ) : null
        }
      />
      <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
        <AdminListBody>
          <DataTable
            columns={columns}
            items={items}
            minWidth="980px"
            pagination={{
              itemCount: items.length,
              page: 1,
              pageSize: Math.max(items.length, 1),
              total: page.data.total ?? items.length
            }}
            rowKey={(item) => item.key}
          />
        </AdminListBody>
      </DataState>

      <AdminFormDialog
        loading={saving}
        open={Boolean(page.activeAction)}
        submitDisabled={!page.abilities.canUpdate || saving}
        title={page.editingItem ? "编辑H5配置" : "新增H5配置"}
        onClose={page.closeEdit}
        onSubmit={page.submitEdit}
      >
        <AdminFormSection title="链接信息">
          <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
            <TextField
              autoFocus
              disabled={!page.abilities.canUpdate}
              label="配置项"
              required
              value={page.form.label}
              onChange={(event) => page.setForm({ ...page.form, label: event.target.value })}
            />
            <TextField
              disabled={!page.abilities.canUpdate || Boolean(page.editingItem)}
              label="key"
              required
              value={page.form.key}
              onChange={(event) => page.setForm({ ...page.form, key: event.target.value })}
            />
            <TextField
              className={styles.formWideField}
              disabled={!page.abilities.canUpdate}
              label="H5链接"
              required
              value={page.form.url}
              onChange={(event) => page.setForm({ ...page.form, url: event.target.value })}
            />
          </AdminFormFieldGrid>
        </AdminFormSection>
      </AdminFormDialog>
    </AdminListPage>
  );
}

function H5LinkActions({ item, page }) {
  return (
    <AdminRowActions>
      <AdminActionIconButton label="编辑" onClick={() => page.openEdit(item)}>
        {item.url ? <LinkOutlined fontSize="small" /> : <EditOutlined fontSize="small" />}
      </AdminActionIconButton>
      <AdminActionIconButton
        label="删除"
        disabled={page.loadingAction === `delete:${item.key}`}
        onClick={() => page.removeH5Link(item)}
      >
        <DeleteOutlineOutlined fontSize="small" />
      </AdminActionIconButton>
    </AdminRowActions>
  );
}
