import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeadset, faPhoneVolume, faPause, faClock, faSparkles, faCalendarCheck, faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
import { PageHeader } from '@/components/layout/page-header';
import { Badge } from '@/components/base/badges/badges';
import { Table } from '@/components/application/table/table';
import { BargeControls } from '@/components/call-desk/barge-controls';
import { apiClient } from '@/lib/api-client';
import { useData } from '@/providers/data-provider';
import { formatShortDate } from '@/lib/format';
import { cx } from '@/utils/cx';

type ActiveCall = {
    ucid: string;
    agentId: string;
    callerNumber: string;
    callType: string;
    startTime: string;
    status: 'active' | 'on-hold';
};

type CallerContext = {
    name: string;
    phone: string;
    source: string | null;
    status: string | null;
    interestedService: string | null;
    aiSummary: string | null;
    patientType: string | null;
    leadId: string | null;
    appointments: Array<{ id: string; scheduledAt: string; doctorName: string; department: string; status: string }>;
};

const formatDuration = (startTime: string): string => {
    const seconds = Math.max(0, Math.floor((Date.now() - new Date(startTime).getTime()) / 1000));
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m}:${s.toString().padStart(2, '0')}`;
};

const KpiCard = ({ value, label, icon }: { value: string | number; label: string; icon: any }) => (
    <div className="flex flex-1 flex-col items-center justify-center rounded-xl border border-secondary bg-primary py-4">
        <FontAwesomeIcon icon={icon} className="size-4 text-fg-quaternary mb-1" />
        <p className="text-xl font-bold text-primary">{value}</p>
        <p className="text-[11px] text-tertiary">{label}</p>
    </div>
);

export const LiveMonitorPage = () => {
    const [activeCalls, setActiveCalls] = useState<ActiveCall[]>([]);
    const [loading, setLoading] = useState(true);
    const [tick, setTick] = useState(0);
    const [selectedCall, setSelectedCall] = useState<ActiveCall | null>(null);
    const [callerContext, setCallerContext] = useState<CallerContext | null>(null);
    const [contextLoading, setContextLoading] = useState(false);
    const { leads } = useData();

    // Initial load + SSE stream for real-time active call updates
    useEffect(() => {
        // Initial snapshot
        apiClient.get<ActiveCall[]>('/api/supervisor/active-calls', { silent: true })
            .then(setActiveCalls)
            .catch(() => {})
            .finally(() => setLoading(false));

        // SSE stream — receives update/remove events in real-time
        const apiUrl = import.meta.env.VITE_API_URL ?? '';
        const es = new EventSource(`${apiUrl}/api/supervisor/active-calls/stream`);
        es.onmessage = (msg) => {
            try {
                const event = JSON.parse(msg.data) as { type: 'update' | 'remove'; call?: ActiveCall; ucid: string };
                setActiveCalls(prev => {
                    if (event.type === 'remove') {
                        return prev.filter(c => c.ucid !== event.ucid);
                    }
                    if (event.type === 'update' && event.call) {
                        const exists = prev.find(c => c.ucid === event.ucid);
                        if (exists) {
                            return prev.map(c => c.ucid === event.ucid ? event.call! : c);
                        }
                        return [...prev, event.call];
                    }
                    return prev;
                });
            } catch {}
        };
        es.onerror = () => {
            // SSE reconnects automatically; no-op
        };
        return () => es.close();
    }, []);

    // Clear selection if the selected call ended
    useEffect(() => {
        if (selectedCall && !activeCalls.find(c => c.ucid === selectedCall.ucid)) {
            setSelectedCall(null);
            setCallerContext(null);
        }
    }, [activeCalls, selectedCall]);

    // Tick every second for duration display
    useEffect(() => {
        const interval = setInterval(() => setTick(t => t + 1), 1000);
        return () => clearInterval(interval);
    }, []);

    const onHold = activeCalls.filter(c => c.status === 'on-hold').length;
    const avgDuration = useMemo(() => {
        if (activeCalls.length === 0) return '0:00';
        const totalSec = activeCalls.reduce((sum, c) => {
            return sum + Math.max(0, Math.floor((Date.now() - new Date(c.startTime).getTime()) / 1000));
        }, 0);
        const avg = Math.floor(totalSec / activeCalls.length);
        return `${Math.floor(avg / 60)}:${(avg % 60).toString().padStart(2, '0')}`;
    }, [activeCalls, tick]);

    // Match caller to lead
    const resolveCallerName = (phone: string): string | null => {
        if (!phone) return null;
        const clean = phone.replace(/\D/g, '');
        const lead = leads.find(l => {
            const lp = (l.contactPhone?.[0]?.number ?? '').replace(/\D/g, '');
            return lp && (lp.endsWith(clean) || clean.endsWith(lp));
        });
        if (lead) {
            return `${lead.contactName?.firstName ?? ''} ${lead.contactName?.lastName ?? ''}`.trim() || null;
        }
        return null;
    };

    // Fetch caller context when a call is selected
    const handleSelectCall = (call: ActiveCall) => {
        setSelectedCall(call);
        setContextLoading(true);
        setCallerContext(null);

        const phoneClean = call.callerNumber.replace(/\D/g, '');

        // Search for lead by phone
        apiClient.graphql<{ leads: { edges: Array<{ node: any }> } }>(
            `{ leads(first: 5, filter: { contactPhone: { primaryPhoneNumber: { like: "%${phoneClean.slice(-10)}" } } }) { edges { node {
                id contactName { firstName lastName } source status interestedService aiSummary patientId
            } } } }`,
        ).then(async (data) => {
            const lead = data.leads.edges[0]?.node;
            const name = lead
                ? `${lead.contactName?.firstName ?? ''} ${lead.contactName?.lastName ?? ''}`.trim()
                : resolveCallerName(call.callerNumber) ?? 'Unknown Caller';

            let appointments: CallerContext['appointments'] = [];
            if (lead?.patientId) {
                try {
                    const apptData = await apiClient.graphql<{ appointments: { edges: Array<{ node: any }> } }>(
                        `{ appointments(first: 5, filter: { patientId: { eq: "${lead.patientId}" } }, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
                            id scheduledAt doctorName department status
                        } } } }`,
                    );
                    appointments = apptData.appointments.edges.map(e => e.node);
                } catch { /* best effort */ }
            }

            setCallerContext({
                name,
                phone: call.callerNumber,
                source: lead?.source ?? null,
                status: lead?.status ?? null,
                interestedService: lead?.interestedService ?? null,
                aiSummary: lead?.aiSummary ?? null,
                patientType: lead?.patientId ? 'RETURNING' : 'NEW',
                leadId: lead?.id ?? null,
                appointments,
            });
        }).catch(() => {
            setCallerContext({
                name: resolveCallerName(call.callerNumber) ?? 'Unknown Caller',
                phone: call.callerNumber,
                source: null, status: null, interestedService: null,
                aiSummary: null, patientType: null, leadId: null, appointments: [],
            });
        }).finally(() => setContextLoading(false));
    };

    return (
        <>
            <PageHeader
                title="Live Call Monitor"
                badge={activeCalls.length}
                infoText="Monitor, whisper, or barge into active calls in real-time."
            />

            <div className="flex flex-1 overflow-hidden">
                {/* Left panel — KPIs + call list */}
                <div className="flex flex-1 flex-col overflow-y-auto border-r border-secondary">
                    {/* KPI Cards */}
                    <div className="px-5 pt-4">
                        <div className="flex gap-3">
                            <KpiCard value={activeCalls.length} label="Active Calls" icon={faPhoneVolume} />
                            <KpiCard value={onHold} label="On Hold" icon={faPause} />
                            <KpiCard value={avgDuration} label="Avg Duration" icon={faClock} />
                        </div>
                    </div>

                    {/* Active Calls Table */}
                    <div className="px-5 pt-5 pb-4">
                        <h3 className="text-sm font-semibold text-secondary mb-3">Active Calls</h3>

                        {loading ? (
                            <div className="flex items-center justify-center py-12">
                                <p className="text-sm text-tertiary">Loading...</p>
                            </div>
                        ) : activeCalls.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-16 text-center rounded-xl border border-secondary bg-primary">
                                <FontAwesomeIcon icon={faHeadset} className="size-12 text-fg-quaternary mb-4" />
                                <p className="text-sm font-medium text-secondary">No active calls</p>
                                <p className="text-xs text-tertiary mt-1">Active calls will appear here in real-time</p>
                            </div>
                        ) : (
                            <Table size="sm">
                                <Table.Header>
                                    <Table.Head label="Agent" isRowHeader />
                                    <Table.Head label="Caller" />
                                    <Table.Head label="Type" className="w-16" />
                                    <Table.Head label="Duration" className="w-20" />
                                    <Table.Head label="Status" className="w-24" />
                                </Table.Header>
                                <Table.Body items={activeCalls}>
                                    {(call) => {
                                        const callerName = resolveCallerName(call.callerNumber);
                                        const typeLabel = call.callType === 'InBound' ? 'In' : 'Out';
                                        const typeColor = call.callType === 'InBound' ? 'blue' : 'brand';
                                        const isSelected = selectedCall?.ucid === call.ucid;

                                        return (
                                            <Table.Row
                                                id={call.ucid}
                                                className={cx(
                                                    'cursor-pointer transition duration-100 ease-linear',
                                                    isSelected ? 'bg-active' : 'hover:bg-primary_hover',
                                                )}
                                                onAction={() => handleSelectCall(call)}
                                            >
                                                <Table.Cell>
                                                    <span className="text-sm font-medium text-primary">{call.agentId}</span>
                                                </Table.Cell>
                                                <Table.Cell>
                                                    <div>
                                                        {callerName && <span className="text-sm font-medium text-primary block">{callerName}</span>}
                                                        <span className="text-xs text-tertiary">{call.callerNumber}</span>
                                                    </div>
                                                </Table.Cell>
                                                <Table.Cell>
                                                    <Badge size="sm" color={typeColor} type="pill-color">{typeLabel}</Badge>
                                                </Table.Cell>
                                                <Table.Cell>
                                                    <span className="text-sm font-mono text-primary">{formatDuration(call.startTime)}</span>
                                                </Table.Cell>
                                                <Table.Cell>
                                                    <Badge size="sm" color={call.status === 'on-hold' ? 'warning' : 'success'} type="pill-color">
                                                        {call.status}
                                                    </Badge>
                                                </Table.Cell>
                                            </Table.Row>
                                        );
                                    }}
                                </Table.Body>
                            </Table>
                        )}
                    </div>
                </div>

                {/* Right panel — context + barge controls */}
                <div className="flex w-[380px] shrink-0 flex-col overflow-y-auto bg-primary">
                    {!selectedCall ? (
                        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
                            <FontAwesomeIcon icon={faHeadset} className="size-10 text-fg-quaternary" />
                            <p className="text-sm font-medium text-secondary">Select a call to monitor</p>
                            <p className="text-xs text-tertiary">Click on any active call to see context and connect</p>
                        </div>
                    ) : contextLoading ? (
                        <div className="flex flex-1 items-center justify-center">
                            <p className="text-sm text-tertiary">Loading caller context...</p>
                        </div>
                    ) : (
                        <div className="flex flex-col gap-4 p-4">
                            {/* Caller header */}
                            <div className="rounded-xl border border-secondary bg-primary p-4">
                                <div className="flex items-center gap-3">
                                    <div className="flex size-10 items-center justify-center rounded-full bg-brand-secondary text-sm font-bold text-fg-white">
                                        {(callerContext?.name ?? '?')[0].toUpperCase()}
                                    </div>
                                    <div className="min-w-0 flex-1">
                                        <p className="text-sm font-semibold text-primary truncate">{callerContext?.name}</p>
                                        <p className="text-xs text-tertiary">{callerContext?.phone}</p>
                                    </div>
                                    {callerContext?.patientType && (
                                        <Badge size="sm" color={callerContext.patientType === 'RETURNING' ? 'brand' : 'gray'} type="pill-color">
                                            {callerContext.patientType === 'RETURNING' ? 'Returning' : 'New'}
                                        </Badge>
                                    )}
                                </div>

                                {/* Source + status */}
                                {(callerContext?.source || callerContext?.status) && (
                                    <div className="mt-2 flex flex-wrap gap-1">
                                        {callerContext.source && (
                                            <Badge size="sm" color="gray" type="pill-color">{callerContext.source.replace(/_/g, ' ')}</Badge>
                                        )}
                                        {callerContext.status && (
                                            <Badge size="sm" color="brand" type="pill-color">{callerContext.status.replace(/_/g, ' ')}</Badge>
                                        )}
                                    </div>
                                )}

                                {callerContext?.interestedService && (
                                    <p className="mt-2 text-xs text-tertiary">Interested in: {callerContext.interestedService}</p>
                                )}
                            </div>

                            {/* AI Summary */}
                            {callerContext?.aiSummary && (
                                <div className="rounded-xl border border-secondary bg-secondary_alt p-3">
                                    <div className="flex items-center gap-1 mb-1">
                                        <FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
                                        <span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
                                    </div>
                                    <p className="text-xs leading-relaxed text-primary">{callerContext.aiSummary}</p>
                                </div>
                            )}

                            {/* Appointments */}
                            {callerContext?.appointments && callerContext.appointments.length > 0 && (
                                <div className="rounded-xl border border-secondary bg-primary p-3">
                                    <div className="flex items-center gap-1 mb-2">
                                        <FontAwesomeIcon icon={faCalendarCheck} className="size-3 text-fg-brand-primary" />
                                        <span className="text-[10px] font-bold uppercase tracking-wider text-tertiary">Appointments</span>
                                    </div>
                                    <div className="space-y-1.5">
                                        {callerContext.appointments.map(appt => (
                                            <div key={appt.id} className="flex items-center gap-2 rounded-lg bg-secondary px-2.5 py-2">
                                                <div className="min-w-0 flex-1">
                                                    <span className="text-xs font-medium text-primary">{appt.doctorName ?? 'Appointment'}</span>
                                                    {appt.department && <span className="text-[11px] text-tertiary ml-1">{appt.department}</span>}
                                                    {appt.scheduledAt && (
                                                        <span className="text-[11px] text-tertiary ml-1">— {formatShortDate(appt.scheduledAt)}</span>
                                                    )}
                                                </div>
                                                <Badge size="sm" color={appt.status === 'COMPLETED' ? 'success' : appt.status === 'CANCELLED' ? 'error' : 'brand'} type="pill-color">
                                                    {(appt.status ?? 'Scheduled').replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}
                                                </Badge>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {/* Call info */}
                            <div className="rounded-xl border border-secondary bg-primary p-3">
                                <div className="flex items-center gap-1 mb-2">
                                    <FontAwesomeIcon icon={faClockRotateLeft} className="size-3 text-fg-quaternary" />
                                    <span className="text-[10px] font-bold uppercase tracking-wider text-tertiary">Current Call</span>
                                </div>
                                <div className="grid grid-cols-2 gap-2 text-xs">
                                    <div><span className="text-tertiary">Agent:</span> <span className="font-medium text-primary">{selectedCall.agentId}</span></div>
                                    <div><span className="text-tertiary">Type:</span> <span className="font-medium text-primary">{selectedCall.callType === 'InBound' ? 'Inbound' : 'Outbound'}</span></div>
                                    <div><span className="text-tertiary">Duration:</span> <span className="font-mono font-medium text-primary">{formatDuration(selectedCall.startTime)}</span></div>
                                    <div><span className="text-tertiary">Status:</span> <span className="font-medium text-primary">{selectedCall.status}</span></div>
                                </div>
                            </div>

                            {/* Barge Controls */}
                            <div className="rounded-xl border border-secondary bg-primary p-4">
                                <BargeControls
                                    ucid={selectedCall.ucid}
                                    agentId={selectedCall.agentId}
                                    agentNumber={selectedCall.agentId}
                                    agentName={selectedCall.agentId}
                                    onDisconnected={() => {
                                        // Keep selection visible but controls reset to idle/ended
                                    }}
                                />
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};