"use client"

import { ProjectDetail } from "@/components/label/api/project/typing"
import { Badge, Group, Paper, Stack, Text } from "@mantine/core"
import { DataTable, DataTableColumn } from "mantine-datatable"
import { useMemo } from "react"

export default function LabelSchemeContainer(props: {
  info: ProjectDetail.DataProps | undefined
}) {
  const schemas = props.info?.label_schema_list ?? []

  const columns = useMemo(() => {
    const cols: DataTableColumn<ProjectDetail.LabelSchemaList>[] = [
      { accessor: "category_id", title: "ID", width: 70 },
      { accessor: "label_class", title: "类别", width: 140 },
      {
        accessor: "color",
        title: "颜色",
        width: 120,
        render: (record) => {
          const color = Array.isArray(record.color) ? record.color : []
          const bg =
            color.length >= 3
              ? `rgb(${color[0]}, ${color[1]}, ${color[2]})`
              : "rgba(0,0,0,0.15)"
          return (
            <Group gap={8} wrap="nowrap">
              <div
                style={{
                  width: 14,
                  height: 14,
                  borderRadius: 4,
                  background: bg,
                  border: "1px solid rgba(0,0,0,0.12)",
                }}
              />
              <Text size="sm">
                {color.length >= 3
                  ? `${color[0]},${color[1]},${color[2]}`
                  : "-"}
              </Text>
            </Group>
          )
        },
      },
      {
        accessor: "label_type",
        title: "类型",
        width: 90,
        render: (record) => <Badge variant="light">{record.label_type}</Badge>,
      },
      {
        accessor: "sub_attributes",
        title: "子属性",
        width: 240,
        render: (record) => (
          <Text
            size="sm"
            style={{
              maxWidth: 240,
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
            }}>
            {(record.sub_attributes ?? []).join("、") || "-"}
          </Text>
        ),
      },
    ]
    return cols
  }, [])

  return (
    <Paper
      withBorder
      p="sm"
      radius="md"
      style={{
        borderColor:
          "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
      }}>
      <Stack gap="sm">
        <Text fw={700}>标注方案</Text>
        <DataTable<ProjectDetail.LabelSchemaList>
          withTableBorder
          withRowBorders
          idAccessor="category_id"
          records={schemas}
          columns={columns}
          minHeight={160}
          noRecordsText="暂无数据"
        />
      </Stack>
    </Paper>
  )
}