<template>
  <div class="chat-list-panel">
    <!-- Header -->
    <div class="cl-header">
      <span class="cl-title">Inbox</span>
      <span class="cl-count">{{ conversations.length }}</span>
    </div>

    <!-- Search -->
    <div class="cl-search">
      <span class="search-icon">🔍</span>
      <input
        type="text"
        placeholder="Search contacts..."
        :value="search"
        @input="$emit('searchChange', $event.target.value)"
      />
    </div>

    <!-- Filter tabs -->
    <div class="cl-filters">
      <button
        v-for="f in filters"
        :key="f.value"
        class="filter-btn"
        :class="{ active: currentFilter === f.value }"
        @click="$emit('filterChange', f.value)"
      >{{ f.label }}</button>
    </div>

    <!-- Conversation list -->
    <div class="cl-list">
      <div
        v-for="conv in conversations"
        :key="conv.id"
        class="chat-item"
        :class="{ selected: selectedId === conv.id }"
        @click="$emit('select', conv.id)"
      >
        <div class="avatar" :style="avatarStyle(conv)">{{ conv.initials }}</div>
        <div class="chat-info">
          <div class="chat-top">
            <span class="chat-name">{{ conv.contact_name || conv.contact_phone }}</span>
            <span class="chat-time">{{ formatTime(conv.last_message_at) }}</span>
          </div>
          <div class="chat-bottom">
            <span class="chat-preview">{{ conv.last_message || '...' }}</span>
            <span v-if="conv.unread_count > 0" class="badge-unread">{{ conv.unread_count }}</span>
          </div>
          <div class="chat-badges">
            <span class="status-badge" :class="'badge-' + conv.status">{{ conv.status }}</span>
            <span v-if="conv.label" class="label-badge">{{ conv.label }}</span>
          </div>
        </div>
      </div>

      <div v-if="conversations.length === 0" class="empty-state">
        <p>No conversations yet</p>
        <small>Messages will appear here</small>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConversationList',
  props: {
    conversations: { type: Array, default: () => [] },
    selectedId:    { type: Number, default: null },
    currentFilter: { type: String, default: 'all' },
    search:        { type: String, default: '' },
  },
  emits: ['select', 'filterChange', 'searchChange'],
  data() {
    return {
      filters: [
        { value: 'all',    label: 'All'    },
        { value: 'new',    label: 'New'    },
        { value: 'open',   label: 'Open'   },
        { value: 'closed', label: 'Closed' },
      ],
    };
  },
  methods: {
    formatTime(iso) {
      if (!iso) return '';
      const d    = new Date(iso);
      const now  = new Date();
      const diff = now - d;
      if (diff < 86400000) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      if (diff < 604800000) return d.toLocaleDateString([], { weekday: 'short' });
      return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
    },
    avatarStyle(conv) {
      // deterministic hue from phone string
      const hue = [...conv.contact_phone].reduce((a, c) => a + c.charCodeAt(0), 0) % 360;
      return { background: `hsl(${hue},40%,30%)` };
    },
  },
};
</script>

<style scoped>
.chat-list-panel {
  width: 320px;
  min-width: 320px;
  background: #111;
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.cl-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #222;
}
.cl-title { font-weight: 700; font-size: 18px; color: #fff; }
.cl-count { background: #25d366; color: #000; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

.cl-search {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  border-bottom: 1px solid #222;
}
.cl-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
  font-size: 13px;
}
.cl-search input::placeholder { color: #666; }
.search-icon { font-size: 14px; }

.cl-filters {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #222;
}
.filter-btn {
  background: #222;
  border: none;
  color: #aaa;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
}
.filter-btn.active  { background: #25d366; color: #000; font-weight: 600; }
.filter-btn:hover:not(.active) { background: #333; color: #fff; }

.cl-list { flex: 1; overflow-y: auto; }
.cl-list::-webkit-scrollbar { width: 4px; }
.cl-list::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.chat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #1a1a1a;
  transition: background .12s;
}
.chat-item:hover    { background: #1a1a1a; }
.chat-item.selected { background: #1f3b1f; }

.avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.chat-info   { flex: 1; min-width: 0; }
.chat-top    { display: flex; justify-content: space-between; margin-bottom: 2px; }
.chat-name   { font-size: 13px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.chat-time   { font-size: 11px; color: #666; white-space: nowrap; }
.chat-bottom { display: flex; align-items: center; justify-content: space-between; }
.chat-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.chat-badges  { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

.badge-unread { background: #25d366; color: #000; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.status-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; text-transform: uppercase; }
.badge-new    { background: rgba(245,158,11,.2); color: #f59e0b; }
.badge-open   { background: rgba(37,211,102,.15); color: #25d366; }
.badge-closed { background: rgba(100,116,139,.2); color: #94a3b8; }
.label-badge  { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(99,102,241,.2); color: #818cf8; }

.empty-state { padding: 40px 20px; text-align: center; color: #555; }
.empty-state p     { font-size: 15px; margin: 0 0 4px; }
.empty-state small { font-size: 12px; }
</style>
