import { useCallback, useEffect, useMemo, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"
import {
  AppstoreOutlined,
  CloudServerOutlined,
  PlusOutlined,
  ReloadOutlined,
} from "@ant-design/icons"
import { Alert, Button, Col, Modal, Row, Space, Tag, Typography } from "antd"
import { PageSkeleton, type SkeletonSpec } from "../../utils/skeleton"
import { toast } from "../../utils/toast"
import ProductBatchCreateModal from "../components/ProductBatchCreateModal"
import ProductGroupSidebar, { type ProductGroupListItem } from "../components/ProductGroupSidebar"
import ProductQuickCreateModal from "../components/ProductQuickCreateModal"
import ProductStatsCards from "../components/ProductStatsCards"
import ProductTable from "../components/ProductTable"
import { listCloudServers, type CloudServer } from "../api/cloud_server"
import {
  checkProductGroupReadiness,
  deleteProduct,
  getZjmfFinanceProductConfig,
  listProducts,
  updateProduct,
  type Product,
  type ProductGroupReadiness,
  type ProductReadinessIssue,
  type ZjmfFinanceProductConfig,
} from "../api/product"
import {
  listCategories,
  listGroups,
  updateGroupVerificationRule,
  type OsOption,
  type ProductCategory,
} from "../api/product_catalog"

const { Title, Paragraph, Text } = Typography

const PAGE_SKELETON: SkeletonSpec[] = [
  { type: "header", title: 200, subtitle: 280 },
  { type: "card", h: 120 },
  { type: "table", rows: 6, cols: 6 },
]

export interface UpstreamStockSnapshot {
  label: string
  color: string
  stockPolicy: "unlimited" | "tracked"
  stock: number
  qty: number | null
  stockControl: boolean
  hidden: boolean
  retired: boolean
  syncedAt: string
  localUpdated: boolean
  error?: string
}

function toNumber(value: string | number | null | undefined) {
  if (value === null || value === undefined || value === "") return null
  const number = typeof value === "number" ? value : Number.parseFloat(String(value))
  return Number.isFinite(number) ? number : null
}

function truthyFlag(value: string | number | null | undefined) {
  if (typeof value === "number") return value !== 0
  return ["1", "true", "yes", "on"].includes(String(value ?? "").trim().toLowerCase())
}

function stockFromZjmfConfig(config: ZjmfFinanceProductConfig): Pick<UpstreamStockSnapshot, "stockPolicy" | "stock"> {
  if (!truthyFlag(config.product.stock_control)) {
    return { stockPolicy: "unlimited", stock: 0 }
  }
  const qty = toNumber(config.product.qty)
  return { stockPolicy: "tracked", stock: Math.max(0, Math.floor(qty ?? 0)) }
}

function stockSnapshotFromZjmfConfig(config: ZjmfFinanceProductConfig): UpstreamStockSnapshot {
  const stock = stockFromZjmfConfig(config)
  const stockControl = truthyFlag(config.product.stock_control)
  const qty = toNumber(config.product.qty)
  const label = !stockControl
    ? "库存不限"
    : qty === null
      ? "库存已控制，数量未知"
      : `上游库存 ${qty}`
  return {
    label,
    color: !stockControl ? "green" : qty === null ? "orange" : qty > 0 ? "green" : "red",
    stockPolicy: stock.stockPolicy,
    stock: stock.stock,
    qty,
    stockControl,
    hidden: truthyFlag(config.product.hidden),
    retired: truthyFlag(config.product.retired),
    syncedAt: new Date().toISOString(),
    localUpdated: false,
  }
}

export default function AdminProducts() {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  const [loading, setLoading] = useState(true)
  const [productsLoading, setProductsLoading] = useState(false)
  const [products, setProducts] = useState<Product[]>([])
  const [categories, setCategories] = useState<ProductCategory[]>([])
  const [groups, setGroups] = useState<ProductGroupListItem[]>([])
  const [groupOsOptionsById, setGroupOsOptionsById] = useState<Map<number, OsOption[]>>(new Map())
  const [cloudServers, setCloudServers] = useState<CloudServer[]>([])
  const [activeCategoryId, setActiveCategoryId] = useState<number | null>(null)
  const [activeGroupId, setActiveGroupId] = useState<number | null>(null)
  const [keyword, setKeyword] = useState("")
  const [createOpen, setCreateOpen] = useState(false)
  const [batchOpen, setBatchOpen] = useState(false)
  const [batchProcessing, setBatchProcessing] = useState(false)
  const [stockSyncing, setStockSyncing] = useState(false)
  const [upstreamStockSnapshots, setUpstreamStockSnapshots] = useState<Record<number, UpstreamStockSnapshot>>({})
  const [checkingReadiness, setCheckingReadiness] = useState(false)
  const [readinessOpen, setReadinessOpen] = useState(false)
  const [readiness, setReadiness] = useState<ProductGroupReadiness | null>(null)
  const queryGroupIdText = searchParams.get("group_id")

  const reloadMeta = useCallback(async (silent = false) => {
    if (!silent) setLoading(true)
    try {
      const [categoryRes, groupRes, cloudRes] = await Promise.all([
        listCategories(),
        listGroups(),
        listCloudServers(),
      ])
      const nextGroups = groupRes.data ?? []
      const nextOsOptionsById = new Map<number, OsOption[]>()
      const nextGroupRows = nextGroups.map(({ os_options, ...group }) => {
        const options = os_options ?? []
        nextOsOptionsById.set(group.id, options)
        return { ...group, os_count: options.length }
      })

      setCategories(categoryRes.data ?? [])
      setGroups(nextGroupRows)
      setGroupOsOptionsById(nextOsOptionsById)
      setCloudServers(cloudRes.data ?? [])
      setActiveGroupId((prev) => {
        if (prev !== null && nextGroupRows.some((group) => group.id === prev)) return prev
        return nextGroupRows[0]?.id ?? null
      })
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
      toast.error(detail || "加载失败")
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    void reloadMeta()
  }, [reloadMeta])

  useEffect(() => {
    const queryGroupId = Number(queryGroupIdText)
    if (Number.isFinite(queryGroupId) && queryGroupId > 0 && groups.some((group) => group.id === queryGroupId)) {
      setActiveGroupId(queryGroupId)
      setActiveCategoryId(groups.find((group) => group.id === queryGroupId)?.category_id ?? null)
      return
    }
    if (activeGroupId) {
      const group = groups.find((item) => item.id === activeGroupId)
      if (group && group.category_id !== activeCategoryId) {
        setActiveCategoryId(group.category_id)
      }
      return
    }
    if (groups.length > 0) {
      setActiveGroupId(groups[0].id)
      setActiveCategoryId(groups[0].category_id)
    } else if (categories.length > 0 && activeCategoryId === null) {
      setActiveCategoryId(categories[0].id)
    }
  }, [activeCategoryId, activeGroupId, categories, groups, queryGroupIdText])

  const reloadProducts = useCallback(async (groupId: number, silent = false) => {
    if (!silent) setProductsLoading(true)
    try {
      const res = await listProducts(groupId)
      setProducts(
        (res.data ?? [])
          .filter((product) => product.group_id === groupId)
          .sort((a, b) => a.sort_order - b.sort_order || a.id - b.id),
      )
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
      toast.error(detail || "加载产品失败")
      setProducts([])
    } finally {
      setProductsLoading(false)
    }
  }, [])

  useEffect(() => {
    if (!activeGroupId) {
      setProducts([])
      setUpstreamStockSnapshots({})
      return
    }
    setUpstreamStockSnapshots({})
    void reloadProducts(activeGroupId)
  }, [activeGroupId, reloadProducts])

  const groupMap = useMemo(() => {
    const map = new Map<number, ProductGroupListItem>()
    groups.forEach((group) => map.set(group.id, group))
    return map
  }, [groups])

  const groupCountByCategory = useMemo(() => {
    const map = new Map<number, number>()
    groups.forEach((group) => {
      map.set(group.category_id, (map.get(group.category_id) ?? 0) + 1)
    })
    return map
  }, [groups])

  const activeCategory = useMemo(
    () => categories.find((category) => category.id === activeCategoryId) ?? null,
    [activeCategoryId, categories],
  )

  const activeGroup = useMemo(
    () => (activeGroupId ? groupMap.get(activeGroupId) ?? null : null),
    [activeGroupId, groupMap],
  )

  const currentGroupProducts = useMemo(
    () => (activeGroupId ? products.filter((product) => product.group_id === activeGroupId) : []),
    [activeGroupId, products],
  )

  const selectGroup = (group: ProductGroupListItem) => {
    if (group.id === activeGroupId) return
    setActiveCategoryId(group.category_id)
    setActiveGroupId(group.id)
    setSearchParams({ group_id: String(group.id) }, { replace: true })
    setProducts([])
    setKeyword("")
    setProductsLoading(true)
  }

  const openCreate = () => {
    if (groups.length === 0) {
      toast.error("请先建立至少一个产品组")
      return
    }
    setCreateOpen(true)
  }

  const removeProduct = async (product: Product) => {
    try {
      await deleteProduct(product.id)
      toast.success("已删除")
      if (activeGroupId) await reloadProducts(activeGroupId, true)
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
      toast.error(detail || "删除失败")
    }
  }

  const updateProductStatusBatch = async (targetProducts: Product[], status: Product["status"]) => {
    if (targetProducts.length === 0 || !activeGroupId) return
    const rowsToUpdate = targetProducts.filter((product) => product.status !== status)
    if (rowsToUpdate.length === 0) {
      toast.info(status === "active" ? "所选产品已经是上架状态" : "所选产品已经是下架状态")
      return
    }
    setBatchProcessing(true)
    const failures: string[] = []
    try {
      for (const product of rowsToUpdate) {
        try {
          await updateProduct(product.id, { status })
        } catch (e: unknown) {
          const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
          failures.push(`${product.name}: ${detail || "处理失败"}`)
        }
      }
      await reloadProducts(activeGroupId, true)
      const success = rowsToUpdate.length - failures.length
      if (success > 0) {
        toast.success(`${status === "active" ? "上架" : "下架"}成功 ${success} 个产品`)
      }
      if (failures.length > 0) {
        Modal.warning({
          title: `部分产品${status === "active" ? "上架" : "下架"}失败`,
          content: (
            <Space orientation="vertical">
              {failures.slice(0, 8).map((item) => <Text key={item}>{item}</Text>)}
              {failures.length > 8 && <Text type="secondary">还有 {failures.length - 8} 条未展示</Text>}
            </Space>
          ),
        })
      }
    } finally {
      setBatchProcessing(false)
    }
  }

  const updateProductVerificationBatch = async (targetProducts: Product[], requiresRealName: boolean) => {
    if (targetProducts.length === 0 || !activeGroupId) return
    const rowsToUpdate = targetProducts.filter((product) => product.requires_real_name !== requiresRealName)
    if (rowsToUpdate.length === 0) {
      toast.info(requiresRealName ? "所选产品已经要求实名" : "所选产品已经不要求实名")
      return
    }
    setBatchProcessing(true)
    const failures: string[] = []
    try {
      for (const product of rowsToUpdate) {
        try {
          await updateProduct(product.id, { requires_real_name: requiresRealName })
        } catch (e: unknown) {
          const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
          failures.push(`${product.name}: ${detail || "处理失败"}`)
        }
      }
      await reloadProducts(activeGroupId, true)
      const success = rowsToUpdate.length - failures.length
      if (success > 0) {
        toast.success(`${requiresRealName ? "已设置实名要求" : "已取消实名要求"} ${success} 个产品`)
      }
      if (failures.length > 0) {
        Modal.warning({
          title: "部分产品实名规则处理失败",
          content: (
            <Space orientation="vertical">
              {failures.slice(0, 8).map((item) => <Text key={item}>{item}</Text>)}
              {failures.length > 8 && <Text type="secondary">还有 {failures.length - 8} 条未展示</Text>}
            </Space>
          ),
        })
      }
    } finally {
      setBatchProcessing(false)
    }
  }

  const updateCurrentGroupVerificationRule = async (requiresRealName: boolean) => {
    if (!activeGroupId) return
    setBatchProcessing(true)
    try {
      const res = await updateGroupVerificationRule(activeGroupId, {
        requires_real_name: requiresRealName,
        apply_to_products: true,
      })
      const updated = res.data?.updated_products ?? 0
      toast.success(`${requiresRealName ? "已设置整组需实名" : "已取消整组实名"}，同步 ${updated} 个产品`)
      await reloadMeta(true)
      await reloadProducts(activeGroupId, true)
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
      toast.error(detail || "更新产品组实名规则失败")
    } finally {
      setBatchProcessing(false)
    }
  }

  const deleteProductsBatch = async (targetProducts: Product[]) => {
    if (targetProducts.length === 0 || !activeGroupId) return
    setBatchProcessing(true)
    const failures: string[] = []
    try {
      for (const product of targetProducts) {
        try {
          await deleteProduct(product.id)
        } catch (e: unknown) {
          const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
          failures.push(`${product.name}: ${detail || "删除失败"}`)
        }
      }
      await reloadProducts(activeGroupId, true)
      const success = targetProducts.length - failures.length
      if (success > 0) toast.success(`已删除 ${success} 个产品`)
      if (failures.length > 0) {
        Modal.warning({
          title: "部分产品删除失败",
          content: (
            <Space orientation="vertical">
              {failures.slice(0, 8).map((item) => <Text key={item}>{item}</Text>)}
              {failures.length > 8 && <Text type="secondary">还有 {failures.length - 8} 条未展示</Text>}
            </Space>
          ),
        })
      }
    } finally {
      setBatchProcessing(false)
    }
  }

  const syncZjmfStockBatch = async (targetProducts: Product[]) => {
    if (targetProducts.length === 0 || !activeGroupId) return
    const rowsToSync = targetProducts.filter((product) =>
      product.api_type === "zjmf_finance" &&
      product.cloud_server_id &&
      String(product.api_identifier ?? "").trim()
    )
    if (rowsToSync.length === 0) {
      toast.info("没有可同步的魔方财务产品")
      return
    }

    setStockSyncing(true)
    let fetched = 0
    let updated = 0
    const failures: string[] = []
    try {
      for (const product of rowsToSync) {
        try {
          const res = await getZjmfFinanceProductConfig(product.cloud_server_id!, product.api_identifier!)
          const config = res.data
          if (!config) throw new Error("接口没有返回配置")

          const snapshot = stockSnapshotFromZjmfConfig(config)
          let localUpdated = false
          const changed =
            product.stock_policy !== snapshot.stockPolicy ||
            Number(product.stock ?? 0) !== snapshot.stock
          if (changed) {
            await updateProduct(product.id, {
              stock_policy: snapshot.stockPolicy,
              stock: snapshot.stock,
            })
            localUpdated = true
            updated += 1
          }
          fetched += 1
          setUpstreamStockSnapshots((prev) => ({
            ...prev,
            [product.id]: { ...snapshot, localUpdated },
          }))
        } catch (e: unknown) {
          const detail =
            (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail ||
            (e as Error)?.message ||
            "同步失败"
          failures.push(`${product.name}: ${detail}`)
          setUpstreamStockSnapshots((prev) => ({
            ...prev,
            [product.id]: {
              label: "同步失败",
              color: "red",
              stockPolicy: product.stock_policy,
              stock: Number(product.stock ?? 0),
              qty: null,
              stockControl: false,
              hidden: false,
              retired: false,
              syncedAt: new Date().toISOString(),
              localUpdated: false,
              error: detail,
            },
          }))
        }
      }

      if (updated > 0) await reloadProducts(activeGroupId, true)
      if (fetched > 0) {
        toast.success(`库存同步完成：已读取 ${fetched} 个，更新本地库存 ${updated} 个`)
      }
      if (failures.length > 0) {
        Modal.warning({
          title: "部分产品库存同步失败",
          content: (
            <Space orientation="vertical">
              {failures.slice(0, 8).map((item) => <Text key={item}>{item}</Text>)}
              {failures.length > 8 && <Text type="secondary">还有 {failures.length - 8} 条未展示</Text>}
            </Space>
          ),
        })
      }
    } finally {
      setStockSyncing(false)
    }
  }

  const checkCurrentGroup = async () => {
    if (!activeGroupId) return
    setCheckingReadiness(true)
    try {
      const res = await checkProductGroupReadiness(activeGroupId)
      setReadiness(res.data ?? null)
      setReadinessOpen(true)
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
      toast.error(detail || "检测失败")
    } finally {
      setCheckingReadiness(false)
    }
  }

  return (
    <PageSkeleton loading={loading} spec={PAGE_SKELETON} gap={24}>
      <Space orientation="vertical" size={20} style={{ width: "100%" }}>
        <Row gutter={[16, 16]} align="bottom" justify="space-between">
          <Col>
            <Title level={3} style={{ margin: 0 }}>产品管理</Title>
            <Paragraph type="secondary" style={{ marginTop: 8, marginBottom: 0 }}>
              按分类与产品组管理 SKU，右侧只加载当前产品组的产品。
            </Paragraph>
          </Col>
          <Col>
            <Space wrap>
              <Button
                icon={<ReloadOutlined />}
                loading={loading || productsLoading}
                onClick={() => {
                  void reloadMeta(true)
                  if (activeGroupId) void reloadProducts(activeGroupId, true)
                }}
              >
                刷新
              </Button>
              <Button icon={<CloudServerOutlined />} onClick={() => setBatchOpen(true)}>
                一键配置产品
              </Button>
              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
                添加产品
              </Button>
            </Space>
          </Col>
        </Row>

        <ProductStatsCards products={currentGroupProducts} loading={productsLoading} />

        <Row gutter={[16, 16]} align="stretch">
          <Col xs={24} xl={7}>
            <ProductGroupSidebar
              categories={categories}
              groups={groups}
              activeCategoryId={activeCategoryId}
              activeGroupId={activeGroupId}
              productsCount={currentGroupProducts.length}
              productsLoading={productsLoading}
              groupCountByCategory={groupCountByCategory}
              onSelectCategory={(category, firstGroup) => {
                setActiveCategoryId(category.id)
                if (firstGroup) selectGroup(firstGroup)
              }}
              onSelectGroup={selectGroup}
            />
          </Col>

          <Col xs={24} xl={17}>
            <ProductTable
              activeCategory={activeCategory}
              activeGroup={activeGroup}
              cloudServers={cloudServers}
              keyword={keyword}
              loading={productsLoading}
              products={currentGroupProducts}
              batchProcessing={batchProcessing}
              stockSyncing={stockSyncing}
              upstreamStockSnapshots={upstreamStockSnapshots}
              checking={checkingReadiness}
              onBatchDelete={deleteProductsBatch}
              onBatchStatusChange={updateProductStatusBatch}
              onBatchVerificationChange={updateProductVerificationBatch}
              onGroupVerificationRuleChange={updateCurrentGroupVerificationRule}
              onSyncStock={syncZjmfStockBatch}
              onCreate={openCreate}
              onCheckGroup={checkCurrentGroup}
              onDelete={removeProduct}
              onEdit={(product) => navigate(`/admin/products/${product.id}`)}
              onKeywordChange={setKeyword}
            />
          </Col>
        </Row>
      </Space>

      <ProductQuickCreateModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={(product) => {
          setCreateOpen(false)
          navigate(`/admin/products/${product.id}`)
        }}
        groups={groups.map((group) => ({
          ...group,
          os_options: groupOsOptionsById.get(group.id) ?? [],
        }))}
        defaultGroupId={activeGroupId}
      />
      <ProductBatchCreateModal
        open={batchOpen}
        onClose={() => setBatchOpen(false)}
        groupId={activeGroupId}
      />
      <ReadinessModal
        open={readinessOpen}
        data={readiness}
        onClose={() => setReadinessOpen(false)}
      />
    </PageSkeleton>
  )
}

const issueLevelMeta: Record<ProductReadinessIssue["level"], { color: string; label: string }> = {
  error: { color: "red", label: "错误" },
  warning: { color: "gold", label: "警告" },
}

function ReadinessModal({
  open,
  data,
  onClose,
}: {
  open: boolean
  data: ProductGroupReadiness | null
  onClose: () => void
}) {
  const alertType = data?.status === "error" ? "error" : data?.status === "warning" ? "warning" : "success"
  const title = data?.status === "error"
    ? "当前分组不可直接上架"
    : data?.status === "warning"
      ? "当前分组可用，但有建议处理项"
      : "当前分组检测通过"
  const groupIssues = data?.issues ?? []
  const productResults = data?.products ?? []
  const group = data?.group ?? { name: "未命名分组", os_count: 0, node: null, area: null }
  const summary = data?.summary ?? { active_server_count: 0, error_count: 0, warning_count: 0 }

  return (
    <Modal
      open={open}
      title="产品组可用性检测"
      width={820}
      onCancel={onClose}
      footer={<Button type="primary" onClick={onClose}>知道了</Button>}
    >
      {data ? (
        <Space orientation="vertical" size={16} style={{ width: "100%" }}>
          <Alert
            type={alertType}
            showIcon
            title={title}
            description={
              <Space size={8} wrap>
                <Tag>{group.name}</Tag>
                <Tag>在售服务器 {summary.active_server_count}</Tag>
                <Tag color={summary.error_count ? "red" : "default"}>错误 {summary.error_count}</Tag>
                <Tag color={summary.warning_count ? "gold" : "default"}>警告 {summary.warning_count}</Tag>
                <Tag>系统 {group.os_count}</Tag>
                <Tag>节点 {group.node ?? "-"}</Tag>
                <Tag>区域 {group.area ?? "-"}</Tag>
              </Space>
            }
          />

          {groupIssues.length > 0 && <IssueList title="分组问题" issues={groupIssues} />}

          <div style={{ border: "1px solid #f0f0f0", borderRadius: 6 }}>
            {productResults.length === 0 ? (
              <Text type="secondary" style={{ display: "block", padding: 16 }}>没有需要检测的在售服务器产品</Text>
            ) : productResults.map((product, index) => (
              <div key={product.product_id || `${product.sku}-${index}`} style={{ padding: 16, borderBottom: index === productResults.length - 1 ? undefined : "1px solid #f0f0f0" }}>
                <Space orientation="vertical" size={8} style={{ width: "100%" }}>
                  <Space wrap>
                    <Tag color={product.status === "error" ? "red" : product.status === "warning" ? "gold" : "green"}>
                      {product.status === "error" ? "未通过" : product.status === "warning" ? "有警告" : "通过"}
                    </Tag>
                    <strong>{product.name}</strong>
                    <Tag>{product.sku}</Tag>
                    <Tag color={product.error_count ? "red" : "default"}>错误 {product.error_count}</Tag>
                    <Tag color={product.warning_count ? "gold" : "default"}>警告 {product.warning_count}</Tag>
                  </Space>
                  {(product.issues ?? []).length > 0 && <IssueList issues={product.issues ?? []} />}
                </Space>
              </div>
            ))}
          </div>
        </Space>
      ) : (
        <Alert type="info" showIcon title="暂无检测结果" />
      )}
    </Modal>
  )
}

function IssueList({ title, issues }: { title?: string; issues: ProductReadinessIssue[] }) {
  return (
    <div style={{ border: "1px solid #f0f0f0", borderRadius: 6 }}>
      {title ? <div style={{ padding: "8px 12px", borderBottom: "1px solid #f0f0f0" }}><strong>{title}</strong></div> : null}
      {issues.map((issue, index) => {
        const meta = issueLevelMeta[issue.level] ?? issueLevelMeta.warning
        return (
          <div key={`${issue.level}-${issue.message}-${index}`} style={{ padding: "8px 12px", borderBottom: index === issues.length - 1 ? undefined : "1px solid #f0f0f0" }}>
            <Space orientation="vertical" size={2}>
              <Space>
                <Tag color={meta.color}>{meta.label}</Tag>
                <span>{issue.message}</span>
              </Space>
              {issue.suggestion && <Text type="secondary">{issue.suggestion}</Text>}
            </Space>
          </div>
        )
      })}
    </div>
  )
}

export { AppstoreOutlined }
