import { apiGet, apiPut } from '../api.js';
import { pageHeaderHTML, showToast } from '../app.js';

let overview = null;
let staleClients = [];
let followupSearch = '';

export async function insightsPage() {
    const app = document.getElementById('app');
    app.innerHTML = `
        ${pageHeaderHTML('Insights')}
        <div id="insightsContent"><div class="spinner"></div></div>
    `;

    try {
        const [ov, stale] = await Promise.all([
            apiGet('analytics.php?overview=1'),
            apiGet('analytics.php?staleClients=1'),
        ]);
        overview = ov;
        staleClients = stale.clients || [];
        renderInsights();
    } catch (e) {
        showToast(e.message, 'error');
        document.getElementById('insightsContent').innerHTML =
            `<p class="error-text">${esc(e.message)}</p>`;
    }
}

function renderInsights() {
    const el = document.getElementById('insightsContent');
    const ov = overview || {};

    const kpiCards = `
        <div class="insights-kpi-grid">
            <div class="insights-kpi card">
                <div class="insights-kpi-value">${ov.clientCount ?? 0}</div>
                <div class="insights-kpi-label">Clients</div>
            </div>
            <div class="insights-kpi card">
                <div class="insights-kpi-value">${ov.clientsWithCompletions ?? 0}</div>
                <div class="insights-kpi-label">With completions</div>
            </div>
            <div class="insights-kpi card">
                <div class="insights-kpi-value">${ov.submissionsLast7d ?? 0}</div>
                <div class="insights-kpi-label">Uploads (7 days)</div>
            </div>
            <div class="insights-kpi card">
                <div class="insights-kpi-value">${ov.submissionsLast30d ?? 0}</div>
                <div class="insights-kpi-label">Uploads (30 days)</div>
            </div>
        </div>
    `;

    const uploadChart = verticalBarChart(
        (ov.submissionsByDay || []).map(d => ({
            label: formatChartDay(d.date),
            value: d.count,
            title: `${d.date}: ${d.count} upload(s)`,
        })),
        { emptyLabel: 'No uploads in this period' }
    );

    const withoutCompletions = Math.max(0, (ov.clientCount ?? 0) - (ov.clientsWithCompletions ?? 0));
    const engagementChart = horizontalBarChart([
        { label: 'With completions', value: ov.clientsWithCompletions ?? 0 },
        { label: 'No completions yet', value: withoutCompletions },
    ], { suffix: '' });

    const idleChart = horizontalBarChart(idleBucketItems(staleClients), {
        suffix: '',
        variant: 'warn',
    });

    const completionChart = horizontalBarChart(
        (ov.questionnaires || []).map(q => ({
            label: q.name,
            value: q.completionRatio ?? 0,
            title: `${q.name}: ${q.completionRatio ?? 0}%`,
        })),
        { suffix: '%', max: 100 }
    );

    const scoringProfiles = ov.scoringProfiles || [];
    const scoringCharts = scoringProfiles.map(sp => {
        const computed = sp.computedBands || sp.bands || {};
        const coach = sp.coachBands || {};
        const computedChart = horizontalBarChart([
            { label: 'Green', value: computed.green ?? 0 },
            { label: 'Yellow', value: computed.yellow ?? 0 },
            { label: 'Red', value: computed.red ?? 0 },
        ], { suffix: '' });
        const coachChart = horizontalBarChart([
            { label: 'Green', value: coach.green ?? 0 },
            { label: 'Yellow', value: coach.yellow ?? 0 },
            { label: 'Red', value: coach.red ?? 0 },
        ], { suffix: '' });
        return `
            <div class="card insights-chart-card">
                <h3>${esc(sp.name)}</h3>
                <p class="insights-chart-hint">
                    ${sp.clientCount ?? 0} client(s) with complete profile
                    ${sp.averageTotal != null ? ` · avg ${sp.averageTotal}` : ''}
                    ${sp.pendingReview ? ` · ${sp.pendingReview} pending coach review` : ''}
                </p>
                <p class="insights-chart-hint" style="margin:0 0 6px"><strong>Calculated bands</strong></p>
                ${computedChart}
                <p class="insights-chart-hint" style="margin:12px 0 6px"><strong>Coach decisions</strong></p>
                ${coachChart}
            </div>`;
    }).join('');

    const qRows = (ov.questionnaires || []).map(q => `
        <tr>
            <td><strong>${esc(q.name)}</strong></td>
            <td>${q.completedCount ?? 0} / ${q.eligibleCount ?? 0}</td>
            <td>${q.completionRatio ?? 0}%</td>
        </tr>
    `).join('');

    el.innerHTML = `
        ${kpiCards}
        <div class="insights-charts-grid">
            <div class="card insights-chart-card">
                <h3>Uploads per day</h3>
                <p class="insights-chart-hint">Last 14 days</p>
                ${uploadChart}
            </div>
            <div class="card insights-chart-card">
                <h3>Client engagement</h3>
                <p class="insights-chart-hint">Among clients in your scope</p>
                ${engagementChart}
            </div>
            <div class="card insights-chart-card">
                <h3>Days since last activity</h3>
                <p class="insights-chart-hint">Clients with at least one completion</p>
                ${idleChart}
            </div>
        </div>
        ${scoringProfiles.length ? `
        <div class="card" style="margin-top:20px">
            <h3 style="margin:0 0 8px">Scoring profiles</h3>
            <p class="insights-chart-hint" style="margin:0 0 12px">Calculated vs coach band distribution among clients with a complete weighted score</p>
            <div class="insights-charts-grid">${scoringCharts}</div>
        </div>` : ''}
        <div class="card" style="margin-top:20px">
            <h3 style="margin:0 0 8px">Completion by questionnaire</h3>
            <p class="insights-chart-hint" style="margin:0 0 12px">Share of clients who completed each active questionnaire</p>
            ${completionChart}
            <div class="table-wrapper">
                <table class="data-table">
                    <thead>
                        <tr><th>Questionnaire</th><th>Completed</th><th>Rate</th></tr>
                    </thead>
                    <tbody>${qRows || '<tr><td colspan="3">No active questionnaires</td></tr>'}</tbody>
                </table>
            </div>
        </div>
        <div class="card" style="margin-top:20px">
            <h3 style="margin:0 0 8px">Needs follow-up</h3>
            <p class="data-toolbar-hint" style="margin:0 0 12px">
                Clients who completed at least one questionnaire, sorted by longest time since any upload activity.
            </p>
            <div class="filter-bar">
                <input type="search" id="followupListSearch" class="filter-search"
                    placeholder="Search client, coach, questionnaire, note…" value="${esc(followupSearch)}">
                <span class="data-toolbar-hint" id="followupListCount"></span>
            </div>
            <div class="table-wrapper">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Client</th><th>Coach</th><th>First completed</th><th>First at</th>
                            <th>Last activity</th><th>Days idle</th><th>Note</th>
                        </tr>
                    </thead>
                    <tbody id="followupTableBody"></tbody>
                </table>
            </div>
        </div>
    `;

    document.getElementById('followupListSearch').addEventListener('input', (e) => {
        followupSearch = e.target.value;
        renderFollowupTableBody();
    });

    renderFollowupTableBody();
}

function followupSearchText(c) {
    return [
        c.clientCode,
        c.coachUsername,
        c.firstQuestionnaireName,
        c.firstQuestionnaireID,
        c.note,
        c.firstCompletedAt,
        c.lastActivityAt,
        c.daysSinceLastActivity != null ? String(c.daysSinceLastActivity) : '',
    ].filter(Boolean).join(' ');
}

function filteredFollowupClients() {
    const q = followupSearch.trim().toLowerCase();
    if (!q) return staleClients;
    return staleClients.filter(c => followupSearchText(c).toLowerCase().includes(q));
}

function followupRowHTML(c) {
    return `
        <tr data-client="${esc(c.clientCode)}">
            <td><code>${esc(c.clientCode)}</code></td>
            <td>${esc(c.coachUsername)}</td>
            <td>${esc(c.firstQuestionnaireName || '—')}</td>
            <td>${esc(c.firstCompletedAt || '—')}</td>
            <td>${esc(c.lastActivityAt || '—')}</td>
            <td>${c.daysSinceLastActivity != null ? c.daysSinceLastActivity : '—'}</td>
            <td>
                <textarea class="followup-note-input" rows="2" data-client="${esc(c.clientCode)}"
                    placeholder="Follow-up note…">${esc(c.note || '')}</textarea>
                <button type="button" class="btn btn-sm save-note-btn" data-client="${esc(c.clientCode)}">Save</button>
            </td>
        </tr>`;
}

function renderFollowupTableBody() {
    const body = document.getElementById('followupTableBody');
    const countEl = document.getElementById('followupListCount');
    if (!body) return;

    const filtered = filteredFollowupClients();

    if (!filtered.length) {
        body.innerHTML = `
            <tr>
                <td colspan="7" style="text-align:center;color:var(--text-secondary);padding:24px">
                    ${staleClients.length ? 'No clients match' : 'No clients'}
                </td>
            </tr>`;
        if (countEl) {
            countEl.textContent = followupSearch.trim() && staleClients.length
                ? `0 of ${staleClients.length} clients`
                : '';
        }
        return;
    }

    body.innerHTML = filtered.map(c => followupRowHTML(c)).join('');

    if (countEl) {
        const q = followupSearch.trim();
        countEl.textContent = q
            ? `${filtered.length} of ${staleClients.length} clients`
            : `${staleClients.length} client${staleClients.length === 1 ? '' : 's'}`;
    }

    body.querySelectorAll('.save-note-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const tr = btn.closest('tr');
            const ta = tr?.querySelector('.followup-note-input');
            saveNote(btn.dataset.client, ta);
        });
    });
}

async function saveNote(clientCode, ta) {
    if (!ta) return;
    try {
        await apiPut('analytics.php', { clientCode, note: ta.value.trim() });
        const row = staleClients.find(c => c.clientCode === clientCode);
        if (row) row.note = ta.value.trim();
        showToast('Note saved', 'success');
    } catch (e) {
        showToast(e.message, 'error');
    }
}

function esc(s) {
    const d = document.createElement('div');
    d.textContent = s ?? '';
    return d.innerHTML;
}

function formatChartDay(isoDate) {
    if (!isoDate) return '';
    const d = new Date(isoDate + 'T12:00:00');
    if (Number.isNaN(d.getTime())) return isoDate.slice(5);
    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

function chartMax(values, fallbackMax = 1) {
    const m = Math.max(0, ...values);
    return m > 0 ? m : fallbackMax;
}

function verticalBarChart(items, { emptyLabel = 'No data' } = {}) {
    if (!items.length) {
        return `<p class="insights-chart-hint">${esc(emptyLabel)}</p>`;
    }
    const max = chartMax(items.map(i => i.value));
    return `
        <div class="insights-vchart" role="img" aria-label="Bar chart">
            ${items.map(item => {
                const pct = max ? Math.round((100 * item.value) / max) : 0;
                return `
                    <div class="insights-vchart-col" title="${esc(item.title || `${item.label}: ${item.value}`)}">
                        <div class="insights-vchart-bar-wrap">
                            <div class="insights-vchart-bar" style="height:${pct}%"></div>
                        </div>
                        <span class="insights-vchart-value">${item.value}</span>
                        <span class="insights-vchart-label">${esc(item.label)}</span>
                    </div>`;
            }).join('')}
        </div>`;
}

function horizontalBarChart(items, { suffix = '%', max: fixedMax, variant = '' } = {}) {
    if (!items.length) {
        return '<p class="insights-chart-hint">No data</p>';
    }
    const max = fixedMax ?? chartMax(items.map(i => i.value));
    const fillClass = variant === 'warn' ? 'insights-hchart-fill--warn'
        : variant === 'muted' ? 'insights-hchart-fill--muted'
        : '';
    return `
        <div class="insights-hchart" role="img" aria-label="Bar chart">
            ${items.map(item => {
                const pct = max ? Math.round((100 * item.value) / max) : 0;
                const display = suffix === '%' ? `${item.value}${suffix}` : String(item.value);
                return `
                    <div class="insights-hchart-row" title="${esc(item.title || `${item.label}: ${display}`)}">
                        <span class="insights-hchart-label">${esc(item.label)}</span>
                        <div class="insights-hchart-track">
                            <div class="insights-hchart-fill ${fillClass}" style="width:${pct}%"></div>
                        </div>
                        <span class="insights-hchart-num">${esc(display)}</span>
                    </div>`;
            }).join('')}
        </div>`;
}

function idleBucketItems(clients) {
    const buckets = [
        { label: '0–7 days', value: 0 },
        { label: '8–30 days', value: 0 },
        { label: '31–90 days', value: 0 },
        { label: '90+ days', value: 0 },
        { label: 'No uploads yet', value: 0 },
    ];
    for (const c of clients) {
        const d = c.daysSinceLastActivity;
        if (d == null) buckets[4].value += 1;
        else if (d <= 7) buckets[0].value += 1;
        else if (d <= 30) buckets[1].value += 1;
        else if (d <= 90) buckets[2].value += 1;
        else buckets[3].value += 1;
    }
    return buckets.filter(b => b.value > 0);
}