import { Badge, DescriptionCard, Table } from "@tailor-platform/app-shell";
import { graphql, type FragmentOf, readFragment } from "@/graphql";

const ChangeDetailRowFragment = graphql(`
  fragment ChangeDetailRow on ChangeDetail {
    id
    fieldName
    oldValue
    newValue
  }
`);

export const AuditEntryDetailFragment = graphql(
  `
    fragment AuditEntryDetail on AuditEntry {
      id
      eventId
      operationType
      entityType
      entityId
      actorType
      actorId
      createdAt
      changeDetails {
        edges {
          node {
            ...ChangeDetailRow
          }
        }
      }
    }
  `,
  [ChangeDetailRowFragment],
);

interface AuditEntryDetailProps {
  entry: FragmentOf<typeof AuditEntryDetailFragment>;
}

export const AuditEntryDetail = ({ entry: entryFragment }: AuditEntryDetailProps) => {
  const entry = readFragment(AuditEntryDetailFragment, entryFragment);
  const changes = entry.changeDetails.edges.map((edge) =>
    readFragment(ChangeDetailRowFragment, edge.node),
  );

  return (
    <div className="space-y-6">
      <DescriptionCard
        data={entry}
        title="Audit Entry"
        columns={3}
        fields={[
          { key: "eventId", label: "Event ID", meta: { copyable: true } },
          {
            key: "createdAt",
            label: "Timestamp",
            type: "date",
            meta: { dateFormat: "medium" },
          },
          { key: "operationType", label: "Operation Type" },
          { type: "divider" },
          { key: "entityType", label: "Entity Type" },
          { key: "entityId", label: "Entity ID", meta: { copyable: true } },
          { type: "divider" },
          { key: "actorType", label: "Actor Type" },
          { key: "actorId", label: "Actor ID", meta: { copyable: true } },
        ]}
      />
      <div className="rounded-lg border p-4">
        <h3 className="mb-3 text-sm font-medium">Change Details</h3>
        {changes.length > 0 ? (
          <Table.Root>
            <Table.Header>
              <Table.Row>
                <Table.Head>Field</Table.Head>
                <Table.Head>Old Value</Table.Head>
                <Table.Head>New Value</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {changes.map((change) => (
                <Table.Row key={change.id}>
                  <Table.Cell>
                    <Badge variant="outline-neutral">{change.fieldName}</Badge>
                  </Table.Cell>
                  <Table.Cell className="font-mono text-sm">
                    {change.oldValue ?? <span className="text-muted-foreground">-</span>}
                  </Table.Cell>
                  <Table.Cell className="font-mono text-sm">
                    {change.newValue ?? <span className="text-muted-foreground">-</span>}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table.Root>
        ) : (
          <p className="text-muted-foreground text-sm">No change details recorded.</p>
        )}
      </div>
    </div>
  );
};
