'use client';

import { useCallback, useRef, useState } from 'react';
import {
  History,
  PanelRightClose,
  PanelRightOpen,
  SquarePen,
  Trash2,
  UsersRound,
} from 'lucide-react';
import type { AssistantRuntime } from '@assistant-ui/react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/lib/utils';
import type { AgentEditSessionRecord } from '@/lib/agent/client/agent-edit-session-types';
import { useI18n } from '@/lib/hooks/use-i18n';
import { AgentPanel } from '@/components/edit/AgentPanel/AgentPanel';
import { AgentRosterPanel } from '@/components/edit/AgentsView/AgentRosterPanel';
import { shouldRenderAgentPanel } from '@/components/edit/agent-panel-visibility';

const MIN_WIDTH = 320;
const MAX_WIDTH = 640;
const DEFAULT_WIDTH = 384;

type RailTab = 'ai' | 'agents';

export interface RightRailTabsProps {
  readonly scene?: { id: string; title: string; type?: string };
  readonly runtime: AssistantRuntime;
  readonly clearThread: () => void;
  readonly hasMessages: boolean;
  readonly canSend: boolean;
  readonly agentEnabled: boolean;
  readonly isRunning: boolean;
  readonly sessions: AgentEditSessionRecord[];
  readonly activeSessionId: string | undefined;
  readonly switchSession: (id: string) => Promise<void>;
  readonly deleteSessionAndRefresh: (id: string) => Promise<void>;
  readonly refreshSessions: () => Promise<void>;
}

/**
 * Tabbed right rail: "Edit with AI" | "课堂阵容"
 *
 * Owns the aside wrapper, resize handle, collapse state, and tab state.
 * The AgentPanel is rendered in naked (no-wrapper) mode for the AI tab;
 * the 课堂阵容 tab renders AgentRosterPanel. Both are kept mounted so state
 * is preserved when switching tabs (hidden via CSS).
 *
 * The "Edit with AI" tab is gated by shouldRenderAgentPanel — when the current
 * scene type does not support AI editing, the tab is hidden and the active tab
 * falls back to 课堂阵容 (which is always available, as agents are stage-level).
 */
export function RightRailTabs({
  scene,
  runtime,
  clearThread,
  hasMessages,
  canSend,
  agentEnabled,
  isRunning,
  sessions,
  activeSessionId,
  switchSession,
  deleteSessionAndRefresh,
  refreshSessions,
}: RightRailTabsProps) {
  const { t } = useI18n();
  const showAiTab = shouldRenderAgentPanel({ agentEnabled, hasMessages, isRunning });
  const [activeTab, setActiveTab] = useState<RailTab>(() => (showAiTab ? 'ai' : 'agents'));

  // When the AI tab becomes unavailable (e.g. PBL scene), fall back to agents tab.
  // Render-time setState: React re-renders immediately before painting.
  if (!showAiTab && activeTab === 'ai') {
    setActiveTab('agents');
  }
  const [collapsed, setCollapsed] = useState(false);

  const railRef = useRef<HTMLElement>(null);
  const [width, setWidth] = useState(DEFAULT_WIDTH);
  const dragRef = useRef<{
    startX: number;
    startW: number;
    lastW: number;
    pointerId: number;
  } | null>(null);

  const onResizeStart = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      const startW = railRef.current?.getBoundingClientRect().width ?? width;
      dragRef.current = { startX: e.clientX, startW, lastW: startW, pointerId: e.pointerId };
      try {
        e.currentTarget.setPointerCapture(e.pointerId);
      } catch {
        /* best effort */
      }
      document.body.style.cursor = 'col-resize';
    },
    [width],
  );

  const onResizeMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    const d = dragRef.current;
    if (!d || e.pointerId !== d.pointerId) return;
    const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, d.startW + (d.startX - e.clientX)));
    d.lastW = next;
    if (railRef.current) railRef.current.style.width = `${next}px`;
  }, []);

  const onResizeEnd = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    const d = dragRef.current;
    if (!d || e.pointerId !== d.pointerId) return;
    try {
      e.currentTarget.releasePointerCapture(e.pointerId);
    } catch {
      /* may already be released */
    }
    setWidth(d.lastW);
    dragRef.current = null;
    document.body.style.cursor = '';
  }, []);

  if (collapsed) {
    return (
      <aside
        onClick={() => setCollapsed(false)}
        title={t('edit.agent.expand')}
        className="group/rail relative flex h-full w-11 shrink-0 cursor-pointer flex-col items-center gap-3 border-l border-gray-100 bg-white/80 pt-3 backdrop-blur-xl transition-colors hover:bg-violet-50/40 dark:border-gray-800 dark:bg-slate-900/80 dark:hover:bg-violet-500/5 shadow-[-2px_0_24px_rgba(0,0,0,0.02)]"
      >
        <span className="grid size-8 place-items-center rounded-lg text-[#5b1fa8] transition-colors group-hover/rail:bg-violet-100/70 dark:text-violet-300 dark:group-hover/rail:bg-violet-500/15">
          <PanelRightOpen className="size-4" />
        </span>
      </aside>
    );
  }

  const agentPanelProps = {
    scene,
    runtime,
    clearThread,
    hasMessages,
    canSend,
    sessions,
    activeSessionId,
    switchSession,
    deleteSessionAndRefresh,
    refreshSessions,
  };

  return (
    <aside
      ref={railRef}
      style={{ width }}
      className="relative flex h-full shrink-0 flex-col border-l border-gray-100 bg-white/80 backdrop-blur-xl dark:border-gray-800 dark:bg-slate-900/80 shadow-[-2px_0_24px_rgba(0,0,0,0.02)]"
    >
      {/* Resize handle */}
      <div
        onPointerDown={onResizeStart}
        onPointerMove={onResizeMove}
        onPointerUp={onResizeEnd}
        onPointerCancel={onResizeEnd}
        className="group absolute left-0 top-0 bottom-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors hover:bg-violet-400/30 active:bg-violet-500/50 dark:hover:bg-violet-500/30"
      >
        <div className="absolute left-0.5 top-1/2 h-8 w-0.5 -translate-y-1/2 rounded-full bg-gray-300 transition-colors group-hover:bg-violet-400 dark:bg-gray-600 dark:group-hover:bg-violet-500" />
      </div>

      {/* Tab strip — single header row, no nested header */}
      <div className="flex h-10 shrink-0 items-center gap-1 border-b border-gray-100 px-2 dark:border-gray-800">
        <div
          role="tablist"
          className="flex items-center gap-0.5 rounded-lg bg-zinc-100/80 p-0.5 dark:bg-zinc-800"
        >
          {showAiTab && (
            <RailTabButton
              label="Edit with AI"
              active={activeTab === 'ai'}
              onClick={() => setActiveTab('ai')}
            />
          )}
          <RailTabButton
            label="课堂阵容"
            icon={<UsersRound className="size-[15px]" />}
            active={activeTab === 'agents'}
            onClick={() => setActiveTab('agents')}
          />
        </div>

        {/* Spacer + conditional AI-tab actions */}
        <div className="flex flex-1 items-center justify-end gap-0.5">
          {activeTab === 'ai' && (
            <>
              <Popover onOpenChange={(open) => open && void refreshSessions()}>
                <PopoverTrigger asChild>
                  <button
                    type="button"
                    title={t('edit.agent.sessionHistory')}
                    aria-label={t('edit.agent.sessionHistory')}
                    className="grid size-7 place-items-center rounded-md text-muted-foreground/55 transition-colors hover:bg-muted hover:text-foreground"
                  >
                    <History className="size-4" />
                  </button>
                </PopoverTrigger>
                <PopoverContent align="end" className="w-72 p-1">
                  {sessions.length === 0 ? (
                    <p className="px-3 py-6 text-center text-xs text-muted-foreground">
                      {t('edit.agent.sessionEmpty')}
                    </p>
                  ) : (
                    <ul className="max-h-80 overflow-y-auto">
                      {sessions.map((s) => (
                        <li key={s.id} className="group flex items-center gap-1">
                          <button
                            type="button"
                            onClick={() => void switchSession(s.id)}
                            className={cn(
                              'flex-1 truncate rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted',
                              s.id === activeSessionId
                                ? 'bg-muted font-medium text-foreground'
                                : 'text-muted-foreground',
                            )}
                          >
                            {s.title || t('edit.agent.sessionUntitled')}
                          </button>
                          <button
                            type="button"
                            title={t('edit.agent.sessionDelete')}
                            aria-label={t('edit.agent.sessionDelete')}
                            onClick={() => void deleteSessionAndRefresh(s.id)}
                            className="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground/40 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
                          >
                            <Trash2 className="size-3.5" />
                          </button>
                        </li>
                      ))}
                    </ul>
                  )}
                </PopoverContent>
              </Popover>

              {hasMessages && (
                <button
                  type="button"
                  onClick={clearThread}
                  title={t('edit.agent.newConversation')}
                  aria-label={t('edit.agent.newConversation')}
                  className="grid size-7 place-items-center rounded-md text-muted-foreground/55 transition-colors hover:bg-muted hover:text-foreground"
                >
                  <SquarePen className="size-4" />
                </button>
              )}
            </>
          )}

          {/* Collapse button always visible */}
          <button
            type="button"
            onClick={() => setCollapsed(true)}
            title={t('edit.agent.collapse')}
            aria-label={t('edit.agent.collapse')}
            className="grid size-7 place-items-center rounded-md text-muted-foreground/55 transition-colors hover:bg-muted hover:text-foreground"
          >
            <PanelRightClose className="size-4" />
          </button>
        </div>
      </div>

      {/* Tab content — both mounted, non-active hidden via CSS for state preservation */}
      <div className={cn('flex flex-1 min-h-0 flex-col', activeTab !== 'ai' && 'hidden')}>
        <AgentPanel naked {...agentPanelProps} />
      </div>
      <div className={cn('flex flex-1 min-h-0 flex-col', activeTab !== 'agents' && 'hidden')}>
        <AgentRosterPanel />
      </div>
    </aside>
  );
}

function RailTabButton({
  label,
  icon,
  active,
  onClick,
}: {
  readonly label: string;
  readonly icon?: React.ReactNode;
  readonly active: boolean;
  readonly onClick: () => void;
}) {
  return (
    <button
      type="button"
      role="tab"
      aria-selected={active}
      onClick={onClick}
      className={cn(
        'flex items-center gap-1 rounded-md px-2.5 py-0.5 text-[11.5px] font-semibold transition-all',
        active
          ? 'bg-white text-zinc-900 shadow-sm dark:bg-zinc-700 dark:text-zinc-100'
          : 'text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200',
      )}
    >
      {icon}
      {label}
    </button>
  );
}