// Consolidated staff Messages shell (Slice 2a). Role-gated top tabs; each tab renders a self-contained
// panel that owns its own list/browse + <Chat>. Backends unchanged per panel.
import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuthServiceContext, useStaffPermissionServiceContext } from '../../../services';
import clsx from 'clsx';
import { ColleaguesPanel } from './panels/ColleaguesPanel';
import { PatientsPanel } from './panels/PatientsPanel';
import { CollaborationTeamsPanel } from './panels/CollaborationTeamsPanel';
import { PatientMessagingToggle } from './PatientMessagingToggle';
import { Card, CardContent, CardTitle } from '../../../components/ui/card';
import { MESSAGES_PAGE_BODY, MESSAGES_PAGE_HEIGHT } from '../../../utils/messagesLayout';
import { DeskMessages, useMessagesTop } from './DeskMessages';
import './ClinicMessages.css';

type StaffTab = 'patients' | 'colleagues' | 'teams';
interface MessagesDeepLink { tab?: StaffTab; openRequestId?: string; openWith?: string; openTeamId?: string; openVariant?: 'public' | 'aside' }

const StaffMessagesPage: React.FC = () => {
    const { userRole, USER_ROLES, selectedWorkspace } = useAuthServiceContext();
    const { activeWorkspace } = useStaffPermissionServiceContext();
    const activeUserRole = activeWorkspace ?? selectedWorkspace ?? userRole;
    const location = useLocation();
    const navigate = useNavigate();

    const canSeePatients = activeUserRole === USER_ROLES.PRACTITIONER || activeUserRole === USER_ROLES.RECEPTIONIST;
    const isPractitioner = activeUserRole === USER_ROLES.PRACTITIONER;

    const deepLink = (location.state as MessagesDeepLink | null) || {};
    const [activeTab, setActiveTab] = useState<StaffTab>(
        deepLink.tab === 'patients' && canSeePatients
            ? 'patients'
            : deepLink.tab === 'teams' && isPractitioner
            ? 'teams'
            : deepLink.tab === 'colleagues'
            ? 'colleagues'
            : (canSeePatients ? 'patients' : 'colleagues'),
    );
    // Capture the deep-link open intent once, then clear router state so a refresh doesn't reopen.
    const [pending] = useState<MessagesDeepLink>(deepLink);
    useEffect(() => {
        if (deepLink.tab || deepLink.openRequestId || deepLink.openWith || deepLink.openTeamId) {
            navigate(location.pathname, { replace: true, state: null });
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const fitRef = useMessagesTop();

    if (activeUserRole === USER_ROLES.RECEPTIONIST) {
        return <DeskMessages deepLink={pending} workspace={activeUserRole} />;
    }

    const tabs: { id: StaffTab; label: string }[] = [
        ...(canSeePatients ? [{ id: 'patients' as const, label: 'Patients' }] : []),
        { id: 'colleagues', label: 'Colleagues' },
        ...(isPractitioner ? [{ id: 'teams' as const, label: 'Collaboration Teams' }] : []),
    ];

    return (
        <div ref={fitRef} className={MESSAGES_PAGE_HEIGHT}>
            <Card className={clsx('ahr-cmsgs', MESSAGES_PAGE_BODY)} role="region" aria-labelledby="staff-messages-title">
                <CardTitle as="h1" id="staff-messages-title" className="ak-page-title text-start">Messages</CardTitle>
                {!canSeePatients && !isPractitioner && <p className="ak-page-title__sub text-start">Conversations with your practice colleagues.</p>}
                {/* The practitioner's own switch lives on their Messages page, above the tabs. */}
                {(canSeePatients || isPractitioner) && <PatientMessagingToggle workspace={activeUserRole} />}
                {/* A workspace that can message colleagues alone shows the colleague panel's own row instead. */}
                {(canSeePatients || isPractitioner) && (
                    <div className="ak-tabs ak-tabs--line ahr-cmsgs__tabs" role="tablist" aria-label="Messages">
                        {tabs.map(({ id, label }) => (
                            <button
                                key={id}
                                type="button"
                                role="tab"
                                aria-selected={activeTab === id}
                                aria-controls="staff-messages-panel"
                                className="ak-tab"
                                onClick={() => setActiveTab(id)}
                            >
                                {label}
                            </button>
                        ))}
                    </div>
                )}
                <CardContent className={clsx('ahr-cmsgs__panel', MESSAGES_PAGE_BODY)} id="staff-messages-panel" role={canSeePatients || isPractitioner ? 'tabpanel' : undefined}>
                    {activeTab === 'teams' && isPractitioner ? (
                        <CollaborationTeamsPanel
                            initialTeamId={pending.tab === 'teams' ? pending.openTeamId : undefined}
                            initialVariant={pending.tab === 'teams' ? pending.openVariant : undefined}
                        />
                    ) : activeTab === 'patients' && canSeePatients ? (
                        <PatientsPanel initialOpenRequestId={pending.tab === 'patients' ? pending.openRequestId : undefined} initialOpenWith={pending.tab === 'patients' ? pending.openWith : undefined} />
                    ) : (
                        <ColleaguesPanel standalone={!canSeePatients && !isPractitioner} initialOpenRequestId={pending.tab === 'colleagues' ? pending.openRequestId : undefined} initialOpenWith={pending.tab === 'colleagues' ? pending.openWith : undefined} />
                    )}
                </CardContent>
            </Card>
        </div>
    );
};

export default StaffMessagesPage;