<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('wallet-creation')
</script>

<template>
  <div class="tools-view">
    <div class="page-header">
      <h1 class="page-title">工具集合</h1>
      <p class="page-description">一系列实用的加密货币工具，助您高效管理数字资产</p>
    </div>

    <div class="tools-tabs">
      <button
        class="tab-button"
        :class="{ active: activeTab === 'wallet-creation' }"
        @click="activeTab = 'wallet-creation'"
      >
        批量钱包创建
      </button>
      <button
        class="tab-button"
        :class="{ active: activeTab === 'wallet-collection' }"
        @click="activeTab = 'wallet-collection'"
      >
        钱包归集
      </button>
      <button
        class="tab-button"
        :class="{ active: activeTab === 'other-tools' }"
        @click="activeTab = 'other-tools'"
      >
        其他工具
      </button>
    </div>

    <div class="tool-content card">
      <!-- 批量钱包创建工具 -->
      <div v-if="activeTab === 'wallet-creation'" class="tool-panel">
        <h2 class="tool-title">批量钱包创建</h2>
        <p class="tool-desc">批量创建以太坊兼容的钱包地址和私钥</p>

        <div class="tool-form">
          <div class="form-group">
            <label>创建钱包数量</label>
            <input
              type="number"
              class="form-input"
              placeholder="输入需要创建的钱包数量"
              min="1"
              max="100"
              value="10"
            />
          </div>

          <div class="form-group">
            <label>钱包类型</label>
            <select class="form-select">
              <option value="eth">以太坊 (ETH)</option>
              <option value="bsc">币安智能链 (BSC)</option>
              <option value="polygon">Polygon</option>
              <option value="arbitrum">Arbitrum</option>
            </select>
          </div>

          <div class="form-group">
            <label>导出格式</label>
            <select class="form-select">
              <option value="json">JSON</option>
              <option value="csv">CSV</option>
              <option value="txt">TXT</option>
            </select>
          </div>

          <button class="btn btn-primary btn-block">开始创建</button>
        </div>

        <div class="results-preview">
          <h3>预览结果</h3>
          <div class="preview-content">
            <p>暂无数据，请先创建钱包</p>
          </div>
        </div>
      </div>

      <!-- 钱包归集工具 -->
      <div v-if="activeTab === 'wallet-collection'" class="tool-panel">
        <h2 class="tool-title">钱包归集</h2>
        <p class="tool-desc">将多个钱包中的资产归集到一个目标钱包</p>

        <div class="tool-form">
          <div class="form-group">
            <label>目标钱包地址</label>
            <input type="text" class="form-input" placeholder="输入归集目标钱包地址" />
          </div>

          <div class="form-group">
            <label>源钱包私钥列表</label>
            <textarea class="form-textarea" placeholder="每行输入一个私钥..."></textarea>
          </div>

          <div class="form-group">
            <label>网络</label>
            <select class="form-select">
              <option value="eth">以太坊 (ETH)</option>
              <option value="bsc">币安智能链 (BSC)</option>
              <option value="polygon">Polygon</option>
              <option value="arbitrum">Arbitrum</option>
            </select>
          </div>

          <div class="form-group">
            <label>GAS设置</label>
            <div class="gas-settings">
              <input type="text" class="form-input" placeholder="Gas Price (Gwei)" />
              <input type="text" class="form-input" placeholder="Gas Limit" value="21000" />
            </div>
          </div>

          <button class="btn btn-primary btn-block">开始归集</button>
        </div>

        <div class="results-preview">
          <h3>归集状态</h3>
          <div class="preview-content">
            <p>暂无数据，请先开始归集</p>
          </div>
        </div>
      </div>

      <!-- 其他工具 -->
      <div v-if="activeTab === 'other-tools'" class="tool-panel">
        <h2 class="tool-title">其他工具</h2>
        <p class="tool-desc">更多实用的加密货币工具</p>

        <div class="tools-grid">
          <div class="tool-card card">
            <h3>Token授权查询</h3>
            <p>查询并撤销钱包中的Token授权</p>
            <button class="btn btn-secondary">使用工具</button>
          </div>

          <div class="tool-card card">
            <h3>交易解码</h3>
            <p>解码链上交易数据，了解交易详情</p>
            <button class="btn btn-secondary">使用工具</button>
          </div>

          <div class="tool-card card">
            <h3>Gas计算器</h3>
            <p>计算不同网络的Gas费用</p>
            <button class="btn btn-secondary">使用工具</button>
          </div>

          <div class="tool-card card">
            <h3>Merkle Tree生成器</h3>
            <p>为空投活动生成Merkle Tree</p>
            <button class="btn btn-secondary">使用工具</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tools-view {
  width: 100%;
}

.page-header {
  margin-bottom: 2rem;
  width: 100%;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-description {
  color: var(--color-text-secondary);
}

.tools-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  background-color: var(--color-bg-secondary);
  padding: 0.5rem;
  border-radius: var(--border-radius);
  width: 100%;
  overflow-x: auto;
}

.tab-button {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
}

.tab-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
}

.tab-button.active {
  color: var(--color-text-primary);
  background-color: var(--color-bg-card);
  font-weight: 600;
}

.tool-content {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.tool-panel {
  padding: 2rem;
  width: 100%;
}

.tool-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.tool-desc {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.tool-form {
  margin-bottom: 2rem;
  max-width: 800px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
  outline: none;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.gas-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gas-settings .form-input {
  flex: 1;
  min-width: 200px;
}

.btn-block {
  width: 100%;
}

.results-preview {
  background-color: var(--color-bg-primary);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  max-width: 800px;
}

.results-preview h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.preview-content {
  color: var(--color-text-secondary);
  min-height: 100px;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.tool-card {
  flex: 1;
  min-width: 280px;
  background-color: var(--color-bg-primary);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: var(--border-radius);
}

.tool-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
}

.tool-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.tool-card p {
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
  flex-grow: 1;
}

@media (max-width: 980px) {
  .tool-card {
    min-width: calc(50% - 1rem);
  }
}

@media (max-width: 768px) {
  .tools-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tab-button {
    text-align: left;
    border-radius: var(--border-radius);
  }

  .tool-card {
    min-width: 100%;
  }

  .tool-panel {
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.8rem;
  }
}
</style>
