<template>
  <div class="wardrobe-orders">
    <div class="orders-toolbar">
      <button
        v-for="status in statusOptions"
        :key="status.key"
        class="orders-toolbar__chip"
        type="button"
        :class="{ 'is-active': activeStatus === status.key }"
        @click="activeStatus = status.key"
      >
        {{ status.label }}
      </button>
    </div>

    <div class="orders-list">
      <article v-for="order in filteredOrders" :key="order.id" class="order-card">
        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
        </button>

        <div class="order-card__summary">
          <div class="order-card__meta">
            <h3 class="order-card__id">{{ order.id }}</h3>
            <p class="order-card__date">{{ order.date }}</p>
          </div>

          <div class="order-card__preview" aria-hidden="true">
            <span
              v-for="item in order.items.slice(0, 2)"
              :key="item.id"
              class="order-card__thumb"
              :style="{ backgroundColor: item.color }"
            ></span>
            <span v-if="getExtraCount(order)" class="order-card__extra">
              {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
            </span>
          </div>

          <div class="order-card__status" :class="`is-${order.status}`">
            {{ getStatusBadgeLabel(order.status) }}
          </div>

          <div class="order-card__amount">
            <span>${{ order.amount }}</span>
            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
          </div>

          <button
            class="order-card__action"
            type="button"
            :class="{ 'is-primary': order.status === 'unpaid' }"
          >
            <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
            <span>{{ getOrderActionLabel(order.status) }}</span>
          </button>
        </div>

        <div v-if="expandedOrderId === order.id" class="order-card__details">
          <ScItem
            v-for="item in order.items"
            :key="item.id"
            class="order-card__item"
            :style="{ '--order-item-placeholder': item.color }"
            :info="item"
            :show-date="false"
            :show-remove="false"
            order-actions-layout
          />
        </div>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, shallowRef, onMounted,ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { fetchMyOrders } from '@/api/user'
import ScItem from '@/views/shoppingCart/sc-item.vue'

type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
type ActualOrderStatus = Exclude<OrderStatus, 'all'>

interface StatusOption {
  key: OrderStatus
  label: string
}

interface OrderItem {
  id: number
  url: string
  title: string
  brand: string
  fileSize: number
  date: string
  amount: number
  tags: string[]
  checked: boolean
  color: string
}

interface OrderRecord {
  id: string
  date: string
  status: ActualOrderStatus
  amount: number
  items: OrderItem[]
}

const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
const { t } = useI18n({ useScope: 'global' })

const statusOptions = computed<StatusOption[]>(() => [
  { key: 'all', label: t('Wardrobe.orders.statuses.all') },
  { key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
  { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
  { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
])

const createOrderItem = (
  id: number,
  title: string,
  brand: string,
  amount: number,
  color: string
): OrderItem => {
  return {
    id,
    url: placeholderImage,
    title,
    brand,
    fileSize: 1024 * (id + 2),
    date: '2026-02-16 23:34',
    amount,
    color,
    checked: false,
    tags: ['female', 'dress', 'blouse', 'outwear']
  }
}
const orders: OrderRecord[] = [
  {
    id: 'SP897772698',
    date: 'Feb 23, 2026, 3:00 PM',
    status: 'paid',
    amount: 45,
    items: [
      createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
      createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
      createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
    ]
  },
  {
    id: 'SP893872698',
    date: 'Feb 21, 2026, 10:20 AM',
    status: 'unpaid',
    amount: 15,
    items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
  },
  {
    id: 'SP897262698',
    date: 'Feb 16, 2026, 11:34 PM',
    status: 'paid',
    amount: 29,
    items: [
      createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
      createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
      createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
    ]
  },
  {
    id: 'SP892072692',
    date: 'Feb 2, 2026, 9:34 PM',
    status: 'paid',
    amount: 15,
    items: [
      createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
      createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
    ]
  },
  {
    id: 'SP892972603',
    date: 'Jan 4, 2026, 8:22 PM',
    status: 'cancelled',
    amount: 15,
    items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
  }
]

const activeStatus = shallowRef<OrderStatus>('all')
const expandedOrderId = shallowRef('SP897262698')

const filteredOrders = computed(() => {
  if (activeStatus.value === 'all') return orders
  return orders.filter((order) => order.status === activeStatus.value)
})

const toggleOrder = (orderId: string) => {
  expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
}

const getExtraCount = (order: OrderRecord) => {
  return Math.max(order.items.length - 2, 0)
}

const getStatusBadgeLabel = (status: ActualOrderStatus) => {
  return t(`Wardrobe.orders.statusBadges.${status}`)
}

const getOrderActionLabel = (status: ActualOrderStatus) => {
  if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
  if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
  return t('Wardrobe.orders.actions.buyAgain')
}

const orderParams =ref({
  page: 1,
  pageSize: 10,
  status: ''
})
const fetchAllOrders = () => {
  fetchMyOrders(orderParams.value)
}

onMounted(() => {
  fetchAllOrders()
})

</script>

<style lang="less" scoped>
.c-svg {
  width: initial;
  height: initial;
}
.wardrobe-orders {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 9rem;
  overflow-y: auto;

  .orders-toolbar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 3.6rem 0 2.8rem;
    flex-wrap: wrap;

    .orders-toolbar__chip {
      height: 4rem;
      min-width: 8rem;
      padding: 0 3rem;
      border: 0.1rem solid #232323;
      border-radius: 2rem;
      background: #ffffff;
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.6rem;
      color: #585858;
      font-weight: 400;
      cursor: pointer;

      &.is-active {
        background: #232323;
        border-color: #232323;
        color: #ffffff;
      }
    }
  }

  .orders-list {
    padding-bottom: 8rem;
  }
}

.order-card {
  position: relative;
  border-bottom: 0.1rem solid #c4c4c4;

  .order-card__toggle {
    position: absolute;
    top: 5.8rem;
    left: 4.2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    span {
      display: block;
      width: 0.9rem;
      height: 0.9rem;
      border-right: 0.1rem solid #585858;
      border-bottom: 0.1rem solid #585858;
      transform: rotate(-45deg);
      transition: transform 0.2s ease;

      &.is-expanded {
        transform: rotate(45deg);
      }
    }
  }

  .order-card__summary {
    min-height: 12.4rem;
    display: grid;
    grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
    align-items: center;
    column-gap: 2rem;
    padding-left: 9rem;

    .order-card__meta {
      .order-card__id {
        font-family: 'KaiseiOpti-Bold';
        font-size: 2rem;
        line-height: 3rem;
        color: #232323;
      }

      .order-card__date {
        margin: 0.8rem 0 0;
        font-family: 'KaiseiOpti-Regular';
        font-size: 1.4rem;
        color: #808080;
      }
    }

    .order-card__preview {
      display: flex;
      align-items: center;

      .order-card__thumb {
        width: 8rem;
        height: 10rem;
        display: block;
        margin-right: 1.2rem;
        img {
          width: 100%;
        }
      }

      .order-card__extra {
        margin-left: 1.2rem;
        font-family: 'KaiseiOpti-Regular';
        font-size: 1.4rem;
        color: #808080;
      }
    }

    .order-card__status {
      justify-self: start;
      min-width: 8.8rem;
      height: 2.4rem;
      padding: 0 1.6rem;
      border-radius: 2.4rem;
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.4rem;
      line-height: 2.4rem;
      text-align: center;

      &.is-paid {
        background: #e8f2ec;
        color: #769591;
      }

      &.is-unpaid {
        background: #fef3e2;
        color: #b48230;
      }

      &.is-cancelled {
        background: #fff2f2;
        color: #c65f5a;
      }
    }

    .order-card__amount {
      white-space: nowrap;
      color: #232323;
      font-family: 'KaiseiOpti-Bold';

      span {
        font-size: 2rem;
      }

      small {
        margin-left: 0.4rem;
        font-size: 1.4rem;
      }
    }

    .order-card__action {
      justify-self: center;
      width: 14rem;
      height: 3.8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      border: 0.1rem solid #c4c4c4;
      background: #f6f6f6;
      font-family: 'KaiseiOpti-Bold';
      font-size: 1.6rem;
      color: #232323;
      cursor: pointer;

      &.is-primary {
        width: 16rem;
        border-color: #232323;
        background: #232323;
        color: #ffffff;
        font-size: 1.4rem;
      }
    }
  }

  > .order-card__details {
    margin-left: 9rem;
    padding: 0 2.4rem;
    background: #fafafa;

    :deep(.sc-item) {
      --sc-item-img-width: 9.5rem;
      --sc-item-img-height: 12rem;
      --sc-item-padding: 1.2rem 2.4rem;
      --sc-item-content-margin: 0 4rem;
      --sc-item-title-font-size: 2rem;
      --sc-item-brand-font-size: 1.4rem;
      --sc-item-amount-font-size: 2.2rem;
      --sc-item-currency-font-size: 1.2rem;
      --sc-item-tag-min-width: 8.8rem;
      --sc-item-tag-height: 2.4rem;
      --sc-item-tag-radius: 2.4rem;
      --sc-item-tag-font-size: 1.4rem;
      --sc-item-order-amount-width: 12rem;
      --sc-item-order-action-width: 18rem;
      --sc-item-order-column-gap: 2rem;
      --sc-item-order-actions-offset: 4.8rem;
      border-bottom-color: #e2e2e2;
    }

    :deep(.sc-item:last-child) {
      border-bottom: 0;
    }
  }
}
</style>
