// Appointments v2 — lean table + detail side panel + reschedule + reminder
import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faMagnifyingGlass, faPenToSquare, faEye, faBell, faXmark,
    faCalendarCheck, faUserDoctor, faBuilding, faStethoscope, faNotesMedical,
} from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';

const SearchLg = faIcon(faMagnifyingGlass);
import { Badge } from '@/components/base/badges/badges';
import { Input } from '@/components/base/input/input';
import { Table } from '@/components/application/table/table';
import { PaginationCardDefault } from '@/components/application/pagination/pagination';
// TopBar replaced by inline header
import { Button } from '@/components/base/buttons/button';
import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
import { Select } from '@/components/base/select/select';
import { DatePicker } from '@/components/application/date-picker/date-picker';
import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
import { PageHeader } from '@/components/layout/page-header';
import { formatPhone, formatDateOnly, formatTimeOnly } from '@/lib/format';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx';

type AppointmentRecord = {
    id: string;
    scheduledAt: string | null;
    durationMin: number | null;
    appointmentType: string | null;
    status: string | null;
    doctorName: string | null;
    department: string | null;
    reasonForVisit: string | null;
    patient: {
        id: string;
        fullName: { firstName: string; lastName: string } | null;
        phones: { primaryPhoneNumber: string } | null;
    } | null;
    clinic: {
        id?: string;
        clinicName: string;
    } | null;
    doctor: {
        id: string;
        fullName?: { firstName: string; lastName: string } | null;
    } | null;
};

type StatusTab = 'all' | 'SCHEDULED' | 'COMPLETED' | 'CANCELLED' | 'RESCHEDULED';

const STATUS_COLORS: Record<string, 'brand' | 'success' | 'error' | 'warning' | 'gray'> = {
    SCHEDULED: 'brand',
    CONFIRMED: 'brand',
    COMPLETED: 'success',
    CANCELLED: 'error',
    NO_SHOW: 'warning',
    RESCHEDULED: 'warning',
};

const STATUS_LABELS: Record<string, string> = {
    SCHEDULED: 'Booked',
    CONFIRMED: 'Confirmed',
    COMPLETED: 'Completed',
    CANCELLED: 'Cancelled',
    NO_SHOW: 'No Show',
    RESCHEDULED: 'Rescheduled',
};

const QUERY = `{ appointments(first: 200, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
    id scheduledAt durationMin appointmentType status
    doctorName department reasonForVisit
    patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
    clinic { id clinicName }
    doctor { id fullName { firstName lastName } }
} } } }`;

const formatDateTime = (iso: string): string =>
    `${formatDateOnly(iso)}, ${formatTimeOnly(iso)}`;

const getPatientName = (appt: AppointmentRecord): string => {
    if (!appt.patient?.fullName) return 'Unknown';
    return `${appt.patient.fullName.firstName} ${appt.patient.fullName.lastName}`.trim() || 'Unknown';
};

const getPhone = (appt: AppointmentRecord): string =>
    appt.patient?.phones?.primaryPhoneNumber ?? '';

const isUpcoming = (appt: AppointmentRecord): boolean => {
    if (appt.status !== 'SCHEDULED' && appt.status !== 'CONFIRMED') return false;
    if (!appt.scheduledAt) return false;
    return new Date(appt.scheduledAt).getTime() >= Date.now();
};

// Can edit/reschedule: anything that isn't completed or cancelled
const canEdit = (appt: AppointmentRecord): boolean => {
    return appt.status !== 'COMPLETED' && appt.status !== 'CANCELLED' && appt.status !== 'NO_SHOW';
};

const buildReminderMessage = (appt: AppointmentRecord): string => {
    const name = getPatientName(appt);
    const doctor = appt.doctorName ?? 'your doctor';
    const date = appt.scheduledAt ? formatDateTime(appt.scheduledAt) : 'your scheduled time';
    const branch = appt.clinic?.clinicName ?? 'our clinic';
    return `Hi ${name}, this is a reminder for your appointment with ${doctor} on ${date} at ${branch}. Please confirm or call us to reschedule.`;
};

// ── Detail Panel ─────────────────────────────────────────────────
const DetailRow = ({ icon, label, value }: { icon: any; label: string; value: string }) => (
    <div className="flex items-start gap-3 py-2.5">
        <FontAwesomeIcon icon={icon} className="size-4 text-fg-quaternary mt-0.5 shrink-0" />
        <div className="min-w-0">
            <p className="text-[11px] font-medium uppercase tracking-wider text-quaternary">{label}</p>
            <p className="text-sm text-primary mt-0.5">{value || '—'}</p>
        </div>
    </div>
);

const AppointmentDetailPanel = ({
    appointment,
    onClose,
    onReschedule,
}: {
    appointment: AppointmentRecord;
    onClose: () => void;
    onReschedule: () => void;
}) => {
    const editable = canEdit(appointment);
    const phone = getPhone(appointment);
    const [reschedulePromptOpen, setReschedulePromptOpen] = useState(false);

    return (
        <div className="flex flex-col h-full">
            <div className="flex items-center justify-between border-b border-secondary px-5 py-3">
                <h3 className="text-sm font-bold text-primary">Appointment Details</h3>
                <div className="flex items-center gap-1">
                    {editable && (
                        <button
                            onClick={() => setReschedulePromptOpen(true)}
                            title="Reschedule appointment"
                            className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-brand-secondary hover:bg-primary_hover transition duration-100 ease-linear"
                        >
                            <FontAwesomeIcon icon={faPenToSquare} className="size-4" />
                        </button>
                    )}
                    <button
                        onClick={onClose}
                        className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
                    >
                        <FontAwesomeIcon icon={faXmark} className="size-4" />
                    </button>
                </div>
            </div>
            <div className="flex-1 overflow-y-auto px-5 py-4 space-y-1">
                <div className="mb-4">
                    <Badge size="md" color={STATUS_COLORS[appointment.status ?? ''] ?? 'gray'} type="pill-color">
                        {STATUS_LABELS[appointment.status ?? ''] ?? appointment.status ?? '—'}
                    </Badge>
                </div>

                {/* Date & Time — 2 lines */}
                <div className="flex items-start gap-3 py-2.5">
                    <FontAwesomeIcon icon={faCalendarCheck} className="size-4 text-fg-quaternary mt-0.5 shrink-0" />
                    <div>
                        <p className="text-[11px] font-medium uppercase tracking-wider text-quaternary">Date & Time</p>
                        {appointment.scheduledAt ? (
                            <>
                                <p className="text-sm text-primary mt-0.5">{formatDateOnly(appointment.scheduledAt)}</p>
                                <p className="text-xs text-tertiary">{formatTimeOnly(appointment.scheduledAt)}</p>
                            </>
                        ) : <p className="text-sm text-quaternary mt-0.5">—</p>}
                    </div>
                </div>

                <DetailRow icon={faUserDoctor} label="Doctor" value={appointment.doctorName ?? '—'} />
                <DetailRow icon={faStethoscope} label="Department" value={appointment.department ?? '—'} />
                <DetailRow icon={faBuilding} label="Branch / Clinic" value={appointment.clinic?.clinicName ?? '—'} />
                <DetailRow icon={faNotesMedical} label="Chief Complaint" value={appointment.reasonForVisit ?? '—'} />

                <div className="border-t border-secondary pt-3 mt-3">
                    <p className="text-[11px] font-medium uppercase tracking-wider text-quaternary mb-1">Patient</p>
                    <p className="text-sm font-medium text-primary">{getPatientName(appointment)}</p>
                    {phone && (
                        <div className="mt-1">
                            <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />
                        </div>
                    )}
                </div>
            </div>

            {/* Reschedule confirm modal — same pattern as call desk */}
            <ModalOverlay
                isOpen={reschedulePromptOpen}
                onOpenChange={(open) => { if (!open) setReschedulePromptOpen(false); }}
                isDismissable
            >
                <Modal className="sm:max-w-md">
                    <Dialog>
                        {() => (
                            <div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
                                <h2 className="text-lg font-semibold text-primary">Reschedule this appointment?</h2>
                                <p className="text-sm text-tertiary">
                                    Choose "Yes, reschedule" to change the date, time, or doctor.
                                    Choose "No, just view" to see the details without changing anything.
                                </p>
                                <div className="flex items-center gap-2 justify-end">
                                    <Button size="sm" color="secondary" onClick={() => setReschedulePromptOpen(false)}>
                                        No, just view
                                    </Button>
                                    <Button size="sm" color="primary" onClick={() => { setReschedulePromptOpen(false); onReschedule(); }}>
                                        Yes, reschedule
                                    </Button>
                                </div>
                            </div>
                        )}
                    </Dialog>
                </Modal>
            </ModalOverlay>
        </div>
    );
};

// ── Reschedule Panel ─────────────────────────────────────────────
// Dedicated form for rescheduling from the Appointments page.
// No patient creation, no lead updates, no modal — just update the
// existing appointment's doctor, date, time, and chief complaint.

type Doctor = { id: string; name: string; department: string };

const DOCTORS_QUERY = `{ doctors(first: 50) { edges { node {
    id name fullName { firstName lastName } department
} } } }`;

const ReschedulePanel = ({
    appointment,
    onClose,
    onSaved,
}: {
    appointment: AppointmentRecord;
    onClose: () => void;
    onSaved: () => void;
}) => {
    const [doctors, setDoctors] = useState<Doctor[]>([]);
    const [department, setDepartment] = useState(appointment.department ?? '');
    const [doctor, setDoctor] = useState(appointment.doctor?.id ?? '');
    const [date, setDate] = useState(() => appointment.scheduledAt?.split('T')[0] ?? '');
    const [timeSlot, setTimeSlot] = useState(() => {
        if (!appointment.scheduledAt) return '';
        const dt = new Date(appointment.scheduledAt);
        return `${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`;
    });
    const [slots, setSlots] = useState<Array<{ id: string; label: string }>>([]);
    const [reason, setReason] = useState(appointment.reasonForVisit ?? '');
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [cancelConfirm, setCancelConfirm] = useState(false);

    // Fetch doctors once
    useEffect(() => {
        apiClient.graphql<any>(DOCTORS_QUERY, undefined, { silent: true })
            .then(data => {
                const docs = data.doctors.edges.map((e: any) => {
                    const n = e.node;
                    const name = n.fullName
                        ? `Dr. ${n.fullName.firstName} ${n.fullName.lastName}`.trim()
                        : n.name;
                    return { id: n.id, name, department: n.department ?? '' };
                });
                setDoctors(docs);
            })
            .catch(() => {});
    }, []);

    // Departments derived from doctors
    const departments = useMemo(() => [...new Set(doctors.map(d => d.department).filter(Boolean))], [doctors]);
    const filteredDoctors = useMemo(() => department ? doctors.filter(d => d.department === department) : doctors, [doctors, department]);

    // Fetch slots when doctor + date change
    useEffect(() => {
        if (!doctor || !date) { setSlots([]); return; }
        apiClient.get<Array<{ time: string; label: string }>>(`/api/masterdata/slots?doctorId=${doctor}&date=${date}`, { silent: true })
            .then(s => setSlots(s.map(sl => ({ id: sl.time, label: sl.label }))))
            .catch(() => setSlots([]));
    }, [doctor, date]);

    const handleUpdate = async () => {
        if (!doctor || !date || !timeSlot) {
            setError('Please select doctor, date, and time slot');
            return;
        }
        setSaving(true);
        setError(null);
        try {
            const scheduledAt = new Date(`${date}T${timeSlot}:00`).toISOString();
            const selectedDoc = doctors.find(d => d.id === doctor);
            await apiClient.graphql(
                `mutation($id: UUID!, $data: AppointmentUpdateInput!) { updateAppointment(id: $id, data: $data) { id } }`,
                {
                    id: appointment.id,
                    data: {
                        scheduledAt,
                        doctorName: selectedDoc?.name ?? appointment.doctorName,
                        department: department || appointment.department,
                        reasonForVisit: reason || null,
                        status: 'RESCHEDULED',
                        doctorId: doctor,
                    },
                },
            );
            onSaved();
        } catch (err: any) {
            setError(err.message ?? 'Failed to update appointment');
        } finally {
            setSaving(false);
        }
    };

    const handleCancel = async () => {
        setSaving(true);
        try {
            await apiClient.graphql(
                `mutation($id: UUID!, $data: AppointmentUpdateInput!) { updateAppointment(id: $id, data: $data) { id } }`,
                { id: appointment.id, data: { status: 'CANCELLED' } },
            );
            notify.success('Appointment Cancelled');
            onSaved();
        } catch {
            setError('Failed to cancel appointment');
        } finally {
            setSaving(false);
        }
    };

    return (
        <div className="flex flex-col h-full">
            <div className="flex items-center justify-between border-b border-secondary px-5 py-3">
                <h3 className="text-sm font-bold text-primary">Reschedule Appointment</h3>
                <button
                    onClick={onClose}
                    className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
                >
                    <FontAwesomeIcon icon={faXmark} className="size-4" />
                </button>
            </div>

            <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
                {/* Department */}
                <div>
                    <span className="text-xs font-medium text-secondary">Department</span>
                    <Select
                        size="sm"
                        placeholder="Select department"
                        selectedKey={department}
                        onSelectionChange={(key) => { setDepartment(String(key)); setDoctor(''); }}
                        items={departments.map(d => ({ id: d, label: d.replace(/_/g, ' ') }))}
                    >
                        {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
                    </Select>
                </div>

                {/* Doctor */}
                <div>
                    <span className="text-xs font-medium text-secondary">Doctor <span className="text-error-primary">*</span></span>
                    <Select
                        size="sm"
                        placeholder="Select doctor"
                        selectedKey={doctor}
                        onSelectionChange={(key) => setDoctor(String(key))}
                        items={filteredDoctors.map(d => ({ id: d.id, label: d.name }))}
                    >
                        {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
                    </Select>
                </div>

                {/* Date */}
                <div>
                    <span className="text-xs font-medium text-secondary">Date <span className="text-error-primary">*</span></span>
                    <DatePicker
                        value={date ? parseDate(date) : null}
                        onChange={(val) => setDate(val ? val.toString() : '')}
                        granularity="day"
                        minValue={today(getLocalTimeZone())}
                        isDisabled={!doctor}
                        popoverPlacement="top start"
                    />
                </div>

                {/* Time slots */}
                {doctor && date && slots.length > 0 && (
                    <div>
                        <span className="text-xs font-medium text-secondary">Time Slot <span className="text-error-primary">*</span></span>
                        <div className="mt-1 grid grid-cols-3 gap-1.5">
                            {slots.map(s => (
                                <button
                                    key={s.id}
                                    onClick={() => setTimeSlot(s.id)}
                                    className={cx(
                                        'rounded-lg border px-2 py-1.5 text-xs font-medium transition duration-100 ease-linear',
                                        timeSlot === s.id
                                            ? 'border-brand bg-brand-primary text-brand-secondary'
                                            : 'border-secondary text-secondary hover:border-brand hover:text-brand-secondary',
                                    )}
                                >
                                    {s.label}
                                </button>
                            ))}
                        </div>
                    </div>
                )}
                {doctor && date && slots.length === 0 && (
                    <p className="text-xs text-tertiary">No available slots for this date</p>
                )}

                {/* Chief Complaint */}
                <div>
                    <span className="text-xs font-medium text-secondary">Chief Complaint</span>
                    <textarea
                        value={reason}
                        onChange={(e) => setReason(e.target.value)}
                        rows={3}
                        className="mt-1 w-full rounded-lg border border-primary bg-primary px-3 py-2 text-sm text-primary outline-none focus:border-brand-primary resize-y"
                        placeholder="Reason for visit..."
                    />
                </div>

                {error && <p className="text-sm text-error-primary">{error}</p>}
            </div>

            {/* Footer buttons */}
            <div className="flex items-center justify-between gap-2 border-t border-secondary px-5 py-3">
                <Button size="sm" color="primary-destructive" onClick={() => setCancelConfirm(true)} isDisabled={saving}>
                    Cancel Appointment
                </Button>
                <Button size="sm" color="primary" onClick={handleUpdate} isLoading={saving} isDisabled={!doctor || !date || !timeSlot}>
                    Update Appointment
                </Button>
            </div>

            {/* Cancel confirm modal */}
            <ModalOverlay
                isOpen={cancelConfirm}
                onOpenChange={(open) => { if (!open) setCancelConfirm(false); }}
                isDismissable
            >
                <Modal className="sm:max-w-md">
                    <Dialog>
                        {() => (
                            <div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
                                <h2 className="text-lg font-semibold text-primary">Cancel this appointment?</h2>
                                <p className="text-sm text-tertiary">
                                    This will mark the appointment as cancelled. The patient will need to book a new appointment.
                                </p>
                                <div className="flex items-center gap-2 justify-end">
                                    <Button size="sm" color="secondary" onClick={() => setCancelConfirm(false)}>
                                        No, keep it
                                    </Button>
                                    <Button size="sm" color="primary-destructive" onClick={() => { setCancelConfirm(false); handleCancel(); }} isLoading={saving}>
                                        Yes, cancel appointment
                                    </Button>
                                </div>
                            </div>
                        )}
                    </Dialog>
                </Modal>
            </ModalOverlay>
        </div>
    );
};

// ── Page ─────────────────────────────────────────────────────────
export const AppointmentsPageV2 = () => {
    const [appointments, setAppointments] = useState<AppointmentRecord[]>([]);
    const [loading, setLoading] = useState(true);
    const [tab, setTab] = useState<StatusTab>('all');
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(1);
    const [selectedAppt, setSelectedAppt] = useState<AppointmentRecord | null>(null);
    const [panelOpen, setPanelOpen] = useState(false);
    const [rescheduleOpen, setRescheduleOpen] = useState(false);
    const PAGE_SIZE = 20;

    const fetchAppointments = () => {
        apiClient.graphql<{ appointments: { edges: Array<{ node: AppointmentRecord }> } }>(QUERY, undefined, { silent: true })
            .then(data => setAppointments(data.appointments.edges.map(e => e.node)))
            .catch(() => {})
            .finally(() => setLoading(false));
    };

    useEffect(() => { fetchAppointments(); }, []);

    const statusCounts = useMemo(() => {
        const counts: Record<string, number> = {};
        for (const a of appointments) {
            const s = a.status ?? 'UNKNOWN';
            counts[s] = (counts[s] ?? 0) + 1;
        }
        return counts;
    }, [appointments]);

    const filtered = useMemo(() => {
        let rows = appointments;
        if (tab !== 'all') rows = rows.filter(a => a.status === tab);
        if (search.trim()) {
            const q = search.toLowerCase();
            rows = rows.filter(a => {
                const name = getPatientName(a).toLowerCase();
                const phone = getPhone(a);
                const doctor = (a.doctorName ?? '').toLowerCase();
                return name.includes(q) || phone.includes(q) || doctor.includes(q);
            });
        }
        return rows;
    }, [appointments, tab, search]);

    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
    const pagedRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

    useEffect(() => { setPage(1); }, [tab, search]);

    const tabItems = [
        { id: 'all' as const, label: 'All', badge: appointments.length > 0 ? String(appointments.length) : undefined },
        { id: 'SCHEDULED' as const, label: 'Booked', badge: statusCounts.SCHEDULED ? String(statusCounts.SCHEDULED) : undefined },
        { id: 'COMPLETED' as const, label: 'Completed', badge: statusCounts.COMPLETED ? String(statusCounts.COMPLETED) : undefined },
        { id: 'CANCELLED' as const, label: 'Cancelled', badge: statusCounts.CANCELLED ? String(statusCounts.CANCELLED) : undefined },
        { id: 'RESCHEDULED' as const, label: 'Rescheduled', badge: statusCounts.RESCHEDULED ? String(statusCounts.RESCHEDULED) : undefined },
    ];

    const handleEditClick = (appt: AppointmentRecord) => {
        setSelectedAppt(appt);
        setPanelOpen(true);
        setRescheduleOpen(false);
    };

    const handleSendReminder = (appt: AppointmentRecord) => {
        const phone = getPhone(appt);
        if (!phone) return;
        const msg = encodeURIComponent(buildReminderMessage(appt));
        window.open(`https://wa.me/91${phone}?text=${msg}`, '_blank');
        notify.success('Reminder', `WhatsApp opened for ${getPatientName(appt)}`);
    };

    const handleRescheduleSaved = () => {
        setRescheduleOpen(false);
        setPanelOpen(false);
        setSelectedAppt(null);
        fetchAppointments();
        notify.success('Appointment Rescheduled');
    };

    return (
        <>
            <PageHeader
                title="Appointments"
                badge={filtered.length}
                infoText="All scheduled, completed, cancelled, and rescheduled appointments. Click the eye icon to view details or reschedule."
                controls={
                    <div className="w-56">
                        <Input
                            placeholder="Search patient, doctor..."
                            icon={SearchLg}
                            size="sm"
                            value={search}
                            onChange={setSearch}
                            aria-label="Search appointments"
                        />
                    </div>
                }
                tabs={
                    <div className="flex items-center gap-1.5">
                        {tabItems.map((item) => (
                            <button
                                key={item.id}
                                onClick={() => setTab(item.id)}
                                className={cx(
                                    'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
                                    tab === item.id
                                        ? 'bg-brand-solid text-white'
                                        : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
                                )}
                            >
                                {item.label}{item.badge ? ` ${item.badge}` : ''}
                            </button>
                        ))}
                    </div>
                }
            />

            <div className="flex flex-1 overflow-hidden">
                <div className="flex flex-1 flex-col overflow-hidden">

                    <div className="flex flex-1 flex-col overflow-hidden px-4 pt-3">
                        {loading ? (
                            <div className="flex items-center justify-center py-12">
                                <p className="text-sm text-tertiary">Loading appointments...</p>
                            </div>
                        ) : filtered.length === 0 ? (
                            <div className="flex items-center justify-center py-12">
                                <p className="text-sm text-quaternary">{search ? 'No matching appointments' : 'No appointments found'}</p>
                            </div>
                        ) : (
                            <Table size="sm">
                                <Table.Header>
                                    <Table.Head label="" className="w-8" isRowHeader />
                                    <Table.Head label="PATIENT" className="min-w-[180px]" />
                                    <Table.Head label="DATE & TIME" className="w-28" />
                                    <Table.Head label="DOCTOR" className="min-w-[160px]" />
                                    <Table.Head label="STATUS" className="w-24" />
                                    <Table.Head label="REMIND" className="w-20" />
                                </Table.Header>
                                <Table.Body items={pagedRows}>
                                    {(appt) => {
                                        const name = getPatientName(appt);
                                        const phone = getPhone(appt);
                                        const statusLabel = STATUS_LABELS[appt.status ?? ''] ?? appt.status ?? '—';
                                        const statusColor = STATUS_COLORS[appt.status ?? ''] ?? 'gray';
                                        const upcoming = isUpcoming(appt);
                                        const isSelected = selectedAppt?.id === appt.id;

                                        return (
                                            <Table.Row
                                                id={appt.id}
                                                className={cx('group/row', isSelected && 'bg-brand-primary')}
                                            >
                                                {/* Eye icon — first column */}
                                                <Table.Cell>
                                                    <button
                                                        onClick={(e) => { e.stopPropagation(); handleEditClick(appt); }}
                                                        className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
                                                        title="View details"
                                                    >
                                                        <FontAwesomeIcon icon={faEye} className="size-3.5" />
                                                    </button>
                                                </Table.Cell>

                                                {/* Patient: name + phone on 2 lines */}
                                                <Table.Cell>
                                                    <div className="min-w-0">
                                                        <p className="text-sm font-medium text-primary truncate">{name}</p>
                                                        {phone && <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />}
                                                    </div>
                                                </Table.Cell>

                                                {/* Date & Time: date + time on 2 lines */}
                                                <Table.Cell>
                                                    {appt.scheduledAt ? (
                                                        <div>
                                                            <p className="text-sm text-primary">{formatDateOnly(appt.scheduledAt)}</p>
                                                            <p className="text-xs text-tertiary">{formatTimeOnly(appt.scheduledAt)}</p>
                                                        </div>
                                                    ) : <span className="text-sm text-quaternary">—</span>}
                                                </Table.Cell>

                                                {/* Doctor: name + department on 2 lines */}
                                                <Table.Cell>
                                                    <div className="min-w-0">
                                                        <p className="text-sm text-primary truncate">{appt.doctorName ?? '—'}</p>
                                                        {appt.department && <p className="text-xs text-tertiary truncate">{appt.department}</p>}
                                                    </div>
                                                </Table.Cell>

                                                {/* Status */}
                                                <Table.Cell>
                                                    <Badge size="sm" color={statusColor} type="pill-color">
                                                        {statusLabel}
                                                    </Badge>
                                                </Table.Cell>

                                                {/* Reminder */}
                                                <Table.Cell>
                                                    {upcoming ? (
                                                        <button
                                                            onClick={(e) => { e.stopPropagation(); handleSendReminder(appt); }}
                                                            className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-brand-secondary hover:bg-brand-primary transition duration-100 ease-linear"
                                                            title="Send WhatsApp reminder"
                                                        >
                                                            <FontAwesomeIcon icon={faBell} className="size-3" />
                                                            Send
                                                        </button>
                                                    ) : (
                                                        <span className="text-xs text-quaternary">—</span>
                                                    )}
                                                </Table.Cell>

                                            </Table.Row>
                                        );
                                    }}
                                </Table.Body>
                            </Table>
                        )}
                        <div className="shrink-0">
                            <PaginationCardDefault
                                page={page}
                                total={totalPages}
                                onPageChange={setPage}
                            />
                        </div>
                    </div>
                </div>

                {/* Detail side panel */}
                <div className={cx(
                    "shrink-0 border-l border-secondary bg-primary flex flex-col overflow-hidden transition-all duration-200 ease-linear",
                    panelOpen && selectedAppt ? "w-[380px]" : "w-0 border-l-0",
                )}>
                    {panelOpen && selectedAppt && !rescheduleOpen && (
                        <AppointmentDetailPanel
                            appointment={selectedAppt}
                            onClose={() => { setPanelOpen(false); setSelectedAppt(null); }}
                            onReschedule={() => setRescheduleOpen(true)}
                        />
                    )}
                    {panelOpen && selectedAppt && rescheduleOpen && (
                        <ReschedulePanel
                            appointment={selectedAppt}
                            onClose={() => setRescheduleOpen(false)}
                            onSaved={handleRescheduleSaved}
                        />
                    )}
                </div>
            </div>
        </>
    );
};