import { useState } from 'react';
import { Brain, ChevronUp } from 'lucide-react';
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer';
import { cn } from '@/lib/utils';
import { ReasoningPanel } from './ReasoningPanel';
import type { ReasoningPanelProps } from './ReasoningPanel';

const SNAP_POINTS = [0.4, 0.9];

export interface ReasoningDrawerProps extends ReasoningPanelProps {
  /** Controlled from the shell when it wants the drawer open on a step change. */
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerClassName?: string;
}

/**
 * The reasoning panel, for a phone.
 *
 * Below `lg` there is no room for a column beside the board, and putting the
 * reasoning under the board means the visitor watches the run with the thinking
 * off-screen. A drawer at 40% shows the first few lines without covering the
 * board; dragging to 90% is the "let me actually read this" gesture.
 *
 * Rendering is caller-gated rather than CSS-gated: mounting a vaul drawer on
 * desktop and hiding it with `lg:hidden` still locks body scroll when it opens,
 * so the shell mounts this only under `lg`.
 */
export function ReasoningDrawer({
  open,
  onOpenChange,
  triggerClassName,
  ...panel
}: ReasoningDrawerProps) {
  const [snap, setSnap] = useState<number | string | null>(SNAP_POINTS[0] ?? 0.4);
  const hasReasoning = (panel.reasoning ?? '').length > 0;

  return (
    <Drawer
      snapPoints={SNAP_POINTS}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      {...(open === undefined ? {} : { open })}
      {...(onOpenChange ? { onOpenChange } : {})}
    >
      <DrawerTrigger
        className={cn(
          'tap flex w-full items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-sm font-medium transition-colors duration-2 ease-enter hover:bg-surface-2',
          triggerClassName,
        )}
      >
        <Brain className="size-4 text-muted" aria-hidden="true" />
        <span>{hasReasoning ? 'Read the reasoning' : 'No reasoning on this step'}</span>
        <ChevronUp className="ml-auto size-4 text-muted" aria-hidden="true" />
      </DrawerTrigger>
      {/*
        `h-full max-h-[97%]` overrides the wrapper's `h-auto max-h-[88svh]`.
        Snap points size the sheet by translating a FIXED-height panel; on an
        auto-height one the 0.4 snap and the 0.9 snap look identical.
      */}
      <DrawerContent className="mx-auto h-full max-h-[97%] max-w-canvas">
        <DrawerHeader className="pb-2">
          <DrawerTitle className="text-sm">{panel.title ?? 'Reasoning'}</DrawerTitle>
          <DrawerDescription className="text-xs">
            Recorded verbatim from step {panel.stepIndex + 1} of this run.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerBody className="overflow-hidden">
          {/* The panel keeps its own reserved height inside the sheet so the
              sheet does not resize as the text streams under the drag. */}
          <ReasoningPanel {...panel} className="h-full border-0" reservedLines={14} />
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  );
}
