{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Dashboard - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}?v={{ 'css/dashboard.css'|asset_version }}">
{% endblock %}

{% block content %}
{{ header(
    title="Welcome back, " + current_user.username + "!",
    description="View your document management overview and statistics",
    button_text="",
    button_url="",
    icon="fa-home"
) }}

{% from 'components/storage_overview.html' import storage_overview %}
{% from 'components/storage_usage.html' import storage_usage %}
{% from 'components/contacts.html' import contacts %}
{% from 'components/contact_status.html' import contact_status %}
{% from 'components/starred_files.html' import starred_files %}
{% from 'components/trash.html' import trash %}
{% from 'components/trash_type.html' import trash_type %}
{% from 'components/recent_activity.html' import recent_activity %}
{% from 'components/conversation_storage.html' import conversation_storage %}
{% from 'components/notification_overview.html' import notification_overview %}

<style>
.masonry {
  column-count: 1;
  column-gap: 1.5rem;
}
@media (min-width: 768px) {
  .masonry { column-count: 2; }
}
@media (min-width: 1200px) {
  .masonry { column-count: 3; }
}
.masonry-card {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
}
.section-title {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}
</style>

<!-- Storage Section -->
<div class="mb-4">
  <h2 class="section-title">Storage Overview</h2>
  <div class="masonry">
    {{ storage_overview(room_count, file_count, folder_count, total_size) }}
    {{ storage_usage(storage_by_type) }}
    {{ conversation_storage(conversation_count, message_count, attachment_count, conversation_total_size, recent_conversations) }}
    {{ trash(trash_count, pending_deletion, oldest_trash_date, trash_size) }}
    {{ trash_type(trash_by_type) }}
  </div>
</div>

<!-- Other Components Section -->
<div>
  <h2 class="section-title">Activity & Statistics</h2>
  <div class="masonry">
    {{ recent_activity(recent_events, is_admin) }}
    {{ starred_files(starred_count, file_count) }}
    {{ notification_overview(unread_notifications, recent_notifications) }}
    {% if current_user.is_admin %}
    {{ contacts(recent_contacts) }}
    {% endif %}
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Helper function to get computed CSS variable value
  function getCssVar(varName) {
    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
  }

  // Get all chart colors
  const chartColors = {
    color1: getCssVar('--chart-color-1'),
    color2: getCssVar('--chart-color-2'),
    color3: getCssVar('--chart-color-3'),
    color4: getCssVar('--chart-color-4'),
    warning: getCssVar('--warning-color')
  };

  // Contact Status Chart
  const statusCtx = document.getElementById('statusChart');
  if (statusCtx) {
    new Chart(statusCtx, {
      type: 'doughnut',
      data: {
        labels: ['Active', 'Inactive'],
        datasets: [{
          data: [{{ active_count }}, {{ inactive_count }}],
          backgroundColor: [chartColors.color1, chartColors.color2],
          borderWidth: 0,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    });
  }

  // Starred Files Chart
  const starredCtx = document.getElementById('starredChart');
  if (starredCtx) {
    new Chart(starredCtx, {
      type: 'doughnut',
      data: {
        labels: ['Starred', 'Unstarred'],
        datasets: [{
          data: [{{ starred_count }}, {{ file_count - starred_count }}],
          backgroundColor: [chartColors.warning, chartColors.color1],
          borderWidth: 0,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    });
  }

  // Storage Usage Chart
  const storageCtx = document.getElementById('storageChart');
  if (storageCtx) {
    const storageData = {
      labels: [{% for type in storage_by_type %}'{{ type.extension|upper }}'{% if not loop.last %}, {% endif %}{% endfor %}],
      datasets: [{
        data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
        backgroundColor: [
          chartColors.color1,
          chartColors.color2,
          chartColors.color3,
          chartColors.color4
        ],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };

    new Chart(storageCtx, {
      type: 'doughnut',
      data: storageData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                var value = context.raw;
                var units = ['B', 'KB', 'MB', 'GB', 'TB'];
                var size = value;
                var unitIndex = 0;
                
                while (size >= 1024 && unitIndex < units.length - 1) {
                  size /= 1024;
                  unitIndex++;
                }
                
                return context.label + ': ' + size.toFixed(1) + ' ' + units[unitIndex];
              }
            }
          }
        },
        cutout: '70%'
      }
    });
  }

  // Trash Type Chart
  const trashTypeCtx = document.getElementById('trashTypeChart');
  if (trashTypeCtx) {
    const trashTypeData = {
      labels: [{% for type in trash_by_type %}'{{ type.extension|upper }}'{% if not loop.last %}, {% endif %}{% endfor %}],
      datasets: [{
        data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
        backgroundColor: [
          chartColors.color1,
          chartColors.color2,
          chartColors.color3,
          chartColors.color4
        ],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };

    new Chart(trashTypeCtx, {
      type: 'doughnut',
      data: trashTypeData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    });
  }
});
</script>
{% endblock %}