<?php
/** @var \App\Services\DashboardService $dash */
$filters        = $filters ?? $dash->defaults();
$categories     = $categories ?? [];
$filterBasePath = $filterBasePath ?? 'dashboard';
$dateLabel      = $dateLabel ?? $dash->dateLabel($filters);
$statusLabel    = $statusLabel ?? $dash->statusLabel($filters);
$categoryLabel  = $categoryLabel ?? $dash->categoryLabel($filters, $categories);
$dateModes      = [
    'all'      => 'All Dates',
    'today'    => 'Today',
    'tomorrow' => 'Tomorrow',
    'week'     => 'This Week',
    'next7'    => 'Next 7 Days',
    'month'    => 'This Month',
    'custom'   => 'Custom Date(s)',
];
$statusModes = [
    'all'       => 'All',
    'pending'   => 'Pending',
    'completed' => 'Completed',
];
$linkFilters = $filters;
if (($query ?? '') !== '') {
    $linkFilters['q'] = (string) $query;
}
?>
<div class="dash-header">
    <form class="search-form" method="get" action="<?= site_url('tasks/search') ?>">
        <svg class="search-ico" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m16 16 4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
        <input type="search" name="q" placeholder="Search Tasks" value="<?= esc($query ?? '') ?>" aria-label="Search Tasks">
        <input type="hidden" name="date" value="<?= esc($filters['date'] ?? 'today') ?>">
        <input type="hidden" name="status" value="<?= esc($filters['status'] ?? 'pending') ?>">
        <input type="hidden" name="category" value="<?= esc($filters['category'] ?? 'all') ?>">
        <?php if (($filters['date'] ?? '') === 'custom'): ?>
            <input type="hidden" name="from" value="<?= esc($filters['from'] ?? '') ?>">
            <input type="hidden" name="to" value="<?= esc($filters['to'] ?? '') ?>">
        <?php endif; ?>
    </form>
    <div class="filter-icons">
        <button type="button" class="icon-btn<?= ($filters['date'] ?? '') !== 'today' ? ' is-filtered' : '' ?>" data-filter-open="date" aria-label="Date filter" aria-expanded="false" aria-controls="date-popover">
            <svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="5" width="16" height="15" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M8 3.5v4M16 3.5v4M4 10h16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
        </button>
        <button type="button" class="icon-btn<?= ($filters['status'] ?? '') !== 'pending' ? ' is-filtered' : '' ?>" data-filter-open="status" aria-label="Status filter" aria-expanded="false" aria-controls="status-popover">
            <svg viewBox="0 0 24 24" width="20" height="20"><path d="M8 7h12M8 12h12M8 17h12M4 7h.01M4 12h.01M4 17h.01" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
        </button>
        <button type="button" class="icon-btn<?= ($filters['category'] ?? 'all') !== 'all' ? ' is-filtered' : '' ?>" data-filter-open="category" aria-label="Category filter" aria-expanded="false" aria-controls="category-popover">
            <svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="4" width="7" height="7" rx="1.2" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="13" y="4" width="7" height="7" rx="1.2" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="4" y="13" width="7" height="7" rx="1.2" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="13" y="13" width="7" height="7" rx="1.2" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
        </button>
        <?= view('layouts/_bell') ?>
    </div>
</div>
<div class="filter-chips" data-status-filter="<?= esc($filters['status'] ?? 'pending') ?>">
    <span class="chip is-active"><?= esc($dateLabel) ?> <a class="chip-x" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['date' => 'all'])) ?>" aria-label="Clear date filter">×</a></span>
    <span class="chip is-active"><?= esc($statusLabel) ?> <a class="chip-x" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['status' => 'all'])) ?>" aria-label="Clear status filter">×</a></span>
    <span class="chip is-active"><?= esc($categoryLabel) ?> <a class="chip-x" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['category' => 'all'])) ?>" aria-label="Clear category filter">×</a></span>
</div>

<div class="filter-popover" id="date-popover" hidden>
    <?php foreach ($dateModes as $mode => $label): ?>
        <?php if ($mode === 'custom'): ?>
            <p class="filter-option-label"><?= esc($label) ?></p>
            <form class="custom-date-form" method="get" action="<?= site_url($filterBasePath) ?>">
                <input type="hidden" name="date" value="custom">
                <input type="hidden" name="status" value="<?= esc($filters['status'] ?? 'pending') ?>">
                <input type="hidden" name="category" value="<?= esc($filters['category'] ?? 'all') ?>">
                <?php if (($query ?? '') !== ''): ?>
                    <input type="hidden" name="q" value="<?= esc((string) $query) ?>">
                <?php endif; ?>
                <label class="field-label" for="custom-from">From Date</label>
                <input class="field-input" type="date" id="custom-from" name="from" required value="<?= esc($filters['from'] ?? '') ?>">
                <label class="field-label" for="custom-to">To Date</label>
                <input class="field-input" type="date" id="custom-to" name="to" required value="<?= esc($filters['to'] ?? '') ?>">
                <button class="btn-primary" type="submit">Apply dates</button>
            </form>
        <?php else: ?>
            <a class="filter-option<?= ($filters['date'] ?? '') === $mode ? ' is-selected' : '' ?>" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['date' => $mode])) ?>"><?= esc($label) ?></a>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

<div class="filter-popover" id="status-popover" hidden>
    <?php foreach ($statusModes as $mode => $label): ?>
        <a class="filter-option<?= ($filters['status'] ?? '') === $mode ? ' is-selected' : '' ?>" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['status' => $mode])) ?>"><?= esc($label) ?></a>
    <?php endforeach; ?>
</div>

<div class="filter-popover" id="category-popover" hidden>
    <a class="filter-option<?= ($filters['category'] ?? 'all') === 'all' ? ' is-selected' : '' ?>" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['category' => 'all'])) ?>">All Categories</a>
    <?php foreach ($categories as $category): ?>
        <a class="filter-option<?= (string) ($filters['category'] ?? '') === (string) $category['id'] ? ' is-selected' : '' ?>" href="<?= esc($dash->href($filterBasePath, $linkFilters, ['category' => (string) $category['id']])) ?>"><?= esc($category['name']) ?></a>
    <?php endforeach; ?>
</div>
