'use client';

import { useState } from 'react';
import { Sparkles, ChevronRight, ChevronLeft } from 'lucide-react';
import { CopilotPanel } from '@/components/copilot-panel';

interface CopilotRailProps {
  appointmentId: string;
  patientId: string;
  /** Seed list for the drug-interactions tab. */
  initialMedications?: string[];
}

/**
 * Collapsible right-rail wrapper around the existing CopilotPanel. Lets the
 * doctor reclaim screen space for the SOAP editor when the Co-Pilot isn't
 * actively in use.
 */
export function CopilotRail({
  appointmentId,
  patientId,
  initialMedications,
}: CopilotRailProps) {
  const [collapsed, setCollapsed] = useState(false);

  if (collapsed) {
    return (
      <button
        type="button"
        onClick={() => setCollapsed(false)}
        className="sticky top-24 flex w-10 flex-col items-center gap-2 rounded-l-lg border border-r-0 border-denseSurface-border bg-white px-2 py-3 text-coral-500 shadow-sm transition-colors hover:bg-denseSurface-bg"
        aria-label="Expand AI Co-Pilot"
      >
        <Sparkles className="h-4 w-4" />
        <span
          className="text-[10px] font-semibold uppercase tracking-wider text-ink-2"
          style={{ writingMode: 'vertical-rl' }}
        >
          Co-Pilot
        </span>
        <ChevronLeft className="h-3.5 w-3.5 text-ink-3" />
      </button>
    );
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setCollapsed(true)}
        className="absolute -left-3 top-4 z-10 inline-flex h-6 w-6 items-center justify-center rounded-full border border-denseSurface-border bg-white text-ink-2 shadow-sm transition-colors hover:bg-denseSurface-bg"
        aria-label="Collapse AI Co-Pilot"
      >
        <ChevronRight className="h-3.5 w-3.5" />
      </button>
      <CopilotPanel
        appointmentId={appointmentId}
        patientId={patientId}
        initialMedications={initialMedications}
      />
    </div>
  );
}