import type { ScreenDefinition } from "@/lib/funnel/types";

export interface TemplateSummaryProps {
  screen: ScreenDefinition;
}

export function TemplateSummary({ screen }: TemplateSummaryProps) {
  switch (screen.template) {
    case "list": {
      return (
        <div className="space-y-2 text-xs text-muted-foreground">
          <div className="flex flex-wrap items-center gap-2">
            <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-primary">
              Выбор: {screen.list.selectionType === "single" ? "один" : "несколько"}
            </span>
          </div>
          <div>
            <p className="font-medium text-foreground">Варианты ({screen.list.options.length})</p>
            <div className="mt-2 flex flex-wrap gap-2">
              {screen.list.options.map((option) => (
                <span
                  key={option.id}
                  className="inline-flex items-center gap-1 rounded-lg bg-primary/5 px-2 py-1 text-[11px] text-primary"
                >
                  {option.emoji && <span className="text-base leading-none">{option.emoji}</span>}
                  <span className="font-medium">{option.label}</span>
                </span>
              ))}
            </div>
          </div>
        </div>
      );
    }
    case "form": {
      return (
        <div className="space-y-2 text-xs text-muted-foreground">
          <div className="flex flex-wrap gap-2">
            <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-primary">
              Полей: {screen.fields.length}
            </span>
            {screen.bottomActionButton?.text && (
              <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-muted-foreground">
                {screen.bottomActionButton.text}
              </span>
            )}
          </div>
          {screen.validationMessages && (
            <div className="rounded-lg border border-border/50 bg-background/80 p-2">
              <p className="text-[11px] text-muted-foreground">
                Настроены пользовательские сообщения валидации
              </p>
            </div>
          )}
        </div>
      );
    }
    case "coupon": {
      return (
        <div className="space-y-2 text-xs text-muted-foreground">
          <p>
            <span className="font-medium">Промо:</span> {screen.coupon.promoCode.text}
          </p>
          <p className="text-muted-foreground/80">{screen.coupon.offer.title.text}</p>
        </div>
      );
    }
    case "date": {
      return (
        <div className="space-y-2 text-xs text-muted-foreground">
          <p className="font-medium">Формат даты:</p>
          <div className="flex flex-wrap gap-2">
            {screen.dateInput.monthLabel && <span className="rounded bg-muted px-2 py-0.5">{screen.dateInput.monthLabel}</span>}
            {screen.dateInput.dayLabel && <span className="rounded bg-muted px-2 py-0.5">{screen.dateInput.dayLabel}</span>}
            {screen.dateInput.yearLabel && <span className="rounded bg-muted px-2 py-0.5">{screen.dateInput.yearLabel}</span>}
          </div>
          {screen.dateInput.validationMessage && (
            <p className="text-[11px] text-destructive">{screen.dateInput.validationMessage}</p>
          )}
        </div>
      );
    }
    case "info": {
      return (
        <div className="space-y-2 text-xs text-muted-foreground">
          {screen.subtitle?.text && <p>{screen.subtitle.text}</p>}
          {screen.icon?.value && (
            <div className="inline-flex items-center gap-2 rounded-lg bg-muted px-2 py-1">
              <span className="text-base">{screen.icon.value}</span>
              <span className="text-[11px] uppercase text-muted-foreground">Иконка</span>
            </div>
          )}
        </div>
      );
    }
    default:
      return null;
  }
}
