<template>
  <div class="groups-management" :class="{ 'dark': themeStore.isDarkMode }">
    <div class="management-content">
      <div class="header-section">
        <h1 class="page-title">群聊管理</h1>
        <button class="create-btn">
          <i class="fas fa-plus"></i>
          创建群聊
        </button>
      </div>

      <!-- 群聊列表 -->
      <div class="groups-grid">
        <div
          v-for="group in mockGroups"
          :key="group.id"
          class="group-card"
        >
          <div class="card-content">
            <div class="group-header">
              <div class="group-avatar">
                {{ group.nick_name.charAt(0) }}
              </div>
              <div class="group-info">
                <h3 class="group-name">{{ group.nick_name }}</h3>
                <p class="group-members">{{ group.memberCount }} 人</p>
              </div>
            </div>
            <p class="group-description">{{ group.description }}</p>
            <div class="group-actions">
              <button class="action-btn primary-btn">
                进入群聊
              </button>
              <button class="action-btn secondary-btn">
                设置
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useThemeStore} from '../stores/theme.ts';

const themeStore = useThemeStore();

const mockGroups = ref([
  {
    id: 1,
    name: '技术交流群',
    memberCount: 128,
    description: '分享技术心得，讨论前沿技术'
  },
  {
    id: 2,
    name: '项目讨论组',
    memberCount: 45,
    description: '项目进度讨论和问题解决'
  },
  {
    id: 3,
    name: '休闲聊天室',
    memberCount: 89,
    description: '轻松愉快的日常交流'
  }
]);
</script>

<style scoped>
.groups-management {
  height: 100%;
  background: #f8fafc;
  overflow-y: auto;
}

.groups-management.dark {
  background: #111827;
}

.management-content {
  padding: 24px;
}

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

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.groups-management.dark .page-title {
  color: #f7fafc;
}

.create-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3);
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.group-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.groups-management.dark .group-card {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.groups-management.dark .group-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.card-content {
  padding: 24px;
}

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

.group-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
}

.group-info {
  flex: 1;
}

.group-name {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 4px 0;
}

.groups-management.dark .group-name {
  color: #f7fafc;
}

.group-members {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.groups-management.dark .group-members {
  color: #9ca3af;
}

.group-description {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.groups-management.dark .group-description {
  color: #9ca3af;
}

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

.action-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-btn {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  color: white;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.secondary-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.secondary-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

.groups-management.dark .secondary-btn {
  background: #4b5563;
  color: #d1d5db;
  border-color: #6b7280;
}

.groups-management.dark .secondary-btn:hover {
  background: #6b7280;
  color: #f3f4f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .management-content {
    padding: 16px;
  }

  .header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .groups-grid {
    grid-template-columns: 1fr;
  }
}
</style>
