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

const SessionsTable: React.FC<{ sessions: CoreMemberSession[] }> = ({
  sessions,
}) => {
  const [search, setSearch] = useState("");
  const [appTypes, setAppTypes] = useState<string[]>([]);

  const appTypeOptions = useMemo(
    () =>
      Array.from(
        new Set(
          sessions
            .map((session) => session.application_type)
            .filter((value): value is string => Boolean(value)),
        ),
      ).map((value) => ({ value, label: value })),
    [sessions],
  );

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    return sessions.filter((session) => {
      if (
        appTypes.length &&
        !appTypes.includes(session.application_type ?? "")
      ) {
        return false;
      }
      if (!term) return true;
      return [
        session.application_version,
        session.browser,
        session.os,
        session.device_type,
        session.ip_address,
        session.location,
      ]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(term));
    });
  }, [sessions, search, appTypes]);

  return (
    <Flex direction={"column"} gap={12}>
      <Group justify="space-between" align="center">
        <Text fz={13} fw={600}>
          Session Logs
        </Text>
        <TableFilterDrawer
          title="Filter Sessions"
          search={search}
          onSearchChange={setSearch}
          searchDescription="Version, browser, OS, IP"
          filters={[
            {
              key: "appType",
              label: "Application",
              data: appTypeOptions,
              value: appTypes,
              onChange: setAppTypes,
            },
          ]}
        />
      </Group>
      <MemberDataTable
        rows={filtered}
        columns={columns}
        minWidth={1200}
        rowKey={(row, index) => `${row.id ?? index}`}
        emptyMessage="No Logs Found"
      />
    </Flex>
  );
};

export default SessionsTable;

const orNA = (value?: string | null) =>
  value && value !== "" ? (
    value
  ) : (
    <Text c="dimmed" fz="sm">
      NA
    </Text>
  );

const columns: MemberColumn<CoreMemberSession>[] = [
  {
    key: "application_type",
    header: "Application Type",
    render: (row) =>
      row.application_type ? (
        <Badge variant="light" size="sm" radius={4}>
          {row.application_type}
        </Badge>
      ) : (
        <Text c="dimmed" fz="sm">
          NA
        </Text>
      ),
  },
  {
    key: "application_version",
    header: "Application Version",
    render: (row) => orNA(row.application_version),
  },
  {
    key: "device_type",
    header: "Device Type",
    render: (row) => orNA(row.device_type),
  },
  {
    key: "ip_address",
    header: "IP Address",
    render: (row) => orNA(row.ip_address),
  },
  { key: "os", header: "OS", render: (row) => orNA(row.os) },
  { key: "browser", header: "Browser", render: (row) => orNA(row.browser) },
  {
    key: "created_at",
    header: "Created At",
    render: (row) =>
      row.created_at
        ? moment(row.created_at).format("YYYY-MM-DD HH:mm:ss")
        : "-",
  },
];