import {
  MemberDataTable,
  type MemberColumn,
} from "@/routes/members/_components/MemberDataTable";
import { TableFilterDrawer } from "@/routes/members/_components/TableFilterDrawer";
import type { VpAccountCrmData } from "@/lib/features/members/types";
import { Flex, Group, Text } from "@mantine/core";
import { useMemo, useState } from "react";

const CrmData: React.FC<{ crmData: VpAccountCrmData[] }> = ({ crmData }) => {
  const [search, setSearch] = useState("");
  const [fields, setFields] = useState<string[]>([]);

  const fieldOptions = useMemo(
    () =>
      Array.from(
        new Set(
          crmData
            .map((entry) => entry.FieldName)
            .filter((name): name is string => Boolean(name)),
        ),
      ).map((name) => ({ value: name, label: name })),
    [crmData],
  );

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    return crmData.filter((entry) => {
      if (fields.length && !fields.includes(entry.FieldName ?? "")) {
        return false;
      }
      if (!term) return true;
      return [entry.FieldName, entry.Value, entry.ValueName, entry.DataID]
        .filter((value) => value !== null && value !== undefined)
        .some((value) => String(value).toLowerCase().includes(term));
    });
  }, [crmData, search, fields]);

  return (
    <Flex direction={"column"} gap={12}>
      <Group justify="space-between" align="center">
        <Text fz={13} fw={600}>
          CRM Data
        </Text>
        <TableFilterDrawer
          title="Filter CRM Data"
          search={search}
          onSearchChange={setSearch}
          searchDescription="Field, value, value name"
          filters={[
            {
              key: "field",
              label: "Field",
              data: fieldOptions,
              value: fields,
              onChange: setFields,
            },
          ]}
        />
      </Group>
      <MemberDataTable
        rows={filtered}
        columns={columns}
        minWidth={1000}
        rowKey={(row, index) => `${row.DataID ?? index}`}
        emptyMessage="No CRM Data Found"
      />
    </Flex>
  );
};

export default CrmData;

const columns: MemberColumn<VpAccountCrmData>[] = [
  {
    key: "DataID",
    header: "Data ID",
    numeric: true,
    render: (row) => row.DataID ?? "NA",
  },
  {
    key: "FieldID",
    header: "Field ID",
    numeric: true,
    render: (row) => row.FieldID ?? "NA",
  },
  {
    key: "FieldName",
    header: "Field Name",
    render: (row) => row.FieldName ?? "NA",
  },
  {
    key: "value",
    header: "Value",
    render: (row) => row?.Value?.toString() ?? "NA",
  },
  {
    key: "ValueName",
    header: "Value Name",
    render: (row) => row.ValueName ?? "NA",
  },
];