@extends('layouts.app')
@section('title', 'Follow-up Worklist')

@section('content')
<div class="mb-5 flex items-center justify-between">
    <div>
        <h1 class="text-xl font-semibold text-gray-900">Follow-up Worklist</h1>
        <p class="text-sm text-gray-500 mt-1">{{ now()->format('l, d M Y') }}</p>
    </div>
    <a href="{{ route('crm.index') }}" class="text-sm text-purple-700 hover:text-purple-900">← Dashboard</a>
</div>

{{-- ── Compact stat strip ──────────────────────────────────────────── --}}
<div class="grid grid-cols-4 gap-3 mb-5">
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Due Today</p>
        <p class="text-xl font-bold text-amber-600">{{ $stats['due_today'] }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Done Today</p>
        <p class="text-xl font-bold text-green-600">{{ $stats['completed_today'] }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Repeat Tomorrow</p>
        <p class="text-xl font-bold text-blue-600">{{ $stats['repeat_tomorrow'] }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Complaints (7d)</p>
        <p class="text-xl font-bold text-red-600">{{ $stats['complaints_recent'] }}</p>
    </div>
</div>

{{-- ── Tabs ─────────────────────────────────────────────────────────── --}}
@php
    $tabs = [
        'due_today' => ['label' => 'Due Today',         'count' => $stats['due_today']],
        'overdue'   => ['label' => 'Overdue',           'count' => null],
        'repeat'    => ['label' => 'Repeat Tomorrow',   'count' => $stats['repeat_tomorrow']],
        'completed' => ['label' => 'Completed Today',   'count' => $stats['completed_today']],
    ];
@endphp

<div class="border-b border-gray-200 mb-4">
    <nav class="-mb-px flex gap-6 overflow-x-auto">
        @foreach($tabs as $key => $meta)
            <a href="{{ route('crm.followups', ['tab' => $key]) }}"
               class="whitespace-nowrap py-3 px-1 border-b-2 text-sm font-medium
                      {{ $tab === $key
                         ? 'border-purple-700 text-purple-800'
                         : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                {{ $meta['label'] }}
                @if($meta['count'] !== null)
                    <span class="ml-1 text-xs text-gray-400">({{ $meta['count'] }})</span>
                @endif
            </a>
        @endforeach
    </nav>
</div>

{{-- ── Search ──────────────────────────────────────────────────────── --}}
<form method="GET" class="mb-4 flex gap-2">
    <input type="hidden" name="tab" value="{{ $tab }}">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search by patient name, MRN, or phone..."
           class="form-input flex-1 max-w-md">
    <button class="btn-primary text-sm">Search</button>
    @if(request('search'))
        <a href="{{ route('crm.followups', ['tab' => $tab]) }}" class="btn-secondary text-sm">Clear</a>
    @endif
</form>

{{-- Flash messages --}}
@if(session('success'))
    <div class="mb-4 px-4 py-2 bg-green-50 border border-green-200 text-green-800 rounded-lg text-sm">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="mb-4 px-4 py-2 bg-red-50 border border-red-200 text-red-800 rounded-lg text-sm">
        {{ session('error') }}
    </div>
@endif

{{-- ── Worklist ────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b">
                <tr>
                    <th class="table-header">Patient</th>
                    <th class="table-header">Trigger</th>
                    <th class="table-header">Visit Context</th>
                    <th class="table-header">Due</th>
                    <th class="table-header">Attempts</th>
                    <th class="table-header text-right">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($followUps as $f)
                    <tr class="hover:bg-purple-50/20">
                        {{-- Patient --}}
                        <td class="table-cell">
                            <p class="font-medium text-gray-900">{{ $f->patient->full_name ?? '—' }}</p>
                            <div class="flex gap-3 text-xs text-gray-500 mt-0.5">
                                <span>{{ $f->patient->mrn ?? '' }}</span>
                                <span class="font-mono">{{ $f->patient->phone ?? 'No phone' }}</span>
                            </div>
                        </td>

                        {{-- Trigger badge + reason --}}
                        <td class="table-cell">
                            <span class="badge {{ $f->triggerBadgeClass() }}">{{ $f->triggerLabel() }}</span>
                            <p class="text-xs text-gray-500 mt-1">{{ $f->reason }}</p>
                        </td>

                        {{-- Visit context (snapshot fields) --}}
                        <td class="table-cell text-xs">
                            @if($f->department_snapshot)
                                <p class="text-gray-700">{{ $f->department_snapshot }}</p>
                            @endif
                            @if($f->clinician_snapshot)
                                <p class="text-gray-500">{{ $f->clinician_snapshot }}</p>
                            @endif
                            @if($f->diagnosis_snapshot)
                                <p class="text-gray-400 italic mt-1">{{ \Illuminate\Support\Str::limit($f->diagnosis_snapshot, 60) }}</p>
                            @endif
                        </td>

                        {{-- Due date --}}
                        <td class="table-cell whitespace-nowrap">
                            @php
                                $effectiveDue = $f->next_attempt_due ?? $f->due_date;
                                $isOverdue = $effectiveDue && $effectiveDue->isPast() && $f->status !== 'closed';
                            @endphp
                            <p class="text-sm {{ $isOverdue ? 'text-red-600 font-semibold' : 'text-gray-700' }}">
                                {{ $effectiveDue?->format('d M') ?? '—' }}
                            </p>
                            @if($isOverdue)
                                <p class="text-xs text-red-500">{{ $effectiveDue->diffForHumans() }}</p>
                            @endif
                        </td>

                        {{-- Attempts --}}
                        <td class="table-cell">
                            <div class="flex gap-1">
                                @for($i = 1; $i <= 3; $i++)
                                    @php
                                        $attempt = $f->attempts->firstWhere('attempt_number', $i);
                                        $dotClass = !$attempt
                                            ? 'bg-gray-200'
                                            : ($attempt->wasPickedUp() ? 'bg-green-500' : 'bg-amber-400');
                                    @endphp
                                    <span class="w-2 h-2 rounded-full {{ $dotClass }}"
                                          @if($attempt) title="{{ $attempt->outcomeLabel() }} — {{ $attempt->attempted_at->format('d M H:i') }}" @endif></span>
                                @endfor
                            </div>
                            <p class="text-xs text-gray-400 mt-1">{{ $f->attempt_count }}/{{ \App\Models\FollowUp::MAX_ATTEMPTS }}</p>
                        </td>

                        {{-- Action --}}
                        <td class="table-cell text-right">
                            @if($f->status === 'closed')
                                @if($f->outcome === 'doing_well')
                                    <span class="badge badge-success">Satisfied</span>
                                @elseif($f->outcome === 'still_unwell')
                                    <span class="badge badge-warning">Return visit</span>
                                @elseif($f->outcome === 'complaint')
                                    <span class="badge badge-danger">Complaint</span>
                                @elseif($f->outcome === 'unreachable')
                                    <span class="badge bg-gray-100 text-gray-600">Unreachable</span>
                                @elseif($f->outcome === 'wrong_number')
                                    <span class="badge bg-gray-100 text-gray-600">Wrong number</span>
                                @elseif($f->outcome === 'do_not_call')
                                    <span class="badge bg-gray-100 text-gray-600">Do not call</span>
                                @endif

                                @if($f->review_eligible && !$f->review_sent)
                                    <form method="POST" action="{{ route('crm.followups.review-sent', $f) }}" class="inline">
                                        @csrf
                                        <button class="text-xs text-purple-700 hover:text-purple-900 ml-2"
                                                onclick="return confirm('Mark WhatsApp review request as sent?')">
                                            Mark review sent
                                        </button>
                                    </form>
                                @elseif($f->review_sent)
                                    <span class="badge badge-info ml-2">Review sent</span>
                                @endif
                            @else
                                <button type="button"
                                        class="btn-primary text-xs py-1.5 px-3"
                                        onclick="openCallModal({{ $f->id }})">
                                    Make call
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center">
                            <p class="text-sm text-gray-500">
                                @switch($tab)
                                    @case('overdue')      No overdue calls. Well done. @break
                                    @case('repeat')       No repeat calls scheduled for tomorrow. @break
                                    @case('completed')    No follow-ups completed today yet. @break
                                    @default              No calls due today. The list is clear.
                                @endswitch
                            </p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($followUps->hasPages())
        <div class="px-4 py-3 border-t">{{ $followUps->links() }}</div>
    @endif
</div>

{{-- ── Call outcome modal ──────────────────────────────────────────── --}}
<div id="call-modal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50" onclick="closeCallModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4 pointer-events-none">
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl pointer-events-auto max-h-[90vh] overflow-y-auto">
            <div class="px-6 py-4 border-b flex items-center justify-between sticky top-0 bg-white">
                <h2 class="text-lg font-semibold text-gray-900">Make follow-up call</h2>
                <button type="button" onclick="closeCallModal()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
            </div>

            <div id="call-modal-body" class="px-6 py-4">
                <p class="text-sm text-gray-500">Loading...</p>
            </div>
        </div>
    </div>
</div>

<script>
const followUpRoutes = {
    show:        (id) => `{{ url('/crm/follow-ups') }}/${id}`,
    attempt:     (id) => `{{ url('/crm/follow-ups') }}/${id}/attempt`,
    outcome:     (id) => `{{ url('/crm/follow-ups') }}/${id}/outcome`,
    dnc:         (id) => `{{ url('/crm/follow-ups') }}/${id}/dnc`,
};
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

async function openCallModal(id) {
    const modal = document.getElementById('call-modal');
    const body  = document.getElementById('call-modal-body');
    modal.classList.remove('hidden');
    body.innerHTML = '<p class="text-sm text-gray-500">Loading...</p>';

    try {
        const resp = await fetch(followUpRoutes.show(id), { headers: { 'Accept': 'application/json' }});
        const data = await resp.json();
        body.innerHTML = renderModalBody(data);
        wireModalForms(id);
    } catch (e) {
        body.innerHTML = '<p class="text-sm text-red-600">Could not load follow-up. Please refresh.</p>';
    }
}

function closeCallModal() {
    document.getElementById('call-modal').classList.add('hidden');
}

function renderModalBody(d) {
    const p = d.patient;
    const f = d.follow_up;
    const m = d.meta;

    const phone = p.phone || 'No phone on file';
    const altPhone = p.alt_phone ? `(also: ${p.alt_phone})` : '';

    // Attempt history
    let attemptsHtml = '';
    if (d.attempts && d.attempts.length) {
        attemptsHtml = '<div class="border-t border-gray-100 pt-3 mt-3">'
            + '<h4 class="text-xs font-semibold text-gray-500 uppercase mb-2">Previous attempts</h4>'
            + d.attempts.map(a => `
                <div class="flex justify-between text-xs py-1">
                    <span class="text-gray-700">Attempt ${a.attempt_number}: ${humanOutcome(a.attempt_outcome)}</span>
                    <span class="text-gray-400">${formatDateTime(a.attempted_at)}</span>
                </div>`).join('')
            + '</div>';
    }

    const alreadyPicked = d.attempts && d.attempts.some(a => a.attempt_outcome === 'picked');

    return `
        <!-- Patient summary -->
        <div class="mb-4 p-3 bg-gray-50 rounded-lg">
            <div class="flex justify-between items-start">
                <div>
                    <p class="font-semibold text-gray-900">${escapeHtml(p.first_name || '')} ${escapeHtml(p.last_name || '')}</p>
                    <p class="text-xs text-gray-500">MRN ${escapeHtml(p.mrn || '—')}</p>
                </div>
                <div class="text-right">
                    <p class="font-mono text-sm text-purple-700">${escapeHtml(phone)}</p>
                    ${altPhone ? `<p class="text-xs text-gray-500">${escapeHtml(altPhone)}</p>` : ''}
                </div>
            </div>
            <div class="mt-2 pt-2 border-t border-gray-200 text-xs text-gray-600">
                <p><span class="font-semibold">${escapeHtml(m.trigger_label)}</span> · ${escapeHtml(m.department || '—')} · ${escapeHtml(m.clinician || '—')}</p>
                ${m.diagnosis ? `<p class="text-gray-500 italic mt-1">${escapeHtml(m.diagnosis)}</p>` : ''}
                <p class="text-gray-400 mt-1">${escapeHtml(f.reason || '')}</p>
                <p class="text-gray-400 mt-1">${m.attempts_remaining} of ${3} attempts remaining</p>
            </div>
            ${attemptsHtml}
        </div>

        <!-- Step 1: log the attempt -->
        <div id="attempt-section" ${alreadyPicked ? 'style="display:none"' : ''}>
            <h3 class="font-semibold text-gray-700 text-sm mb-2">1. What happened on the call?</h3>
            <form id="attempt-form" class="space-y-3">
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                    <button type="button" data-attempt="picked"      class="attempt-btn-success">✓ Picked up</button>
                    <button type="button" data-attempt="no_answer"   class="attempt-btn-neutral">No answer</button>
                    <button type="button" data-attempt="busy"        class="attempt-btn-neutral">Busy</button>
                    <button type="button" data-attempt="off"         class="attempt-btn-neutral">Phone off</button>
                    <button type="button" data-attempt="wrong_number" class="attempt-btn-warn col-span-2 md:col-span-1">Wrong number</button>
                </div>
                <textarea name="attempt_notes" rows="2" placeholder="Optional notes about this attempt..."
                          class="form-input w-full text-sm"></textarea>
            </form>
        </div>

        <!-- Step 2: outcome (only after pickup) -->
        <div id="outcome-section" ${alreadyPicked ? '' : 'style="display:none"'}>
            <h3 class="font-semibold text-gray-700 text-sm mb-2 mt-3">2. What's the outcome?</h3>
            <form id="outcome-form" class="space-y-3">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                    <label class="outcome-pill">
                        <input type="radio" name="outcome" value="doing_well" class="hidden peer" required>
                        <div class="peer-checked:bg-green-50 peer-checked:border-green-400 border rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <p class="font-semibold text-sm text-green-700">Doing well</p>
                            <p class="text-xs text-gray-500 mt-1">Patient is satisfied. Eligible for review request.</p>
                        </div>
                    </label>
                    <label class="outcome-pill">
                        <input type="radio" name="outcome" value="still_unwell" class="hidden peer">
                        <div class="peer-checked:bg-amber-50 peer-checked:border-amber-400 border rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <p class="font-semibold text-sm text-amber-700">Still unwell</p>
                            <p class="text-xs text-gray-500 mt-1">Needs return visit or clinical callback.</p>
                        </div>
                    </label>
                    <label class="outcome-pill">
                        <input type="radio" name="outcome" value="complaint" class="hidden peer">
                        <div class="peer-checked:bg-red-50 peer-checked:border-red-400 border rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <p class="font-semibold text-sm text-red-700">Complaint</p>
                            <p class="text-xs text-gray-500 mt-1">Patient raised an issue. Escalate to admin.</p>
                        </div>
                    </label>
                </div>

                <!-- Complaint detail (shown only when complaint selected) -->
                <div id="complaint-detail" class="hidden border-t pt-3 space-y-3">
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Complaint type</label>
                            <select name="complaint_type" class="form-input w-full text-sm">
                                <option value="">— Select —</option>
                                <option value="clinical">Clinical (treatment, outcome)</option>
                                <option value="billing">Billing</option>
                                <option value="waiting_time">Waiting time</option>
                                <option value="staff_conduct">Staff conduct</option>
                                <option value="facility">Facility / cleanliness</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Severity</label>
                            <select name="complaint_severity" class="form-input w-full text-sm">
                                <option value="">— Select —</option>
                                <option value="minor">Minor</option>
                                <option value="moderate">Moderate</option>
                                <option value="serious">Serious</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">What did the patient say?</label>
                        <textarea name="complaint_notes" rows="3" class="form-input w-full text-sm"
                                  placeholder="Capture the issue verbatim where possible..."></textarea>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Call notes</label>
                    <textarea name="outcome_notes" rows="2" class="form-input w-full text-sm"
                              placeholder="Anything else worth recording..."></textarea>
                </div>

                <button type="submit" class="btn-primary w-full">Save and close follow-up</button>
            </form>
        </div>

        <!-- Footer: do-not-call escape hatch -->
        <div class="border-t mt-4 pt-3 text-center">
            <button type="button" onclick="markDnc(${f.id})"
                    class="text-xs text-gray-500 hover:text-red-700">
                Mark this patient as do-not-call
            </button>
        </div>
    `;
}

function wireModalForms(followUpId) {
    // Attempt buttons
    document.querySelectorAll('.attempt-btn-success, .attempt-btn-neutral, .attempt-btn-warn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const outcome = btn.dataset.attempt;
            const notes = document.querySelector('textarea[name="attempt_notes"]')?.value || '';

            // Disable to prevent double-clicks
            document.querySelectorAll('.attempt-btn-success, .attempt-btn-neutral, .attempt-btn-warn')
                .forEach(b => b.disabled = true);

            const fd = new FormData();
            fd.append('attempt_outcome', outcome);
            fd.append('notes', notes);
            fd.append('_token', csrfToken);

            const resp = await fetch(followUpRoutes.attempt(followUpId), { method: 'POST', body: fd });
            if (!resp.ok) {
                alert('Could not log attempt. Please try again.');
                window.location.reload();
                return;
            }

            if (outcome === 'picked') {
                // Show step 2
                document.getElementById('attempt-section').style.display = 'none';
                document.getElementById('outcome-section').style.display = 'block';
            } else {
                // Reload — list will reflect new state
                window.location.reload();
            }
        });
    });

    // Show/hide complaint detail
    document.querySelectorAll('input[name="outcome"]').forEach(radio => {
        radio.addEventListener('change', () => {
            const detail = document.getElementById('complaint-detail');
            detail.classList.toggle('hidden', radio.value !== 'complaint');
        });
    });

    // Outcome form submit
    const outcomeForm = document.getElementById('outcome-form');
    outcomeForm?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const fd = new FormData(outcomeForm);
        // Map field names: outcome_notes → notes
        const notes = fd.get('outcome_notes') || '';
        fd.delete('outcome_notes');
        fd.append('notes', notes);
        fd.append('_token', csrfToken);

        const resp = await fetch(followUpRoutes.outcome(followUpId), { method: 'POST', body: fd });
        if (resp.redirected) {
            window.location.href = resp.url;
        } else {
            window.location.reload();
        }
    });
}

async function markDnc(followUpId) {
    const reason = prompt('Reason for do-not-call (optional):');
    if (reason === null) return;
    const fd = new FormData();
    fd.append('reason', reason);
    fd.append('_token', csrfToken);
    const resp = await fetch(followUpRoutes.dnc(followUpId), { method: 'POST', body: fd });
    window.location.reload();
}

// Helpers
function humanOutcome(o) {
    return ({picked:'Picked up', no_answer:'No answer', wrong_number:'Wrong number', busy:'Busy', off:'Phone off'})[o] || o;
}
function formatDateTime(iso) {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleString('en-GB', { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' });
}
function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);
}
</script>

<style>
.attempt-btn-success,
.attempt-btn-neutral,
.attempt-btn-warn {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .15s;
    cursor: pointer;
}
.attempt-btn-success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.attempt-btn-success:hover { background:#dcfce7; }
.attempt-btn-neutral { background:#f9fafb; border:1px solid #d1d5db; color:#374151; }
.attempt-btn-neutral:hover { background:#f3f4f6; }
.attempt-btn-warn    { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; }
.attempt-btn-warn:hover { background:#fef3c7; }
.attempt-btn-success:disabled,
.attempt-btn-neutral:disabled,
.attempt-btn-warn:disabled { opacity:.5; cursor:not-allowed; }
</style>
@endsection