{% extends "base.html" %}
{% block title %}Dashboard – DocuElevate{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">

  <!-- Hero / Quick Actions -->
  <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg text-white p-8 mb-8">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold mb-1">DocuElevate Dashboard</h1>
        <p class="text-blue-100 text-sm">Intelligent document processing &amp; management</p>
      </div>
      <div class="flex flex-wrap gap-3">
        <a href="/upload" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
          <i class="fas fa-upload mr-2"></i> Upload
        </a>
        <a href="/files" class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
          <i class="fas fa-list mr-2"></i> Browse Files
        </a>
      </div>
    </div>
  </div>

  <!-- Stats Row -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-file-alt text-blue-600 text-xl"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-blue-600">{{ stats.processed_files | default(0) }}</p>
        <p class="text-gray-500 text-sm">Documents Processed</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-plug text-green-600 text-xl"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-green-600">{{ stats.active_integrations | default(0) }}</p>
        <p class="text-gray-500 text-sm">Active Integrations</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-database text-indigo-600 text-xl"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</p>
        <p class="text-gray-500 text-sm">Storage Targets</p>
      </div>
    </div>
  </div>

  <!-- Widget Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

    <!-- Quick Actions Widget -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-bolt text-yellow-500"></i> Quick Actions
      </h2>
      <ul class="space-y-2">
        <li>
          <a href="/upload" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 group-hover:bg-blue-200">
              <i class="fas fa-upload text-blue-600 text-sm"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">Upload Document</p>
              <p class="text-xs text-gray-400">Process a new file</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/files" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200">
              <i class="fas fa-list text-indigo-600 text-sm"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">View All Files</p>
              <p class="text-xs text-gray-400">Browse processed documents</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/status" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 group-hover:bg-green-200">
              <i class="fas fa-heartbeat text-green-600 text-sm"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">System Status</p>
              <p class="text-xs text-gray-400">Check integration health</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <!-- Capabilities Widget -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-cubes text-blue-500"></i> Capabilities
      </h2>
      <ul class="space-y-3 text-sm text-gray-600">
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
          <span>OCR &amp; metadata extraction with AI</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
          <span>Cloud storage: Dropbox, OneDrive, Google Drive, NextCloud</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
          <span>Paperless-ngx integration for document management</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
          <span>Email &amp; URL-based document ingestion</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
          <span>Automated classification &amp; routing workflows</span>
        </li>
      </ul>
    </div>

    <!-- Getting Started / Help Widget -->
    <div class="bg-white rounded-xl shadow p-6 flex flex-col justify-between">
      <div>
        <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <i class="fas fa-compass text-indigo-500"></i> Getting Started
        </h2>
        <ol class="space-y-3 text-sm text-gray-600 list-none">
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">1</span>
            Configure integrations via <a href="/status" class="text-blue-600 hover:underline">System Status</a>
          </li>
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">2</span>
            <a href="/upload" class="text-blue-600 hover:underline">Upload</a> your first document
          </li>
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">3</span>
            Review results in <a href="/files" class="text-blue-600 hover:underline">Files</a>
          </li>
        </ol>
      </div>
      <a href="/about" class="mt-6 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
        Learn more about DocuElevate <i class="fas fa-arrow-right ml-1 text-xs"></i>
      </a>
    </div>
  </div>

</div>
{% endblock %}