// PageHeader — consistent header layout for all list pages.
//
// Row 1: Title (+ optional badge + info icon) on the left,
//         controls (search, columns, export, etc.) on the right.
// Row 2: Optional tabs (underline style) — no extra borders.
//
// The `infoText` prop renders as a hoverable info icon (ⓘ) next to
// the title. Long descriptive text goes here instead of inline
// subtitle — keeps the header compact.
//
// Usage:
//   <PageHeader
//       title="Contacts"
//       badge={16}
//       infoText="People who reached out directly — phone, walk-in, referral."
//       controls={<><Input .../> <Button .../></>}
//       tabs={<Tabs ...><TabList ...>{...}</TabList></Tabs>}
//   />

import { useState, useRef, useEffect, type ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleInfo } from '@fortawesome/pro-duotone-svg-icons';
import { NotificationBell } from './notification-bell';
import { useAuth } from '@/providers/auth-provider';

interface PageHeaderProps {
    title: string;
    badge?: number | string;
    /** Short inline text next to badge — use sparingly (e.g. "17 total") */
    subtitle?: string;
    /** Longer descriptive text shown on info icon hover/click */
    infoText?: string;
    controls?: ReactNode;
    tabs?: ReactNode;
}

const InfoTooltip = ({ text }: { text: string }) => {
    const [open, setOpen] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!open) return;
        const handler = (e: MouseEvent) => {
            if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, [open]);

    return (
        <div className="relative" ref={ref}>
            <button
                onClick={() => setOpen(!open)}
                onMouseEnter={() => setOpen(true)}
                onMouseLeave={() => setOpen(false)}
                className="flex size-5 items-center justify-center rounded-full text-fg-quaternary hover:text-fg-secondary transition duration-100 ease-linear"
                title={text}
            >
                <FontAwesomeIcon icon={faCircleInfo} className="size-4" />
            </button>
            {open && (
                <div className="absolute left-0 top-full mt-1 z-50 w-72 rounded-lg bg-primary px-3 py-2 text-xs text-tertiary shadow-lg ring-1 ring-secondary">
                    {text}
                </div>
            )}
        </div>
    );
};

export const PageHeader = ({ title, badge, subtitle, infoText, controls, tabs }: PageHeaderProps) => {
    const { isAdmin } = useAuth();
    return (
    <div className="shrink-0">
        {/* Row 1: title + controls */}
        <div className="flex items-center justify-between px-6 py-3">
            <div className="flex items-center gap-2">
                <h1 className="text-lg font-bold text-primary">{title}</h1>
                {badge != null && (
                    <span className="inline-flex items-center justify-center rounded-full bg-brand-secondary px-2 py-0.5 text-xs font-semibold text-white">
                        {badge}
                    </span>
                )}
                {subtitle && (
                    <span className="text-sm text-tertiary ml-1">{subtitle}</span>
                )}
                {infoText && <InfoTooltip text={infoText} />}
            </div>
            <div className="flex items-center gap-2">
                {controls}
                {isAdmin && <NotificationBell />}
            </div>
        </div>

        {/* Row 2: optional tabs — no container border, tab underline is the separator */}
        {tabs && (
            <div className="px-6">
                {tabs}
            </div>
        )}
    </div>
    );
};
