<template>
  <div>
    <AppHeader />
    
    <div class="container-fluid py-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h4><i class="bi bi-pencil-square me-2"></i>회의록 작성</h4>
          <p class="text-muted mb-0">회의 내용을 기록하세요</p>
        </div>
        <NuxtLink to="/meeting" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-left me-1"></i> 목록으로
        </NuxtLink>
      </div>

      <div class="row">
        <!-- 왼쪽: 기본 정보 -->
        <div class="col-md-4">
          <div class="card mb-4">
            <div class="card-header">
              <strong>기본 정보</strong>
            </div>
            <div class="card-body">
              <div class="mb-3">
                <label class="form-label">회의 제목 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" v-model="form.meetingTitle" placeholder="회의 제목 입력" />
              </div>
              
              <div class="mb-3">
                <label class="form-label">회의 유형 <span class="text-danger">*</span></label>
                <div class="btn-group w-100" role="group">
                  <input type="radio" class="btn-check" id="type-project" value="PROJECT" v-model="form.meetingType" />
                  <label class="btn btn-outline-primary" for="type-project">프로젝트 회의</label>
                  <input type="radio" class="btn-check" id="type-internal" value="INTERNAL" v-model="form.meetingType" />
                  <label class="btn btn-outline-info" for="type-internal">내부업무 회의</label>
                </div>
              </div>
              
              <div class="mb-3" v-if="form.meetingType === 'PROJECT'">
                <label class="form-label">프로젝트 <span class="text-danger">*</span></label>
                <select class="form-select" v-model="form.projectId">
                  <option value="">프로젝트 선택</option>
                  <option v-for="p in projects" :key="p.projectId" :value="p.projectId">
                    {{ p.projectName }}
                  </option>
                </select>
              </div>
              
              <div class="mb-3">
                <label class="form-label">회의 일자 <span class="text-danger">*</span></label>
                <input type="date" class="form-control" v-model="form.meetingDate" />
              </div>
              
              <div class="row mb-3">
                <div class="col-6">
                  <label class="form-label">시작 시간</label>
                  <input type="time" class="form-control" v-model="form.startTime" />
                </div>
                <div class="col-6">
                  <label class="form-label">종료 시간</label>
                  <input type="time" class="form-control" v-model="form.endTime" />
                </div>
              </div>
              
              <div class="mb-3">
                <label class="form-label">장소</label>
                <input type="text" class="form-control" v-model="form.location" placeholder="회의 장소" />
              </div>
            </div>
          </div>
          
          <!-- 참석자 -->
          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
              <strong>참석자</strong>
              <div>
                <button class="btn btn-sm btn-outline-primary me-1" @click="showEmployeeModal = true">
                  <i class="bi bi-person-plus"></i> 내부
                </button>
                <button class="btn btn-sm btn-outline-secondary" @click="addExternalAttendee">
                  <i class="bi bi-person-plus"></i> 외부
                </button>
              </div>
            </div>
            <div class="card-body p-0">
              <ul class="list-group list-group-flush">
                <li 
                  v-for="(att, idx) in form.attendees" 
                  :key="idx"
                  class="list-group-item d-flex justify-content-between align-items-center"
                >
                  <div>
                    <span v-if="att.employeeId">
                      <i class="bi bi-person-fill text-primary me-1"></i>
                      {{ att.employeeName }}
                      <small class="text-muted">({{ att.company }})</small>
                    </span>
                    <span v-else>
                      <i class="bi bi-person text-secondary me-1"></i>
                      {{ att.externalName }}
                      <small class="text-muted" v-if="att.externalCompany">({{ att.externalCompany }})</small>
                    </span>
                  </div>
                  <button class="btn btn-sm btn-link text-danger" @click="removeAttendee(idx)">
                    <i class="bi bi-x-lg"></i>
                  </button>
                </li>
                <li v-if="form.attendees.length === 0" class="list-group-item text-center text-muted py-4">
                  참석자를 추가하세요
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 오른쪽: 회의 내용 -->
        <div class="col-md-8">
          <div class="card h-100">
            <div class="card-header">
              <strong>회의 내용</strong>
              <small class="text-muted ms-2">(자유롭게 작성하면 AI가 정리해줍니다)</small>
            </div>
            <div class="card-body p-0">
              <!-- TODO: Tiptap 에디터로 교체 -->
              <textarea 
                class="form-control border-0 h-100" 
                v-model="form.rawContent"
                placeholder="회의 내용을 자유롭게 작성하세요...

예시:
- 김철수: 이번 주 진행 상황 공유
- 프론트엔드 개발 80% 완료
- 백엔드 API 연동 필요
- 다음 주 목표: 테스트 환경 구축
- 미결정: 배포 일정 (추후 논의)"
                style="min-height: 500px; resize: none;"
              ></textarea>
            </div>
            <div class="card-footer d-flex justify-content-end">
              <button class="btn btn-secondary me-2" @click="router.push('/meeting')">취소</button>
              <button class="btn btn-primary" @click="saveMeeting" :disabled="isSaving">
                <span v-if="isSaving">
                  <span class="spinner-border spinner-border-sm me-1"></span>저장 중...
                </span>
                <span v-else>
                  <i class="bi bi-check-lg me-1"></i>저장
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 직원 선택 모달 -->
    <div class="modal fade" :class="{ show: showEmployeeModal }" :style="{ display: showEmployeeModal ? 'block' : 'none' }">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">내부 참석자 추가</h5>
            <button type="button" class="btn-close" @click="showEmployeeModal = false"></button>
          </div>
          <div class="modal-body">
            <input 
              type="text" 
              class="form-control mb-3" 
              v-model="employeeSearch"
              placeholder="이름 검색..."
            />
            <div style="max-height: 300px; overflow-y: auto;">
              <div 
                v-for="emp in filteredEmployees" 
                :key="emp.employeeId"
                class="form-check"
              >
                <input 
                  class="form-check-input" 
                  type="checkbox" 
                  :id="`emp-${emp.employeeId}`"
                  :value="emp.employeeId"
                  v-model="selectedEmployeeIds"
                />
                <label class="form-check-label" :for="`emp-${emp.employeeId}`">
                  {{ emp.employeeName }} 
                  <small class="text-muted">({{ emp.company }})</small>
                </label>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="showEmployeeModal = false">취소</button>
            <button type="button" class="btn btn-primary" @click="addSelectedEmployees">추가</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade show" v-if="showEmployeeModal"></div>

    <!-- 외부 참석자 입력 모달 -->
    <div class="modal fade" :class="{ show: showExternalModal }" :style="{ display: showExternalModal ? 'block' : 'none' }">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">외부 참석자 추가</h5>
            <button type="button" class="btn-close" @click="showExternalModal = false"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">이름 <span class="text-danger">*</span></label>
              <input type="text" class="form-control" v-model="externalForm.name" />
            </div>
            <div class="mb-3">
              <label class="form-label">소속</label>
              <input type="text" class="form-control" v-model="externalForm.company" />
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="showExternalModal = false">취소</button>
            <button type="button" class="btn btn-primary" @click="confirmExternalAttendee">추가</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade show" v-if="showExternalModal"></div>
  </div>
</template>

<script setup lang="ts">
const { fetchCurrentUser } = useAuth()
const router = useRouter()

interface Attendee {
  employeeId?: number
  employeeName?: string
  company?: string
  externalName?: string
  externalCompany?: string
}

const projects = ref<any[]>([])
const employees = ref<any[]>([])
const isSaving = ref(false)

const form = ref({
  meetingTitle: '',
  meetingType: 'PROJECT' as 'PROJECT' | 'INTERNAL',
  projectId: '' as string | number,
  meetingDate: new Date().toISOString().split('T')[0],
  startTime: '',
  endTime: '',
  location: '',
  rawContent: '',
  attendees: [] as Attendee[]
})

// 직원 선택 모달
const showEmployeeModal = ref(false)
const employeeSearch = ref('')
const selectedEmployeeIds = ref<number[]>([])

const filteredEmployees = computed(() => {
  if (!employeeSearch.value) return employees.value
  const keyword = employeeSearch.value.toLowerCase()
  return employees.value.filter(e => e.employeeName.toLowerCase().includes(keyword))
})

// 외부 참석자 모달
const showExternalModal = ref(false)
const externalForm = ref({ name: '', company: '' })

onMounted(async () => {
  const user = await fetchCurrentUser()
  if (!user) {
    router.push('/login')
    return
  }
  
  await Promise.all([loadProjects(), loadEmployees()])
})

async function loadProjects() {
  try {
    const res = await $fetch<{ projects: any[] }>('/api/project/list')
    projects.value = res.projects || []
  } catch (e) {
    console.error('Load projects error:', e)
  }
}

async function loadEmployees() {
  try {
    const res = await $fetch<{ employees: any[] }>('/api/employee/list')
    employees.value = res.employees || []
  } catch (e) {
    console.error('Load employees error:', e)
  }
}

function addSelectedEmployees() {
  for (const empId of selectedEmployeeIds.value) {
    // 이미 추가된 경우 스킵
    if (form.value.attendees.some(a => a.employeeId === empId)) continue
    
    const emp = employees.value.find(e => e.employeeId === empId)
    if (emp) {
      form.value.attendees.push({
        employeeId: emp.employeeId,
        employeeName: emp.employeeName,
        company: emp.company
      })
    }
  }
  selectedEmployeeIds.value = []
  showEmployeeModal.value = false
}

function addExternalAttendee() {
  externalForm.value = { name: '', company: '' }
  showExternalModal.value = true
}

function confirmExternalAttendee() {
  if (!externalForm.value.name) {
    alert('이름을 입력하세요.')
    return
  }
  form.value.attendees.push({
    externalName: externalForm.value.name,
    externalCompany: externalForm.value.company
  })
  showExternalModal.value = false
}

function removeAttendee(idx: number) {
  form.value.attendees.splice(idx, 1)
}

async function saveMeeting() {
  // 유효성 검사
  if (!form.value.meetingTitle) {
    alert('회의 제목을 입력하세요.')
    return
  }
  if (!form.value.meetingDate) {
    alert('회의 일자를 선택하세요.')
    return
  }
  if (form.value.meetingType === 'PROJECT' && !form.value.projectId) {
    alert('프로젝트를 선택하세요.')
    return
  }
  
  isSaving.value = true
  try {
    const res = await $fetch<{ success: boolean; meetingId: number }>('/api/meeting/create', {
      method: 'POST',
      body: {
        meetingTitle: form.value.meetingTitle,
        meetingType: form.value.meetingType,
        projectId: form.value.projectId || undefined,
        meetingDate: form.value.meetingDate,
        startTime: form.value.startTime || undefined,
        endTime: form.value.endTime || undefined,
        location: form.value.location || undefined,
        rawContent: form.value.rawContent || undefined,
        attendees: form.value.attendees.map(a => ({
          employeeId: a.employeeId,
          externalName: a.externalName,
          externalCompany: a.externalCompany
        }))
      }
    })
    
    if (res.success) {
      router.push(`/meeting/${res.meetingId}`)
    }
  } catch (e: any) {
    alert(e.data?.message || e.message || '저장에 실패했습니다.')
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped>
.modal.show {
  background: rgba(0, 0, 0, 0.5);
}
</style>
