<template>
  <Dialog 
    :visible="visible" 
    @update:visible="$emit('update:visible', $event)"
    :style="{ width: '80vw' }" 
    :modal="true"
    :closable="true"
    :draggable="false"
    class="p-fluid"
    :header="'파일에서 이벤트 생성'"
  >
    <div class="file-upload-container">
      <!-- 단계 표시 -->
      <div class="steps-container">
        <ul class="steps">
          <li v-for="(step, index) in steps" :key="index" :class="{ 'active': index === activeStep, 'completed': index < activeStep }">
            <span class="step-number">{{ index + 1 }}</span>
            <span class="step-label">{{ step.label }}</span>
          </li>
        </ul>
      </div>
      
      <!-- 1단계: 파일 업로드 -->
      <div v-if="activeStep === 0" class="upload-step">
        <div class="file-upload-card">
          <div class="file-upload-center">
            <span class="upload-icon pi pi-cloud-upload"></span>
            <div class="upload-text-group">
              <div class="upload-title">파일 업로드</div>
              <div class="upload-desc">
                엑셀(xlsx, xls), CSV, 이미지(jpg, png) 파일을 업로드하세요.<br>
                <span class="desc-note">(이미지 파일은 정확성이 낮습니다. 가급적 엑셀 또는 CSV를 이용하세요.)</span>
              </div>
              <label for="file-input" class="upload-btn">
                파일을 선택하세요
                <input
                  id="file-input"
                  type="file"
                  accept=".xlsx,.xls,.csv,.jpg,.jpeg,.png"
                  @change="onFileChange"
                  :disabled="loading || uploading"
                  style="display:none;"
                />
              </label>
              <div v-if="selectedFile" class="selected-file-info">
                <span class="p-fileupload-filename">{{ selectedFile.name }}</span>
                <span class="file-size">{{ formatSize(selectedFile.size) }}</span>
                <span v-if="uploadStatus==='done'" class="p-tag p-tag-success ml-2">업로드 완료</span>
                <span v-else-if="uploadStatus==='uploading'" class="p-tag p-tag-warning ml-2">업로드 중</span>
                <Button type="button" icon="pi pi-times" class="p-button-outlined p-button-rounded p-button-danger p-button-sm ml-2"
                  @click="removeSelectedFile" :disabled="uploading" />
              </div>
            </div>
          </div>

          <!-- 시트 선택 UI - 시트가 여러 개일 경우에만 표시 -->
          <div v-if="sheetNames.length > 1" class="mt-3">
            <label for="sheet-select" class="field-label">엑셀 시트 선택</label>
            <Select id="sheet-select" v-model="selectedSheetName" :options="sheetNames" placeholder="시트 선택" class="p-inputtext" />
            <Button label="시트 데이터 불러오기" class="ml-2" @click="parseFile" :disabled="!selectedSheetName || loading" />
          </div>
          
          <!-- 시트가 하나만 있을 경우 자동으로 선택 -->
          <div v-else-if="sheetNames.length === 1" class="mt-3">
            <Button label="시트 데이터 불러오기" icon="pi pi-file-excel" class="p-button-raised" @click="parseFile" :disabled="loading" />
            <small class="ml-2 text-500">시트: {{ sheetNames[0] }}</small>
          </div>

          <div v-if="uploadError" class="error-message">
            <i class="pi pi-exclamation-triangle"></i>
            {{ uploadError }}
          </div>
          
          <!-- 파일 업로드 중 상태 표시 -->
          <div v-if="uploading" class="upload-status">
            <ProgressSpinner style="width: 50px; height: 50px" />
            <span>파일 업로드 중...</span>
          </div>
        </div>
      </div>
      
      <!-- 2단계: 데이터 미리보기 및 편집 -->
      <div v-if="activeStep === 1" class="preview-step">
        <div class="card">
          <h3>데이터 미리보기 및 편집</h3>
          <p>파일에서 추출한 데이터를 확인하고 필요한 경우 각 데이터를 클릭하여 수정하세요.</p>
          
          <div v-if="loading" class="loading-container">
            <ProgressSpinner />
            <span>데이터 처리 중...</span>
          </div>
          
          <div v-else>
            <!-- 점수에 핸디캡 포함 체크박스 -->
            <div class="mb-2" style="display: flex; align-items: center; justify-content: flex-end;">
              <Checkbox v-model="scoresIncludeHandicap" inputId="scoresIncludeHandicap" :binary="true" />
              <label for="scoresIncludeHandicap" class="ml-2" style="cursor:pointer;">점수에 핸디캡 포함</label>
              <span class="text-muted ml-3">(체크 시, 각 참가자 핸디캡만큼 점수에서 차감)</span>
            </div>
            <DataTable 
              :value="parsedData.participants" 
              :paginator="true" 
              :rows="10"
              :rowsPerPageOptions="[5, 10, 20, 50]"
              editMode="cell"
              dataKey="tempId"
              class="p-datatable-sm"
              responsiveLayout="scroll"
              style="table-layout: fixed;"
              @cell-edit-complete="onCellEditComplete"
            >
              <Column field="name" header="이름" style="width: 15%" />
              <Column field="memberInfo" header="회원 매핑" style="width: 20%">
                <template #body="slotProps">
                  <div class="member-mapping-container">
                    <div v-if="slotProps.data.memberInfo" class="member-info">
                      <span>{{ slotProps.data.memberInfo.name }}</span>
                      <Badge :value="'매핑됨'" severity="success" class="ml-2" />
                    </div>
                    <div v-else class="member-info">
                      <span class="text-muted">매핑되지 않음</span>
                    </div>
                    
                    <div class="member-actions">
                      <SplitButton 
                        :label="slotProps.data.memberInfo ? '매핑 변경' : '회원 매핑'" 
                        icon="pi pi-user" 
                        class="p-button-sm"
                        @click="openMemberSelection(slotProps.data)"
                        :model="[
                          {
                            label: '회원 찾기',
                            icon: 'pi pi-search',
                            command: () => openMemberSelection(slotProps.data)
                          },
                          {
                            label: '새 회원 추가',
                            icon: 'pi pi-user-plus',
                            command: () => openNewMemberForm(slotProps.data)
                          },
                          {
                            label: '게스트로 설정',
                            icon: 'pi pi-user',
                            command: () => setAsGuest(slotProps.data)
                          }
                        ]"
                      />
                    </div>
                  </div>
                </template>
              </Column>
              
              <Column field="teamNumber" header="팀" style="width: 10%">
                <template #body="slotProps">
                  {{ slotProps.data.teamNumber || '' }}
                </template>
                <template #editor="{ data, field }">
                  <InputText v-model="data[field]" @change="onTeamNameChange($event, data)" style="width: 80px" />
                </template>
              </Column>
              
              <Column field="handicap" header="핸디캡" style="width: 8%">
                <template #body="slotProps">
                  <!-- 파싱 데이터의 handicap이 있으면 우선, 없으면 회원정보, 둘 다 없으면 0 -->
                  <span>{{ getParticipantHandicap(slotProps.data) }}</span>
                </template>
                <template #editor="{ data, field }">
                  <InputNumber v-model.number="data[field]" @change="onHandicapChange($event, data)" :showButtons="false" :inputStyle="{ width: '60px' }" />
                </template>
              </Column>
              
              <!-- 게임 점수 컬럼 -->
              <template v-for="i in parsedData.gameCount" :key="i">
                <Column :field="'game' + i" :header="i + '게임'" style="width: 10%">
                  <template #body="slotProps">
                    {{ getGameScore(slotProps.data, i) }}
                  </template>
                  <template #editor="{ data, field }">
                    <InputNumber :modelValue="getGameScore(data, parseInt(field.replace('game', '')))" @update:modelValue="val => updateScore(data, parseInt(field.replace('game', '')), val)" :showButtons="false" :inputStyle="{ width: '60px' }" />
                  </template>
                </Column>
              </template>
              
              <Column header="작업" style="width: 10%">
                <template #body="slotProps">
                  <Button 
                    icon="pi pi-trash" 
                    class="p-button-rounded p-button-text p-button-danger"
                    @click="removeParticipant(slotProps.data)" 
                  />
                </template>
              </Column>
            </DataTable>
            
            <div class="mt-3">
              <Button 
                label="참가자 추가" 
                icon="pi pi-plus" 
                class="p-button-outlined"
                @click="addNewParticipant" 
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 3단계: 이벤트 정보 설정 -->
      <div v-if="activeStep === 2" class="event-info-step">
        <div class="card">
          <!-- 기존 이벤트 선택 UI 추가 -->
          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
            <Select 
              v-model="selectedEventId" 
              :options="eventOptions" 
              optionLabel="title" 
              optionValue="id" 
              placeholder="기존 이벤트 선택" 
              style="width: 220px;"
            />
            <Button 
              label="불러오기" 
              icon="pi pi-download" 
              @click="loadSelectedEvent" 
              :disabled="!selectedEventId" 
              size="small"
            />
          </div>
          <div class="card-header">
            <h3 class="mb-2">이벤트 정보 설정</h3>
            <p class="text-secondary mb-4">파일에서 추출한 데이터를 기반으로 이벤트 정보를 입력하세요.</p>
          </div>
          
          <div class="p-fluid">
            <div class="grid">
              <!-- 이벤트 기본 정보 -->
              <div class="col-12 md:col-6">
                <div class="card-section">
                  <h4 class="section-title">기본 정보</h4>
                  
                  <div class="field mb-4">
                    <label for="title" class="field-label">이벤트 제목 <span class="text-red-500">*</span></label>
                    <InputText id="title" v-model="eventData.title" :class="{'p-invalid': submitted && !eventData.title}" />
                    <small v-if="submitted && !eventData.title" class="p-error">이벤트 제목은 필수입니다.</small>
                  </div>
                  
                  <div class="field mb-4">
                    <label for="eventType" class="field-label">이벤트 유형 <span class="text-red-500">*</span></label>
                    <Select 
                      id="eventType" 
                      v-model="eventData.eventType" 
                      :options="EVENT_TYPE_OPTIONS" 
                      optionLabel="name" 
                      optionValue="value"
                      placeholder="이벤트 유형 선택" 
                      :class="{'p-invalid': submitted && !eventData.eventType}"
                    />
                    <small v-if="submitted && !eventData.eventType" class="p-error">이벤트 유형은 필수입니다.</small>
                  </div>
                  
                  <div class="field mb-4">
                    <label for="description" class="field-label">이벤트 설명</label>
                    <Textarea id="description" v-model="eventData.description" rows="3" placeholder="이벤트에 대한 상세 설명을 입력하세요" />
                  </div>
                </div>
              </div>
              
              <!-- 일정 및 장소 -->
              <div class="col-12 md:col-6">
                <div class="card-section">
                  <h4 class="section-title">일정 및 장소</h4>
                  
                  <div class="field mb-4">
                    <label for="startDate" class="field-label">시작일 <span class="text-red-500">*</span></label>
                    <DatePicker 
                      id="startDate" 
                      v-model="eventData.startDate" 
                      dateFormat="yy-mm-dd" 
                      :showTime="true"
                      :class="{'p-invalid': submitted && !eventData.startDate}" 
                      placeholder="시작 날짜와 시간을 선택하세요"
                    />
                    <small v-if="submitted && !eventData.startDate" class="p-error">시작일은 필수입니다.</small>
                  </div>
                  
                  <div class="field mb-4">
                    <label for="endDate" class="field-label">종료일</label>
                    <DatePicker 
                      id="endDate" 
                      v-model="eventData.endDate" 
                      dateFormat="yy-mm-dd" 
                      :showTime="true" 
                      placeholder="종료 날짜와 시간을 선택하세요"
                    />
                  </div>
                  
                  <div class="field mb-4">
                    <label for="location" class="field-label">장소</label>
                    <InputText id="location" v-model="eventData.location" placeholder="이벤트 개최 장소를 입력하세요" />
                  </div>
                </div>
              </div>
              
              <!-- 참가 정보 -->
              <div class="col-12">
                <div class="card-section">
                  <h4 class="section-title">참가 정보</h4>
                  
                  <div class="grid">
                    <div class="col-12 md:col-6">
                      <div class="field mb-4">
                        <label for="maxParticipants" class="field-label">최대 참가 인원</label>
                        <InputNumber 
                          id="maxParticipants" 
                          v-model="eventData.maxParticipants" 
                          :showButtons="false" 
                          placeholder="최대 참가 가능 인원을 입력하세요"
                        />
                      </div>
                    </div>
                    
                    <div class="col-12 md:col-6">
                      <div class="field mb-4">
                        <label for="gameCount" class="field-label">게임 수 <span class="text-red-500">*</span></label>
                        <InputNumber 
                          id="gameCount" 
                          v-model="eventData.gameCount" 
                          :showButtons="true" 
                          :min="1" 
                          :max="10"
                          :class="{'p-invalid': submitted && !eventData.gameCount}" 
                          placeholder="게임 수를 입력하세요"
                        />
                        <small v-if="submitted && !eventData.gameCount" class="p-error">게임 수는 필수입니다.</small>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 4단계: 최종 확인 -->
      <div v-if="activeStep === 3" class="confirm-step">
        <div class="card">
          <h3>최종 확인</h3>
          <p>아래 정보를 확인하고 저장하세요.</p>
          
          <div class="summary-container">
            <div class="summary-section">
              <h4>이벤트 정보</h4>
              <div class="summary-item">
                <span class="summary-label">제목:</span>
                <span class="summary-value">{{ eventData.title }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">유형:</span>
                <span class="summary-value">{{ getEventTypeLabel(eventData.eventType) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">시작일:</span>
                <span class="summary-value">{{ formatDate(eventData.startDate) }}</span>
              </div>
              <div class="summary-item" v-if="eventData.endDate">
                <span class="summary-label">종료일:</span>
                <span class="summary-value">{{ formatDate(eventData.endDate) }}</span>
              </div>
              <div class="summary-item" v-if="eventData.location">
                <span class="summary-label">장소:</span>
                <span class="summary-value">{{ eventData.location }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">게임 수:</span>
                <span class="summary-value">{{ eventData.gameCount }}</span>
              </div>
            </div>
            
            <div class="summary-section">
              <h4>참가자 정보</h4>
              <div class="summary-item">
                <span class="summary-label">총 참가자:</span>
                <span class="summary-value">{{ parsedData.participants.length }}명</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">팀 수:</span>
                <span class="summary-value">{{ getUniqueTeamCount() }}개</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 다이얼로그 푸터 (단계별 버튼) -->
    <template #footer>
      <Button 
        label="취소" 
        icon="pi pi-times" 
        class="p-button-text" 
        @click="$emit('update:visible', false)" 
      />
      
      <Button 
        v-if="activeStep > 0" 
        label="이전" 
        icon="pi pi-arrow-left" 
        class="p-button-outlined" 
        @click="prevStep" 
      />
      
      <Button 
        v-if="activeStep < steps.length - 1" 
        label="다음" 
        icon="pi pi-arrow-right" 
        @click="nextStep" 
      />
      
      <Button 
        v-if="activeStep === steps.length - 1" 
        label="저장" 
        icon="pi pi-check" 
        @click="saveEventData" 
        :loading="saving"
      />
    </template>
  </Dialog>
  
  <!-- 회원 선택 다이얼로그 -->
  <Dialog 
    v-model:visible="memberSelectionDialog" 
    :style="{ width: '50vw' }" 
    :modal="true"
    header="회원 선택"
  >
    <div class="member-selection-container">
      <DataTable 
        :value="clubMembers" 
        :paginator="true" 
        :rows="5"
        :filters="memberFilters"
        filterDisplay="row"
        class="p-datatable-sm"
      >
        <Column field="name" header="이름" filterField="name" style="width: 25%">
          <template #filter="{ filterModel, filterCallback }">
            <InputText 
              v-model="filterModel.value" 
              @input="filterCallback()" 
              placeholder="이름 검색" 
              class="p-column-filter" 
            />
          </template>
        </Column>
        
        <Column field="gender" header="성별" style="width: 15%"></Column>
        <Column field="handicap" header="핸디캡" style="width: 15%"></Column>
        <Column field="average" header="평균" style="width: 15%"></Column>
        <Column header="선택" style="width: 15%">
          <template #body="slotProps">
            <Button 
              label="선택" 
              class="p-button-sm" 
              @click="selectMember(slotProps.data)" 
            />
          </template>
        </Column>
      </DataTable>
    </div>
    
    <template #footer>
      <Button label="취소" icon="pi pi-times" class="p-button-text" @click="memberSelectionDialog = false" />
    </template>
  </Dialog>
  
  <!-- 새 회원 추가 다이얼로그 -->
  <Dialog 
    v-model:visible="newMemberDialog" 
    :style="{ width: '450px' }" 
    :modal="true"
    :header="newMemberMode === 'guest' ? '게스트 추가' : '새 회원 추가'"
    class="p-fluid"
  >
    <div class="grid">
      <div class="field col-12 mb-3">
        <label for="newMemberName" class="mb-1">이름</label>
        <InputText id="newMemberName" v-model="newMember.name" class="w-full" :class="{'p-invalid': newMemberSubmitted && !newMember.name}" />
        <small v-if="newMemberSubmitted && !newMember.name" class="p-error">이름은 필수입니다.</small>
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberGender" class="mb-1">성별</label>
        <Select id="newMemberGender" v-model="newMember.gender" :options="GENDER_OPTIONS" optionLabel="name" optionValue="value" placeholder="성별 선택" class="w-full" />
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberType" class="mb-1">회원 유형</label>
        <Select id="newMemberType" v-model="newMember.memberType" :options="MEMBER_TYPE_OPTIONS" optionLabel="name" optionValue="value" placeholder="회원 유형 선택" class="w-full" :disabled="newMemberMode === 'guest'" />
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberPhone" class="mb-1">전화번호</label>
        <InputText id="newMemberPhone" v-model="newMember.phone" class="w-full" />
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberEmail" class="mb-1">이메일</label>
        <InputText id="newMemberEmail" v-model="newMember.email" class="w-full" />
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberHandicap" class="mb-1">핸디캡</label>
        <InputNumber id="newMemberHandicap" v-model="newMember.handicap" :showButtons="false" :min="-300" :max="300" class="w-full" />
      </div>
      
      <div class="field col-6 mb-3">
        <label for="newMemberStatus" class="mb-1">상태</label>
        <Select id="newMemberStatus" v-model="newMember.status" :options="STATUS_OPTIONS" optionLabel="name" optionValue="value" placeholder="상태 선택" class="w-full" />
      </div>
    </div>
    
    <div class="flex justify-content-end gap-2 mt-4">
      <Button label="취소" icon="pi pi-times" class="p-button-text" @click="newMemberDialog = false" />
      <Button label="저장" icon="pi pi-check" class="p-button-text" @click="addNewMemberAndSelect" :loading="savingNewMember" />
    </div>
  </Dialog>
</template>

<script setup>
import { 
  getEventTypeLabel, 
  getStatusLabel, 
  getPaymentStatusLabel, 
  getMemberTypeLabel, 
  getGenderLabel, 
  EVENT_TYPE_OPTIONS, 
  STATUS_OPTIONS, 
  PAYMENT_STATUS_OPTIONS, 
  MEMBER_TYPE_OPTIONS, 
  GENDER_OPTIONS 
} from '@/utils/enumMappings';
import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import dayjs from 'dayjs';
import { useClubStore } from '@/stores/clubStore';
import eventService from '@/services/eventService';
import clubService from '@/services/clubService';
import * as XLSX from 'xlsx';

// 기존 이벤트 선택 관련 상태
const selectedEventId = ref(null);
const eventOptions = ref([]);

// 기존 이벤트 목록 불러오기
const loadEventOptions = async () => {
  try {
    const events = await eventService.getEvents(props.clubId);
    eventOptions.value = Array.isArray(events) ? events : [];
  } catch (e) {
    toast.add({ severity: 'error', summary: '오류', detail: '이벤트 목록을 불러오지 못했습니다.', life: 3000 });
    eventOptions.value = [];
  }
};

// 기존 이벤트 정보 불러오기 및 폼에 적용
const loadSelectedEvent = async () => {
  if (!selectedEventId.value) return;
  try {
    const event = await eventService.getEventById(selectedEventId.value);
    if (event) {
      // ID 추가 - 이벤트 수정 모드로 설정
      eventData.value.id = event.id;
      
      // 주요 필드만 덮어쓰기 (불필요한 속성 제외)
      eventData.value.title = event.title || '';
      eventData.value.description = event.description || '';
      eventData.value.eventType = event.eventType || '';
      eventData.value.startDate = event.startDate ? new Date(event.startDate) : null;
      eventData.value.endDate = event.endDate ? new Date(event.endDate) : null;
      eventData.value.location = event.location || '';
      eventData.value.maxParticipants = event.maxParticipants || 0;
      eventData.value.gameCount = event.gameCount || 3;
      eventData.value.status = event.status || '활성';
      
      toast.add({ severity: 'info', summary: '이벤트 불러옴', detail: `'${event.title}' 이벤트를 수정 모드로 불러왔습니다.`, life: 3000 });
    }
  } catch (e) {
    toast.add({ severity: 'error', summary: '오류', detail: '이벤트 정보를 불러오지 못했습니다.', life: 3000 });
  }
};

// onMounted 훅은 아래에서 한 번만 사용

// PrimeVue 컴포넌트 임포트

const toast = useToast();
const clubStore = useClubStore();

// Vue 3에서는 컴포넌트를 자동으로 인식하도록 임포트하면 됩니다.

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  clubId: {
    type: [Number, String],
    required: true
  }
});

// Emits
const emit = defineEmits(['update:visible', 'file-uploaded', 'event-created']);

// 상태 변수
const activeStep = ref(0);
const steps = ref([
  { label: '파일 업로드' },
  { label: '데이터 미리보기' },
  { label: '이벤트 정보' },
  { label: '최종 확인' }
]);

// FileUpload 컴포넌트 참조
const fileUploadRef = ref(null);

const uploadedFile = ref(null);
const uploadError = ref('');
const loading = ref(false);
const uploading = ref(false);
const saving = ref(false);
const submitted = ref(false);

// 파싱된 데이터
const parsedData = ref({
  participants: [],
  gameCount: 0
});

// 엑셀 시트 관련 상태
const sheetNames = ref([]);
const selectedSheetName = ref('');

// 이벤트 데이터
const eventData = ref({
  title: '',
  description: '',
  eventType: '',
  startDate: new Date(),
  endDate: null,
  location: '',
  maxParticipants: 0,
  gameCount: 3,
  status: '활성'
});

// 회원 선택 다이얼로그
const memberSelectionDialog = ref(false);
const selectedParticipant = ref(null);
const clubMembers = ref([]);
const memberFilters = ref({
  name: { value: null, matchMode: 'contains' }
});

// 새 회원 추가 다이얼로그
const newMemberDialog = ref(false);
const newMemberSubmitted = ref(false);
const savingNewMember = ref(false);
const newMemberMode = ref('normal'); // 'normal' 또는 'guest'
const newMember = ref({
  name: '',
  gender: '남성',
  memberType: '정회원',
  handicap: 0,
  phone: '',
  email: '',
  status: 'active'
});



// 점수에 핸디캡 포함 여부
const scoresIncludeHandicap = ref(false);

// API URL - eventService 사용
const uploadUrl = computed(() => {
  return `${import.meta.env.VITE_API_URL}${eventService.getFileUploadUrl(props.clubId)}`;
});

// 컴포넌트 마운트 시 초기화 작업 수행
onMounted(async () => {
  loadEventOptions();
  await loadClubMembers();
});

// 클럽 회원 목록 로드
const loadClubMembers = async () => {
  try {
    const response = await clubService.getClubMembers(props.clubId);
    if (response && Array.isArray(response.data)) {
      clubMembers.value = response.data.map(member => ({
        id: member.id,
        name: member.name,
        gender: getGenderLabel(member.gender),
        average: member.average || 0,
        handicap: member.handicap || 0
      }));
    } else {
      console.error('클럽 회원 목록 형식 오류:', response);
      clubMembers.value = [];
    }
  } catch (error) {
    console.error('클럽 회원 목록 로드 오류:', error);
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '클럽 회원 목록을 불러오는데 실패했습니다.',
      life: 3000
    });
  }
};

// 이미지 파일 여부 체크
const isImageFile = (file) => {
  const ext = file.name.split('.').pop().toLowerCase();
  return ['jpg', 'jpeg', 'png'].includes(ext);
};

// 파일 형식에 따른 아이콘 가져오기
const getFileIcon = (file) => {
  const extension = file.name.split('.').pop().toLowerCase();
  
  switch (extension) {
    case 'xlsx':
    case 'xls':
      return 'pi pi-file-excel text-green-500 text-xl';
    case 'csv':
      return 'pi pi-file-excel text-green-500 text-xl';
    case 'jpg':
    case 'jpeg':
    case 'png':
      return 'pi pi-image text-blue-500 text-xl';
    default:
      return 'pi pi-file text-gray-500 text-xl';
  }
};

// 파일 크기 포맷팅
const formatSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 단일 파일 업로드 상태
const selectedFile = ref(null);
const uploadStatus = ref('idle'); // idle | uploading | done

const onFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFile.value = file;
    uploadStatus.value = 'idle';
    // 엑셀 시트명 추출 (엑셀일 때만)
    const ext = file.name.split('.').pop().toLowerCase();
    if (["xlsx","xls"].includes(ext)) {
      const reader = new FileReader();
      reader.onload = (evt) => {
        const data = new Uint8Array(evt.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        sheetNames.value = workbook.SheetNames;
        selectedSheetName.value = workbook.SheetNames[0] || '';
      };
      reader.readAsArrayBuffer(file);
    }
    uploadSingleFile(); // 파일 선택 즉시 업로드
  } else {
    selectedFile.value = null;
    uploadStatus.value = 'idle';
  }
};

const removeSelectedFile = () => {
  selectedFile.value = null;
  uploadStatus.value = 'idle';
  sheetNames.value = [];
  selectedSheetName.value = '';
};

const uploadedFilename = ref('');

const uploadSingleFile = async () => {
  if (!selectedFile.value) return;
  uploadStatus.value = 'uploading';
  try {
    const res = await eventService.uploadFile(selectedFile.value, props.clubId);
    // 반환 구조에 따라 아래 중 하나로 조정
    uploadedFilename.value = res.file?.filename || res.filename;
    uploadStatus.value = 'done';
  } catch (e) {
    uploadError.value = '파일 업로드 중 오류가 발생했습니다.';
    uploadStatus.value = 'idle';
  }
};

// 업로드된 파일 파싱 및 미리보기 데이터 로드
const parseFile = async () => {
  if (!uploadedFilename.value) {
    uploadError.value = '파일 업로드가 완료되지 않았습니다.';
    return;
  }
  // 시트가 하나만 있을 경우 자동으로 선택
  if (sheetNames.value.length === 1 && !selectedSheetName.value) {
    selectedSheetName.value = sheetNames.value[0];
  }
  // 선택된 시트가 없으면 중단
  if (!selectedSheetName.value) {
    uploadError.value = '시트를 선택해주세요.';
    return;
  }
  loading.value = true;
  try {
    const response = await eventService.parseEventFile({
      filename: uploadedFilename.value,
      clubId: props.clubId,
      sheetName: selectedSheetName.value
    });
    parsedData.value = response.data;
    eventData.value.gameCount = parsedData.value.gameCount || 3;
    // 추론된 이벤트 정보가 있는 경우 이를 활용
    if (parsedData.value.inferredEventInfo) {
      const inferredInfo = parsedData.value.inferredEventInfo;
      if (inferredInfo.title) {
        eventData.value.title = inferredInfo.title;
      }
      if (inferredInfo.startDate) {
        eventData.value.startDate = new Date(inferredInfo.startDate);
      }
      if (inferredInfo.location) {
        eventData.value.location = inferredInfo.location;
      }
    }
    // 파싱 완료 후 업로드된 파일 서버에서 삭제
    if (uploadedFilename.value) {
      try {
        await eventService.deleteUploadedFile({ filename: uploadedFilename.value });
      } catch (delErr) {
        console.warn('업로드 파일 삭제 실패:', delErr);
      }
    }
    // 업로드 폼 상태 초기화
    selectedFile.value = null;
    uploadedFilename.value = '';
    uploadStatus.value = 'idle';
    sheetNames.value = [];
    selectedSheetName.value = '';
    // 다음 단계로 이동
    activeStep.value = 1;
    // 파일 파싱이 완료되면 파일 업로드 컴포넌트 초기화
    if (fileUploadRef.value && fileUploadRef.value.clear) {
      fileUploadRef.value.clear();
    }
    // 업로드 파일 정보는 유지 (파일명은 백엔드에서 사용하기 때문)
  } catch (error) {
    console.error('파일 파싱 오류:', error);
    uploadError.value = error.message || '파일 파싱 중 오류가 발생했습니다.';
  } finally {
    loading.value = false;
  }
};

// 특정 게임의 점수 조회
// 파싱 데이터의 handicap이 있으면 우선, 없으면 회원정보, 둘 다 없으면 0
const getParticipantHandicap = (participant) => {
  if (typeof participant.handicap === 'number') return participant.handicap;
  if (participant.memberInfo && typeof participant.memberInfo.handicap === 'number') return participant.memberInfo.handicap;
  return 0;
};

const getGameScore = (participant, gameIdx) => {
  if (!participant.scores || participant.scores.length < gameIdx) return '';
  let scoreObj = participant.scores[gameIdx - 1];
  if (scoreObj === null || scoreObj === undefined) return '';
  let score = typeof scoreObj === 'object' ? scoreObj.score : scoreObj;
  // 핸디캡 차감 로직: 파싱 데이터의 handicap이 있으면 우선, 없으면 회원정보, 둘 다 없으면 0
  if (scoresIncludeHandicap.value) {
    const handicap = getParticipantHandicap(participant);
    score = score - handicap;
    if (score < 0) score = 0;
  }
  return score;
};

// 점수 업데이트
const updateScore = (participant, gameIdx, value) => {
  if (!participant.scores) participant.scores = [];
  if (value === null || value === undefined) value = '';
  // 핸디캡 적용 여부에 따라 실제 저장값 결정
  let saveValue = value;
  if (scoresIncludeHandicap.value && value !== '') {
    // 핸디캡 값: 파싱값 > 회원정보 > 0
    const handicap = (typeof participant.handicap === 'number')
      ? participant.handicap
      : (participant.memberInfo && typeof participant.memberInfo.handicap === 'number')
        ? participant.memberInfo.handicap : 0;
    saveValue = value + handicap;
  }
  // 점수 객체가 오브젝트일 수도 있고, 숫자일 수도 있으므로 안전하게 처리
  let scoreObj = participant.scores[gameIdx - 1];
  if (scoreObj && typeof scoreObj === 'object' && 'score' in scoreObj) {
    scoreObj.score = saveValue;
  } else {
    participant.scores[gameIdx - 1] = saveValue;
  }
};

// 셀 편집 완료 핸들러
const onCellEditComplete = (event) => {
  const { data, newValue, field } = event;
  
  // 필드에 따라 적절한 처리
  if (field === 'teamNumber') {
    // 팀명 편집
    data.teamNumber = newValue;
  } else if (field === 'handicap') {
    // 핸디캡 편집
    data.handicap = parseInt(newValue) || 0;
  }
  
  // 강제로 반응성 트리거
  parsedData.value = { ...parsedData.value };
};

// 팀명 변경 이벤트 핸들러
const onTeamNameChange = (event, participant) => {
  // 명시적으로 값을 설정하고 Vue가 반응성을 인식하도록 함
  // change 이벤트를 사용하여 한글 입력이 완료된 후 값을 업데이트
  participant.teamNumber = event.target.value;
  // 강제로 반응성 트리거
  parsedData.value = { ...parsedData.value };
};

// 핸디캡 변경 이벤트 핸들러
const onHandicapChange = (event, participant) => {
  // 명시적으로 값을 설정하고 Vue가 반응성을 인식하도록 함
  // change 이벤트를 사용하여 입력이 완료된 후 값을 업데이트
  participant.handicap = parseInt(event.value) || 0;
  // 강제로 반응성 트리거
  parsedData.value = { ...parsedData.value };
};

// 새 참가자 추가
const addNewParticipant = () => {
  const newParticipant = {
    tempId: parsedData.value.participants.length + 1,
    name: '',
    teamNumber: '',
    scores: [],
    memberId: null,
    memberInfo: null
  };
  
  parsedData.value.participants.push(newParticipant);
};

// 참가자 제거
const removeParticipant = (participant) => {
  const index = parsedData.value.participants.findIndex(p => p.tempId === participant.tempId);
  if (index > -1) {
    parsedData.value.participants.splice(index, 1);
  }
};

// 회원 선택 다이얼로그 열기
const openMemberSelection = (participant) => {
  selectedParticipant.value = participant;
  memberSelectionDialog.value = true;
};

// 회원 선택
const selectMember = (member) => {
  if (selectedParticipant.value) {
    selectedParticipant.value.memberId = member.id;
    selectedParticipant.value.memberInfo = member;
    selectedParticipant.value.isGuest = false;
  }
  memberSelectionDialog.value = false;
};

// 새 회원 추가 다이얼로그 열기
const openNewMemberForm = (participant) => {
  selectedParticipant.value = participant;
  // 현재 참가자 이름으로 초기화
  newMember.value = {
    name: participant.name || '',
    gender: '남성',
    memberType: '정회원',
    handicap: 0,
    phone: '',
    email: '',
    status: 'active'
  };
  newMemberMode.value = 'normal';
  newMemberSubmitted.value = false;
  newMemberDialog.value = true;
};

// 게스트 추가 다이얼로그 열기
const setAsGuest = (participant) => {
  selectedParticipant.value = participant;
  // 현재 참가자 이름으로 초기화
  newMember.value = {
    name: participant.name || '',
    gender: '남성',
    memberType: '게스트',
    handicap: 0,
    phone: '',
    email: '',
    status: 'active'
  };
  newMemberMode.value = 'guest';
  newMemberSubmitted.value = false;
  newMemberDialog.value = true;
};

// 새 회원 추가 및 선택
const addNewMemberAndSelect = async () => {
  newMemberSubmitted.value = true;
  
  if (!newMember.value.name) {
    return;
  }
  
  try {
    savingNewMember.value = true;
    
    // 클럽에 새 회원 추가
    const response = await clubService.addClubMember(
      props.clubId,
      {
        name: newMember.value.name,
        gender: newMember.value.gender,
        memberType: newMember.value.memberType,
        phone: newMember.value.phone || '',
        email: newMember.value.email || '',
        handicap: newMember.value.handicap || 0,
        status: newMember.value.status || 'active'
      }
    );
    
    if (response && response.data) {
      // 클럽 회원 목록 업데이트
      await loadClubMembers();
      
      // 추가된 회원 정보로 참가자 정보 업데이트
      if (selectedParticipant.value) {
        selectedParticipant.value.memberId = response.data.id;
        selectedParticipant.value.memberInfo = {
          id: response.data.id,
          name: response.data.name,
          gender: response.data.gender,
          memberType: response.data.memberType,
          handicap: response.data.handicap || 0,
          phone: response.data.phone || '',
          email: response.data.email || '',
          status: response.data.status || 'active'
        };
      }
      
      toast.add({
        severity: 'success',
        summary: '성공',
        detail: newMemberMode.value === 'guest' ? '게스트가 추가되었습니다.' : '회원이 추가되었습니다.',
        life: 3000
      });
      
      newMemberDialog.value = false;
    }
  } catch (error) {
    console.error('회원 추가 오류:', error);
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '회원 추가 중 오류가 발생했습니다.',
      life: 3000
    });
  } finally {
    savingNewMember.value = false;
  }
};

// 고유한 팀 수 계산
const getUniqueTeamCount = () => {
  const teams = new Set();
  parsedData.value.participants.forEach(p => {
    if (p.teamNumber) {
      teams.add(p.teamNumber);
    }
  });
  return teams.size;
};



// 날짜 포맷
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
};

// 다음 단계로 이동
const nextStep = () => {
  if (activeStep.value === 1) {
    // 데이터 미리보기 단계에서 다음으로 넘어갈 때 참가자 데이터 검증
    if (parsedData.value.participants.length === 0) {
      toast.add({
        severity: 'error',
        summary: '오류',
        detail: '최소 한 명 이상의 참가자가 필요합니다.',
        life: 3000
      });
      return;
    }
  } else if (activeStep.value === 2) {
    // 이벤트 정보 단계에서 다음으로 넘어갈 때 이벤트 데이터 검증
    submitted.value = true;
    
    if (!eventData.value.title || !eventData.value.eventType || !eventData.value.startDate || !eventData.value.gameCount) {
      toast.add({
        severity: 'error',
        summary: '오류',
        detail: '필수 항목을 모두 입력해주세요.',
        life: 3000
      });
      return;
    }
  }
  
  activeStep.value++;
};

// 이전 단계로 이동
const prevStep = () => {
  activeStep.value--;
};

// 이벤트 데이터 저장
const saveEventData = async () => {
  saving.value = true;
  
  try {
    // 데이터베이스에 저장할 참가자 데이터 준비
    // 인라인 수정된 값을 사용하기 위해 원본 참조
    let participantsToSave = parsedData.value.participants;
    
    // 각 참가자의 점수를 원점수, 핸디캡, 총점수 형태로 구조화
    const participantsForSaving = participantsToSave.map(participant => {
      // 참가자 정보 복사
      const participantCopy = { ...participant };
      
      // 핸디캡 값 가져오기
      const handicap = getParticipantHandicap(participant);
      // 핸디캡 값을 참가자 정보에 명시적으로 추가
      participantCopy.handicap = handicap;
      
      // 점수 처리
      if (participant.scores && participant.scores.length > 0) {
        // 점수 배열 구조화
        participantCopy.scores = [];
        
        // 각 게임의 점수 처리
        for (let i = 1; i <= parsedData.value.gameCount; i++) {
          // 현재 테이블에 표시된 점수 가져오기 (인라인 수정 반영)
          const currentScore = getGameScore(participant, i);
          
          // 인라인 테이블에 표시된 점수가 원점수이미로 그대로 사용
          const originalScore = currentScore;
          
          // 총점수는 원점수 + 핸디캡
          const totalScore = originalScore + handicap;
          
          // 점수 객체 추가
          participantCopy.scores.push({
            gameNumber: i,
            score: originalScore,    // 원점수 (핸디캡 제외)
            handicap: handicap,      // 핸디캡 값
            totalScore: totalScore   // 총점수 (핸디캡 포함)
          });
        }
      }
      
      return participantCopy;
    });
    
    const response = await eventService.saveEventFileData({
      eventData: eventData.value,
      participants: participantsForSaving,
      clubId: props.clubId
    });
    
    toast.add({
      severity: 'success',
      summary: '성공',
      detail: '이벤트가 성공적으로 저장되었습니다.',
      life: 3000
    });
    
    // 임시 파일 삭제
    if (uploadedFile.value) {
      await eventService.deleteUploadedFile({
        filename: uploadedFile.value.filename
      });
    }
    
    // 이벤트 생성 완료 이벤트 발생
    emit('event-created', response.event);
    
    // 다이얼로그 닫기
    emit('update:visible', false);
  } catch (error) {
    console.error('이벤트 저장 오류:', error);
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '이벤트 저장 중 오류가 발생했습니다.',
      life: 3000
    });
  } finally {
    saving.value = false;
  }
};

// 다이얼로그가 닫힐 때 상태 초기화
watch(() => props.visible, (newValue) => {
  if (!newValue) {
    activeStep.value = 0;
    uploadedFile.value = null;
    uploadError.value = '';
    parsedData.value = { participants: [], gameCount: 0 };
    eventData.value = {
      title: '',
      description: '',
      eventType: '',
      startDate: new Date(),
      endDate: null,
      location: '',
      maxParticipants: 0,
      gameCount: 3,
      status: '활성'
    };
    submitted.value = false;
    sheetNames.value = [];
    selectedSheetName.value = '';
  }
});
</script>

<style scoped>
.file-upload-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  border: 2px dashed #ced4da;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
}

.upload-note {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.error-message {
  margin-top: 1rem;
  color: #f44336;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.summary-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.summary-section {
  flex: 1;
  min-width: 300px;
}

.summary-item {
  display: flex;
  margin-bottom: 0.5rem;
}

.summary-label {
  font-weight: bold;
  width: 100px;
}

.summary-value {
  flex: 1;
}

.member-selection-container {
  margin-top: 1rem;
}

:deep(.p-datatable) {
  margin-top: 1rem;
}

:deep(.p-column-filter) {
  width: 100%;
}

.text-muted {
  color: #6c757d;
}

.file-upload-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 300px;
  margin-bottom: 1.5rem;
}
.file-upload-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-icon {
  font-size: 4rem;
  color: #2196f3;
  margin-bottom: 1.5rem;
}
.upload-text-group {
  text-align: center;
}
.upload-title {
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.upload-desc {
  color: #666;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.upload-btn {
  background: #2196f3;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s;
  display: inline-block;
  margin-bottom: 1.2rem;
}
.upload-btn:hover {
  background: #1769aa;
}
.selected-file-info {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.desc-note {
  font-size: 0.9rem;
  color: #999;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mt-3 {
  margin-top: 1rem;
}

.member-mapping-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.member-info {
  display: flex;
  align-items: center;
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* 단계 표시 스타일 */
.steps-container {
  margin-bottom: 2rem;
}

.steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.steps::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e0e0e0;
  z-index: 1;
}

.steps li {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  margin-bottom: 0.5rem;
}

.steps li.active .step-number,
.steps li.completed .step-number {
  background: var(--p-primary-color);
}

.step-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
}

.steps li.active .step-label {
  color: var(--p-primary-color);
  font-weight: bold;
}

.steps li.completed .step-number {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.steps li.completed .step-label {
  color: #4CAF50;
}

.field {
  margin-bottom: 1.5rem;
}

/* 이벤트 정보 설정 스타일 */
.event-info-step .card {
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 1.5rem;
}

.card-section {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #dee2e6;
}

.text-secondary {
  color: #6c757d;
}

.text-red-500 {
  color: #dc3545;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.font-bold {
  font-weight: 600;
}

/* 라벨과 입력 필드 정렬 스타일 */
.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
  line-height: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.field .p-inputtext,
.field .p-dropdown,
.field .p-calendar,
.field .p-inputnumber,
.field .p-textarea {
  width: 100%;
  height: 2.5rem;
}

.field .p-textarea {
  height: auto;
}

/* 파일 업로드 영역 스타일 개선 */
.file-upload-wrapper {
  width: 100%;
}

.custom-file-upload {
  width: 100%;
}

.custom-file-upload .p-fileupload-buttonbar {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background-color: #f5f5f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.custom-file-upload .p-fileupload-content {
  padding: 2rem;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-file-upload .p-fileupload-content:hover {
  border-color: #2196F3;
  background-color: #f0f8ff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

.upload-icon {
  font-size: 5rem;
  color: #2196F3;
  margin-bottom: 1rem;
  display: block;
}

.upload-title {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 1rem 0;
  color: #333;
  text-align: center;
  width: 100%;
}

.upload-note {
  color: #666;
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
}

/* 파일 목록 스타일 개선 */
.p-fileupload-files {
  margin-top: 1rem;
}

.p-fileupload-row,
.custom-file-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 0.5rem;
  transition: all 0.2s;
}

.p-fileupload-row:hover,
.custom-file-item:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.p-fileupload-filename {
  font-weight: 500;
  color: #333;
  flex: 1;
  margin: 0 0.5rem;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #f5f5f5;
  margin-right: 0.75rem;
}

.file-icon i {
  font-size: 1.2rem;
}

.file-size {
  color: #666;
  font-size: 0.85rem;
  margin-right: 1rem;
}

.p-fileupload-badge {
  margin: 0 1rem;
}

/* Pending 상태 스타일 */
.p-tag.p-tag-warning {
  background-color: #FFB74D;
  color: #fff;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
}

/* 에러 메시지 스타일 */
.error-message {
  display: flex;
  align-items: center;
  background-color: #FFEBEE;
  color: #D32F2F;
  padding: 0.75rem;
  border-radius: 4px;
  margin-top: 1rem;
  font-weight: 500;
}

.error-message .pi {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* 업로드 상태 스타일 */
.upload-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  margin-top: 1rem;
  background-color: #E3F2FD;
  border-radius: 8px;
}

.upload-status span {
  margin-top: 1rem;
  font-weight: 500;
  color: #1976D2;
}
/* PrimeVue 기본 썸네일 이미지를 완전히 숨김 */
:deep(.p-fileupload-file-thumbnail) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
</style>