pn-new-crm/src/components/inbox/inbox-page-shell.tsx

'use client';

import { useEffect, useState } from 'react';
import { Bell, ChevronDown, ShieldAlert } from 'lucide-react';

import { cn } from '@/lib/utils';
import { PageHeader } from '@/components/shared/page-header';
import { AlertsPageShell } from '@/components/alerts/alerts-page-shell';
import { ReminderList } from '@/components/reminders/reminder-list';
import { useAlertCount } from '@/components/alerts/use-alerts';

/**
 * Merged "Inbox" surface - replaces the previously-separate /alerts and
 * /reminders pages. Two stacked sections (Reminders first, Alerts second)
 * preserve the source distinction (system-flagged vs user-set) while
 * giving reps a single "things demanding my attention" surface.
 *
 * Sections are collapsible; collapsed state persists in localStorage per
 * section so reps can default to the layout they prefer.
 *
 * URL anchors:
 *   /inbox#alerts    → ensures Alerts section is expanded + scrolls to it
 *   /inbox#reminders → ensures Reminders section is expanded + scrolls to it
 *
 * The legacy /alerts and /reminders routes redirect here with the
 * appropriate hash, so old bookmarks land in the right place.
 */
export function InboxPageShell() {
  const [alertsOpen, setAlertsOpen] = useState(true);
  const [remindersOpen, setRemindersOpen] = useState(true);
  const { data: alertCount } = useAlertCount();

  // localStorage hydration on mount - canonical "read from external
  // store" pattern. setState in effect is intentional.
  useEffect(() => {
    const a = localStorage.getItem('inbox.alerts.open');
    const r = localStorage.getItem('inbox.reminders.open');
    // eslint-disable-next-line react-hooks/set-state-in-effect
    if (a === 'false') setAlertsOpen(false);
    if (r === 'false') setRemindersOpen(false);
  }, []);

  // Honor URL hash: ensure the targeted section is expanded then scroll.
  // Runs once on mount AND on hashchange so deep-linking from another tab
  // / page works the same as initial navigation.
  useEffect(() => {
    function applyHash() {
      const hash = window.location.hash.replace('#', '');
      if (hash === 'alerts') {
        setAlertsOpen(true);
        document.getElementById('inbox-section-alerts')?.scrollIntoView({ behavior: 'smooth' });
      } else if (hash === 'reminders') {
        setRemindersOpen(true);
        document.getElementById('inbox-section-reminders')?.scrollIntoView({ behavior: 'smooth' });
      }
    }
    applyHash();
    window.addEventListener('hashchange', applyHash);
    return () => window.removeEventListener('hashchange', applyHash);
  }, []);

  function toggleAlerts() {
    const next = !alertsOpen;
    setAlertsOpen(next);
    localStorage.setItem('inbox.alerts.open', String(next));
  }
  function toggleReminders() {
    const next = !remindersOpen;
    setRemindersOpen(next);
    localStorage.setItem('inbox.reminders.open', String(next));
  }

  const activeAlerts = alertCount?.total ?? 0;

  return (
    <div className="space-y-6">
      <PageHeader
        title="Reminders & Alerts"
        eyebrow="Action items"
        description="Your scheduled follow-ups plus alerts the system has flagged, in one place."
        variant="gradient"
      />

      <section id="inbox-section-reminders" className="rounded-lg border bg-card shadow-xs">
        <SectionHeader
          icon={<Bell className="size-4 text-muted-foreground" aria-hidden />}
          label="Reminders"
          open={remindersOpen}
          onToggle={toggleReminders}
        />
        {remindersOpen ? (
          <div className="border-t px-4 pb-4 pt-3">
            <ReminderList embedded />
          </div>
        ) : null}
      </section>

      <section id="inbox-section-alerts" className="rounded-lg border bg-card shadow-xs">
        <SectionHeader
          icon={<ShieldAlert className="size-4 text-muted-foreground" aria-hidden />}
          label="Alerts"
          count={activeAlerts}
          open={alertsOpen}
          onToggle={toggleAlerts}
        />
        {alertsOpen ? (
          <div className="border-t px-4 pb-4 pt-3">
            <AlertsPageShell embedded />
          </div>
        ) : null}
      </section>
    </div>
  );
}

function SectionHeader({
  icon,
  label,
  count,
  open,
  onToggle,
}: {
  icon: React.ReactNode;
  label: string;
  count?: number;
  open: boolean;
  onToggle: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onToggle}
      aria-expanded={open}
      className={cn(
        'flex w-full items-center justify-between gap-2 px-4 py-3 text-left',
        'min-h-[48px] hover:bg-muted/30',
      )}
    >
      <span className="flex items-center gap-2">
        {icon}
        <span className="text-sm font-semibold text-foreground">{label}</span>
        {count !== undefined && count > 0 ? (
          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
            {count}
          </span>
        ) : null}
      </span>
      <ChevronDown
        className={cn('size-4 text-muted-foreground transition-transform', open && 'rotate-180')}
        aria-hidden
      />
    </button>
  );
}