<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import Textarea from 'primevue/textarea';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Tag from 'primevue/tag';
import Divider from 'primevue/divider';
import { TIMESHEET_STATUS } from '@/core/constants/app.constants';

const props = defineProps<{
  visible: boolean;
  approval: any;
  loading?: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
  approve: [comment: string];
  reject: [comment: string];
}>();

const comment = ref('');

watch(
  () => props.visible,
  (v) => {
    if (v) comment.value = '';
  },
);

function statusSeverity(status: string) {
  return (TIMESHEET_STATUS as Record<string, any>)[status]?.severity ?? 'secondary';
}
function statusLabel(status: string) {
  return (TIMESHEET_STATUS as Record<string, any>)[status]?.label ?? status;
}
</script>

<template>
  <Dialog
    :visible="visible"
    header="결재 상세"
    :style="{ width: '720px', maxWidth: '95vw' }"
    modal
    :closable="!loading"
    @update:visible="emit('update:visible', $event)"
  >
    <div v-if="approval" class="approval-detail">
      <!-- Summary info -->
      <div class="approval-detail__info">
        <div class="form-grid">
          <div class="col-4">
            <div class="form-field">
              <label class="form-field__label">요청자</label>
              <span>{{ approval.requesterName ?? '-' }}</span>
            </div>
          </div>
          <div class="col-4">
            <div class="form-field">
              <label class="form-field__label">기간</label>
              <span>{{ approval.weekStartDate ?? '-' }} ~ {{ approval.weekEndDate ?? '-' }}</span>
            </div>
          </div>
          <div class="col-4">
            <div class="form-field">
              <label class="form-field__label">상태</label>
              <Tag :value="statusLabel(approval.status)" :severity="statusSeverity(approval.status)" />
            </div>
          </div>
        </div>
      </div>

      <Divider />

      <!-- Timesheet entries table -->
      <DataTable :value="approval.entries ?? []" size="small" stripedRows>
        <Column field="entryDate" header="일자" sortable style="min-width: 100px" />
        <Column field="entryType" header="유형" style="min-width: 100px" />
        <Column field="projectName" header="프로젝트" style="min-width: 120px" />
        <Column field="hours" header="시수" style="min-width: 70px">
          <template #body="{ data }">{{ data.hours }}h</template>
        </Column>
        <Column field="remark" header="비고" style="min-width: 100px" />
        <template #empty>
          <div style="text-align: center; padding: 1rem; color: var(--p-text-muted-color);">
            시수 항목이 없습니다.
          </div>
        </template>
      </DataTable>

      <div style="text-align: right; margin-top: 0.5rem; font-weight: 600;">
        총 시수: {{ approval.totalHours ?? 0 }}h
      </div>

      <Divider />

      <!-- Comment -->
      <div class="form-field">
        <label class="form-field__label">코멘트</label>
        <Textarea v-model="comment" rows="3" placeholder="코멘트를 입력하세요 (반려 시 필수)" fluid />
      </div>
    </div>

    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
        <Button label="닫기" severity="secondary" text :disabled="loading" @click="emit('update:visible', false)" />
        <Button label="반려" severity="danger" icon="pi pi-times" :loading="loading" @click="emit('reject', comment)" />
        <Button label="승인" severity="success" icon="pi pi-check" :loading="loading" @click="emit('approve', comment)" />
      </div>
    </template>
  </Dialog>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.approval-detail {
  display: flex;
  flex-direction: column;
  gap: $space-md;

  &__info {
    padding: $space-sm 0;
  }
}
</style>
