<template>
  <view class="page-container">
    <u-toast ref="uToastRef" />
    
    <!-- 骨架屏 -->
    <view v-if="loading" class="section-card">
      <view class="skeleton-form-item" v-for="i in 3" :key="i">
        <view class="skeleton-label"></view>
        <view class="skeleton-input"></view>
      </view>
    </view>
    <view v-if="loading" class="section-card">
      <view class="skeleton-form-item" v-for="i in 2" :key="i">
        <view class="skeleton-row">
          <view class="skeleton-label-sm"></view>
          <view class="skeleton-input-sm"></view>
          <view class="skeleton-label-sm"></view>
          <view class="skeleton-input-sm"></view>
        </view>
      </view>
    </view>
    
    <!-- 真实内容 -->
    <view v-else class="section-card">
      <view class="card-header">
        <view class="header-icon bg-emerald-100">
          <uni-icons type="settings" size="18" color="#064E3B"></uni-icons>
        </view>
        <text class="header-title">基础设置</text>
      </view>

      <view class="form-item">
        <text class="label">组合名称</text>
        <input 
          v-model="form.name" 
          placeholder="给你的组合起个名字 (如: 养老定投)"
          class="native-input"
        />
      </view>

      <view class="form-item">
        <text class="label">选择逻辑模板</text>
        <picker @change="onStrategyChange" :value="strategyIndex" :range="strategies" range-key="name">
          <view class="picker-box">
            <view class="flex-row items-center gap-2" v-if="selectedStrategy">
              <view class="strategy-dot" :style="{ backgroundColor: selectedStrategy.color }"></view>
              <text class="picker-text">{{ selectedStrategy.name }}</text>
            </view>
            <text class="picker-placeholder" v-else>点击选择逻辑规则</text>
            <uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons>
          </view>
        </picker>
        <text class="helper-text" v-if="selectedStrategy">{{ selectedStrategy.desc }}</text>
      </view>

      <view class="form-item">
        <text class="label">组合币种</text>
        <picker @change="onCurrencyChange" :value="currencyIndex" :range="currencyList" range-key="name">
          <view class="picker-box">
            <text class="picker-text">{{ currencyList[currencyIndex].name }}</text>
            <uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons>
          </view>
        </picker>
        <text class="helper-text">创建后币种不可修改，所有交易只能使用该币种</text>
      </view>
    </view>

    <view class="section-card">
      <view class="card-header">
        <view class="flex-row items-center gap-2">
          <view class="header-icon bg-blue-100">
            <uni-icons type="wallet" size="18" color="#1D4ED8"></uni-icons>
          </view>
          <text class="header-title">初始化记录</text>
        </view>
      </view>

      <view class="stock-list">
        <view class="stock-item" v-for="(item, index) in form.stocks" :key="index">
          <view class="item-header">
            <text class="item-index">单元 #{{ index + 1 }}</text>
          </view>

          <view class="item-grid">
            <view class="grid-col relative">
              <text class="sub-label">单元名称/代码</text>
              <input 
                v-model="item.name" 
                placeholder="如 TMF" 
                :disabled="selectedStrategy?.type === 'risk_parity'"
                class="native-input-sm"
                @input="(e) => searchStock(e.detail.value, index)"
                @focus="() => { activeSearchIndex = -1; searchResults = []; }"
              />
              <view class="search-dropdown" v-if="searchResults.length > 0 && activeSearchIndex === index">
                <view 
                  class="dropdown-item" 
                  v-for="(result, idx) in searchResults.filter(r => r.stockIndex === index)" 
                  :key="idx"
                  @click="selectStock(result)"
                >
                  <view class="item-left">
                    <text class="item-ticker">{{ result.ticker }}</text>
                    <text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
                  </view>
                  <text class="item-exchange">{{ result.exchange }}</text>
                </view>
              </view>
            </view>
            <view class="grid-col">
              <text class="sub-label">买入均价</text>
              <input v-model="item.price" type="number" placeholder="0.00" class="native-input-sm" />
            </view>
            <view class="grid-col">
              <text class="sub-label">持有数量</text>
              <input v-model="item.amount" type="number" placeholder="0" class="native-input-sm" />
            </view>
          </view>

          <view class="date-row">
            <text class="sub-label">建仓日期</text>
            <picker mode="date" :value="item.date" @change="(e) => onDateChange(e, index)">
              <view class="date-picker-display">
                <text>{{ item.date || '请选择日期' }}</text>
                <u-icon name="calendar" size="16" color="#9CA3AF"></u-icon>
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>

    <view class="footer-area">
      <view class="total-summary">
        <text class="summary-label">预计初始投入</text>
        <text class="summary-val">¥ {{ totalInvestment }}</text>
      </view>
      <u-button 
        class="btn-submit" 
        @click="submitForm"
        :customStyle="{
          backgroundColor: '#064E3B',
          color: '#fff',
          fontWeight: '700',
          borderRadius: '24rpx',
          height: '96rpx',
          fontSize: '30rpx',
          width: '100%',
          border: 'none'
        }"
      >创建组合</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { api } from '@/utils/api';

// 类型定义
interface StockItem {
  name: string;
  price: string;
  amount: string;
  date: string;
  assetType?: string;
  currency?: string;
}

interface StrategyItem {
  id: string;
  name: string;
  desc?: string;
  type: string;
  parameters: Record<string, any>;
  color: string;
}

interface CurrencyItem {
  name: string;
  code: string;
}

interface SearchResult {
  ticker: string;
  name?: string;
  exchange?: string;
  assetType?: string;
  currency?: string;
  stockIndex: number;
}

const { proxy } = getCurrentInstance()!;
const uToastRef = ref();

const loading = ref<boolean>(true);

const strategies = ref<StrategyItem[]>([]);
const strategyIndex = ref<number>(-1);

const currencyList = ref<CurrencyItem[]>([
  { name: '人民币 CNY', code: 'CNY' },
  { name: '美元 USD', code: 'USD' },
  { name: '港币 HKD', code: 'HKD' }
]);
const currencyIndex = ref<number>(0);

let isFetching = false;

const form = ref<{ name: string; stocks: StockItem[] }>({
  name: '',
  stocks: [{ name: '', price: '', amount: '', date: '' }]
});

const searchResults = ref<SearchResult[]>([]);
const activeSearchIndex = ref<number>(-1);
let searchTimer: ReturnType<typeof setTimeout> | null = null;

const searchStock = async (keyword: string, stockIndex: number): Promise<void> => {
  if (searchTimer) clearTimeout(searchTimer);
  activeSearchIndex.value = stockIndex;
  
  if (!keyword || keyword.length < 1) {
    searchResults.value = [];
    activeSearchIndex.value = -1;
    return;
  }

  searchTimer = setTimeout(async () => {
    try {
      const res = await api.ticker.search(keyword);
      if (res.code === 200) {
        searchResults.value = res.data.map((item: any) => ({ 
          ...item, 
          stockIndex,
          currency: item.priceCurrency || item.currency // 映射币种字段
        }));
      }
    } catch {
      searchResults.value = [];
      activeSearchIndex.value = -1;
    }
  }, 300);
};

const selectStock = (result: SearchResult): void => {
  const stock = form.value.stocks[result.stockIndex];
  if (stock) {
    stock.name = result.ticker;
    stock.assetType = result.assetType;
    stock.currency = result.currency; // 保存搜索结果中的币种
  }
  searchResults.value = [];
  activeSearchIndex.value = -1;
};

const selectedStrategy = computed((): StrategyItem | null => {
  return strategyIndex.value === -1 ? null : strategies.value[strategyIndex.value];
});

const totalInvestment = computed((): string => {
  let total = 0;
  form.value.stocks.forEach(stock => {
    total += (parseFloat(stock.price) || 0) * (parseFloat(stock.amount) || 0);
  });
  return total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
});

const fetchStrategies = async (): Promise<void> => {
  try {
    const response = await api.strategies.getStrategies();
    if (response.code === 200) {
      strategies.value = response.data.items?.map((item: any) => {
        let parameters: Record<string, any> = {};
        if (item.config) {
          try {
            let config = JSON.parse(item.config);
            if (typeof config === 'string') config = JSON.parse(config);
            parameters = config;
          } catch { parameters = {}; }
        }
        return {
          id: item.id,
          name: item.name,
          desc: item.description,
          type: item.type,
          parameters,
          color: '#10B981'
        };
      }) || [];
    }
  } catch (error) {
    console.error('获取策略列表失败:', error);
  }
};

const onStrategyChange = (e: { detail: { value: number } }): void => {
  strategyIndex.value = e.detail.value;
  const strategy = strategies.value[strategyIndex.value];
  if (strategy?.parameters?.assets) {
    form.value.stocks = strategy.parameters.assets.map((asset: any) => ({
      name: asset.symbol,
      price: '',
      amount: '',
      date: ''
    }));
  } else {
    form.value.stocks = [{ name: '', price: '', amount: '', date: '' }];
  }
};

const onCurrencyChange = (e: { detail: { value: number } }): void => {
  currencyIndex.value = e.detail.value;
};

const onDateChange = (e: { detail: { value: string } }, index: number): void => {
  form.value.stocks[index].date = e.detail.value;
};

const submitForm = async (): Promise<void> => {
  if (!form.value.name) {
    (proxy as any)?.$refs?.uToastRef?.show({ type: 'warning', message: '请输入组合名称' });
    return;
  }
  if (strategyIndex.value === -1) {
    (proxy as any)?.$refs?.uToastRef?.show({ type: 'warning', message: '请选择策略' });
    return;
  }

  const selected = strategies.value[strategyIndex.value];

  if (selected?.type === 'risk_parity' && selected.parameters?.assets) {
    let totalWeight = 0;
    const targetAssets = selected.parameters.assets;
    
    for (const stock of form.value.stocks) {
      const target = targetAssets.find((a: any) => a.symbol === stock.name);
      if (!target) continue;
      const marketValue = (parseFloat(stock.price) || 0) * (parseFloat(stock.amount) || 0);
      totalWeight += marketValue;
    }
    
    for (const stock of form.value.stocks) {
      const target = targetAssets.find((a: any) => a.symbol === stock.name);
      if (!target) continue;
      const marketValue = (parseFloat(stock.price) || 0) * (parseFloat(stock.amount) || 0);
      const actualWeight = totalWeight > 0 ? marketValue / totalWeight : 0;
      const deviation = Math.abs(actualWeight - target.targetWeight);
      
      if (deviation > 0.05) {
        (proxy as any)?.$refs?.uToastRef?.show({
          type: 'error',
          message: `${stock.name} 权重偏差超过5%`,
          duration: 3000
        });
        return;
      }
    }
  }
  
// 根据股票代码推断币种
const inferCurrencyFromCode = (code: string): string => {
  if (!code) return selectedCurrency;
  const upperCode = code.toUpperCase();
  // 美股
  if (upperCode.endsWith('.US') || upperCode.endsWith('.NYSE') || upperCode.endsWith('.NASDAQ')) {
    return 'USD';
  }
  // 港股
  if (upperCode.endsWith('.HK') || upperCode.endsWith('.HKEX')) {
    return 'HKD';
  }
  // A股
  if (upperCode.endsWith('.SZ') || upperCode.endsWith('.SH') || /^[0-9]{6}$/.test(upperCode)) {
    return 'CNY';
  }
  // 加密货币默认 USD
  if (upperCode.includes('BTC') || upperCode.includes('ETH') || upperCode.includes('USDT')) {
    return 'USD';
  }
  // 默认使用组合本位币
  return selectedCurrency;
};

  const selectedCurrency = currencyList.value[currencyIndex.value].code;
  const requestData = {
    name: form.value.name,
    strategyId: selected?.id,
    currency: selectedCurrency,
    stocks: form.value.stocks.map(stock => ({
      name: stock.name,
      code: stock.name,
      price: parseFloat(stock.price) || 0,
      amount: parseFloat(stock.amount) || 0,
      date: stock.date,
      currency: stock.currency || inferCurrencyFromCode(stock.name),
      assetType: stock.assetType || 'Stock'
    }))
  };

  uni.showLoading({ title: '创建中...' });
  
  try {
    const response = await api.assets.createPortfolio(requestData);
    if (response.code === 200) {
      uni.hideLoading();
      (proxy as any)?.$refs?.uToastRef?.show({ type: 'success', message: '创建成功' });
      setTimeout(() => uni.navigateBack(), 1500);
    }
  } catch {
    uni.hideLoading();
    (proxy as any)?.$refs?.uToastRef?.show({ type: 'error', message: '创建失败，请重试' });
  }
};

onShow(async () => {
  isFetching = true;
  loading.value = true;
  await fetchStrategies();
  loading.value = false;
  isFetching = false;
});
</script>

<style scoped>
.page-container { min-height: 100vh; background-color: #F3F4F6; padding-bottom: 200rpx; }
.skeleton-form-item { margin-bottom: 32rpx; }
.skeleton-label { width: 120rpx; height: 26rpx; background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 37%, #E5E7EB 50%); background-size: 400% 100%; animation: skeleton-loading 1.8s ease infinite; border-radius: 8rpx; margin-bottom: 16rpx; }
.skeleton-label-sm { width: 80rpx; height: 22rpx; background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 37%, #E5E7EB 50%); background-size: 400% 100%; animation: skeleton-loading 1.8s ease infinite; border-radius: 6rpx; margin-bottom: 12rpx; }
.skeleton-input { width: 100%; height: 96rpx; background: linear-gradient(90deg, #F9FAFB 25%, #F3F4F6 37%, #F9FAFB 50%); background-size: 400% 100%; animation: skeleton-loading 1.8s ease infinite; border-radius: 20rpx; }
.skeleton-input-sm { flex: 1; height: 72rpx; background: linear-gradient(90deg, #F9FAFB 25%, #F3F4F6 37%, #F9FAFB 50%); background-size: 400% 100%; animation: skeleton-loading 1.8s ease infinite; border-radius: 16rpx; }
.skeleton-row { display: flex; gap: 24rpx; flex-direction: column; }
@keyframes skeleton-loading { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.gap-2 { gap: 16rpx; }
.section-card { background-color: #fff; margin: 32rpx; padding: 32rpx; border-radius: 32rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03); }
.card-header { display: flex; align-items: center; margin-bottom: 32rpx; }
.header-icon { width: 60rpx; height: 60rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; }
.bg-emerald-100 { background-color: #D1FAE5; }
.bg-blue-100 { background-color: #DBEAFE; }
.header-title { font-size: 30rpx; font-weight: 700; color: #1F2937; }
.form-item { margin-bottom: 32rpx; }
.form-item:last-child { margin-bottom: 0; }
.label { font-size: 26rpx; font-weight: 600; color: #374151; margin-bottom: 16rpx; display: block; }
.picker-box { background-color: #F9FAFB; border: 2rpx solid #E5E7EB; border-radius: 20rpx; height: 96rpx; padding: 0 32rpx; display: flex; align-items: center; justify-content: space-between; }
.picker-text { font-size: 28rpx; color: #1F2937; font-weight: 500; }
.picker-placeholder { font-size: 28rpx; color: #9CA3AF; }
.strategy-dot { width: 16rpx; height: 16rpx; border-radius: 50%; }
.helper-text { font-size: 22rpx; color: #6B7280; margin-top: 12rpx; display: block; margin-left: 8rpx; }
.stock-list { display: flex; flex-direction: column; gap: 24rpx; }
.stock-item { background-color: #F9FAFB; border: 1rpx solid #E5E7EB; border-radius: 24rpx; padding: 24rpx; }
.item-header { display: flex; justify-content: space-between; margin-bottom: 20rpx; }
.item-index { font-size: 24rpx; font-weight: 700; color: #9CA3AF; }
.item-grid { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.grid-col { flex: 1; }
.sub-label { font-size: 20rpx; color: #6B7280; margin-bottom: 8rpx; display: block; }
.relative { position: relative; }
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: #FFFFFF; border: 1rpx solid #E5E7EB; border-radius: 12rpx; margin-top: 4rpx; max-height: 300rpx; overflow-y: auto; z-index: 100; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); }
.dropdown-item { padding: 16rpx 20rpx; border-bottom: 1rpx solid #F3F4F6; display: flex; justify-content: space-between; align-items: center; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:active { background-color: #F3F4F6; }
.item-left { display: flex; flex-direction: row; align-items: center; gap: 12rpx; }
.item-ticker { font-size: 26rpx; font-weight: 600; color: #1F2937; }
.item-type { font-size: 18rpx; color: #064E3B; background-color: #D1FAE5; padding: 2rpx 8rpx; border-radius: 4rpx; }
.item-exchange { font-size: 22rpx; color: #9CA3AF; }
.date-row { display: flex; align-items: center; justify-content: space-between; }
.date-picker-display { background-color: #FFFFFF; border: 1rpx solid #E5E7EB; border-radius: 16rpx; height: 72rpx; padding: 0 20rpx; display: flex; align-items: center; justify-content: space-between; font-size: 26rpx; color: #1F2937; width: 100%; box-sizing: border-box; }
.footer-area { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; padding: 20rpx 32rpx 50rpx 32rpx; box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20rpx; }
.total-summary { display: flex; justify-content: space-between; align-items: center; padding: 0 10rpx; }
.summary-label { font-size: 26rpx; color: #6B7280; }
.summary-val { font-size: 36rpx; font-weight: 700; color: #064E3B; font-family: 'DIN Alternate'; }
.native-input { background-color: #F9FAFB; border-radius: 20rpx; height: 96rpx; padding: 0 32rpx; font-size: 28rpx; color: #1F2937; }
.native-input-sm { background-color: #FFFFFF; border-radius: 16rpx; height: 72rpx; padding: 0 20rpx; font-size: 26rpx; color: #1F2937; border: 1rpx solid #E5E7EB; }
</style>
