import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSparkles, faUser, faCalendarCheck } from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';
import { Badge } from '@/components/base/badges/badges';
import { apiClient } from '@/lib/api-client';
import { formatPhone, formatShortDate } from '@/lib/format';
import type { LeadActivity, Patient } from '@/types/entities';

const CalendarCheck = faIcon(faCalendarCheck);

interface PatientProfilePanelProps {
    patient: Patient | null;
    activities?: LeadActivity[];
}

/**
 * Reusable Patient/Lead 360 profile panel
 * Shows comprehensive patient information including appointments, calls, and activity timeline
 * Can be used with either Patient or Lead entities
 */
export const PatientProfilePanel = ({ patient, activities = [] }: PatientProfilePanelProps) => {
    const [patientData, setPatientData] = useState<any>(null);
    const [loadingPatient, setLoadingPatient] = useState(false);

    // Fetch full patient data with appointments and calls
    useEffect(() => {
        if (!patient?.id) {
            setPatientData(null);
            return;
        }

        setLoadingPatient(true);
        apiClient.graphql<{ patients: { edges: Array<{ node: any }> } }>(
            `query GetPatient($id: UUID!) { patients(filter: { id: { eq: $id } }) { edges { node {
                id fullName { firstName lastName } dateOfBirth gender patientType
                phones { primaryPhoneNumber } emails { primaryEmail }
                appointments(first: 10, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
                    id scheduledAt status doctorName department reasonForVisit appointmentType
                } } }
                calls(first: 10, orderBy: [{ startedAt: DescNullsLast }]) { edges { node {
                    id callStatus disposition direction startedAt durationSec agentName
                } } }
            } } } }`,
            { id: patient.id },
            { silent: true },
        ).then(data => {
            setPatientData(data.patients.edges[0]?.node ?? null);
        }).catch(() => setPatientData(null))
        .finally(() => setLoadingPatient(false));
    }, [patient?.id]);

    if (!patient) {
        return (
            <div className="flex flex-col items-center justify-center py-16 text-center px-4">
                <FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
                <p className="text-sm text-tertiary">Select a patient to see their full profile.</p>
            </div>
        );
    }

    const firstName = patient.fullName?.firstName ?? '';
    const lastName = patient.fullName?.lastName ?? '';
    const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
    const phone = patient.phones?.primaryPhoneNumber;
    const email = patient.emails?.primaryEmail;

    const appointments = patientData?.appointments?.edges?.map((e: any) => e.node) ?? [];
    const patientCalls = patientData?.calls?.edges?.map((e: any) => e.node) ?? [];

    const patientAge = patientData?.dateOfBirth
        ? Math.floor((Date.now() - new Date(patientData.dateOfBirth).getTime()) / (365.25 * 24 * 60 * 60 * 1000))
        : null;
    const patientGender = patientData?.gender === 'MALE' ? 'M' : patientData?.gender === 'FEMALE' ? 'F' : null;

    // Filter activities for this patient (if Lead activities are provided)
    const patientActivities = activities
        .filter((a) => a.leadId === patient.id)
        .sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? '').getTime() - new Date(a.occurredAt ?? a.createdAt ?? '').getTime())
        .slice(0, 10);

    return (
        <div className="p-4 space-y-4">
            {/* Profile */}
            <div>
                <h3 className="text-lg font-bold text-primary">{fullName}</h3>
                {phone && <p className="text-sm text-secondary">{formatPhone({ number: phone, callingCode: '+91' })}</p>}
                {email && <p className="text-xs text-tertiary">{email}</p>}
                <div className="mt-2 flex flex-wrap gap-1.5">
                    {patientAge !== null && patientGender && (
                        <Badge size="sm" color="gray" type="pill-color">{patientAge}y · {patientGender}</Badge>
                    )}
                    {patient.patientType && <Badge size="sm" color="brand">{patient.patientType}</Badge>}
                    {patient.gender && (
                        <Badge size="sm" color="gray">
                            {patient.gender.charAt(0) + patient.gender.slice(1).toLowerCase()}
                        </Badge>
                    )}
                </div>
            </div>

            {/* Loading state */}
            {loadingPatient && (
                <p className="text-xs text-tertiary">Loading patient details...</p>
            )}

            {/* Appointments */}
            {appointments.length > 0 && (
                <div>
                    <h4 className="mb-2 text-xs font-bold text-secondary uppercase">Appointments</h4>
                    <div className="space-y-2">
                        {appointments.map((appt: any) => {
                            const statusColors: Record<string, 'success' | 'brand' | 'warning' | 'error' | 'gray'> = {
                                COMPLETED: 'success', SCHEDULED: 'brand', CONFIRMED: 'brand',
                                CANCELLED: 'error', NO_SHOW: 'warning',
                            };
                            return (
                                <div key={appt.id} className="flex items-start gap-2 rounded-lg bg-secondary p-2">
                                    <CalendarCheck className="mt-0.5 size-3.5 text-fg-brand-primary shrink-0" />
                                    <div className="min-w-0 flex-1">
                                        <div className="flex items-center gap-1.5">
                                            <span className="text-xs font-semibold text-primary">
                                                {appt.doctorName ?? 'Doctor'} · {appt.department ?? ''}
                                            </span>
                                            {appt.status && (
                                                <Badge size="sm" color={statusColors[appt.status] ?? 'gray'}>
                                                    {appt.status.toLowerCase()}
                                                </Badge>
                                            )}
                                        </div>
                                        <p className="text-[10px] text-quaternary">
                                            {appt.scheduledAt ? formatShortDate(appt.scheduledAt) : ''}
                                            {appt.reasonForVisit ? ` — ${appt.reasonForVisit}` : ''}
                                        </p>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}

            {/* Recent calls */}
            {patientCalls.length > 0 && (
                <div>
                    <h4 className="mb-2 text-xs font-bold text-secondary uppercase">Recent Calls</h4>
                    <div className="space-y-1">
                        {patientCalls.map((call: any) => (
                            <div key={call.id} className="flex items-center gap-2 text-xs">
                                <div className="mt-0.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
                                <span className="text-primary">
                                    {call.direction === 'INBOUND' ? 'Inbound' : 'Outbound'}
                                    {call.disposition ? ` — ${call.disposition.replace(/_/g, ' ').toLowerCase()}` : ''}
                                </span>
                                <span className="text-quaternary ml-auto">{call.startedAt ? formatShortDate(call.startedAt) : ''}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Activity timeline (if activities provided) */}
            {patientActivities.length > 0 && (
                <div>
                    <h4 className="mb-2 text-xs font-bold text-secondary uppercase">Activity</h4>
                    <div className="space-y-2">
                        {patientActivities.map((a) => (
                            <div key={a.id} className="flex items-start gap-2">
                                <div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-xs text-primary">{a.summary}</p>
                                    <p className="text-[10px] text-quaternary">
                                        {a.activityType}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Empty state when no data */}
            {!loadingPatient && appointments.length === 0 && patientCalls.length === 0 && patientActivities.length === 0 && (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                    <FontAwesomeIcon icon={faSparkles} className="mb-2 size-6 text-fg-quaternary" />
                    <p className="text-xs text-tertiary">No appointments or call history yet</p>
                </div>
            )}
        </div>
    );
};
