<template>
  <div class="success-step">
    <header class="success-hero">
      <span class="success-badge">{{ successBadgeLabel }}</span>
      <div class="success-hero__head">
        <h3>{{ successTitle }}</h3>
        <span v-if="statusChipLabel" :class="['status-chip', `is-${normalizedStatus}`]">{{ statusChipLabel }}</span>
      </div>
      <p class="success-hero__text">{{ messageText }}</p>
    </header>

    <section v-if="bookingDetails.length" class="success-card">
      <div class="success-card__title">{{ bookingDetailsTitle }}</div>
      <ul class="success-list">
        <li v-for="(item, idx) in bookingDetails" :key="`detail-${idx}`">
          <span class="success-list__label">{{ item.label }}:</span>
          <span class="success-list__value">
            <a v-if="item.url" :href="item.url" target="_blank" rel="noopener">{{ item.value }}</a>
            <span v-else>{{ item.value }}</span>
          </span>
        </li>
      </ul>
    </section>

    <div v-if="statusTimelineSteps.length || policyLines.length" class="success-split-grid">
      <section v-if="statusTimelineSteps.length" class="success-card success-card--split">
        <div class="success-card__title">{{ statusTimelineTitle }}</div>
        <ol class="status-timeline">
          <li
            v-for="(step, idx) in statusTimelineSteps"
            :key="`status-${step.key}-${idx}`"
            :class="['timeline-step', step.state]"
          >
            <span class="timeline-step__marker" aria-hidden="true"></span>
            <span class="timeline-step__label">{{ step.label }}</span>
          </li>
        </ol>
      </section>

      <section v-if="policyLines.length" class="success-card success-card--split">
        <div class="success-card__title">{{ policyTitle }}</div>
        <ul class="policy-list">
          <li v-for="(line, idx) in policyLines" :key="`policy-${idx}`">{{ line }}</li>
        </ul>
      </section>
    </div>

    <section v-if="timelineSteps.length" class="success-card">
      <div class="success-card__title">{{ timelineTitle }}</div>
      <ol class="next-steps-list">
        <li v-for="(line, idx) in timelineSteps" :key="`timeline-${idx}`">{{ line }}</li>
      </ol>
    </section>

    <div v-if="showActions" class="success-actions">
      <a v-if="manageBookingUrl" :href="manageBookingUrl" class="dashboard-link">
        <span>{{ manageBookingLabel }}</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SuccessStep',
  props: {
    i18n: { type: Object, required: true },
    auto_approve: { type: Boolean, default: false },
    service_label: { type: String, required: true },
    selected_date: { type: String, required: true },
    selected_time: { type: String, required: true },
    dashboard_url: { type: String, default: '' },
    manage_booking_url: { type: String, default: '' },
    policy_lines: { type: Array, default: () => [] },
    booking_details: { type: Array, default: () => [] },
    booking_status: { type: String, default: '' }
  },
  computed: {
    successTitle() {
      if (this.isAutoApproved) {
        return this.i18n.success_title_confirmed || this.i18n.success_title;
      }
      return this.i18n.success_title;
    },
    successBadgeLabel() {
      return this.i18n.success_badge || this.i18n.success_title || '';
    },
    successText() {
      if (this.isAutoApproved) {
        return this.i18n.success_text_confirmed || this.i18n.success_text || '';
      }
      return this.i18n.success_text || '';
    },
    messageText() {
      return this.successText
        .replace('%service%', this.service_label)
        .replace('%date%', this.selected_date)
        .replace('%time%', this.selected_time);
    },
    manageBookingUrl() {
      return this.manage_booking_url || this.dashboard_url;
    },
    showActions() {
      return !!this.manageBookingUrl;
    },
    manageBookingLabel() {
      return this.i18n.manage_booking || this.i18n.go_dashboard;
    },
    policyLines() {
      return Array.isArray(this.policy_lines) ? this.policy_lines : [];
    },
    bookingDetailsTitle() {
      return this.i18n.booking_details_title || this.i18n.details;
    },
    bookingDetails() {
      if (!Array.isArray(this.booking_details)) {
        return [];
      }
      return this.booking_details.filter((item) => item && item.label && item.value);
    },
    statusTimelineTitle() {
      return this.i18n.status_timeline_title || this.i18n.status;
    },
    normalizedStatus() {
      const raw = (this.booking_status || '').toString().toLowerCase();
      return raw || 'pending';
    },
    statusChipLabel() {
      const status = this.normalizedStatus;
      const map = {
        pending: this.i18n.status_pending || this.i18n.pending,
        approved: this.i18n.status_approved || this.i18n.approved,
        completed: this.i18n.status_completed || this.i18n.completed,
        cancelled: this.i18n.status_cancelled || this.i18n.cancelled,
        rejected: this.i18n.status_rejected || this.i18n.rejected,
        no_show: this.i18n.status_no_show || this.i18n.no_show
      };
      return map[status] || this.i18n.status_unknown || '';
    },
    isAutoApproved() {
      return !!this.auto_approve || ['approved', 'completed'].includes(this.normalizedStatus);
    },
    statusTimelineSteps() {
      const status = this.normalizedStatus;
      const requestedLabel = this.i18n.status_step_requested || this.i18n.pending;
      if (['cancelled', 'rejected', 'no_show'].includes(status)) {
        let terminalLabel = '';
        if (status === 'cancelled') {
          terminalLabel = this.i18n.status_step_cancelled || this.i18n.cancelled;
        } else if (status === 'rejected') {
          terminalLabel = this.i18n.status_step_rejected || this.i18n.rejected;
        } else {
          terminalLabel = this.i18n.status_step_no_show || this.i18n.no_show;
        }
        return [
          { key: 'pending', label: requestedLabel, state: 'complete' },
          { key: status, label: terminalLabel, state: 'terminal' }
        ];
      }
      const steps = [
        { key: 'pending', label: requestedLabel },
        { key: 'approved', label: this.i18n.status_step_confirmed || this.i18n.approved },
        { key: 'completed', label: this.i18n.status_step_completed || this.i18n.completed }
      ];
      const indexMap = { pending: 0, approved: 1, completed: 2 };
      const currentIndex = indexMap[status] ?? 0;
      return steps.map((step, idx) => ({
        ...step,
        state: idx < currentIndex ? 'complete' : (idx === currentIndex ? 'current' : 'upcoming')
      }));
    },
    policyTitle() {
      return this.i18n.policy_title;
    },
    timelineTitle() {
      return this.i18n.success_timeline_title;
    },
    timelineSteps() {
      const confirmed = this.normalizeTimelineSteps(this.i18n.success_timeline_steps_confirmed);
      const pending = this.normalizeTimelineSteps(this.i18n.success_timeline_steps);
      if (this.isAutoApproved && confirmed.length) {
        return confirmed;
      }
      return pending;
    }
  },
  methods: {
    normalizeTimelineSteps(value) {
      if (Array.isArray(value)) {
        return value.filter((step) => typeof step === 'string' && step.trim());
      }
      if (typeof value === 'string' && value.trim()) {
        return [value.trim()];
      }
      return [];
    }
  }
};
</script>

<style scoped>
.success-step {
  display: grid;
  gap: 12px;
  text-align: left;
}

.success-hero {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d0d5dd;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}

.success-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #027a48;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.success-hero__head {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.success-hero__head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: capitalize;
}

.status-chip.is-pending {
  color: #b54708;
  background: #fff6ed;
}

.status-chip.is-approved,
.status-chip.is-completed {
  color: #027a48;
  background: #ecfdf3;
}

.status-chip.is-cancelled,
.status-chip.is-rejected,
.status-chip.is-no_show {
  color: #b42318;
  background: #fef3f2;
}

.success-hero__text {
  margin: 8px 0 0;
  color: #475467;
  font-size: 0.92rem;
  line-height: 1.45;
}

.success-card {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}

.success-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.success-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 8px;
}

.success-list__label {
  font-weight: 700;
  color: #475467;
  margin-right: 4px;
}

.success-list__value a {
  color: #155eef;
  text-decoration: none;
}

.success-list__value a:hover {
  text-decoration: underline;
}

.success-split-grid {
  display: grid;
  gap: 12px;
}

.status-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 8px;
}

.status-timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #e4e7ec;
  border-radius: 999px;
}

.timeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 10px;
  color: #98a2b3;
}

.timeline-step__marker {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #d0d5dd;
  background: #fff;
  flex-shrink: 0;
  z-index: 1;
}

.timeline-step__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: inherit;
}

.timeline-step.complete {
  color: #039855;
}

.timeline-step.complete .timeline-step__marker {
  background: #12b76a;
  border-color: #12b76a;
}

.timeline-step.current {
  color: #175cd3;
}

.timeline-step.current .timeline-step__marker {
  background: #175cd3;
  border-color: #175cd3;
}

.timeline-step.terminal {
  color: #d92d20;
}

.timeline-step.terminal .timeline-step__marker {
  background: #f04438;
  border-color: #f04438;
}

.policy-list,
.next-steps-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #475467;
  font-size: 0.84rem;
  line-height: 1.5;
}

.success-actions {
  display: flex;
  justify-content: flex-start;
}

.dashboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid var(--bookaro-booking-accent, #007cba);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--bookaro-booking-accent, #007cba);
}

@media (min-width: 960px) {
  .success-split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}
</style>
