<script setup lang="ts">
import type { Transaction } from '#/types/finance';

import { computed, nextTick, onMounted, ref } from 'vue';

import {
  CalendarOutlined,
  CheckOutlined,
  CloseOutlined,
  EditOutlined,
  EllipsisOutlined,
  RightOutlined,
  TagsOutlined,
} from '@ant-design/icons-vue';
import {
  Button,
  DatePicker,
  Drawer,
  Input,
  message,
  Modal,
} from 'ant-design-vue';
import dayjs from 'dayjs';

import { useCategoryStore } from '#/store/modules/category';
import { useTagStore } from '#/store/modules/tag';
import { useTransactionStore } from '#/store/modules/transaction';
import TagSelector from '#/views/finance/tag/components/tag-selector.vue';

const emit = defineEmits<{
  close: [];
  saved: [transaction: Transaction];
}>();

const { TextArea } = Input;

const categoryStore = useCategoryStore();
const tagStore = useTagStore();
const transactionStore = useTransactionStore();

const amountInputRef = ref<HTMLInputElement>();
const amountDisplay = ref('');
const saving = ref(false);

const showAllCategories = ref(false);
const showDatePicker = ref(false);
const showDescriptionInput = ref(false);
const showTagSelector = ref(false);

const formData = ref<Partial<Transaction>>({
  type: 'expense',
  amount: 0,
  categoryId: '',
  currency: 'CNY',
  date: dayjs().format('YYYY-MM-DD'),
  description: '',
  status: 'completed',
  tags: [],
});

// 快速访问的分类（最常用的6个）
const quickCategories = computed(() => {
  const categories = categoryStore.categories
    .filter((c) => c.type === formData.value.type)
    .slice(0, 5);
  return categories;
});

const filteredCategories = computed(() =>
  categoryStore.categories.filter((c) => c.type === formData.value.type),
);

const selectedTagNames = computed(() => {
  if (!formData.value.tags || formData.value.tags.length === 0) return [];
  return formData.value.tags
    .map((tagId) => tagStore.tagMap.get(tagId)?.name)
    .filter(Boolean) as string[];
});

const canSave = computed(
  () =>
    formData.value.amount &&
    formData.value.amount > 0 &&
    formData.value.categoryId,
);

const handleAmountInput = (e: Event) => {
  const input = e.target as HTMLInputElement;
  let value = input.value.replaceAll(/[^\d.]/g, '');

  // 处理小数点
  const parts = value.split('.');
  if (parts.length > 2) {
    value = `${parts[0]}.${parts.slice(1).join('')}`;
  }
  if (parts[1]?.length > 2) {
    value = `${parts[0]}.${parts[1].slice(0, 2)}`;
  }

  amountDisplay.value = value;
  formData.value.amount = Number.parseFloat(value) || 0;
};

const selectCategory = (categoryId: string) => {
  formData.value.categoryId = categoryId;
  showAllCategories.value = false;
};

const handleQuickSave = () => {
  if (canSave.value) {
    handleSave();
  }
};

const handleSave = async () => {
  if (!canSave.value) return;

  saving.value = true;
  try {
    const transaction = await transactionStore.createTransaction({
      ...formData.value,
      amount: formData.value.amount!,
      recorder: '管理员',
    });

    message.success('记账成功');
    emit('saved', transaction as Transaction);

    // 重置表单
    formData.value = {
      type: formData.value.type,
      amount: 0,
      categoryId: '',
      currency: 'CNY',
      date: dayjs().format('YYYY-MM-DD'),
      description: '',
      status: 'completed',
      tags: [],
    };
    amountDisplay.value = '';

    // 重新聚焦金额输入框
    nextTick(() => {
      amountInputRef.value?.focus();
    });
  } catch {
    message.error('记账失败');
  } finally {
    saving.value = false;
  }
};

const handleClose = () => {
  emit('close');
};

onMounted(() => {
  // 自动聚焦金额输入框
  nextTick(() => {
    amountInputRef.value?.focus();
  });
});
</script>

<template>
  <div class="mobile-quick-add">
    <div class="quick-add-header">
      <Button
        type="text"
        @click="handleClose"
        style="position: absolute; top: 8px; left: 8px"
      >
        <CloseOutlined />
      </Button>
      <h3>快速记账</h3>
    </div>

    <div class="quick-add-body">
      <!-- 交易类型切换 -->
      <div class="type-switcher">
        <Button
          :type="formData.type === 'expense' ? 'primary' : 'default'"
          @click="formData.type = 'expense'"
          block
        >
          支出
        </Button>
        <Button
          :type="formData.type === 'income' ? 'primary' : 'default'"
          @click="formData.type = 'income'"
          block
        >
          收入
        </Button>
      </div>

      <!-- 金额输入 -->
      <div class="amount-input-wrapper">
        <div class="currency-symbol">¥</div>
        <input
          ref="amountInputRef"
          v-model="amountDisplay"
          type="text"
          class="amount-input"
          placeholder="0.00"
          @input="handleAmountInput"
          @keyup.enter="handleQuickSave"
        />
      </div>

      <!-- 分类选择 -->
      <div class="category-grid">
        <div
          v-for="category in quickCategories"
          :key="category.id"
          class="category-item"
          :class="[{ active: formData.categoryId === category.id }]"
          @click="formData.categoryId = category.id"
        >
          <div class="category-icon">{{ category.icon || '📁' }}</div>
          <div class="category-name">{{ category.name }}</div>
        </div>
        <div class="category-item more" @click="showAllCategories = true">
          <div class="category-icon">
            <EllipsisOutlined />
          </div>
          <div class="category-name">更多</div>
        </div>
      </div>

      <!-- 可选信息 -->
      <div class="optional-fields">
        <div class="field-item" @click="showDatePicker = true">
          <CalendarOutlined />
          <span>{{ dayjs(formData.date).format('MM月DD日') }}</span>
          <RightOutlined />
        </div>

        <div class="field-item" @click="showDescriptionInput = true">
          <EditOutlined />
          <span>{{ formData.description || '添加备注' }}</span>
          <RightOutlined />
        </div>

        <div class="field-item" @click="showTagSelector = true">
          <TagsOutlined />
          <span>
            {{
              selectedTagNames.length > 0
                ? selectedTagNames.join(', ')
                : '添加标签'
            }}
          </span>
          <RightOutlined />
        </div>
      </div>

      <!-- 保存按钮 -->
      <div class="save-button-wrapper">
        <Button
          type="primary"
          size="large"
          block
          :loading="saving"
          :disabled="!canSave"
          @click="handleSave"
        >
          保存
        </Button>
      </div>
    </div>

    <!-- 所有分类抽屉 -->
    <Drawer
      v-model:open="showAllCategories"
      title="选择分类"
      placement="bottom"
      height="60%"
    >
      <div class="all-categories">
        <div
          v-for="category in filteredCategories"
          :key="category.id"
          class="category-full-item"
          :class="[{ active: formData.categoryId === category.id }]"
          @click="selectCategory(category.id)"
        >
          <span class="category-icon">{{ category.icon || '📁' }}</span>
          <span class="category-name">{{ category.name }}</span>
          <CheckOutlined v-if="formData.categoryId === category.id" />
        </div>
      </div>
    </Drawer>

    <!-- 日期选择器 -->
    <Modal
      v-model:open="showDatePicker"
      title="选择日期"
      width="90%"
      :footer="null"
    >
      <DatePicker
        v-model:value="formData.date"
        style="width: 100%"
        @change="showDatePicker = false"
      />
    </Modal>

    <!-- 备注输入 -->
    <Modal
      v-model:open="showDescriptionInput"
      title="添加备注"
      width="90%"
      @ok="showDescriptionInput = false"
    >
      <TextArea
        v-model:value="formData.description"
        :rows="4"
        placeholder="输入备注信息"
        :maxlength="200"
        show-count
      />
    </Modal>

    <!-- 标签选择 -->
    <Modal
      v-model:open="showTagSelector"
      title="选择标签"
      width="90%"
      @ok="showTagSelector = false"
    >
      <TagSelector v-model:value="formData.tags" />
    </Modal>
  </div>
</template>

<style scoped>
/* 移动端优化 */
@media (max-width: 768px) {
  .quick-add-body {
    padding: 12px;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .category-item {
    padding: 8px 4px;
  }

  .category-icon {
    font-size: 20px;
  }

  .category-name {
    font-size: 11px;
  }
}

.mobile-quick-add {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.quick-add-header {
  position: relative;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.quick-add-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.quick-add-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.type-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #1890ff;
}

.currency-symbol {
  margin-right: 8px;
  font-size: 24px;
  color: #1890ff;
}

.amount-input {
  flex: 1;
  font-size: 36px;
  font-weight: 500;
  color: #262626;
  text-align: right;
  outline: none;
  border: none;
}

.amount-input::placeholder {
  color: #bfbfbf;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s;
}

.category-item:active {
  transform: scale(0.95);
}

.category-item.active {
  background: rgb(24 144 255 / 5%);
  border-color: #1890ff;
}

.category-item.more {
  border-style: dashed;
}

.category-icon {
  margin-bottom: 4px;
  font-size: 24px;
}

.category-name {
  font-size: 12px;
  color: #595959;
  text-align: center;
}

.optional-fields {
  margin-bottom: 24px;
}

.field-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.field-item:active {
  background: #f5f5f5;
}

.field-item > span {
  flex: 1;
  margin: 0 12px;
  color: #595959;
}

.save-button-wrapper {
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background: #fff;
}

.all-categories {
  display: flex;
  flex-direction: column;
}

.category-full-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.category-full-item:active {
  background: #f5f5f5;
}

.category-full-item.active {
  color: #1890ff;
}

.category-full-item .category-icon {
  margin-right: 12px;
  font-size: 20px;
}

.category-full-item .category-name {
  flex: 1;
}
</style>
