"use client";

/**
 * Earlier rounds of deletion for this account, collapsed.
 *
 * An account can be retired, reactivated and retired again. The current round is
 * shown in full above this — it is the one anyone is actually asking about — so the
 * ones before it are folded away rather than competing with it for attention. They
 * are still here because "has this happened before" is a real question, and because
 * a reversal is a fact about the account someone will eventually have to explain.
 *
 * Presentational: the panel above owns the records and the actions.
 */

import { Accordion, Badge, Card, Group, Stack, Text } from "@mantine/core";
import { IconHistory } from "@tabler/icons-react";
import type { DeletionRecord } from "@/lib/features/account-deletion/query";
import styles from "@/routes/promo-code-campaigns/_components/promo.module.css";
import {
  formatDay,
  REGION_LABEL,
  RoundEmails,
  RoundFacts,
  type RoundActions,
} from "./deletionRoundView";

const AccountDeletionHistory: React.FC<{
  records: DeletionRecord[];
  templateLabel: (id: string | null | undefined) => string;
  actions: RoundActions;
}> = ({ records, templateLabel, actions }) => {
  if (records.length === 0) return null;

  return (
    <Card className={styles.sectionCard} p="md">
      <Group gap={8} align="center" mb="sm">
        <span className={styles.sectionIcon}>
          <IconHistory size={15} />
        </span>
        <Text fz={14} fw={600}>
          Earlier rounds
        </Text>
        <Badge variant="light" color="gray">
          {records.length}
        </Badge>
      </Group>
      <hr className={styles.gradientRule} />

      <Accordion variant="separated" mt="md">
        {records.map((record) => (
          <Accordion.Item key={record.id} value={record.id}>
            <Accordion.Control>
              <Group gap="xs" wrap="nowrap">
                <Badge
                  size="sm"
                  color={record.reactivatedAt ? "green" : "red"}
                  variant="light"
                >
                  {record.reactivatedAt ? "reversed" : "retired"}
                </Badge>
                <Text size="sm" fw={500}>
                  {record.statusName}
                </Text>
                <Text size="xs" c="dimmed">
                  {formatDay(record.createdAt)}
                  {record.region
                    ? ` · ${REGION_LABEL[record.region] ?? record.region}`
                    : ""}
                </Text>
              </Group>
            </Accordion.Control>
            <Accordion.Panel>
              <Stack gap="md">
                <RoundFacts record={record} />
                <RoundEmails
                  record={record}
                  templateLabel={templateLabel}
                  actions={actions}
                />
              </Stack>
            </Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion>
    </Card>
  );
};

export default AccountDeletionHistory;