import {
  Badge,
  Box,
  Button,
  Group,
  Loader,
  Pagination,
  ScrollArea,
  Stack,
  Text,
  Timeline,
} from "@mantine/core";
import { IconHistory } from "@tabler/icons-react";
import moment from "moment";
import React, { useCallback, useEffect, useState } from "react";
import type { AdminActivityLog } from "@/lib/features/activity-logs/query";
import { getMemberOfferLogs } from "@/lib/features/member-offers/query";

interface Props {
  offerId?: string | null;
}

const PAGE_SIZE = 15;

export function MemberOffersLogsPanel({ offerId }: Props) {
  const [logs, setLogs] = useState<AdminActivityLog[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);

  const fetchLogs = useCallback(async (p: number) => {
    setLoading(true);
    try {
      const res = await getMemberOfferLogs(offerId ?? null, p, PAGE_SIZE);
      if (res.success && res.data) {
        setLogs(res.data.items ?? []);
        setTotal(res.data.totalCount ?? 0);
      }
    } catch {
      // silent
    } finally {
      setLoading(false);
    }
  }, [offerId]);

  useEffect(() => { fetchLogs(page); }, [page, fetchLogs]);

  const totalPages = Math.ceil(total / PAGE_SIZE);

  const methodColor = (m: string) => {
    if (m === "POST") return "green";
    if (m === "DELETE") return "red";
    return "blue";
  };

  const actionLabel = (m: string) => {
    if (m === "POST") return "Created";
    if (m === "DELETE") return "Deleted";
    if (m === "PUT" || m === "PATCH") return "Updated";
    return m;
  };

  return (
    <Stack gap="md">
      <Group justify="space-between">
        <Text fw={700} size="lg">Change history</Text>
        <Button size="sm" variant="subtle" onClick={() => fetchLogs(page)} loading={loading}>
          Refresh
        </Button>
      </Group>

      {loading && logs.length === 0 && (
        <Group justify="center" py="xl"><Loader size="sm" /></Group>
      )}

      {!loading && logs.length === 0 && (
        <Text size="md" c="dimmed" ta="center" py="xl">No changes recorded yet.</Text>
      )}

      {logs.length > 0 && (
        <ScrollArea>
          <Timeline active={-1} bulletSize={22} lineWidth={2}>
            {logs.map((log) => (
              <Timeline.Item
                key={log.id}
                bullet={
                  <Box
                    style={{
                      width: 22, height: 22, borderRadius: "50%",
                      background: `var(--mantine-color-${methodColor(log.method)}-1)`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}
                  >
                    <IconHistory size={12} color={`var(--mantine-color-${methodColor(log.method)}-6)`} />
                  </Box>
                }
                title={
                  <Badge color={methodColor(log.method)} variant="light" size="sm">
                    {actionLabel(log.method)}
                  </Badge>
                }
              >
                <Text size="sm" c="dimmed" mt={2}>
                  {moment(log.performed_at).fromNow()} · {log.admin_email}
                </Text>
              </Timeline.Item>
            ))}
          </Timeline>
        </ScrollArea>
      )}

      {totalPages > 1 && (
        <Group justify="center">
          <Pagination total={totalPages} value={page} onChange={setPage} size="sm" />
        </Group>
      )}
    </Stack>
  );
}