helix-engage/src/pages/outreach.tsx

import { useState } from 'react';

import { TopBar } from '@/components/layout/top-bar';
import { TemplateList } from '@/components/outreach/template-list';
import { TemplatePreview } from '@/components/outreach/template-preview';
import { MessageList } from '@/components/outreach/message-list';
import { useData } from '@/providers/data-provider';
import { cx } from '@/utils/cx';
import type { PatientMessage } from '@/types/entities';

type OutreachKpiCard = {
    label: string;
    value: number;
    delta: string;
    deltaColor: string;
};

const recentMessages: PatientMessage[] = [
    {
        id: 'msg-1',
        createdAt: '2026-03-16T08:30:00Z',
        subject: "Women's Day Health Checkup",
        body: 'Namaste Priya, Happy Women\'s Day from Ramaiah Memorial! Book your free checkup here.',
        direction: 'CLINIC_TO_PATIENT',
        channel: 'WHATSAPP',
        priority: 'NORMAL',
        sentAt: '2026-03-16T08:30:00Z',
        readAt: '2026-03-16T09:15:00Z',
        senderName: 'Care Team',
        patientId: 'p-001',
        status: 'READ',
        recipientName: 'Priya Sharma',
        recipientPhone: '+91 98765 43210',
    },
    {
        id: 'msg-2',
        createdAt: '2026-03-16T09:10:00Z',
        subject: 'IVF Free Consultation',
        body: 'Namaste Anitha, We would like to invite you for a FREE first consultation with our IVF specialist.',
        direction: 'CLINIC_TO_PATIENT',
        channel: 'WHATSAPP',
        priority: 'NORMAL',
        sentAt: '2026-03-16T09:10:00Z',
        readAt: null,
        senderName: 'Care Team',
        patientId: 'p-002',
        status: 'DELIVERED',
        recipientName: 'Anitha Reddy',
        recipientPhone: '+91 87654 32109',
    },
    {
        id: 'msg-3',
        createdAt: '2026-03-16T10:00:00Z',
        subject: 'Cervical Screening Reminder',
        body: 'Namaste Kavitha, This is a gentle reminder for your cervical cancer screening appointment.',
        direction: 'CLINIC_TO_PATIENT',
        channel: 'WHATSAPP',
        priority: 'HIGH',
        sentAt: '2026-03-16T10:00:00Z',
        readAt: null,
        senderName: 'Care Team',
        patientId: 'p-003',
        status: 'SENT',
        recipientName: 'Kavitha Nair',
        recipientPhone: '+91 76543 21098',
    },
    {
        id: 'msg-4',
        createdAt: '2026-03-16T10:45:00Z',
        subject: 'General Follow-up',
        body: 'Namaste Meena, This is Ramaiah Memorial reaching out to follow up on your recent enquiry.',
        direction: 'CLINIC_TO_PATIENT',
        channel: 'WHATSAPP',
        priority: 'NORMAL',
        sentAt: '2026-03-16T10:45:00Z',
        readAt: '2026-03-16T11:02:00Z',
        senderName: 'Care Team',
        patientId: 'p-004',
        status: 'READ',
        recipientName: 'Meena Iyer',
        recipientPhone: '+91 65432 10987',
    },
    {
        id: 'msg-5',
        createdAt: '2026-03-16T11:30:00Z',
        subject: 'Senior Health Package',
        body: 'Namaste Lakshmi, Our Senior Health Package is designed specifically for individuals above 60 years.',
        direction: 'CLINIC_TO_PATIENT',
        channel: 'WHATSAPP',
        priority: 'NORMAL',
        sentAt: '2026-03-16T11:30:00Z',
        readAt: null,
        senderName: 'Care Team',
        patientId: 'p-005',
        status: 'FAILED',
        recipientName: 'Lakshmi Devi',
        recipientPhone: '+91 54321 09876',
    },
];

const kpiCards: OutreachKpiCard[] = [
    { label: 'Messages Sent (24h)', value: 87, delta: '+14% vs yesterday', deltaColor: 'text-success-primary' },
    { label: 'Delivered', value: 78, delta: '90% delivery rate', deltaColor: 'text-brand-secondary' },
    { label: 'Read', value: 52, delta: '67% read rate', deltaColor: 'text-brand-secondary' },
    { label: 'CTA Clicked', value: 18, delta: '+5 vs yesterday', deltaColor: 'text-success-primary' },
];

export const OutreachPage = () => {
    const { templates } = useData();
    const [selectedId, setSelectedId] = useState<string | null>(templates[0]?.id ?? null);

    const selectedTemplate = templates.find((t) => t.id === selectedId) ?? null;

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <TopBar title="Outreach" subtitle="WhatsApp templates and message history" />

            <div className="flex flex-1 overflow-hidden">
                {/* Left: Template List */}
                <TemplateList templates={templates} selectedId={selectedId} onSelect={setSelectedId} />

                {/* Right: Preview + KPIs + Messages */}
                <div className="flex-1 overflow-y-auto p-7 space-y-5">
                    {/* Outreach KPIs */}
                    <div className="grid grid-cols-4 gap-3">
                        {kpiCards.map((card) => (
                            <div
                                key={card.label}
                                className="bg-primary rounded-2xl border border-secondary p-4 transition hover:shadow-md"
                            >
                                <p className="text-xs font-medium uppercase tracking-wider text-quaternary">
                                    {card.label}
                                </p>
                                <p className="mt-1 text-display-sm font-bold text-primary">{card.value}</p>
                                <p className={cx('mt-1 text-xs', card.deltaColor)}>{card.delta}</p>
                            </div>
                        ))}
                    </div>

                    {/* Template Preview */}
                    {selectedTemplate && <TemplatePreview template={selectedTemplate} />}

                    {/* Recent Messages */}
                    <MessageList messages={recentMessages} />
                </div>
            </div>
        </div>
    );
};