import { useState, useMemo } from 'react';
import { useUrlPagination } from '@/hooks/useUrlPagination';
import { useCanvasLoadingPoll } from '@/hooks/useCanvasLoadingPoll';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import useSWR from 'swr';
import { toast } from 'sonner';
import {
    Plus,
    ArrowLeft,
    Edit,
    MoreVertical,
    Trash2,
    BookOpen,
    Loader2
} from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { NoDataDash } from '@/components/shared';
import {
    AcademicCapIcon,
    WrenchScrewdriverIcon,
    HeartIcon,
    SparklesIcon,
    LightBulbIcon,
    HomeModernIcon,
    HandRaisedIcon
} from '@heroicons/react/24/outline';
import API from '@/api/api';
import {
    Cohort,
    Facility,
    ProgramOverview,
    externalSourceLabel,
    ProgClassStatus,
    SelectedClassStatus,
    classCountsTowardRates,
    ChangeLogEntry,
    ServerResponseMany,
    ServerResponseOne
} from '@/types';
import {
    formatDate,
    getInstructorName,
    getStatusColor
} from '@/lib/formatters';
import { programTypeColors } from '@/pages/program-detail/constants';
import { cn } from '@/lib/utils';
import { formatHistoryEntry } from '@/components/history/formatHistoryEntry';
import { ClassManagementFormInner } from '@/pages/programs/ClassManagementForm';
import EditProgramDialog from '@/pages/program-detail/EditProgramDialog';
import { canSwitchFacility, useAuth } from '@/auth/useAuth';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { DialogFooter } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger
} from '@/components/ui/tooltip';
import { Pagination } from '@/components/Pagination';
import Breadcrumbs from '@/components/navigation/Breadcrumbs';
import { FormModal } from '@/components/shared';
import {
    ArchiveConfirmDialog,
    CannotArchiveDialog,
    ReactivateDialog,
    DeleteProgramDialog
} from '@/components/programs/ProgramDialogs';

type HeroIcon = React.ForwardRefExoticComponent<
    React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
        title?: string;
        titleId?: string;
    } & React.RefAttributes<SVGSVGElement>
>;

const programTypeIcons: Record<string, HeroIcon> = {
    Educational: AcademicCapIcon,
    Vocational: WrenchScrewdriverIcon,
    Mental_Health_Behavioral: HeartIcon,
    Therapeutic: SparklesIcon,
    Life_Skills: LightBulbIcon,
    'Re-Entry': HomeModernIcon,
    'Religious_Faith-Based': HandRaisedIcon
};

function formatEnum(value: string): string {
    return value.replace(/_/g, ' ');
}

export default function ProgramOverviewFacilityAdmin() {
    const navigate = useNavigate();
    const { program_id } = useParams<{ program_id: string }>();
    const [searchParams] = useSearchParams();
    const { user } = useAuth();
    const [activeTab, setActiveTab] = useState('classes');
    const {
        page: historyPage,
        perPage: historyPerPage,
        setPage: setHistoryPage,
        setPerPage: setHistoryPerPage
    } = useUrlPagination(1, 20, 'history');
    const [statusModalOpen, setStatusModalOpen] = useState(false);
    const [selectedClass, setSelectedClass] = useState<Cohort | null>(null);
    const [selectedStatus, setSelectedStatus] = useState('');
    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
    const [showEditDialog, setShowEditDialog] = useState(false);
    const [showArchiveDialog, setShowArchiveDialog] = useState(false);
    const [showCannotArchiveDialog, setShowCannotArchiveDialog] =
        useState(false);
    const [showReactivateDialog, setShowReactivateDialog] = useState(false);
    const [archiveCheckLoading, setArchiveCheckLoading] = useState(false);
    const [archiveBlockingFacilities, setArchiveBlockingFacilities] = useState<
        string[]
    >([]);

    const facilityIdParam = searchParams.get('facility_id');
    const facilityId = facilityIdParam ? Number(facilityIdParam) : null;
    const facilityQuery = facilityId ? `&facility_id=${facilityId}` : '';
    const { data: facilityResp } = useSWR<ServerResponseOne<Facility>>(
        facilityId ? `/api/facilities/${facilityId}` : null
    );

    const { data: programResp, mutate: mutateProgram } = useSWR<
        ServerResponseOne<ProgramOverview>
    >(
        `/api/programs/${program_id}${facilityId ? `?facility_id=${facilityId}` : ''}`
    );
    const program = programResp?.data;
    const sourceLabel = externalSourceLabel(program?.source);
    const { exhausted: detailPollExhausted } = useCanvasLoadingPoll(
        !!program?.loading,
        mutateProgram
    );

    const { data: deleteCheckResp, mutate: mutateDeleteCheck } = useSWR<
        ServerResponseOne<{
            can_delete: boolean;
            blockers: {
                classes?: number;
                enrollments?: number;
                completions?: number;
                attendance_flags?: number;
            };
        }>
    >(program_id ? `/api/programs/${program_id}/delete-check` : null);
    const canDelete = deleteCheckResp?.data?.can_delete ?? false;
    const deleteBlockers = deleteCheckResp?.data?.blockers;
    const deleteBlockerReason = (() => {
        if (canDelete || !deleteBlockers) return null;
        if ((deleteBlockers.classes ?? 0) > 0)
            return 'Cannot delete program with existing classes';
        if ((deleteBlockers.enrollments ?? 0) > 0)
            return 'Cannot delete program with active enrollments';
        if ((deleteBlockers.completions ?? 0) > 0)
            return 'Cannot delete program with completion records';
        if ((deleteBlockers.attendance_flags ?? 0) > 0)
            return 'Cannot delete program with attendance records';
        return 'Cannot delete program';
    })();

    const {
        data: classesResp,
        isLoading: classesLoading,
        mutate: mutateClasses
    } = useSWR<ServerResponseMany<Cohort>>(
        `/api/programs/${program_id}/classes?per_page=100&order_by=ps.start_dt asc${facilityQuery}`
    );
    const classes = useMemo(() => classesResp?.data ?? [], [classesResp?.data]);

    const { data: historyResp } = useSWR<ServerResponseMany<ChangeLogEntry>>(
        activeTab === 'history'
            ? `/api/programs/${program_id}/history?page=${historyPage}&per_page=${historyPerPage}`
            : null
    );
    const history = historyResp?.data ?? [];
    const historyTotal = historyResp?.meta?.total ?? history.length;

    const nonArchivedClasses = useMemo(
        () => classes.filter((c) => !c.archived_at),
        [classes]
    );

    const activeClasses = useMemo(
        () =>
            nonArchivedClasses.filter(
                (c) => c.status === SelectedClassStatus.Active
            ),
        [nonArchivedClasses]
    );

    const totalCapacity = useMemo(
        () => activeClasses.reduce((sum, c) => sum + c.capacity, 0),
        [activeClasses]
    );

    const totalEnrolled = useMemo(
        () => activeClasses.reduce((sum, c) => sum + c.enrolled, 0),
        [activeClasses]
    );

    const utilization =
        totalCapacity > 0
            ? Math.round((totalEnrolled / totalCapacity) * 100)
            : 0;
    const backendCompletionRate = program?.completion_rate ?? null;

    async function handleArchiveCheck() {
        if (!program || archiveCheckLoading) return;
        setArchiveCheckLoading(true);
        const resp = await API.get<{ facilities: string[] }>(
            `programs/${program.id}/archive-check`
        );
        setArchiveCheckLoading(false);

        if (!resp.success) {
            toast.error(resp.message || 'Unable to check active class status.');
            return;
        }

        const blocking =
            (resp.data as { facilities: string[] }).facilities ?? [];
        if (blocking.length > 0) {
            setArchiveBlockingFacilities(blocking);
            setShowCannotArchiveDialog(true);
            return;
        }

        setShowArchiveDialog(true);
    }

    function handleStatusSelectChange(value: string) {
        if (value === 'Archived') {
            void handleArchiveCheck();
            return;
        }
        if (value === 'Reactivate') {
            setShowReactivateDialog(true);
            return;
        }
        void handleProgramStatusChange(value);
    }

    async function handleReactivate(isActive: boolean) {
        if (!program) return;
        const resp = await API.patch<
            { updated: boolean; message: string },
            Record<string, unknown>
        >(`programs/${program.id}/status`, {
            archived_at: null,
            is_active: isActive
        });
        const statusUpdated =
            !Array.isArray(resp.data) && resp.data?.updated !== false;
        if (resp.success && statusUpdated) {
            toast.success(`${program.name} has been reactivated`);
            void mutateProgram();
        } else {
            toast.error(resp.message || 'Failed to reactivate program');
        }
    }

    async function handleProgramStatusChange(newStatus: string) {
        if (!program) return;
        const body: Record<string, unknown> = {};
        if (newStatus === 'Archived') {
            body.archived_at = new Date().toISOString();
            body.is_active = false;
        } else {
            body.is_active = newStatus === 'Available';
            if (program.archived_at) {
                body.archived_at = null;
            }
        }

        const resp = await API.patch<
            { updated: boolean; message: string },
            Record<string, unknown>
        >(`programs/${program.id}/status`, body);
        const statusUpdated =
            !Array.isArray(resp.data) && resp.data?.updated !== false;
        if (resp.success && statusUpdated) {
            const successMessage =
                newStatus === 'Archived'
                    ? `${program.name} has been archived`
                    : 'Program status updated';
            toast.success(successMessage);
            void mutateProgram();
        } else {
            toast.error(resp.message || 'Failed to update program status');
        }
    }

    async function handleClassStatusChange(cls: Cohort, newStatus: string) {
        const resp = await API.patch(`program-classes?id=${cls.id}`, {
            status: newStatus
        });
        if (resp.success) {
            toast.success(`Class status updated to ${newStatus}`);
            void mutateClasses();
            void mutateProgram();
        } else {
            toast.error('Failed to update class status');
        }
    }

    const facilityFromProgram = facilityId
        ? program?.facilities?.find((facility) => facility.id === facilityId)
        : null;
    const facilityName =
        facilityFromProgram?.name ??
        facilityResp?.data?.name ??
        user?.facility?.name;
    const showFacilityContextBanner = Boolean(
        user && canSwitchFacility(user) && facilityId && facilityName
    );
    // program edits are statewide; sys/dept admins make them from the statewide overview
    const canEditStatewide = Boolean(user && canSwitchFacility(user));

    if (!program) {
        return (
            <div className="flex items-center justify-center h-64">
                <p className="text-muted-foreground">Loading program...</p>
            </div>
        );
    }

    if (program.loading) {
        return (
            <div className="min-h-screen bg-surface-hover">
                <div className="bg-white border-b border-gray-200">
                    <div className="max-w-7xl mx-auto px-6 py-6">
                        <div className="flex items-start gap-6">
                            <Skeleton className="h-18 w-18 rounded-lg" />
                            <div className="flex-1 space-y-3">
                                <Skeleton className="h-7 w-64" />
                                <Skeleton className="h-4 w-96" />
                                <div className="flex items-center gap-2 mt-2">
                                    {detailPollExhausted ? (
                                        <span className="text-sm text-amber-600">
                                            Taking longer than expected —{' '}
                                            <button
                                                className="underline"
                                                onClick={() =>
                                                    window.location.reload()
                                                }
                                            >
                                                refresh to retry
                                            </button>
                                        </span>
                                    ) : (
                                        <>
                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
                                            <span className="text-sm text-blue-600">
                                                Syncing {sourceLabel} data, this
                                                may take a moment…
                                            </span>
                                        </>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="max-w-7xl mx-auto px-6 py-8 grid grid-cols-4 gap-4">
                    {Array.from({ length: 4 }).map((_, i) => (
                        <Skeleton key={i} className="h-24 rounded-lg" />
                    ))}
                </div>
            </div>
        );
    }

    const isCanvasProgram = (program?.id ?? 0) >= 100_000_000;

    const programStatus = program.archived_at
        ? 'Archived'
        : program.is_active
          ? 'Available'
          : 'Inactive';

    const fundingDisplay = program.funding_type
        ? formatEnum(String(program.funding_type))
        : '';

    const primaryType = program.program_types[0]?.program_type;
    const Icon = primaryType
        ? programTypeIcons[primaryType] || LightBulbIcon
        : LightBulbIcon;
    const breadcrumbs = showFacilityContextBanner
        ? [
              { label: 'Dashboard', href: '/dashboard' },
              { label: 'Programs', href: '/programs' },
              { label: program.name, href: `/programs/${program.id}` },
              { label: facilityName! }
          ]
        : [
              { label: 'Dashboard', href: '/dashboard' },
              { label: 'Programs', href: '/programs' },
              { label: program.name }
          ];

    function handleOpenStatusModal(cls: Cohort) {
        setSelectedClass(cls);
        setSelectedStatus(cls.status);
        setStatusModalOpen(true);
    }

    function handleCloseStatusModal(open: boolean) {
        setStatusModalOpen(open);
        if (!open) {
            setSelectedClass(null);
        }
    }

    function handleSaveStatus() {
        if (!selectedClass) return;
        void handleClassStatusChange(selectedClass, selectedStatus);
        setStatusModalOpen(false);
        setSelectedClass(null);
    }

    async function handleDeleteProgram(): Promise<boolean> {
        if (!program) return false;
        const resp = await API.delete(`programs/${program.id}`);
        if (resp.success) {
            toast.success(`Program "${program.name}" has been deleted`);
            navigate('/programs');
            return true;
        }
        if (resp.status === 409) {
            void mutateDeleteCheck();
        }
        toast.error(resp.message || 'Failed to delete program');
        return false;
    }

    function getStatusDescription(status: string) {
        switch (status) {
            case 'Active':
                return 'Class is currently running and accepting attendance.';
            case 'Scheduled':
                return 'Class is scheduled to begin in the future.';
            case 'Completed':
                return 'Class has finished and is now archived.';
            case 'Cancelled':
                return 'Class has been cancelled and will not take place.';
            case 'Paused':
                return 'Class is temporarily paused and not meeting.';
            default:
                return '';
        }
    }

    return (
        <div className="min-h-screen bg-surface-hover">
            {showFacilityContextBanner && (
                <div className="bg-blue-50 border-b border-blue-200">
                    <div className="max-w-7xl mx-auto px-6 py-3">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2 text-sm">
                                <span className="text-blue-700 font-medium">
                                    Viewing:
                                </span>
                                <span className="text-blue-900">
                                    {program.name}
                                </span>
                                <span className="text-blue-600">at</span>
                                <span className="text-blue-900 font-medium">
                                    {facilityName}
                                </span>
                            </div>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                    navigate(`/programs/${program.id}`)
                                }
                                className="text-blue-700 border-blue-300 hover:bg-blue-100"
                            >
                                <ArrowLeft className="size-3 mr-2" />
                                Back to Statewide View
                            </Button>
                        </div>
                    </div>
                </div>
            )}
            {isCanvasProgram && (
                <div className="bg-blue-50 border-b border-blue-200">
                    <div className="max-w-7xl mx-auto px-6 py-3 flex items-center gap-2 text-sm text-blue-700">
                        <BookOpen className="size-4 shrink-0" />
                        <span>
                            This program is managed externally in {sourceLabel}.
                            Data is read-only.
                        </span>
                    </div>
                </div>
            )}
            <div className="bg-white border-b border-gray-200">
                <div
                    className={`max-w-7xl mx-auto px-6 ${
                        showFacilityContextBanner ? 'pt-6 pb-6' : 'py-6'
                    }`}
                >
                    <Breadcrumbs items={breadcrumbs} className="mb-6" />
                    <div className="flex items-start gap-6">
                        <div className="bg-brand p-4 rounded-lg flex items-center justify-center shrink-0">
                            <Icon className="size-10 text-white" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-start justify-between mb-2">
                                <div>
                                    <h1 className="text-brand-dark mb-2">
                                        {program.name}
                                    </h1>
                                    {program.program_types?.length > 0 && (
                                        <div className="flex flex-wrap gap-2 mb-3">
                                            {program.program_types.map((pt) => (
                                                <Badge
                                                    key={pt.program_type}
                                                    variant="outline"
                                                    className={
                                                        programTypeColors[
                                                            pt.program_type
                                                        ] ??
                                                        'bg-gray-100 text-gray-700 border-gray-200'
                                                    }
                                                >
                                                    {formatEnum(
                                                        pt.program_type
                                                    )}
                                                </Badge>
                                            ))}
                                        </div>
                                    )}
                                </div>
                                <div className="flex gap-3 items-start">
                                    <div className="flex flex-col gap-1">
                                        <p className="text-xs text-gray-600 font-medium">
                                            Program Status
                                        </p>
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <span>
                                                    <Select
                                                        value={programStatus}
                                                        onValueChange={
                                                            isCanvasProgram
                                                                ? undefined
                                                                : (value) =>
                                                                      void handleStatusSelectChange(
                                                                          value
                                                                      )
                                                        }
                                                        disabled={
                                                            archiveCheckLoading ||
                                                            isCanvasProgram
                                                        }
                                                    >
                                                        <SelectTrigger className="w-[140px] h-9 focus-visible:border-[#b3b3b3] focus-visible:ring-[3px] focus-visible:ring-[#b3b3b3]/50 focus-visible:ring-offset-0">
                                                            <SelectValue />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {programStatus ===
                                                            'Archived' ? (
                                                                <>
                                                                    <SelectItem
                                                                        value="Archived"
                                                                        disabled
                                                                    >
                                                                        Archived
                                                                    </SelectItem>
                                                                    <SelectItem value="Reactivate">
                                                                        Reactivate
                                                                    </SelectItem>
                                                                </>
                                                            ) : (
                                                                <>
                                                                    <SelectItem value="Available">
                                                                        Available
                                                                    </SelectItem>
                                                                    <SelectItem value="Inactive">
                                                                        Inactive
                                                                    </SelectItem>
                                                                    <SelectItem value="Archived">
                                                                        Archived
                                                                    </SelectItem>
                                                                </>
                                                            )}
                                                        </SelectContent>
                                                    </Select>
                                                </span>
                                            </TooltipTrigger>
                                            {isCanvasProgram && (
                                                <TooltipContent>
                                                    Managed in {sourceLabel}
                                                </TooltipContent>
                                            )}
                                        </Tooltip>
                                    </div>
                                    {!isCanvasProgram && !canEditStatewide && (
                                        <Button
                                            variant="outline"
                                            className="border-gray-300 mt-5 focus-visible:border-[#b3b3b3] focus-visible:ring-[3px] focus-visible:ring-[#b3b3b3]/50 focus-visible:ring-offset-0"
                                            onClick={() =>
                                                setShowEditDialog(true)
                                            }
                                        >
                                            <Edit className="size-4 mr-2" />
                                            Edit Program
                                        </Button>
                                    )}
                                    {!isCanvasProgram && (
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    className="h-9 w-9 text-gray-500 mt-5"
                                                >
                                                    <MoreVertical className="size-4" />
                                                    <span className="sr-only">
                                                        More options
                                                    </span>
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <Tooltip>
                                                    <TooltipTrigger asChild>
                                                        <div>
                                                            <DropdownMenuItem
                                                                variant="destructive"
                                                                onClick={() =>
                                                                    setDeleteModalOpen(
                                                                        true
                                                                    )
                                                                }
                                                                disabled={
                                                                    !canDelete
                                                                }
                                                            >
                                                                <Trash2 className="size-4" />
                                                                Delete Program
                                                            </DropdownMenuItem>
                                                        </div>
                                                    </TooltipTrigger>
                                                    {!canDelete && (
                                                        <TooltipContent side="left">
                                                            {deleteBlockerReason ??
                                                                'Cannot delete program'}
                                                        </TooltipContent>
                                                    )}
                                                </Tooltip>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    )}
                                </div>
                            </div>

                            {program.description && (
                                <p className="text-gray-600 mb-4 max-w-3xl mt-1">
                                    {program.description}
                                </p>
                            )}

                            <div
                                className={`grid gap-4 ${isCanvasProgram ? 'grid-cols-3' : 'grid-cols-4'}`}
                            >
                                <MetricBox
                                    label="Classes"
                                    value={nonArchivedClasses.length}
                                    subtitle={`${nonArchivedClasses.length} total`}
                                />
                                <MetricBox
                                    label="Enrollment"
                                    value={totalEnrolled}
                                    subtitle={
                                        isCanvasProgram || totalCapacity === 0
                                            ? undefined
                                            : `${totalCapacity} capacity`
                                    }
                                />
                                {!isCanvasProgram && (
                                    <MetricBox
                                        label="Utilization"
                                        value={`${utilization}%`}
                                        subtitle="Capacity filled"
                                    />
                                )}
                                <MetricBox
                                    label="Funding"
                                    value={fundingDisplay || '-'}
                                    valueClassName="text-sm text-brand-dark"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="py-6">
                <div className="max-w-7xl mx-auto px-6">
                    <Tabs value={activeTab} onValueChange={setActiveTab}>
                        <TabsList className="bg-white border border-gray-200 p-1 h-auto mb-2 gap-1">
                            <TabsTrigger
                                value="classes"
                                className="tab-trigger"
                            >
                                Classes ({nonArchivedClasses.length})
                            </TabsTrigger>
                            <TabsTrigger
                                value="details"
                                className="tab-trigger"
                            >
                                Program Details
                            </TabsTrigger>
                            <TabsTrigger
                                value="performance"
                                className="tab-trigger"
                            >
                                Performance
                            </TabsTrigger>
                            <TabsTrigger
                                value="history"
                                className="tab-trigger"
                            >
                                Audit History
                            </TabsTrigger>
                        </TabsList>

                        <TabsContent value="classes">
                            <ClassesTab
                                classes={nonArchivedClasses}
                                loading={classesLoading}
                                programId={program_id!}
                                facilityId={facilityId ?? undefined}
                                canAddClass={
                                    !!program.is_active &&
                                    !program.archived_at &&
                                    !isCanvasProgram
                                }
                                isCanvasProgram={isCanvasProgram}
                                onOpenStatusModal={handleOpenStatusModal}
                                onCreated={() => void mutateClasses()}
                            />
                        </TabsContent>

                        <TabsContent value="details" className="mt-4">
                            <ProgramDetailsTab program={program} />
                        </TabsContent>

                        <TabsContent value="performance" className="mt-4">
                            <PerformanceTab
                                totalEnrolled={totalEnrolled}
                                totalCapacity={totalCapacity}
                                activeClassCount={activeClasses.length}
                                totalClassCount={nonArchivedClasses.length}
                                completionRate={backendCompletionRate}
                            />
                        </TabsContent>

                        <TabsContent value="history" className="mt-4">
                            <AuditHistoryTab
                                entries={history}
                                totalItems={historyTotal}
                                currentPage={historyPage}
                                itemsPerPage={historyPerPage}
                                onPageChange={setHistoryPage}
                                onItemsPerPageChange={setHistoryPerPage}
                            />
                        </TabsContent>
                    </Tabs>
                </div>
            </div>

            <FormModal
                open={statusModalOpen}
                onOpenChange={handleCloseStatusModal}
                title="Change Class Status"
                description={`Update the status for ${selectedClass ? selectedClass.class_name : ''}.`}
                titleClassName="text-foreground"
            >
                <div className="space-y-0">
                    <Label htmlFor="classStatus" className="mb-0">
                        New Status
                    </Label>
                    <Select
                        value={selectedStatus}
                        onValueChange={(value) => {
                            setSelectedStatus(value);
                        }}
                    >
                        <SelectTrigger
                            id="classStatus"
                            className="h-9 bg-[#f3f3f5] border-[#d0d5dd] focus-visible:border-[#b3b3b3] focus-visible:ring-[3px] focus-visible:ring-[#b3b3b3]/50 focus-visible:ring-offset-0"
                        >
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            {Object.values(ProgClassStatus).map((s) => (
                                <SelectItem key={s} value={s}>
                                    {s}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <div className="h-2" />
                    <p className="text-xs text-gray-500">
                        {getStatusDescription(selectedStatus)}
                    </p>
                </div>
                <DialogFooter className="mt-6 gap-3">
                    <Button
                        variant="outline"
                        onClick={() => handleCloseStatusModal(false)}
                    >
                        Cancel
                    </Button>
                    <Button onClick={handleSaveStatus} variant="brand">
                        Update Status
                    </Button>
                </DialogFooter>
            </FormModal>
            <DeleteProgramDialog
                open={deleteModalOpen}
                onOpenChange={setDeleteModalOpen}
                programName={program.name}
                onConfirm={handleDeleteProgram}
            />
            <ReactivateDialog
                open={showReactivateDialog}
                onOpenChange={setShowReactivateDialog}
                onConfirm={(isActive) => void handleReactivate(isActive)}
            />

            <ArchiveConfirmDialog
                open={showArchiveDialog}
                onOpenChange={setShowArchiveDialog}
                programName={program.name}
                onConfirm={() => void handleProgramStatusChange('Archived')}
            />

            <CannotArchiveDialog
                open={showCannotArchiveDialog}
                onOpenChange={(open) => {
                    if (!open) setArchiveBlockingFacilities([]);
                    setShowCannotArchiveDialog(open);
                }}
                programName={program.name}
                facilities={archiveBlockingFacilities}
            />
            <EditProgramDialog
                open={showEditDialog}
                onOpenChange={setShowEditDialog}
                program={program}
            />
        </div>
    );
}

function MetricBox({
    label,
    value,
    subtitle,
    valueClassName
}: {
    label: string;
    value: string | number;
    subtitle?: string;
    valueClassName?: string;
}) {
    return (
        <div className="rounded-lg p-3 bg-surface-hover">
            <p className="text-sm text-gray-600 mb-1">{label}</p>
            <p className={valueClassName ?? 'text-2xl text-brand-dark'}>
                {value}
            </p>
            {subtitle && (
                <p className="text-xs text-gray-500 mt-0.5">{subtitle}</p>
            )}
        </div>
    );
}

function ClassesTab({
    classes,
    loading,
    programId,
    facilityId,
    canAddClass,
    isCanvasProgram,
    onOpenStatusModal,
    onCreated
}: {
    classes: Cohort[];
    loading: boolean;
    programId: string;
    facilityId?: number;
    canAddClass: boolean;
    isCanvasProgram?: boolean;
    onOpenStatusModal: (cls: Cohort) => void;
    onCreated?: () => void;
}) {
    const navigate = useNavigate();
    const [showCreateForm, setShowCreateForm] = useState(false);
    const activeScheduledClasses = classes.filter(
        (cls) =>
            cls.status === SelectedClassStatus.Active ||
            cls.status === SelectedClassStatus.Scheduled
    );
    const completedClasses = classes.filter(
        (cls) => cls.status === SelectedClassStatus.Completed
    );
    const cancelledClasses = classes.filter(
        (cls) => cls.status === SelectedClassStatus.Cancelled
    );
    const pausedClasses = classes.filter(
        (cls) => cls.status === SelectedClassStatus.Paused
    );

    return (
        <div className="space-y-4 pb-6">
            <div className="flex items-center justify-between mt-4">
                <div>
                    <h2 className="text-brand-dark">Classes</h2>
                    <p className="text-sm text-gray-600 mt-1">
                        All classes offered under this program
                    </p>
                </div>
                {!isCanvasProgram && (
                    <Button
                        disabled={!canAddClass}
                        onClick={() => {
                            if (!canAddClass) return;
                            setShowCreateForm((prev) => !prev);
                        }}
                        className="bg-brand-gold text-brand-dark hover:bg-brand-gold/90"
                    >
                        <Plus className="size-5" />
                        {showCreateForm ? 'Cancel' : 'Create New Class'}
                    </Button>
                )}
            </div>

            {showCreateForm && (
                <div className="card-block p-6">
                    <h3 className="text-brand-dark mb-4">Create New Class</h3>
                    <ClassManagementFormInner
                        programId={programId}
                        facilityId={facilityId}
                        onCancel={() => setShowCreateForm(false)}
                        onCreated={() => {
                            setShowCreateForm(false);
                            onCreated?.();
                        }}
                        embedded
                    />
                </div>
            )}
            {showCreateForm && (
                <div className="mt-5 bg-transparent" aria-hidden="true" />
            )}

            {loading ? (
                <p className="text-gray-600 text-center py-8">
                    Loading classes...
                </p>
            ) : classes.length === 0 ? (
                <div className="p-12 text-center text-gray-500 bg-white rounded-lg border border-gray-200">
                    <BookOpen className="size-12 mx-auto mb-3 text-gray-300" />
                    <p>No classes yet</p>
                    <p className="text-sm mt-1">
                        Create the first class for this program
                    </p>
                </div>
            ) : (
                <div className="card-block">
                    {activeScheduledClasses.length > 0 && (
                        <div className="divide-y divide-gray-200">
                            <div className="px-6 py-4 bg-gray-50">
                                <h3 className="text-sm font-medium text-gray-700">
                                    Active &amp; Scheduled Classes (
                                    {activeScheduledClasses.length})
                                </h3>
                            </div>
                            {activeScheduledClasses.map((cls) => (
                                <ClassRow
                                    key={cls.id}
                                    cls={cls}
                                    onOpenStatusModal={onOpenStatusModal}
                                    onClick={() =>
                                        navigate(
                                            `/program-classes/${cls.id}/detail`
                                        )
                                    }
                                    className="hover:bg-[#E2E7EA]/50"
                                    editableStatus={!isCanvasProgram}
                                    showEnrollment
                                    isCanvas={isCanvasProgram}
                                />
                            ))}
                        </div>
                    )}

                    {completedClasses.length > 0 && (
                        <div className="divide-y divide-gray-200">
                            <div className="section-footer">
                                <h3 className="text-sm font-medium text-gray-700">
                                    Completed Classes ({completedClasses.length}
                                    )
                                </h3>
                            </div>
                            {completedClasses.map((cls) => (
                                <ClassRow
                                    key={cls.id}
                                    cls={cls}
                                    onOpenStatusModal={onOpenStatusModal}
                                    onClick={() =>
                                        navigate(
                                            `/program-classes/${cls.id}/detail`
                                        )
                                    }
                                    className="hover:bg-gray-100 bg-gray-50/50"
                                    isCanvas={isCanvasProgram}
                                />
                            ))}
                        </div>
                    )}

                    {cancelledClasses.length > 0 && (
                        <div className="divide-y divide-gray-200">
                            <div className="section-footer">
                                <h3 className="text-sm font-medium text-gray-700">
                                    Cancelled Classes ({cancelledClasses.length}
                                    )
                                </h3>
                            </div>
                            {cancelledClasses.map((cls) => (
                                <ClassRow
                                    key={cls.id}
                                    cls={cls}
                                    onOpenStatusModal={onOpenStatusModal}
                                    onClick={() =>
                                        navigate(
                                            `/program-classes/${cls.id}/detail`
                                        )
                                    }
                                    className="hover:bg-gray-100 bg-gray-50/50"
                                    isCanvas={isCanvasProgram}
                                />
                            ))}
                        </div>
                    )}

                    {pausedClasses.length > 0 && (
                        <div className="divide-y divide-gray-200">
                            <div className="section-footer">
                                <h3 className="text-sm font-medium text-gray-700">
                                    Paused Classes ({pausedClasses.length})
                                </h3>
                            </div>
                            {pausedClasses.map((cls) => (
                                <ClassRow
                                    key={cls.id}
                                    cls={cls}
                                    onOpenStatusModal={onOpenStatusModal}
                                    onClick={() =>
                                        navigate(
                                            `/program-classes/${cls.id}/detail`
                                        )
                                    }
                                    className="hover:bg-gray-100 bg-gray-50/50"
                                    editableStatus={!isCanvasProgram}
                                    isCanvas={isCanvasProgram}
                                />
                            ))}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}

function ClassRow({
    cls,
    onOpenStatusModal,
    onClick,
    className,
    editableStatus,
    showEnrollment,
    isCanvas
}: {
    cls: Cohort;
    onOpenStatusModal: (cls: Cohort) => void;
    onClick?: () => void;
    className?: string;
    editableStatus?: boolean;
    showEnrollment?: boolean;
    isCanvas?: boolean;
}) {
    const enrollPct =
        cls.capacity > 0 ? (cls.enrolled / cls.capacity) * 100 : 0;

    const scheduleText = String(cls.schedule ?? '');
    const roomText = String(cls.room ?? '');
    const instructorName = getInstructorName(cls.events);
    const metaItems = [instructorName, scheduleText, roomText].filter(
        (item): item is string => Boolean(item)
    );
    const attendanceRate =
        typeof cls.attendance_rate === 'number'
            ? Math.round(cls.attendance_rate)
            : null;
    const attendanceClass =
        attendanceRate !== null
            ? attendanceRate >= 85
                ? 'text-brand'
                : attendanceRate >= 70
                  ? 'text-brand-gold'
                  : 'text-gray-700'
            : 'text-gray-500';
    const hasStarted = classCountsTowardRates(cls.status);
    // rate_eligible_* carry the server's enrollment_ended_at predicate, so this
    // cannot contradict the program-level rate shown in PerformanceTab.
    const completionBase = cls.rate_eligible_enrollments ?? 0;
    const completionRate =
        hasStarted && completionBase > 0
            ? Math.round(
                  ((cls.rate_eligible_completions ?? 0) / completionBase) * 100
              )
            : null;
    const completionClass =
        completionRate !== null
            ? completionRate >= 85
                ? 'text-brand'
                : completionRate >= 70
                  ? 'text-brand-gold'
                  : 'text-gray-700'
            : 'text-gray-500';

    return (
        <div
            className={cn(
                'p-6 transition-colors',
                onClick ? 'cursor-pointer' : 'cursor-default',
                className ?? ''
            )}
            onClick={onClick}
        >
            <div className="flex items-start justify-between">
                <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                        <h4 className="text-brand-dark hover:text-brand transition-colors">
                            {cls.class_name}
                        </h4>
                        {editableStatus ? (
                            <Badge
                                variant="outline"
                                className={cn(
                                    getStatusColor(cls.status),
                                    'cursor-pointer hover:opacity-80 transition-opacity flex items-center gap-1.5'
                                )}
                                onClick={(event) => {
                                    event.stopPropagation();
                                    onOpenStatusModal(cls);
                                }}
                            >
                                {cls.status}
                                <Edit className="size-3" />
                            </Badge>
                        ) : (
                            <Badge
                                variant="outline"
                                className={getStatusColor(cls.status)}
                            >
                                {cls.status}
                            </Badge>
                        )}
                    </div>
                    {cls.description && (
                        <p className="text-sm text-gray-600 mb-3">
                            {cls.description}
                        </p>
                    )}
                    {metaItems.length > 0 && (
                        <div className="flex items-center gap-6 text-sm text-gray-600 mb-3">
                            {metaItems.map((item, index) => (
                                <span key={`${item}-${index}`}>{item}</span>
                            ))}
                        </div>
                    )}
                    <div className="flex items-center gap-6 text-sm">
                        {!isCanvas && (
                            <div className="flex items-center gap-2">
                                <span className="text-gray-600">
                                    Attendance:
                                </span>
                                {attendanceRate !== null ? (
                                    <span
                                        className={`font-medium ${attendanceClass}`}
                                    >
                                        {attendanceRate}%
                                    </span>
                                ) : (
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <NoDataDash
                                                className={`font-medium cursor-help ${attendanceClass}`}
                                            />
                                        </TooltipTrigger>
                                        <TooltipContent className="bg-brand-dark text-white max-w-xs">
                                            {cls.status ===
                                            SelectedClassStatus.Scheduled
                                                ? `No attendance yet — starts ${formatDate(cls.start_dt)}`
                                                : 'No attendance has been recorded for this class yet'}
                                        </TooltipContent>
                                    </Tooltip>
                                )}
                            </div>
                        )}
                        {!isCanvas && (
                            <div className="flex items-center gap-2">
                                <span className="text-gray-600">
                                    Completion:
                                </span>
                                {completionRate !== null ? (
                                    <span
                                        className={`font-medium ${completionClass}`}
                                    >
                                        {completionRate}%
                                    </span>
                                ) : (
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <NoDataDash
                                                className={`font-medium cursor-help ${completionClass}`}
                                            />
                                        </TooltipTrigger>
                                        <TooltipContent className="bg-brand-dark text-white max-w-xs">
                                            {cls.status ===
                                            SelectedClassStatus.Scheduled
                                                ? `This class hasn't started yet — starts ${formatDate(cls.start_dt)}`
                                                : cls.status ===
                                                    SelectedClassStatus.Cancelled
                                                  ? cls.completed > 0
                                                      ? `This class was cancelled; ${cls.completed} resident${cls.completed === 1 ? '' : 's'} completed it before cancellation, but a cancelled class doesn't count toward completion rates`
                                                      : 'This class was cancelled before any residents reached completion eligibility'
                                                  : `No residents in this class have reached completion eligibility yet (${cls.enrolled} enrolled)`}
                                        </TooltipContent>
                                    </Tooltip>
                                )}
                            </div>
                        )}
                    </div>
                </div>
                {showEnrollment && (
                    <div className="ml-6 min-w-50">
                        <div className="flex items-center justify-between mb-2">
                            <span className="text-sm text-gray-600">
                                Enrollment
                            </span>
                            <span className="text-sm text-brand-dark">
                                {isCanvas
                                    ? cls.enrolled
                                    : `${cls.enrolled} / ${cls.capacity}`}
                            </span>
                        </div>
                        {!isCanvas && (
                            <Progress
                                value={enrollPct}
                                className="h-2"
                                indicatorClassName="bg-brand"
                            />
                        )}
                    </div>
                )}
            </div>
        </div>
    );
}

function ProgramDetailsTab({ program }: { program: ProgramOverview }) {
    const programStatus = program.archived_at
        ? 'Archived'
        : program.is_active
          ? 'Available'
          : 'Inactive';

    return (
        <Card className="bg-background p-0">
            <CardContent className="p-6 space-y-6">
                <h3 className="text-brand-dark mb-6 font-normal">
                    Program Details
                </h3>

                <div className="space-y-2">
                    <p className="text-sm text-gray-600">Description</p>
                    <p className="text-foreground">
                        {program.description || 'No description provided.'}
                    </p>
                </div>

                <div className="grid grid-cols-2 gap-6">
                    <div className="space-y-2">
                        <p className="text-sm text-gray-600">Program Types</p>
                        <div className="flex flex-wrap gap-1.5">
                            {program.program_types?.map((pt) => (
                                <span
                                    key={pt.program_type}
                                    className={cn(
                                        'text-xs px-2.5 py-0.5 rounded-full border font-medium',
                                        programTypeColors[pt.program_type] ??
                                            'bg-muted text-foreground border-border'
                                    )}
                                >
                                    {formatEnum(pt.program_type)}
                                </span>
                            ))}
                        </div>
                    </div>
                    <div className="space-y-2">
                        <p className="text-sm text-gray-600">Credit Types</p>
                        <div className="flex flex-wrap gap-2">
                            {program.credit_types?.map((ct) => (
                                <span
                                    key={ct.credit_type}
                                    className="text-xs px-2.5 py-0.5 rounded-full border bg-gray-100 text-gray-700 border-gray-200 font-medium"
                                >
                                    {formatEnum(ct.credit_type)}
                                </span>
                            ))}
                        </div>
                    </div>
                    <div className="space-y-2">
                        <p className="text-sm text-gray-600">Funding Types</p>
                        <p className="text-foreground">
                            {program.funding_type
                                ? formatEnum(String(program.funding_type))
                                : '-'}
                        </p>
                    </div>
                    <div className="space-y-2">
                        <p className="text-sm text-gray-600">Status</p>
                        <Badge
                            variant="outline"
                            className={
                                programStatus === 'Available'
                                    ? 'bg-green-50 text-green-700 border-green-200'
                                    : programStatus === 'Archived'
                                      ? 'bg-red-50 text-red-700 border-red-200'
                                      : 'bg-muted text-foreground border-border'
                            }
                        >
                            {programStatus}
                        </Badge>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

function PerformanceTab({
    totalEnrolled,
    totalCapacity,
    activeClassCount,
    totalClassCount,
    completionRate
}: {
    totalEnrolled: number;
    totalCapacity: number;
    activeClassCount: number;
    totalClassCount: number;
    completionRate: number | null;
}) {
    const capacityPct =
        totalCapacity > 0
            ? Math.round((totalEnrolled / totalCapacity) * 100)
            : 0;
    const avgClassSize =
        activeClassCount > 0 ? Math.round(totalEnrolled / activeClassCount) : 0;

    return (
        <Card className="bg-background p-0">
            <CardContent className="p-6 space-y-4">
                <h3 className="text-brand-dark mb-6 font-normal">
                    Performance Metrics
                </h3>
                <div className="grid grid-cols-2 gap-6">
                    <div className="bg-surface-hover rounded-lg p-4">
                        <p className="text-sm text-gray-600 mb-2">
                            Total Enrollment
                        </p>
                        <p className="text-3xl text-brand-dark mb-2">
                            {totalEnrolled}
                        </p>
                        <Progress
                            value={capacityPct}
                            className="h-2"
                            indicatorClassName="bg-brand"
                        />
                        <p className="text-xs text-gray-500 mt-2">
                            {capacityPct}% of capacity
                        </p>
                    </div>
                    <div className="bg-surface-hover rounded-lg p-4">
                        <p className="text-sm text-gray-600 mb-2">
                            Average Class Size
                        </p>
                        <p className="text-3xl text-brand-dark mb-2">
                            {avgClassSize}
                        </p>
                        <p className="text-xs text-gray-500 mt-2">
                            residents per class
                        </p>
                    </div>
                    <div className="bg-surface-hover rounded-lg p-4">
                        <p className="text-sm text-gray-600 mb-2">
                            Active Classes
                        </p>
                        <p className="text-3xl text-brand-dark mb-2">
                            {activeClassCount}
                        </p>
                        <p className="text-xs text-gray-500 mt-2">
                            out of {totalClassCount} total
                        </p>
                    </div>
                    <div className="bg-surface-hover rounded-lg p-4">
                        <p className="text-sm text-gray-600 mb-2">
                            Completion Rate
                        </p>
                        {completionRate !== null ? (
                            <>
                                <p className="text-3xl text-brand-dark mb-2">
                                    {Math.round(completionRate)}%
                                </p>
                                <Progress
                                    value={completionRate}
                                    className="h-2"
                                    indicatorClassName="bg-brand"
                                />
                                <p className="text-xs text-gray-500 mt-2">
                                    &nbsp;
                                </p>
                            </>
                        ) : (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <p className="text-3xl text-brand-dark mb-2 cursor-help w-fit">
                                        <NoDataDash />
                                    </p>
                                </TooltipTrigger>
                                <TooltipContent className="bg-brand-dark text-white max-w-xs">
                                    No residents have reached completion
                                    eligibility yet
                                </TooltipContent>
                            </Tooltip>
                        )}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

function AuditHistoryTab({
    entries,
    totalItems,
    currentPage,
    itemsPerPage,
    onPageChange,
    onItemsPerPageChange
}: {
    entries: ChangeLogEntry[];
    totalItems: number;
    currentPage: number;
    itemsPerPage: number;
    onPageChange: (page: number) => void;
    onItemsPerPageChange: (itemsPerPage: number) => void;
}) {
    const { user } = useAuth();
    return (
        <Card className="bg-background p-0">
            <CardContent className="p-6 space-y-4">
                <h3 className="text-brand-dark mb-6 font-normal">
                    Audit History
                </h3>
                {entries.length === 0 ? (
                    <p className="text-sm text-muted-foreground">
                        No history entries found.
                    </p>
                ) : (
                    <div className="space-y-3">
                        {entries.map((entry) => (
                            <div
                                key={entry.id}
                                className="flex items-baseline gap-6"
                            >
                                <span className="text-sm text-muted-foreground shrink-0 w-24">
                                    {new Date(
                                        entry.created_at
                                    ).toLocaleDateString('en-US', {
                                        month: 'numeric',
                                        day: 'numeric',
                                        year: 'numeric'
                                    })}
                                </span>
                                <p className="text-sm text-foreground">
                                    {formatHistoryEntry(entry, user?.timezone)}
                                </p>
                            </div>
                        ))}
                    </div>
                )}
            </CardContent>
            {totalItems > 0 && (
                <Pagination
                    currentPage={currentPage}
                    totalItems={totalItems}
                    itemsPerPage={itemsPerPage}
                    onPageChange={onPageChange}
                    onItemsPerPageChange={onItemsPerPageChange}
                    itemLabel="entries"
                />
            )}
        </Card>
    );
}