import { CheckCircle, Clock, XCircle } from "lucide-react";
import { Group, Text, Badge, Timeline } from "@mantine/core";

import { SectionCard } from "./SectionCard";
import {
  approvalStatusColor,
  formatDateTime,
  type BookingApprovalStepView,
} from "./booking-detail.styles";

export interface BookingApprovalCardProps {
  steps: BookingApprovalStepView[];
  approvedCount: number;
}

/** Vertical timeline of the booking's approval chain. */
export function BookingApprovalCard({ steps, approvedCount }: BookingApprovalCardProps) {
  return (
    <SectionCard
      icon={CheckCircle}
      title="Approval Workflow"
      accent="edr-green"
      extra={
        <Badge color="edr-green" variant="light" radius="sm">
          {approvedCount} / {steps.length} approved
        </Badge>
      }
    >
      <Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="edr-green">
        {steps.map((step) => (
          <Timeline.Item
            key={step.id}
            color={approvalStatusColor(step.status)}
            bullet={
              step.status === "APPROVED" ? (
                <CheckCircle size={14} />
              ) : step.status === "REJECTED" ? (
                <XCircle size={14} />
              ) : (
                <Clock size={14} />
              )
            }
            title={
              <Group gap="sm">
                <Text fw={600} size="sm">
                  {step.requiredRole.replace(/_/g, " ")}
                </Text>
                <Badge
                  color={approvalStatusColor(step.status)}
                  size="xs"
                  radius="sm"
                  variant="light"
                >
                  {step.status}
                </Badge>
              </Group>
            }
          >
            {step.actionedAt && (
              <Text size="xs" c="dimmed">
                {formatDateTime(step.actionedAt)}
              </Text>
            )}
          </Timeline.Item>
        ))}
      </Timeline>
    </SectionCard>
  );
}
