<template>
  <div class="challenge-container">
    <div class="challenge-header">
      <div class="title-section">
        <h2>{{ challenge.title }}</h2>
        <div class="difficulty easy">简单</div>
      </div>
      <div class="challenge-info">
        <span class="info-tag">
          <i class="fas fa-memory"></i>
          内存限制：{{ challenge.memoryLimit }} MB
        </span>
        <span class="info-tag">
          <i class="fas fa-code"></i>
          {{ challenge.language }}
        </span>
        <span class="info-tag">
          <i class="fas fa-clock"></i>
          时间限制：1000ms
        </span>
      </div>
    </div>

    <div class="challenge-content">
      <div class="test-cases-section">
        <div class="section-header">
          <h3><i class="fas fa-vial"></i> 测试用例</h3>
          <span class="case-count">{{ challenge.testCases.length }} 个用例</span>
        </div>
        <div class="test-cases">
          <div v-for="(test, index) in challenge.testCases" 
               :key="index"
               class="test-case-card">
            <div class="test-case-header">
              <span class="case-number">#{{ index + 1 }}</span>
              <span class="case-status success">
                <i class="fas fa-check-circle"></i>
              </span>
            </div>
            <div class="test-case-content">
              <div class="test-input">
                <div class="label">输入：</div>
                <code>{{ test.input }}</code>
              </div>
              <div class="test-output">
                <div class="label">期望输出：</div>
                <code>{{ test.expectedOutput }}</code>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="editor-section">
        <div class="editor-header">
          <div class="editor-tabs">
            <div class="tab active">
              <i class="fas fa-code"></i>
              代码编辑器
            </div>
          </div>
          <div class="editor-actions">
            <button class="action-btn">
              <i class="fas fa-redo"></i>
              重置
            </button>
            <button class="submit-btn" @click="submitCode">
              <i class="fas fa-paper-plane"></i>
              提交代码
            </button>
          </div>
        </div>
        
        <CodeEditor 
          v-model="userCode" 
          :language="challenge.language"
          class="code-editor-wrapper" 
        />
      </div>

      <div v-if="result" class="result-section">
        <div class="section-header">
          <h3><i class="fas fa-poll"></i> 执行结果</h3>
        </div>
        <pre class="result-content">{{ result }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import CodeEditor from "@/components/CodeEditor/CodeEditor.vue";

export default {
  components: { CodeEditor },
  setup() {
    const challenge = {
      title: "两数之和",
      memoryLimit: 256,
      language: "javascript",
      testCases: [
        { input: "[2,7,11,15], 9", expectedOutput: "[0,1]" },
        { input: "[3,2,4], 6", expectedOutput: "[1,2]" },
        { input: "[3,3], 6", expectedOutput: "[0,1]" },
      ],
    };

    const userCode = ref('// 在这里编写你的代码\nfunction twoSum(nums, target) {\n  return [];\n}');

    const result = ref(null);

    const submitCode = () => {
      result.value = {
        code: userCode.value,
        challenge,
      };
      console.log("提交代码:", result.value);
    };

    return { challenge, userCode, submitCode, result };
  },
};
</script>

<style scoped>
.challenge-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.challenge-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef2f7;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.challenge-header h2 {
  margin: 0;
  color: #1a202c;
  font-size: 26px;
  font-weight: 600;
}

.difficulty {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.difficulty.easy {
  background: #e6f6e6;
  color: #2f9e44;
}

.challenge-info {
  display: flex;
  gap: 12px;
}

.info-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s;
}

.info-tag:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.info-tag i {
  margin-right: 8px;
  color: #3b82f6;
}

.challenge-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h3 i {
  color: #3b82f6;
}

.case-count {
  font-size: 14px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 16px;
}

.test-cases {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.test-case-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s;
}

.test-case-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.test-case-header {
  padding: 12px 16px;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-number {
  font-weight: 500;
  color: #64748b;
}

.case-status {
  font-size: 14px;
}

.case-status.success i {
  color: #2f9e44;
}

.test-case-content {
  padding: 16px;
}

.test-input, .test-output {
  margin: 8px 0;
}

.label {
  font-weight: 500;
  color: #475569;
  margin-bottom: 4px;
}

code {
  display: block;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.editor-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px 0;
}

.editor-tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  font-size: 14px;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab.active {
  background: #f1f5f9;
  color: #3b82f6;
  font-weight: 500;
}

.editor-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.action-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.submit-btn {
  padding: 8px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.submit-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.code-editor-wrapper {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  flex-grow: 1;
  height: 600px;
}

.result-section {
  grid-column: 1 / -1;
  background: #f8fafc;
  border-radius: 10px;
  padding: 20px;
}

.result-content {
  margin: 0;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .challenge-content {
    grid-template-columns: 1fr;
  }
  
  .test-cases-section, .editor-section {
    grid-column: 1;
  }
  
  .info-tag {
    padding: 6px 12px;
  }
}
</style>
