import React from "react";
import { getInvitationReferenceLabel } from "./invitationReference";
import { Badge } from "../UI/Badge";
import { Button } from "../UI/Button";
import { Panel } from "../UI/Panel";
import { DeliveryStateNotice } from "./DeliveryStateNotice";
import { formatDeliverySlotLabel } from "./deliveryDateFormatting";

const ACTIVE_STATES = new Set(["awaiting_choice", "opened", "reminder_sent"]);

const STATE_LABELS = {
  awaiting_choice: "Ожидает ответа клиента",
  opened: "Страница открыта",
  reminder_sent: "Напоминание отправлено",
  transferred_to_logistics: "Передан логисту",
  paid_storage: "Платное хранение",
  delivered: "Доставлен",
  agreed: "Доставка согласована",
};

export const DeliveryChoiceFlow = ({
  invitation = {},
  selectedSlot = null,
  onConfirmChoice = () => {},
}) => {
  const state = invitation.state || "awaiting_choice";
  const isActive = ACTIVE_STATES.has(state);
  const invitationReference = getInvitationReferenceLabel(invitation);
  const slotSummary = selectedSlot ? formatDeliverySlotLabel(selectedSlot) : "";

  if (!isActive) {
    return (
      <div className="space-y-4">
        <DeliveryStateNotice state={state} />
      </div>
    );
  }

  return (
    <Panel className="space-y-5 p-5 sm:p-6">
      <div className="space-y-2">
        <p className="text-sm uppercase tracking-[0.24em] text-[var(--color-text-muted)]">Согласование доставки</p>
        <div className="flex flex-wrap items-center gap-2">
          <h1 className="text-2xl font-semibold leading-tight sm:text-3xl">Выберите время доставки</h1>
          <Badge tone="warning">{STATE_LABELS[state]}</Badge>
        </div>
        <p className="text-sm leading-6 text-[var(--color-text-muted)]">
          {invitationReference}. Выберите удобную половину дня.
        </p>
      </div>

      <div className="flex flex-col gap-3 sm:flex-row">
        <Button
          className="w-full sm:w-auto"
          disabled={!slotSummary}
          onClick={() => onConfirmChoice(selectedSlot)}
        >
          Сохранить
        </Button>
      </div>
    </Panel>
  );
};