<template>
  <div>
    <AppHeader />
    
    <div class="container-fluid py-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>사업 주간보고 취합</h4>
      </div>

      <!-- 조건 -->
      <div class="card mb-3">
        <div class="card-body py-2">
          <div class="row g-2 align-items-center">
            <div class="col-1 text-end"><label class="col-form-label">사업</label></div>
            <div class="col-3">
              <select class="form-select form-select-sm" v-model="filter.businessId" @change="loadReports">
                <option value="">전체</option>
                <option v-for="b in businesses" :key="b.businessId" :value="b.businessId">{{ b.businessName }}</option>
              </select>
            </div>
            <div class="col-1 text-end"><label class="col-form-label">년도</label></div>
            <div class="col-1">
              <select class="form-select form-select-sm" v-model="filter.year" @change="loadReports">
                <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
              </select>
            </div>
            <div class="col-2">
              <button class="btn btn-primary btn-sm" @click="showGenerateModal = true" :disabled="!filter.businessId">
                <i class="bi bi-plus-lg me-1"></i>취합 생성
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 목록 -->
      <div class="card">
        <div class="card-header">취합 목록</div>
        <div class="table-responsive">
          <table class="table table-hover table-bordered mb-0">
            <thead class="table-light">
              <tr>
                <th style="width: 50px" class="text-center">No</th>
                <th>사업명</th>
                <th style="width: 100px" class="text-center">주차</th>
                <th style="width: 180px">기간</th>
                <th>AI 요약 (미리보기)</th>
                <th style="width: 80px" class="text-center">상태</th>
                <th style="width: 100px">생성일</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="isLoading">
                <td colspan="7" class="text-center py-4"><span class="spinner-border spinner-border-sm me-2"></span>로딩 중...</td>
              </tr>
              <tr v-else-if="reports.length === 0">
                <td colspan="7" class="text-center py-5 text-muted">
                  <i class="bi bi-inbox display-4"></i>
                  <p class="mt-2 mb-0">취합된 보고서가 없습니다.</p>
                </td>
              </tr>
              <tr v-else v-for="(r, idx) in reports" :key="r.businessReportId">
                <td class="text-center">{{ idx + 1 }}</td>
                <td>
                  <NuxtLink :to="`/business-report/${r.businessReportId}`" class="text-decoration-none">
                    {{ r.businessName }}
                  </NuxtLink>
                </td>
                <td class="text-center">{{ r.reportYear }}-W{{ String(r.reportWeek).padStart(2, '0') }}</td>
                <td>{{ formatDate(r.weekStartDate) }} ~ {{ formatDate(r.weekEndDate) }}</td>
                <td><small class="text-muted">{{ truncate(r.manualSummary || r.aiSummary, 50) }}</small></td>
                <td class="text-center">
                  <span :class="r.status === 'confirmed' ? 'badge bg-success' : 'badge bg-warning'">
                    {{ r.status === 'confirmed' ? '확정' : '작성중' }}
                  </span>
                </td>
                <td>{{ formatDate(r.createdAt) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 취합 생성 모달 -->
    <div class="modal fade" :class="{ show: showGenerateModal }" :style="{ display: showGenerateModal ? '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="showGenerateModal = false"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">사업 <span class="text-danger">*</span></label>
              <select class="form-select" v-model="generateForm.businessId" disabled>
                <option v-for="b in businesses" :key="b.businessId" :value="b.businessId">{{ b.businessName }}</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">주차 <span class="text-danger">*</span></label>
              <select class="form-select" v-model="generateForm.week">
                <option v-for="w in weeks" :key="w.week" :value="w">
                  {{ w.year }}-W{{ String(w.week).padStart(2, '0') }} ({{ w.startDate }} ~ {{ w.endDate }})
                </option>
              </select>
            </div>
            <div class="alert alert-info mb-0">
              <i class="bi bi-info-circle me-2"></i>
              선택한 주차에 해당하는 프로젝트 실적을 AI가 요약합니다.
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="showGenerateModal = false">취소</button>
            <button type="button" class="btn btn-primary" @click="generateReport" :disabled="isGenerating">
              <span v-if="isGenerating"><span class="spinner-border spinner-border-sm me-1"></span>생성 중...</span>
              <span v-else><i class="bi bi-magic me-1"></i>AI 취합 생성</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade show" v-if="showGenerateModal"></div>
  </div>
</template>

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

interface Business { businessId: number; businessName: string }
interface Report {
  businessReportId: number
  businessId: number
  businessName: string
  reportYear: number
  reportWeek: number
  weekStartDate: string
  weekEndDate: string
  aiSummary: string
  manualSummary: string
  status: string
  createdAt: string
}

const businesses = ref<Business[]>([])
const reports = ref<Report[]>([])
const isLoading = ref(false)
const showGenerateModal = ref(false)
const isGenerating = ref(false)

const currentYear = new Date().getFullYear()
const years = [currentYear, currentYear - 1]

const filter = ref({
  businessId: '',
  year: currentYear
})

const weeks = computed(() => {
  const result = []
  const now = new Date()
  for (let i = 0; i < 8; i++) {
    const d = new Date(now.getTime() - i * 7 * 24 * 60 * 60 * 1000)
    const { year, week, startDate, endDate } = getWeekInfo(d)
    result.push({ year, week, startDate, endDate })
  }
  return result
})

const generateForm = ref({
  businessId: '',
  week: null as any
})

onMounted(async () => {
  const user = await fetchCurrentUser()
  if (!user) { router.push('/login'); return }
  await loadBusinesses()
  await loadReports()
})

watch(() => filter.value.businessId, (v) => {
  generateForm.value.businessId = v
  if (weeks.value.length > 0) {
    generateForm.value.week = weeks.value[0]
  }
})

async function loadBusinesses() {
  try {
    const res = await $fetch<{ businesses: Business[] }>('/api/business/list')
    businesses.value = res.businesses || []
  } catch (e) { console.error(e) }
}

async function loadReports() {
  isLoading.value = true
  try {
    const res = await $fetch<{ reports: Report[] }>('/api/business-report/list', {
      query: {
        businessId: filter.value.businessId || undefined,
        year: filter.value.year
      }
    })
    reports.value = res.reports || []
  } catch (e) { console.error(e) }
  finally { isLoading.value = false }
}

async function generateReport() {
  if (!generateForm.value.businessId || !generateForm.value.week) {
    alert('사업과 주차를 선택하세요.')
    return
  }
  isGenerating.value = true
  try {
    const w = generateForm.value.week
    const res = await $fetch<{ report: any }>('/api/business-report/generate', {
      method: 'POST',
      body: {
        businessId: Number(generateForm.value.businessId),
        reportYear: w.year,
        reportWeek: w.week,
        weekStartDate: w.startDate,
        weekEndDate: w.endDate
      }
    })
    showGenerateModal.value = false
    await loadReports()
    router.push(`/business-report/${res.report.businessReportId}`)
  } catch (e: any) {
    alert(e.data?.message || '취합 생성에 실패했습니다.')
  } finally {
    isGenerating.value = false
  }
}

function getWeekInfo(date: Date) {
  const d = new Date(date)
  d.setHours(0, 0, 0, 0)
  d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7)
  const week1 = new Date(d.getFullYear(), 0, 4)
  const week = 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7)
  
  const monday = new Date(date)
  monday.setDate(monday.getDate() - (monday.getDay() + 6) % 7)
  const sunday = new Date(monday)
  sunday.setDate(sunday.getDate() + 6)
  
  return {
    year: d.getFullYear(),
    week,
    startDate: monday.toISOString().split('T')[0],
    endDate: sunday.toISOString().split('T')[0]
  }
}

function formatDate(d: string) {
  if (!d) return '-'
  return d.split('T')[0]
}

function truncate(s: string, len: number) {
  if (!s) return '-'
  return s.length > len ? s.substring(0, len) + '...' : s
}
</script>

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