<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import api from "@/axios.js";
import Modal from "../../Components/Modal.vue";
import InvestmentChart from "../../Components/InvestmentChart.vue";
import AccountTrendChart from "../../Components/AccountTrendChart.vue";

const route = useRoute();
const accountId = route.params.id;

const account = ref(null);
const holdings = ref([]);
const showHoldingModal = ref(false);
const expandedHoldingId = ref(null);
const transactions = ref({});
const currentPrices = ref({});
const showTransactionForm = ref(null);
const investmentHistory = ref({});

const securityOptions = ref([]);
const showOptions = ref(false);
let searchTimer = null;

const holdingForm = ref({
  type: "stock",
  symbol: "",
  name: "",
});

const transactionForm = ref({
  action: "buy",
  shares: "",
  price: "",
  amount: "",
  nav: "",
  fee: "",
  tax: "",
  traded_at: "",
  note: "",
});

const accountTrendData = ref([]);

const fetchAccountTrend = async () => {
  try {
    const res = await api.get(`/api/accounts/${accountId}/holdings-trend`);
    accountTrendData.value = res.data;
  } catch (e) {
    console.error("無法撈取帳戶多線趨勢圖", e);
  }
};

const fetchAccount = async () => {
  const res = await api.get(`/api/accounts/${accountId}`);
  account.value = res.data;
};

const fetchHoldings = async () => {
  const res = await api.get(`/api/accounts/${accountId}/holdings`);
  holdings.value = res.data;

  // 🟢 修正：直接從大列表的內建數據裡，把最新價格和現值綁定給前端變數
  res.data.forEach((holding) => {
    currentPrices.value[holding.id] = Number(holding.latest_price);
  });
};

const loadTransactions = async (holding) => {
  const res = await api.get(`/api/holdings/${holding.id}/transactions`);
  transactions.value[holding.id] = res.data;
};

const toggleHolding = async (holding) => {
  if (expandedHoldingId.value === holding.id) {
    expandedHoldingId.value = null;
    return;
  }
  expandedHoldingId.value = holding.id;
  await loadTransactions(holding);
  if (holding.type === "stock" || holding.type === "fund") {
    loadHistory(holding); // 非同步，不用 await
  }
};

const loadHistory = async (holding) => {
  try {
    const res = await api.get(`/api/holdings/${holding.id}/history`);
    investmentHistory.value[holding.id] = res.data;
  } catch (e) {
    console.error("取得歷史資料失敗", e);
  }
};

const submitHolding = async () => {
  await api.post(`/api/accounts/${accountId}/holdings`, holdingForm.value);
  showHoldingModal.value = false;
  holdingForm.value = { type: "stock", symbol: "", name: "" };
  await fetchHoldings();
};

const deleteHolding = async (id) => {
  if (!confirm("確定要刪除這筆持倉嗎？")) return;
  await api.delete(`/api/holdings/delete/${accountId}/${id}`);
  fetchHoldings();
};

const submitTransaction = async (holding) => {
  await api.post(
    `/api/holdings/${holding.id}/transactions`,
    transactionForm.value,
  );
  transactionForm.value = {
    action: "buy",
    shares: "",
    price: "",
    amount: "",
    nav: "",
    fee: "",
    tax: "",
    traded_at: "",
    note: "",
  };
  showTransactionForm.value = null; // 加這行
  await fetchHoldings();
  await loadTransactions(holding);
};

const deleteTransaction = async (holding, txId) => {
  if (!confirm("確定要刪除這筆交易嗎？")) return;
  await api.delete(`/api/holdings/${holding.id}/transactions/${txId}`);
  await fetchHoldings();
  await loadTransactions(holding);
};

const calcAmount = (tx, holding) => {
  if (holding.type === "fund") {
    if (tx.action === "buy") {
      return Math.round(Number(tx.amount) + Number(tx.fee) + Number(tx.tax));
    } else {
      return Math.round(Number(tx.amount) - Number(tx.fee) - Number(tx.tax));
    }
  } else {
    if (tx.action === "buy") {
      return Math.floor(tx.shares * tx.price + Number(tx.fee) + Number(tx.tax));
    } else {
      return Math.floor(tx.shares * tx.price - Number(tx.fee) - Number(tx.tax));
    }
  }
};

const fetchPrice = async (holding) => {
  try {
    const res = await api.get(`/api/holdings/${holding.id}/realtime`);
    currentPrices.value[holding.id] = res.data.price;
  } catch (e) {
    currentPrices.value[holding.id] = null;
  }
};

const fetchAllPrices = async () => {
  for (const holding of holdings.value) {
    await fetchPrice(holding);
  }
};

const currentValue = (holding) => {
  const price = currentPrices.value[holding.id];
  if (!price) return null;
  return Math.round(holding.shares * price);
};

const profitLoss = (holding) => {
  const value = currentValue(holding);
  if (!value) return null;
  const cost =
    holding.type === "stock"
      ? Math.floor(holding.shares * holding.avg_cost)
      : Math.round(holding.shares * holding.avg_cost);
  return value - cost;
};

const searchSecurities = async (keyword) => {
  if (!keyword) {
    securityOptions.value = [];
    return;
  }
  const { data } = await api.get("/api/securities/search", {
    params: { type: holdingForm.value.type, keyword },
  });
  securityOptions.value = data;
  showOptions.value = true;
};

watch(
  () => holdingForm.value.symbol,
  (val) => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => searchSecurities(val), 300);
  },
);

watch(
  () => holdingForm.value.type,
  () => {
    // 切換類型時代號跟名稱可能對不上,清空避免誤送
    holdingForm.value.symbol = "";
    holdingForm.value.name = "";
    securityOptions.value = [];
  },
);

const selectSecurity = (item) => {
  holdingForm.value.symbol = item.code;
  holdingForm.value.name = item.name;
  securityOptions.value = [];
  showOptions.value = false;
};

const hideOptionsDelayed = () => {
  // 延遲一下,讓點擊清單項目的 click 事件能先觸發
  setTimeout(() => {
    showOptions.value = false;
  }, 150);
};

onMounted(async () => {
  await fetchAccount();
  await fetchHoldings();
  await fetchAccountTrend();
});
</script>

<template>
  <AuthenticatedLayout>
    <template #header>{{ account?.name ?? "帳戶詳細" }}</template>

    <div class="py-8 mx-auto max-w-4xl px-4">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-lg font-semibold text-gray-700">持倉列表</h2>
        <button
          @click="showHoldingModal = true"
          class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm"
        >
          + 新增持倉
        </button>
      </div>
      <div
        v-if="accountTrendData.length"
        class="bg-white rounded-lg shadow p-4 mb-6"
      >
        <h3 class="text-sm font-semibold text-gray-700 mb-3">
          📈 各標的歷史報酬率變化趨勢 (%)
        </h3>
        <AccountTrendChart :trend-data="accountTrendData" />
      </div>
      <div
        v-for="holding in holdings"
        :key="holding.id"
        class="bg-white rounded-lg shadow mb-4"
      >
        <!-- 持倉標題列，點擊展開/收合 -->
        <div
          class="p-4 flex justify-between items-center cursor-pointer"
          @click="toggleHolding(holding)"
        >
          <div class="flex flex-col items-start">
            <div class="text-xs text-gray-400">
              {{ holding.type === "stock" ? "股票" : "基金" }}
            </div>
            <div class="font-semibold text-gray-800">
              {{ holding.symbol }} {{ holding.name }}
            </div>
            <div class="text-sm text-gray-500 mt-1">
              持有 {{ holding.shares }} 股／單位　平均成本
              {{ Number(holding.avg_cost).toLocaleString() }}
            </div>
            <div class="text-sm mt-1" v-if="currentPrices[holding.id]">
              估計現值 {{ currentValue(holding)?.toLocaleString() }}
              <span
                :class="
                  profitLoss(holding) >= 0 ? 'text-green-600' : 'text-red-500'
                "
              >
                （{{ profitLoss(holding) >= 0 ? "+" : ""
                }}{{ profitLoss(holding)?.toLocaleString() }}）
              </span>
              報酬率:
              <span
                :class="
                  profitLoss(holding) >= 0 ? 'text-green-600' : 'text-red-500'
                "
              >
                {{
                  (
                    (profitLoss(holding) /
                      (holding.shares * holding.avg_cost)) *
                    100
                  ).toFixed(2)
                }}%
              </span>
            </div>
            <div v-else class="text-xs text-gray-400 mt-1">載入現值中...</div>
          </div>
          <div class="flex gap-3 items-center">
            <button
              @click.stop="deleteHolding(holding.id)"
              class="text-xs text-red-500 hover:underline"
            >
              刪除
            </button>
            <span class="text-gray-400 text-sm">{{
              expandedHoldingId === holding.id ? "▲" : "▼"
            }}</span>
          </div>
        </div>
        <!-- 展開的交易明細 -->
        <div v-if="expandedHoldingId === holding.id" class="border-t px-4 pb-4">
          <div class="flex justify-end my-3">
            <button
              @click="
                showTransactionForm =
                  showTransactionForm === holding.id ? null : holding.id
              "
              class="px-3 py-1.5 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700"
            >
              {{ showTransactionForm === holding.id ? "取消" : "+ 新增交易" }}
            </button>
          </div>
          <!-- 新增交易表單 -->
          <div
            v-if="showTransactionForm === holding.id"
            class="bg-gray-50 rounded-lg p-4 my-4"
          >
            <h4 class="text-sm font-semibold text-gray-600 mb-3">新增交易</h4>
            <div class="grid grid-cols-2 gap-3">
              <div>
                <label class="text-xs text-gray-500">買賣</label>
                <select
                  v-model="transactionForm.action"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                >
                  <option value="buy">買入</option>
                  <option value="sell">賣出</option>
                </select>
              </div>
              <div>
                <label class="text-xs text-gray-500">交易日期</label>
                <input
                  v-model="transactionForm.traded_at"
                  type="date"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div v-if="holding.type === 'stock'">
                <label class="text-xs text-gray-500">股數</label>
                <input
                  v-model="transactionForm.shares"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div v-else>
                <label class="text-xs text-gray-500">投入金額</label>
                <input
                  v-model="transactionForm.amount"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div v-if="holding.type === 'stock'">
                <label class="text-xs text-gray-500">成交價</label>
                <input
                  v-model="transactionForm.price"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div v-else>
                <label class="text-xs text-gray-500">淨值</label>
                <input
                  v-model="transactionForm.nav"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div>
                <label class="text-xs text-gray-500">手續費</label>
                <input
                  v-model="transactionForm.fee"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div>
                <label class="text-xs text-gray-500">交易稅</label>
                <input
                  v-model="transactionForm.tax"
                  type="number"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
              <div class="col-span-2">
                <label class="text-xs text-gray-500">備註</label>
                <input
                  v-model="transactionForm.note"
                  type="text"
                  class="mt-1 block w-full border rounded-md px-3 py-1.5 text-sm"
                />
              </div>
            </div>
            <div class="flex justify-end mt-3">
              <button
                @click="submitTransaction(holding)"
                class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700"
              >
                新增
              </button>
            </div>
          </div>
          <InvestmentChart
            v-if="holding.type === 'stock' || holding.type === 'fund'"
            :history="investmentHistory[holding.id]?.history"
            :mark-points="investmentHistory[holding.id]?.buy_points"
            :symbol="holding.symbol"
          />
          <!-- 交易紀錄列表 -->
          <table class="w-full text-sm">
            <thead>
              <tr class="text-xs text-gray-400 border-b">
                <th class="pb-2 text-left">日期</th>
                <th class="pb-2 text-left">買賣</th>
                <th class="pb-2 text-right">
                  {{ holding.type === "stock" ? "股數" : "金額" }}
                </th>
                <th class="pb-2 text-right">
                  {{ holding.type === "stock" ? "成交價" : "淨值" }}
                </th>
                <th class="pb-2 text-right">手續費</th>
                <th class="pb-2 text-right">稅</th>
                <th class="pb-2 text-right">買入/贖回金額</th>
                <th class="pb-2"></th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="tx in transactions[holding.id] || []"
                :key="tx.id"
                class="border-b last:border-0"
              >
                <td class="py-2 text-left">
                  {{ tx.traded_at.substring(0, 10) }}
                </td>
                <td class="py-2 text-left">
                  <span
                    :class="
                      tx.action === 'buy' ? 'text-green-600' : 'text-red-500'
                    "
                  >
                    {{ tx.action === "buy" ? "買入" : "賣出" }}
                  </span>
                </td>
                <td class="py-2 text-right">
                  {{
                    holding.type === "stock"
                      ? tx.shares
                      : Number(tx.amount).toLocaleString()
                  }}
                </td>
                <td class="py-2 text-right">
                  {{
                    holding.type === "stock"
                      ? Number(tx.price).toLocaleString()
                      : tx.nav
                  }}
                </td>
                <td class="py-2 text-right">{{ tx.fee }}</td>
                <td class="py-2 text-right">{{ tx.tax }}</td>
                <td class="py-2 text-right">
                  {{ calcAmount(tx, holding).toLocaleString() }}
                </td>
                <td class="py-2 text-right">
                  <button
                    @click="deleteTransaction(holding, tx.id)"
                    class="text-xs text-red-400 hover:underline"
                  >
                    刪除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div
      v-if="showHoldingModal"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-lg font-semibold mb-4">新增持倉</h3>
        <div class="space-y-3">
          <div>
            <label class="text-sm text-gray-600">類型</label>
            <select
              v-model="holdingForm.type"
              class="mt-1 block w-full border rounded-md px-3 py-2 text-sm"
            >
              <option value="stock">股票</option>
              <option value="fund">基金</option>
            </select>
          </div>
          <div class="relative">
            <label class="text-sm text-gray-600">代號</label>
            <input
              v-model="holdingForm.symbol"
              type="text"
              autocomplete="off"
              @focus="showOptions = securityOptions.length > 0"
              @blur="hideOptionsDelayed"
              class="mt-1 block w-full border rounded-md px-3 py-2 text-sm"
            />
            <ul
              v-if="showOptions && securityOptions.length"
              class="absolute z-10 bg-white border rounded-md mt-1 w-full max-h-48 overflow-auto shadow-lg"
            >
              <li
                v-for="item in securityOptions"
                :key="item.code"
                @click="selectSecurity(item)"
                class="px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer"
              >
                <span class="font-medium">{{ item.code }}</span>
                <span class="text-gray-500 ml-2">{{ item.name }}</span>
              </li>
            </ul>
          </div>
          <div>
            <label class="text-sm text-gray-600">名稱</label>
            <input
              v-model="holdingForm.name"
              type="text"
              class="mt-1 block w-full border rounded-md px-3 py-2 text-sm"
            />
          </div>
        </div>
        <div class="flex justify-end gap-2 mt-6">
          <button
            @click="showHoldingModal = false"
            class="px-4 py-2 text-sm text-gray-600 hover:underline"
          >
            取消
          </button>
          <button
            @click="submitHolding"
            class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700"
          >
            儲存
          </button>
        </div>
      </div>
    </div>
  </AuthenticatedLayout>
</template>
