import { Component, Input } from '@angular/core';
import { BookingConfirmation } from '@calendar/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'calendar-confirmation',
  standalone: true,
  imports: [DatePipe],
  template: `
    @if (booking) {
      <div class="confirmation" [class.compact]="compact">
        <div class="icon">✓</div>
        <h2>You're booked!</h2>
        <p class="message">{{ booking.confirmationMessage }}</p>
        <p class="datetime">{{ booking.startTime | date: 'full' }}</p>
        @if (!compact && booking.cancelUrl) {
          <a class="cancel-link" [href]="booking.cancelUrl">Need to cancel?</a>
        }
      </div>
    }
  `,
  styles: [
    `
      .confirmation {
        text-align: center;
        padding: 2rem 1.5rem;
        background: #ecfdf5;
        border-radius: var(--cal-radius-lg, 16px);
        border: 1px solid #a7f3d0;
      }
      .compact {
        padding: 1.25rem;
      }
      .icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        background: var(--cal-success, #059669);
        color: #fff;
        font-size: 1.5rem;
        font-weight: 700;
        display: grid;
        place-items: center;
      }
      h2 {
        margin: 0 0 0.5rem;
        color: var(--cal-success, #059669);
        font-size: 1.25rem;
      }
      .message {
        margin: 0 0 0.75rem;
        color: var(--cal-text, #0f172a);
      }
      .datetime {
        margin: 0 0 1rem;
        font-size: 0.9rem;
        color: var(--cal-text-muted, #64748b);
      }
      .cancel-link {
        font-size: 0.875rem;
        color: var(--cal-text-muted, #64748b);
      }
    `,
  ],
})
export class ConfirmationComponent {
  @Input() booking: BookingConfirmation | null = null;
  @Input() compact = false;
}