import * as React from 'react';
import { PanelLeftOpen, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import KrowAssistant from './KrowAssistant';
import { useAssistantPanel } from './AssistantPanelContext';
import { ResizeDivider } from './ResizeDivider';

const EXPANDED_WIDTH = 620;
/**
 * Gutter separating the panel from the dashboard, split between the drag handle
 * and the panel's own lead padding. Both halves are named because the track width
 * is their sum plus the panel: get that arithmetic wrong and the column either
 * overflows or leaves a strip of unexplained empty space at the shell's edge.
 */
const HANDLE_WIDTH = 12;
const LEAD_PADDING = 8;
const GUTTER = HANDLE_WIDTH + LEAD_PADDING;
/** Expanded must never dominate: the dashboard stays the primary experience. */
const MAX_VIEWPORT_SHARE = 0.42;
/**
 * Below this width there is no room for a column *beside* the dashboard — a
 * 380px track on a 375px phone collapses `main` to nothing — so Owliver stacks
 * underneath the page instead.
 *
 * Deliberately Tailwind's `md` (768px), not `lg`: tablets already lay the inline
 * column out acceptably, so they keep the two-column workspace and only phones
 * stack.
 */
const STACK_BREAKPOINT = 768;

/** Tracks viewport width so the panel can be clamped and the layout switched. */
function useViewportWidth() {
  const [width, setWidth] = React.useState(() =>
    typeof window === 'undefined' ? 1440 : window.innerWidth
  );

  React.useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return width;
}

/**
 * The collapsed state — a compact docked trigger.
 *
 * The earlier version was a full-height rail inside the layout column. It solved
 * the wrong problem: it kept Owliver *findable*, but it also kept the column, so
 * collapsing bought the dashboard 44px instead of the 400px the user was asking
 * for, and it did it with rotated text down the side of the page.
 *
 * So collapsing now removes the column entirely — the layout goes to one column
 * and `main` takes the whole shell — and the way back is this small docked pill.
 * It is deliberately the only floating control in the product, and it exists only
 * in the collapsed state, where there is nowhere else for it to live.
 */
function CollapsedTrigger({ page, onRestore }) {
  return (
    <button
      type="button"
      onClick={onRestore}
      aria-label={`Show the Owliver workspace for ${page}`}
      aria-expanded={false}
      className="group fixed bottom-5 right-5 z-30 inline-flex items-center gap-2 rounded-full border border-border
                 bg-surface py-2 pl-2 pr-3.5 shadow-md transition-[box-shadow,border-color] duration-base
                 hover:border-krow-blue/40 hover:shadow-lg
                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50"
    >
      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-krow-blue text-white shadow-brand">
        <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
      </span>
      <span className="text-body-sm font-semibold text-ink-1">Owliver</span>
      <PanelLeftOpen className="h-3.5 w-3.5 shrink-0 text-ink-4 group-hover:text-krow-blue" aria-hidden="true" />
    </button>
  );
}

/**
 * AssistantPanel — the Owliver workspace column the Admin layout renders.
 *
 * Owliver is part of the page on every supported route, so this is a column in
 * the layout rather than an overlay: the dashboard reflows beside it instead of
 * being covered, and collapsing restores the original layout exactly.
 *
 * Five structural details matter, and every one of them was a bug at some point:
 *
 * 1. Nothing above the sticky element clips. An ancestor with `overflow: hidden`
 *    becomes the nearest scroll container and silently disables
 *    `position: sticky` beneath it.
 * 2. The aside stretches to the shell's full height (`self-stretch`), so its
 *    sticky context runs the whole page rather than ending partway down and
 *    leaving empty space beside a long dashboard.
 * 3. `min-w-0` on the aside. A flex item's default `min-width: auto` refuses to
 *    go narrower than its content, so the track ignored its own width and stalled
 *    at the panel's old size on the way back from expanded.
 * 4. Only the track has a width. The panel fills what the track leaves after the
 *    handle and the lead padding, so the two can never disagree — which is
 *    exactly what (3) was: two widths transitioning, one winning.
 * 5. Collapsing removes the column outright and leaves a compact docked trigger.
 *    An earlier version kept a full-height rail in place, which bought the
 *    dashboard 44px when the user had asked for 400 — and spelled "Owliver" down
 *    the side of the page to do it.
 *
 * Expanding widens the same panel in place — an analysis workspace inside the
 * application layout, never a fullscreen takeover.
 */
export function AssistantPanel({ stickyClassName, panelHeightClassName }) {
  const {
    context, isOpen, isExpanded, width, minWidth, maxWidth,
    setWidth, resetWidth, open, close, expand, restore,
  } = useAssistantPanel();
  const viewportWidth = useViewportWidth();

  // No assistant on this route: no column, no rail, no trace in the layout.
  if (!context) return null;

  /* Expanded overrides the dragged width; otherwise the user's own width wins.
     Both are clamped against the viewport so the dashboard is never squeezed. */
  const viewportCap = Math.round(viewportWidth * MAX_VIEWPORT_SHARE);
  const panelWidth = isExpanded
    ? Math.max(width, Math.min(EXPANDED_WIDTH, viewportCap))
    : Math.min(width, Math.max(minWidth, viewportCap));

  /* Collapsed: no column at all. The layout falls back to a single column, `main`
     takes the whole shell, and the only thing left is the docked trigger — so
     there is never a reserved empty gutter where the panel used to be. */
  if (!isOpen) {
    return <CollapsedTrigger page={context.page} onRestore={open} />;
  }

  const trackWidth = panelWidth + GUTTER;

  /* Phones: stack Owliver under the dashboard. A 380px column beside the page is
     not a layout at this width, and an overlay that opens on load would put a
     sheet between the user and the page they asked for. */
  if (viewportWidth < STACK_BREAKPOINT) {
    return (
      <aside aria-label="Owliver workspace" className="pb-6 pt-2">
        <KrowAssistant
          key={context.id}
          context={context}
          expanded={false}
          onClose={close}
          onExpand={null}
          onRestore={null}
          className="h-[32rem]"
        />
      </aside>
    );
  }

  return (
    <aside
      aria-label="Owliver workspace"
      style={{ width: trackWidth }}
      /* No `overflow-hidden` here — see (1). `self-stretch` — see (2).
         `min-w-0` — see (3).

         A CSS transition rather than an animated width: the width is already a
         pure function of state, so there is nothing for an animation library to
         own, and the declarative version cannot get stranded mid-collapse the way
         an interrupted JS animation can. Reduced motion is handled globally in
         index.css. */
      className="relative min-w-0 shrink-0 self-stretch transition-[width] duration-slow ease-out"
    >
      <div className={cn('sticky flex', stickyClassName)}>
        {/* Drag handle. Sits in the gutter, so resizing never overlaps either
            surface. Double-click restores the default width. */}
        <ResizeDivider
          width={panelWidth}
          min={minWidth}
          max={Math.min(maxWidth, viewportCap)}
          onResize={setWidth}
          onDoubleClick={resetWidth}
          className={panelHeightClassName}
        />

        {/* The panel takes whatever the track leaves after the handle and the
            lead padding, which is `panelWidth` by construction — see (4). */}
        <div className="min-w-0 flex-1 pl-2">
          {/* Keyed on the context so switching pages gives a clean panel and
              aborts any response still streaming for the last one. */}
          <KrowAssistant
            key={context.id}
            context={context}
            expanded={isExpanded}
            onClose={close}
            onExpand={expand}
            onRestore={restore}
            className={panelHeightClassName}
          />
        </div>
      </div>
    </aside>
  );
}

export default AssistantPanel;