'use client';

import {MobileNav} from '@astryxdesign/core/MobileNav';
import {useBreakpoint} from '@/lib/breakpoints';
import {useCopilot} from './CopilotProvider';
import {CopilotPanel} from './CopilotPanel';

/**
 * Tablet and mobile presentation of the Copilot.
 *
 * MobileNav rather than Dialog: a Dialog is content-sized (height: fit-content,
 * maxHeight 480px) and ignores top/bottom insets, so it renders as a floating
 * card rather than a drawer. MobileNav is the edge-anchored, full-height
 * primitive this actually needs.
 *
 * It renders the SAME <CopilotPanel /> as the inline path — crossing the
 * breakpoint changes where the panel lives, never what it contains or
 * remembers, because all state sits in CopilotProvider above the route tree.
 */
export function CopilotSlideOver() {
  const bp = useBreakpoint();
  const {isSlideOverOpen, setSlideOverOpen} = useCopilot();

  return (
    <MobileNav
      // Explicit, because MobileNav otherwise takes its id from AppShell's
      // mobile context — which every MobileNav in the tree shares, so this
      // drawer and the navigation drawer both rendered id="…" identical.
      // A duplicate id makes the menu button's aria-controls resolve to
      // whichever one the DOM happens to reach first.
      id="copilot-slide-over"
      isOpen={isSlideOverOpen}
      onOpenChange={setSlideOverOpen}
      side="end"
      // Full-bleed on mobile, where a 380px drawer would leave nothing
      // behind it worth looking at.
      width={bp === 'mobile' ? undefined : 380}
      label="Loyaly AI"
    >
      <CopilotPanel onDismiss={() => setSlideOverOpen(false)} />
    </MobileNav>
  );
}
