<script setup lang="ts">
// 프로젝트 헤더 카드 — 상세/멤버/활동/설정 화면이 공유
import { computed } from 'vue'
import UserAvatar from '@/components/UserAvatar.vue'
import type { Project, User } from '@/mock/relay.mock'

interface Props {
  repo: Project
  /** 메타 우측 텍스트(예: "2시간 전 업데이트", "멤버 5명") */
  metaText: string
  /** 아바타 스택 override (기본: project.members) */
  members?: User[]
  /** +N 표기 (기본: project.moreCount) */
  moreCount?: number
}
const props = defineProps<Props>()

const avatars = computed(() => props.members ?? props.repo.members)
const extra = computed(() => props.moreCount ?? props.repo.moreCount)
</script>

<template>
  <div class="repo-head">
    <div class="repo-ico">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
      </svg>
    </div>
    <div class="rh-main">
      <div class="rh-title">
        <span class="rh-name">{{ repo.name }}</span>
      </div>
      <div
        v-if="repo.desc"
        class="rh-desc"
      >
        {{ repo.desc }}
      </div>
      <div class="rh-meta">
        <span class="mi avstack">
          <span
            v-for="m in avatars"
            :key="m.id"
            class="avatar"
          ><UserAvatar
            :url="m.avatarUrl"
            :name="m.name"
          /></span>
          <span
            v-if="extra > 0"
            class="avatar av-more"
          >+{{ extra }}</span>
        </span>
        <span class="mi">{{ metaText }}</span>
      </div>
      <!-- 진행률 스트립 등 추가 영역 -->
      <slot name="extra" />
    </div>
    <!-- 액션 영역 — 페이지가 #actions 슬롯을 제공할 때만 렌더(기본 '새 업무' 버튼 제거) -->
    <div
      v-if="$slots.actions"
      class="rh-actions"
    >
      <slot name="actions" />
    </div>
  </div>
</template>

<style scoped>
.repo-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 1.25rem 1.375rem;
  box-shadow: var(--shadow-sm);
}
.repo-ico {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.625rem;
  background: var(--accent-weak);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.repo-ico svg {
  width: 1.5rem;
  height: 1.5rem;
}
.rh-main {
  flex: 1;
  min-width: 0;
}
.rh-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rh-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01875rem;
  white-space: nowrap;
}
.rh-slug {
  font-size: 0.781rem;
  color: var(--text-3);
  margin-top: 0.3125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rh-desc {
  font-size: 0.844rem;
  color: var(--text-2);
  margin-top: 0.375rem;
}
.rh-meta {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-3);
}
.rh-meta .mi {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
}
.rh-meta .mi svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.rh-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
</style>
