<script setup lang="ts">
import type { FinanceCostCategoryViewModel } from '../types';

/**
 * 文件职责：成本录入分类卡片（总额 + 明细列表）。
 */
import type { FinanceCostCategoryCode } from '#/api/finance/cost';

import { IconifyIcon } from '@vben/icons';

import { Button, Card, Empty, InputNumber, Tag } from 'ant-design-vue';

import {
  formatCurrency,
  formatPercent,
} from '../composables/cost-page/helpers';

interface Props {
  canManage: boolean;
  category: FinanceCostCategoryViewModel;
  color?: string;
  icon?: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'addItem', category: FinanceCostCategoryCode): void;
  (
    event: 'deleteItem',
    category: FinanceCostCategoryCode,
    itemId: string,
  ): void;
  (event: 'editItem', category: FinanceCostCategoryCode, itemId: string): void;
  (event: 'toggle', category: FinanceCostCategoryCode): void;
  (
    event: 'updateTotal',
    category: FinanceCostCategoryCode,
    value: number,
  ): void;
}>();

function handleTotalChange(value: unknown) {
  emit('updateTotal', props.category.category, Number(value ?? 0));
}

function handleEdit(itemId: string | undefined) {
  if (!itemId) return;
  emit('editItem', props.category.category, itemId);
}

function handleDelete(itemId: string | undefined) {
  if (!itemId) return;
  emit('deleteItem', props.category.category, itemId);
}
</script>

<template>
  <Card class="fc-entry-card" :bordered="false">
    <div class="fc-entry-head">
      <div class="fc-entry-icon" :style="{ color: props.color || '#1677ff' }">
        <IconifyIcon :icon="props.icon || 'lucide:circle-dollar-sign'" />
      </div>

      <div class="fc-entry-meta">
        <div class="fc-entry-name">
          {{ props.category.categoryText }}
          <span class="fc-entry-ratio">{{
            formatPercent(props.category.percentage)
          }}</span>
        </div>
      </div>

      <div class="fc-entry-amount">
        <span class="fc-entry-currency">¥</span>
        <InputNumber
          class="fc-entry-input"
          :min="0"
          :step="100"
          :precision="2"
          :value="props.category.totalAmount"
          :controls="false"
          :disabled="!props.canManage"
          @update:value="(value) => handleTotalChange(value)"
        />
      </div>

      <Button
        type="link"
        class="fc-entry-toggle"
        @click="emit('toggle', props.category.category)"
      >
        {{ props.category.expanded ? '收起明细' : '展开明细' }}
      </Button>
    </div>

    <div v-if="props.category.expanded" class="fc-entry-detail">
      <template v-if="props.category.items.length > 0">
        <div
          v-for="item in props.category.items"
          :key="item.itemId"
          class="fc-entry-detail-row"
        >
          <div class="fc-entry-item-name">{{ item.itemName }}</div>

          <div class="fc-entry-item-value">
            <template v-if="props.category.category === 'labor'">
              <Tag color="blue">{{ item.quantity ?? 0 }} 人</Tag>
              <span class="fc-entry-mul">x</span>
              <Tag color="cyan">{{ formatCurrency(item.unitPrice ?? 0) }}</Tag>
              <span class="fc-entry-equal">=</span>
            </template>
            <span class="fc-entry-item-amount">{{
              formatCurrency(item.amount)
            }}</span>
          </div>

          <div class="fc-entry-item-actions">
            <Button
              type="link"
              size="small"
              :disabled="!props.canManage"
              @click="handleEdit(item.itemId)"
            >
              编辑
            </Button>
            <Button
              type="link"
              size="small"
              danger
              :disabled="!props.canManage"
              @click="handleDelete(item.itemId)"
            >
              删除
            </Button>
          </div>
        </div>
      </template>

      <div v-else class="fc-entry-empty">
        <Empty description="暂无明细" :image-style="{ height: '48px' }" />
      </div>

      <Button
        type="link"
        class="fc-entry-add"
        :disabled="!props.canManage"
        @click="emit('addItem', props.category.category)"
      >
        <template #icon>
          <IconifyIcon icon="lucide:plus" />
        </template>
        添加明细
      </Button>
    </div>
  </Card>
</template>
