{% extends "common/base.html" %}

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

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Welcome back, {{ current_user.username }}!</h2>
    <div class="input-group" style="max-width: 300px;">
        <input type="text" class="form-control" placeholder="Search documents...">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fas fa-search"></i>
        </button>
    </div>
</div>

{% 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 %}

<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;
}
</style>

<div class="masonry">
  {{ storage_overview(room_count, file_count, folder_count, total_size) }}
  {{ storage_usage(storage_by_type) }}
  
  {% if current_user.is_admin %}
  {{ contacts(recent_contacts) }}
  {{ contact_status(active_count, inactive_count) }}
  {% endif %}
  
  {{ starred_files(starred_count, file_count) }}
  {{ trash(trash_count, pending_deletion, oldest_trash_date, trash_size) }}
  {{ trash_type(trash_by_type) }}
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 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: ['#16767b', '#741b5f'],
          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: ['#ffd700', '#16767b'],
          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: [
          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
        ],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };

    new Chart(storageCtx, {
      type: 'doughnut',
      data: storageData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        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: [
          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
        ],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };

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