<template>
  <div class="exercise-type-section">
    <label class="section-label">{{ lang.ssAddExercise }}</label>
    <div class="type-grid">
      <button
        v-for="item in exerciseTypes"
        :key="item.id"
        class="type-card"
        :class="[`type-card--${item.id}`, { disabled: item.id !== 'speaking' }]"
        @click="handleClick(item.id)"
      >
        <div class="type-icon" v-html="item.icon"></div>
        <span class="type-name">{{ item.label }}</span>
        <span v-if="item.id !== 'speaking'" class="coming-soon">{{ lang.ssComingSoon }}</span>
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { lang } from '@/main'
import type { ExerciseType } from '@/types/englishSpeaking'

const emit = defineEmits<{
  (e: 'select', type: ExerciseType): void
}>()

const exerciseTypes: { id: ExerciseType; label: string; icon: string }[] = [
  {
    id: 'speaking',
    label: lang.ssSpeaking as string,
    icon: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>',
  },
  {
    id: 'listening',
    label: lang.ssListening as string,
    icon: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0118 0v6"/><path d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z"/></svg>',
  },
  {
    id: 'reading',
    label: lang.ssReading as string,
    icon: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>',
  },
  {
    id: 'writing',
    label: lang.ssWriting as string,
    icon: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
  },
]

const handleClick = (type: ExerciseType) => {
  if (type === 'speaking') {
    emit('select', type)
  }
}
</script>

<style lang="scss" scoped>
.section-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 16px;
}

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;

  &:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &--speaking {
    border-color: rgba(251, 146, 60, 0.15);
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.3), #fff);
    &:hover { border-color: #fb923c; box-shadow: 0 8px 24px rgba(251, 146, 60, 0.15); }
    .type-icon { color: #f97316; }
  }

  &--listening {
    border-color: rgba(59, 130, 246, 0.15);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.3), #fff);
    .type-icon { color: #3b82f6; }
  }

  &--reading {
    border-color: rgba(34, 197, 94, 0.15);
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.3), #fff);
    .type-icon { color: #22c55e; }
  }

  &--writing {
    border-color: rgba(168, 85, 247, 0.15);
    background: linear-gradient(135deg, rgba(243, 232, 255, 0.3), #fff);
    .type-icon { color: #a855f7; }
  }
}

.type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.coming-soon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 6px;
}
</style>
