import {
  Badge,
  Box,
  Button,
  Checkbox,
  Code,
  Divider,
  Drawer,
  Group,
  Paper,
  Popover,
  ScrollArea,
  Select,
  Stack,
  Table,
  Text,
  Tooltip,
} from "@mantine/core";
import { DatePickerInput, type DatesRangeValue } from "@mantine/dates";
import { useDisclosure } from "@mantine/hooks";
import {
  IconCalendar,
  IconFilter,
  IconSearch,
  IconX,
} from "@tabler/icons-react";
import {
  flexRender,
  MRT_GlobalFilterTextInput,
  MRT_TableBodyCellValue,
  MRT_TablePagination,
  useMantineReactTable,
  type MRT_ColumnDef,
} from "mantine-react-table";
import { useMemo, useState } from "react";

interface HistoryLog {
  id: string;
  entity_type: "agent" | "prompt";
  entity_id: string;
  action: "create" | "update" | "delete";
  performed_by: string;
  performed_at: string;
  before_data: any;
  after_data: any;
}

const ACTION_COLORS: Record<string, string> = {
  create: "green",
  update: "blue",
  delete: "red",
};

const SKIP_KEYS = new Set([
  "id",
  "created_at",
  "updated_at",
  "created_by",
  "updated_by",
]);

function getChangedFields(
  before: any,
  after: any,
): { key: string; from: any; to: any }[] {
  if (!before || !after) return [];
  const allKeys = new Set([...Object.keys(before), ...Object.keys(after)]);
  const changes: { key: string; from: any; to: any }[] = [];
  for (const key of allKeys) {
    if (SKIP_KEYS.has(key)) continue;
    const fromVal = before[key];
    const toVal = after[key];
    if (JSON.stringify(fromVal) !== JSON.stringify(toVal)) {
      changes.push({ key, from: fromVal, to: toVal });
    }
  }
  return changes;
}

function formatFieldName(key: string): string {
  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
}

function formatValue(val: any): string {
  if (val === null || val === undefined) return "—";
  if (typeof val === "object") return JSON.stringify(val, null, 2);
  return String(val);
}

function truncateValue(val: string, max = 120): string {
  return val.length > max ? val.slice(0, max) + "…" : val;
}

// ── Detail Drawer ───────────────────────────────────────────────────────────
const DetailDrawer: React.FC<{
  log: HistoryLog | null;
  opened: boolean;
  onClose: () => void;
}> = ({ log, opened, onClose }) => {
  if (!log) return null;

  const entityName =
    log.after_data?.agent_name ??
    log.after_data?.prompt_name ??
    log.before_data?.agent_name ??
    log.before_data?.prompt_name ??
    log.entity_id;

  const changes =
    log.action === "update"
      ? getChangedFields(log.before_data, log.after_data)
      : [];
  const displayData =
    log.action === "delete" ? log.before_data : log.after_data;

  return (
    <Drawer
      opened={opened}
      onClose={onClose}
      title={
        <Group gap="sm">
          <Badge
            size="lg"
            variant="light"
            color={ACTION_COLORS[log.action] ?? "gray"}
          >
            {log.action}
          </Badge>
          <Badge size="lg" variant="outline" color="gray">
            {log.entity_type}
          </Badge>
          <Text fw={600} size="sm">
            {entityName}
          </Text>
        </Group>
      }
      position="right"
      size="lg"
      padding="md"
    >
      <Stack gap="md">
        {/* Meta info */}
        <Paper p="sm" withBorder radius="sm" bg="gray.0">
          <Group gap="xl">
            <Box>
              <Text size="xs" c="dimmed">
                Performed By
              </Text>
              <Text size="sm" fw={500}>
                {log.performed_by}
              </Text>
            </Box>
            <Box>
              <Text size="xs" c="dimmed">
                Date
              </Text>
              <Text size="sm" fw={500}>
                {new Date(log.performed_at).toLocaleString()}
              </Text>
            </Box>
            <Box>
              <Text size="xs" c="dimmed">
                Entity ID
              </Text>
              <Code fz={11}>{log.entity_id}</Code>
            </Box>
          </Group>
        </Paper>

        {/* Update: show diff */}
        {log.action === "update" && changes.length > 0 && (
          <>
            <Divider label="Changes" labelPosition="left" />
            <Stack gap="xs">
              {changes.map((ch) => (
                <Paper key={ch.key} p="sm" withBorder radius="sm">
                  <Text size="xs" fw={600} mb={4}>
                    {formatFieldName(ch.key)}
                  </Text>
                  <Group gap="xs" align="flex-start" wrap="nowrap">
                    <Box style={{ flex: 1 }}>
                      <Text size="xs" c="dimmed" mb={2}>
                        Before
                      </Text>
                      <ScrollArea.Autosize mah={160}>
                        <Code
                          block
                          fz={11}
                          c="red.7"
                          bg="red.0"
                          style={{
                            whiteSpace: "pre-wrap",
                            wordBreak: "break-word",
                          }}
                        >
                          {formatValue(ch.from)}
                        </Code>
                      </ScrollArea.Autosize>
                    </Box>
                    <Text c="dimmed" mt={18}>
                      →
                    </Text>
                    <Box style={{ flex: 1 }}>
                      <Text size="xs" c="dimmed" mb={2}>
                        After
                      </Text>
                      <ScrollArea.Autosize mah={160}>
                        <Code
                          block
                          fz={11}
                          c="green.7"
                          bg="green.0"
                          style={{
                            whiteSpace: "pre-wrap",
                            wordBreak: "break-word",
                          }}
                        >
                          {formatValue(ch.to)}
                        </Code>
                      </ScrollArea.Autosize>
                    </Box>
                  </Group>
                </Paper>
              ))}
            </Stack>
          </>
        )}

        {log.action === "update" && changes.length === 0 && (
          <Text size="sm" c="dimmed" ta="center" py="md">
            No field changes detected.
          </Text>
        )}

        {/* Create / Delete: show full data */}
        {(log.action === "create" || log.action === "delete") &&
          displayData && (
            <>
              <Divider
                label={
                  log.action === "create" ? "Created Data" : "Deleted Data"
                }
                labelPosition="left"
              />
              <Stack gap="xs">
                {Object.entries(displayData)
                  .filter(([key]) => !SKIP_KEYS.has(key))
                  .map(([key, val]) => (
                    <Group key={key} gap="sm" align="flex-start" wrap="nowrap">
                      <Text
                        size="xs"
                        fw={600}
                        w={140}
                        style={{ flexShrink: 0 }}
                      >
                        {formatFieldName(key)}
                      </Text>
                      <ScrollArea.Autosize mah={120} style={{ flex: 1 }}>
                        <Code
                          fz={11}
                          block
                          style={{
                            whiteSpace: "pre-wrap",
                            wordBreak: "break-word",
                          }}
                        >
                          {formatValue(val)}
                        </Code>
                      </ScrollArea.Autosize>
                    </Group>
                  ))}
              </Stack>
            </>
          )}

        {!displayData && (
          <Text size="sm" c="dimmed" ta="center" py="md">
            No data recorded for this action.
          </Text>
        )}
      </Stack>
    </Drawer>
  );
};

// ── Changes Summary (inline in table) ───────────────────────────────────────
const ChangesSummary: React.FC<{ log: HistoryLog }> = ({ log }) => {
  if (log.action === "create") {
    return (
      <Text size="xs" c="green.7">
        New {log.entity_type} created
      </Text>
    );
  }
  if (log.action === "delete") {
    return (
      <Text size="xs" c="red.7">
        {log.entity_type} deleted
      </Text>
    );
  }
  // update — show changed field names
  const changes = getChangedFields(log.before_data, log.after_data);
  if (changes.length === 0)
    return (
      <Text size="xs" c="dimmed">
        No changes
      </Text>
    );
  const names = changes.map((c) => formatFieldName(c.key));
  const display =
    names.length <= 3
      ? names.join(", ")
      : `${names.slice(0, 3).join(", ")} +${names.length - 3} more`;
  return (
    <Tooltip label={names.join(", ")} disabled={names.length <= 3}>
      <Text size="xs" c="blue.7">
        {display}
      </Text>
    </Tooltip>
  );
};

// ── Main Page ───────────────────────────────────────────────────────────────
const HistoryClientPage: React.FC<{ logs: HistoryLog[] }> = ({ logs }) => {
  const [filterEntity, setFilterEntity] = useState<string | null>(null);
  const [filterAction, setFilterAction] = useState<string | null>(null);
  const [filterPerformedBy, setFilterPerformedBy] = useState<string[]>([]);
  const [filterDateRange, setFilterDateRange] = useState<DatesRangeValue>([
    null,
    null,
  ]);
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
  const [selectedLog, setSelectedLog] = useState<HistoryLog | null>(null);
  const [drawerOpened, { open: openDrawer, close: closeDrawer }] =
    useDisclosure(false);

  // Derive unique "performed by" options from data
  const performedByOptions = useMemo(
    () =>
      [...new Set(logs.map((l) => l.performed_by).filter(Boolean))]
        .sort()
        .map((v) => ({ value: v, label: v })),
    [logs],
  );

  const filteredData = useMemo(() => {
    let result = [...logs];
    if (filterEntity)
      result = result.filter((r) => r.entity_type === filterEntity);
    if (filterAction) result = result.filter((r) => r.action === filterAction);
    if (filterPerformedBy.length > 0)
      result = result.filter((r) => filterPerformedBy.includes(r.performed_by));
    if (filterDateRange[0] || filterDateRange[1]) {
      const from = filterDateRange[0]
        ? new Date(filterDateRange[0]).setHours(0, 0, 0, 0)
        : null;
      const to = filterDateRange[1]
        ? new Date(filterDateRange[1]).setHours(23, 59, 59, 999)
        : null;
      result = result.filter((r) => {
        const d = new Date(r.performed_at).getTime();
        if (from && d < from) return false;
        if (to && d > to) return false;
        return true;
      });
    }
    return result;
  }, [logs, filterEntity, filterAction, filterPerformedBy, filterDateRange]);

  const hasActiveFilters = !!(
    filterEntity ||
    filterAction ||
    filterPerformedBy.length > 0 ||
    filterDateRange[0] ||
    filterDateRange[1]
  );

  const onRowClick = (log: HistoryLog) => {
    setSelectedLog(log);
    openDrawer();
  };

  const columns: MRT_ColumnDef<HistoryLog>[] = [
    {
      accessorKey: "performed_at",
      header: "Date",
      minSize: 160,
      enableGlobalFilter: false,
      Cell: ({ row }) => {
        const d = new Date(row.original.performed_at);
        return (
          <Text size="xs">
            {d.toLocaleDateString()}{" "}
            {d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
          </Text>
        );
      },
    },
    {
      accessorKey: "action",
      header: "Action",
      minSize: 90,
      enableGlobalFilter: false,
      Cell: ({ row }) => (
        <Badge
          size="sm"
          variant="light"
          color={ACTION_COLORS[row.original.action] ?? "gray"}
        >
          {row.original.action}
        </Badge>
      ),
    },
    {
      accessorKey: "entity_type",
      header: "Entity",
      minSize: 90,
      enableGlobalFilter: false,
      Cell: ({ row }) => (
        <Badge size="sm" variant="outline" color="gray">
          {row.original.entity_type}
        </Badge>
      ),
    },
    {
      id: "entity_name",
      header: "Name",
      minSize: 180,
      accessorFn: (row) => {
        const data = row.after_data ?? row.before_data;
        return data?.agent_name ?? data?.prompt_name ?? row.entity_id;
      },
      Cell: ({ row }) => {
        const data = row.original.after_data ?? row.original.before_data;
        const name =
          data?.agent_name ?? data?.prompt_name ?? row.original.entity_id;
        return (
          <Text size="xs" fw={500}>
            {name}
          </Text>
        );
      },
    },
    {
      id: "changes",
      header: "Changes",
      minSize: 200,
      enableSorting: false,
      accessorFn: (row) => {
        const changes = getChangedFields(row.before_data, row.after_data);
        return changes.map((c) => formatFieldName(c.key)).join(", ");
      },
      Cell: ({ row }) => <ChangesSummary log={row.original} />,
    },
    {
      accessorKey: "performed_by",
      header: "Performed By",
      minSize: 160,
    },
  ];

  const table = useMantineReactTable({
    columns,
    data: filteredData,
    enableSorting: true,
    enableRowSelection: false,
    getRowId: (row) => row.id,
    state: { pagination },
    onPaginationChange: (updater) => {
      const next =
        typeof updater === "function" ? updater(pagination) : updater;
      setPagination(next);
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    initialState: { showGlobalFilter: true },
    paginationDisplayMode: "pages",
    mantinePaginationProps: { rowsPerPageOptions: ["25", "50", "100"], p: 0 },
    mantineSearchTextInputProps: { size: "sm" },
    enablePinning: false,
  });

  return (
    <Stack>
      <DetailDrawer
        log={selectedLog}
        opened={drawerOpened}
        onClose={closeDrawer}
      />

      <Group gap="sm" align="center" wrap="wrap">
        <Group gap={4} align="center">
          <IconFilter size={16} color="var(--mantine-color-gray-6)" />
          <Text size="sm" c="dimmed" fw={500}>
            Filters:
          </Text>
        </Group>
        <Select
          size="sm"
          placeholder="All entities"
          clearable
          data={[
            { value: "agent", label: "Agent" },
            { value: "prompt", label: "Prompt" },
          ]}
          value={filterEntity}
          onChange={setFilterEntity}
          style={{ width: 160 }}
        />
        <Select
          size="sm"
          placeholder="All actions"
          clearable
          data={[
            { value: "create", label: "Created" },
            { value: "update", label: "Updated" },
            { value: "delete", label: "Deleted" },
          ]}
          value={filterAction}
          onChange={setFilterAction}
          style={{ width: 160 }}
        />
        <Popover width={320} position="bottom-start" shadow="md">
          <Popover.Target>
            <Button
              size="sm"
              variant="default"
              color="gray"
              style={{ fontWeight: 400, width: 180 }}
            >
              {filterPerformedBy.length > 0
                ? `${filterPerformedBy.length} user${filterPerformedBy.length > 1 ? "s" : ""} selected`
                : "All users"}
            </Button>
          </Popover.Target>
          <Popover.Dropdown p="xs">
            <Checkbox
              label="Select all"
              size="sm"
              fw={600}
              checked={filterPerformedBy.length === performedByOptions.length}
              indeterminate={
                filterPerformedBy.length > 0 &&
                filterPerformedBy.length < performedByOptions.length
              }
              onChange={() =>
                setFilterPerformedBy(
                  filterPerformedBy.length === performedByOptions.length
                    ? []
                    : performedByOptions.map((o) => o.value),
                )
              }
              mb={6}
            />
            <Divider mb={6} />
            <ScrollArea.Autosize mah={220}>
              <Stack gap={6}>
                {performedByOptions.map((opt) => (
                  <Checkbox
                    key={opt.value}
                    label={opt.label}
                    size="sm"
                    checked={filterPerformedBy.includes(opt.value)}
                    onChange={() =>
                      setFilterPerformedBy((prev) =>
                        prev.includes(opt.value)
                          ? prev.filter((v) => v !== opt.value)
                          : [...prev, opt.value],
                      )
                    }
                  />
                ))}
              </Stack>
            </ScrollArea.Autosize>
            {filterPerformedBy.length > 0 && (
              <Button
                size="xs"
                variant="subtle"
                color="gray"
                mt={6}
                fullWidth
                onClick={() => setFilterPerformedBy([])}
              >
                Clear all
              </Button>
            )}
          </Popover.Dropdown>
        </Popover>
        <DatePickerInput
          type="range"
          size="sm"
          placeholder="Pick date range"
          clearable
          leftSection={<IconCalendar size={16} />}
          value={filterDateRange}
          onChange={setFilterDateRange}
          maxDate={new Date()}
          valueFormat="DD MMM YYYY"
          style={{ width: 280 }}
        />
        <MRT_GlobalFilterTextInput
          table={table}
          variant="default"
          size="sm"
          leftSection={<IconSearch size={16} />}
          c="dark.8"
          p={0}
          style={{ flex: 1, minWidth: 200 }}
        />
        {hasActiveFilters && (
          <Group gap={6}>
            {filterEntity && (
              <Badge
                size="sm"
                variant="light"
                color="blue"
                rightSection={
                  <IconX
                    size={10}
                    style={{ cursor: "pointer" }}
                    onClick={() => setFilterEntity(null)}
                  />
                }
              >
                {filterEntity}
              </Badge>
            )}
            {filterAction && (
              <Badge
                size="sm"
                variant="light"
                color={ACTION_COLORS[filterAction] ?? "gray"}
                rightSection={
                  <IconX
                    size={10}
                    style={{ cursor: "pointer" }}
                    onClick={() => setFilterAction(null)}
                  />
                }
              >
                {filterAction}
              </Badge>
            )}
            {filterPerformedBy.length > 0 && (
              <Badge
                size="sm"
                variant="light"
                color="cyan"
                rightSection={
                  <IconX
                    size={10}
                    style={{ cursor: "pointer" }}
                    onClick={() => setFilterPerformedBy([])}
                  />
                }
              >
                {filterPerformedBy.length === 1
                  ? filterPerformedBy[0]
                  : `${filterPerformedBy.length} users`}
              </Badge>
            )}
            {(filterDateRange[0] || filterDateRange[1]) && (
              <Badge
                size="sm"
                variant="light"
                color="violet"
                rightSection={
                  <IconX
                    size={10}
                    style={{ cursor: "pointer" }}
                    onClick={() => setFilterDateRange([null, null])}
                  />
                }
              >
                {filterDateRange[0]
                  ? new Date(filterDateRange[0]).toLocaleDateString()
                  : "…"}{" "}
                –{" "}
                {filterDateRange[1]
                  ? new Date(filterDateRange[1]).toLocaleDateString()
                  : "…"}
              </Badge>
            )}
            <Text size="sm" c="dimmed">
              ({filteredData.length} result
              {filteredData.length !== 1 ? "s" : ""})
            </Text>
          </Group>
        )}
      </Group>

      <Paper
        bdrs={4}
        style={{
          overflow: "hidden",
          border: "1px solid var(--mantine-color-white-2)",
        }}
      >
        <Table
          fz={11}
          highlightOnHover
          horizontalSpacing="xl"
          verticalSpacing="xs"
          withColumnBorders
          m="0"
        >
          <Table.Thead>
            {table.getHeaderGroups().map((hg) => (
              <Table.Tr key={hg.id} c="dark.4" bg="gray.1">
                {hg.headers.map((header) => (
                  <Table.Th key={header.id} px={12}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.Header ??
                            header.column.columnDef.header,
                          header.getContext(),
                        )}
                  </Table.Th>
                ))}
              </Table.Tr>
            ))}
          </Table.Thead>
          <Table.Tbody>
            {table.getRowModel().rows.map((row) => (
              <Table.Tr
                key={row.id}
                style={{ cursor: "pointer" }}
                onClick={() => onRowClick(row.original)}
              >
                {row.getVisibleCells().map((cell) => (
                  <Table.Td key={cell.id} px={12}>
                    <MRT_TableBodyCellValue cell={cell} table={table} />
                  </Table.Td>
                ))}
              </Table.Tr>
            ))}
            {filteredData.length === 0 && (
              <Table.Tr>
                <Table.Td colSpan={99} ta="center" py="xl" c="dimmed">
                  No activity logs found.
                </Table.Td>
              </Table.Tr>
            )}
          </Table.Tbody>
        </Table>
      </Paper>

      <MRT_TablePagination table={table} />
    </Stack>
  );
};

export default HistoryClientPage;