<template>
  <div class="course-package-store">
    <template v-if="state.loading">
      <div class="skeleton-list" :class="{ compact }">
        <div v-for="i in 4" :key="i" class="skeleton-card">
          <van-skeleton title :row="2" />
        </div>
      </div>
    </template>
    <template v-else-if="state.error">
      <van-empty description="加载失败">
        <van-button size="small" type="primary" @click="loadPackages">重试</van-button>
      </van-empty>
    </template>
    <template v-else-if="!packages.length">
      <van-empty description="暂无可售课包" />
    </template>
    <div v-else class="package-list" :class="{ compact }">
      <div v-for="pkg in packages" :key="pkg.id" class="package-card">
        <div class="card-cover">
          <van-image
            v-if="pkg.cover_image_url"
            :src="pkg.cover_image_url"
            fit="cover"
            height="3.2rem"
          >
            <template v-slot:error>
              <div class="cover-placeholder">📦</div>
            </template>
          </van-image>
          <div v-else class="cover-placeholder">📦</div>
        </div>
        <div class="card-body">
          <div class="card-title">{{ pkg.package_name }}</div>
          <div class="card-desc" v-if="pkg.description">{{ pkg.description }}</div>
          <div class="card-meta">
            <span v-if="pkg.total_lessons" class="meta-item">{{ pkg.total_lessons }} 课次</span>
            <span v-if="pkg.validity_days" class="meta-item">{{ pkg.validity_days }} 天有效</span>
          </div>
          <van-button size="small" round plain type="primary" class="preview-btn" @click="onPreview(pkg)">
            试看
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Button, Empty, Image, Skeleton, showDialog } from 'vant';
import useCoursePackage from '~/store/course-package';
import { CoursePackage } from '~/types';

export default defineComponent({
  name: 'course-package-store',
  components: {
    [Button.name!]: Button,
    [Empty.name!]: Empty,
    [Image.name!]: Image,
    [Skeleton.name!]: Skeleton,
  },
  props: {
    orgId: { type: String, default: '' },
    compact: { type: Boolean, default: false },
  },
  setup(props) {
    const router = useRouter();
    const { store, queryPublicPackages, queryOrgPackages } = useCoursePackage();

    const resolvedOrgId = computed(() => {
      if (props.orgId) return props.orgId;
      // Fallback to URL query param `org_id` (e.g. for shared store links)
      const params = new URLSearchParams(window.location.search);
      return params.get('org_id') || '';
    });

    const state = reactive({
      loading: false,
      error: false,
      loaded: false,
    });

    const packages = computed(() => store.list || []);

    const isLoggedIn = () => !!localStorage.getItem('Authorization');

    const loadPackages = async () => {
      state.loading = true;
      state.error = false;
      const orgId = resolvedOrgId.value;
      if (orgId) {
        const ok = await queryPublicPackages(orgId);
        state.error = !ok;
      } else if (isLoggedIn()) {
        const ok = await queryOrgPackages();
        state.error = !ok;
      } else {
        // Guest, no org_id: load all public packages across all orgs
        const ok = await queryPublicPackages();
        state.error = !ok;
      }
      state.loading = false;
      state.loaded = true;
    };

    const onPreview = (pkg: CoursePackage) => {
      if (isLoggedIn()) {
        router.push(`/course/course-package/detail?id=${pkg.id}&preview=1`);
      } else {
        showDialog({
          title: '提示',
          message: '请通过微信登录后查看完整内容',
          confirmButtonText: '知道了',
        });
      }
    };

    onMounted(loadPackages);

    return { state, packages, loadPackages, onPreview };
  },
});
</script>

<style scoped lang="less">
.course-package-store {
  width: 100%;

  .skeleton-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.24rem;
    padding: 0 0.24rem;

    &.compact {
      grid-template-columns: 1fr 1fr;
    }

    .skeleton-card {
      background: #fff;
      border-radius: 8px;
      padding: 0.24rem;
    }
  }

  .package-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.24rem;
    padding: 0 0.24rem 0.24rem;

    &.compact {
      grid-template-columns: 1fr 1fr;
    }
  }

  .package-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;

    .card-cover {
      width: 100%;

      .cover-placeholder {
        width: 100%;
        height: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
        font-size: 1rem;
      }
    }

    .card-body {
      padding: 0.2rem;
      flex: 1;
      display: flex;
      flex-direction: column;

      .card-title {
        font-weight: 600;
        font-size: 0.28rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .card-desc {
        font-size: 0.22rem;
        color: #999;
        margin-top: 0.08rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
      }

      .card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.12rem;
        margin-top: 0.12rem;

        .meta-item {
          font-size: 0.2rem;
          color: #888;
          background: #f5f5f5;
          padding: 0.04rem 0.12rem;
          border-radius: 4px;
        }
      }

      .preview-btn {
        margin-top: 0.16rem;
        align-self: flex-start;
      }
    }
  }
}
</style>
