import {
  MemberDataTable,
  type MemberColumn,
} from "@/routes/members/_components/MemberDataTable";
import { TableFilterDrawer } from "@/routes/members/_components/TableFilterDrawer";
import type { CoreMemberSavedSearch } from "@/lib/features/members/types";
import { Badge, Code, Flex, Group, Modal, Stack, Text } from "@mantine/core";
import moment from "moment";
import { useMemo, useState } from "react";

const SavedSearchesTable: React.FC<{
  savedSearches: CoreMemberSavedSearch[];
}> = ({ savedSearches }) => {
  const [selectedSearch, setSelectedSearch] =
    useState<CoreMemberSavedSearch | null>(null);
  const [search, setSearch] = useState("");
  const [sources, setSources] = useState<string[]>([]);

  const sourceOptions = useMemo(
    () =>
      Array.from(
        new Set(savedSearches.map((item) => item.source).filter(Boolean)),
      ).map((source) => ({ value: source, label: source })),
    [savedSearches],
  );

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    return savedSearches.filter((item) => {
      if (sources.length && !sources.includes(item.source)) return false;
      if (!term) return true;
      return [item.label, item.search_term, item.source]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(term));
    });
  }, [savedSearches, search, sources]);

  return (
    <Flex direction={"column"} gap={12}>
      <Group justify="space-between" align="center">
        <Text fz={13} fw={600}>
          Saved Searches
        </Text>
        <TableFilterDrawer
          title="Filter Saved Searches"
          search={search}
          onSearchChange={setSearch}
          searchDescription="Label or search term"
          filters={[
            {
              key: "source",
              label: "Source",
              data: sourceOptions,
              value: sources,
              onChange: setSources,
            },
          ]}
        />
      </Group>
      <MemberDataTable
        rows={filtered}
        columns={columns}
        minWidth={1200}
        rowKey={(row, index) => `${row.id ?? index}`}
        onRowClick={setSelectedSearch}
        emptyMessage="No Saved Searches Found"
      />

      <Modal
        opened={Boolean(selectedSearch)}
        onClose={() => setSelectedSearch(null)}
        title="Saved Search"
        size="lg"
      >
        {selectedSearch ? (
          <Stack gap={"xs"}>
            <Text fz={13} fw={500}>
              {selectedSearch.label}
            </Text>
            <Text fz={12} c={"dimmed"}>
              {selectedSearch.source} · used {selectedSearch.frequency ?? 0}{" "}
              time(s)
            </Text>
            <Code block>
              {JSON.stringify(selectedSearch.parameters ?? {}, null, 2)}
            </Code>
          </Stack>
        ) : null}
      </Modal>
    </Flex>
  );
};

export default SavedSearchesTable;

const columns: MemberColumn<CoreMemberSavedSearch>[] = [
  { key: "label", header: "Label", render: (row) => row.label },
  // {
  //   key: "search_term",
  //   header: "Search Term",
  //   render: (row) => row.search_term ?? "NA",
  // },
  {
    key: "source",
    header: "Source",
    render: (row) => (
      <Badge variant="light" size="sm" radius={4} tt="capitalize">
        {row.source?.replaceAll("_", " ") || "NA"}
      </Badge>
    ),
  },
  {
    key: "frequency",
    header: "Frequency",
    render: (row) => row.frequency ?? 0,
  },
  {
    key: "lastUsed",
    header: "Last Used",
    render: (row) =>
      row.last_used ? moment(row.last_used).format("YYYY-MM-DD HH:mm:ss") : "-",
  },
  {
    key: "createdAt",
    header: "Created At",
    render: (row) => moment(row.created_at).format("YYYY-MM-DD"),
  },
];