Phase 5: Dashboard Evolution (PLANNED)

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useFetch } from '/@src/composables/fetch'
  import ApexChart from 'vue3-apexcharts'

  const analytics = ref<any>(null)
  const loading = ref(true)

  onMounted(async () => {
    const { data, error } = await useFetch('/analytics/dashboard', { method: 'GET' })
    if (!error && data) {
      analytics.value = data
    }
    loading.value = false
  })

  const platformChartOptions = {
    chart: { type: 'bar' },
    xaxis: { categories: ['Instagram', 'Twitter', 'LinkedIn', 'Email', 'Blog'] },
  }
</script>

<template>
  <div class="analytics-dashboard">
    <div class="dashboard-header">
      <h1 class="title is-3">Analytics Dashboard</h1>
      <div class="subtitle">Last 30 days</div>
    </div>

    <!-- Top Metrics -->
    <div class="columns is-multiline">
      <div class="column is-3">
        <div class="metric-card">
          <div class="metric-value">{{ analytics?.total_posts || 0 }}</div>
          <div class="metric-label">Posts Published</div>
        </div>
      </div>
      <div class="column is-3">
        <div class="metric-card">
          <div class="metric-value">{{ analytics?.approval_rate || 0 }}%</div>
          <div class="metric-label">Approval Rate</div>
        </div>
      </div>
      <div class="column is-3">
        <div class="metric-card">
          <div class="metric-value">{{ analytics?.avg_engagement || 0 }}</div>
          <div class="metric-label">Avg Engagement</div>
        </div>
      </div>
      <div class="column is-3">
        <div class="metric-card">
          <div class="metric-value">{{ analytics?.active_clients || 0 }}</div>
          <div class="metric-label">Active Clients</div>
        </div>
      </div>
    </div>

    <!-- Performance Chart -->
    <div class="chart-container">
      <h3 class="subtitle is-5">Performance by Platform</h3>
      <ApexChart
        v-if="analytics"
        type="bar"
        :options="platformChartOptions"
        :series="analytics.platform_series"
        height="350"
      />
    </div>

    <!-- Top Performers Table -->
    <div class="top-performers">
      <h3 class="subtitle is-5">Top Performing Posts</h3>
      <table class="table is-fullwidth">
        <thead>
          <tr>
            <th>Client</th>
            <th>Platform</th>
            <th>Content</th>
            <th>Engagement</th>
            <th>Published</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="post in analytics?.top_posts" :key="post.id">
            <td>{{ post.client_name }}</td>
            <td>{{ post.platform }}</td>
            <td>{{ post.content_preview }}</td>
            <td>{{ post.total_engagement }}</td>
            <td>{{ post.published_at }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
  .metric-card {
    background: var(--card-bg-color);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
  }

  .metric-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
  }

  .metric-label {
    margin-top: 0.5rem;
    color: var(--light-text);
  }

  .chart-container {
    background: var(--card-bg-color);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
  }
</style>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { Calendar } from 'v-calendar'
  import 'v-calendar/style.css'

  const posts = ref<any[]>([])
  const selectedDate = ref(new Date())

  onMounted(async () => {
    // Fetch scheduled/published posts
    const { data } = await useFetch('/posts/calendar', { method: 'GET' })
    posts.value = data || []
  })

  const attributes = computed(() => {
    return posts.value.map((post) => ({
      key: post.id,
      dates: new Date(post.scheduled_at || post.created_at),
      dot: {
        color: post.status === 'sent' ? 'green' : 'orange',
        class: 'post-dot',
      },
      popover: {
        label: `${post.customer_name}: ${post.title}`,
      },
    }))
  })
</script>

<template>
  <div class="content-calendar">
    <div class="calendar-header">
      <h1 class="title is-3">Content Calendar</h1>
      <div class="filters">
        <button class="button">All Clients</button>
        <button class="button">All Platforms</button>
      </div>
    </div>

    <div class="columns">
      <div class="column is-8">
        <Calendar :attributes="attributes" v-model="selectedDate" expanded />
      </div>

      <div class="column is-4">
        <div class="day-details">
          <h3 class="subtitle is-5">{{ selectedDate.toLocaleDateString() }}</h3>
          <div v-for="post in getPostsForDate(selectedDate)" :key="post.id" class="post-card">
            <div class="post-platform">{{ post.platform }}</div>
            <div class="post-client">{{ post.customer_name }}</div>
            <div class="post-content">{{ post.content_preview }}</div>
            <div class="post-status">{{ post.status }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const clientId = ref(route.params.id)
  const conversations = ref<any[]>([])

  onMounted(async () => {
    const { data } = await useFetch(`/client/${clientId.value}/conversations`)
    conversations.value = data || []
  })
</script>

<template>
  <div class="conversation-log">
    <h2 class="title is-4">Telegram Conversations</h2>

    <div class="message-list">
      <div v-for="msg in conversations" :key="msg.id" :class="['message', msg.role]">
        <div class="message-meta">
          <span class="message-role">{{ msg.role }}</span>
          <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
        </div>
        <div class="message-content">{{ msg.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRealtimePostUpdates } from '/@src/composables/realtime'

  const { posts } = useRealtimePostUpdates()
</script>