kandev/apps/web/components/task/document/document-panel.tsx

'use client';

import { memo, useEffect, useMemo, useState, useCallback } from 'react';
import { IconX, IconChevronDown, IconPlayerPlay, IconPlus } from '@tabler/icons-react';
import { TabsContent } from '@kandev/ui/tabs';
import { Button } from '@kandev/ui/button';
import { SessionPanel, SessionPanelContent } from '@kandev/ui/pannel-session';
import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@kandev/ui/dropdown-menu';
import { useAppStore } from '@/components/state-provider';
import { useLayoutStore } from '@/lib/state/layout-store';
// closeDocument kept for mobile/tablet backward compat
import { getWebSocketClient } from '@/lib/ws/connection';
import { useTask } from '@/hooks/use-task';
import { SessionTabs, type SessionTab } from '@/components/session-tabs';
import { TaskPlanPanel } from '../task-plan-panel';
import { TaskCreateDialog } from '@/components/task-create-dialog';
import type { ActiveDocument } from '@/lib/state/slices/ui/types';

type DocumentPanelProps = {
  sessionId: string | null;
};

export const DocumentPanel = memo(function DocumentPanel({ sessionId }: DocumentPanelProps) {
  const activeDocument = useAppStore((state) =>
    sessionId ? state.documentPanel.activeDocumentBySessionId[sessionId] ?? null : null
  );
  const setActiveDocument = useAppStore((state) => state.setActiveDocument);
  const closeDocument = useLayoutStore((state) => state.closeDocument);

  const handleClose = () => {
    if (!sessionId) return;
    closeDocument(sessionId);
    setActiveDocument(sessionId, null);
  };

  // Auto-close document layout when no document is active (e.g. stale localStorage)
  useEffect(() => {
    if (!activeDocument && sessionId) {
      closeDocument(sessionId);
    }
  }, [activeDocument, sessionId, closeDocument]);

  const tabs: SessionTab[] = useMemo(() => {
    if (!activeDocument) return [];
    if (activeDocument.type === 'plan') {
      return [{ id: 'plan', label: 'Plan' }];
    }
    return [{ id: 'file', label: activeDocument.name }];
  }, [activeDocument]);

  const activeTab = activeDocument?.type === 'plan' ? 'plan' : 'file';

  if (!activeDocument) {
    return null;
  }

  const isPlan = activeDocument.type === 'plan';

  const headerActions = (
    <div className="flex items-center gap-0.5">
      {isPlan && (
        <ImplementPlanDropdown sessionId={sessionId} onClose={handleClose} />
      )}
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon-sm"
            className="cursor-pointer"
            onClick={handleClose}
          >
            <IconX className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Close document panel</TooltipContent>
      </Tooltip>
    </div>
  );

  return (
    <SessionPanel borderSide="right" margin="right">
      <SessionTabs
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={() => { }}
        className="flex-1 min-h-0 flex flex-col gap-2"
        rightContent={headerActions}
      >
        <TabsContent value="plan" className="flex-1 min-h-0">
          <DocumentPlanContent />
        </TabsContent>
        <TabsContent value="file" className="flex-1 min-h-0">
          <DocumentFileContent doc={activeDocument} />
        </TabsContent>
      </SessionTabs>
    </SessionPanel>
  );
});

/** Dropdown button for implementing the plan */
const ImplementPlanDropdown = memo(function ImplementPlanDropdown({
  sessionId,
  onClose,
}: {
  sessionId: string | null;
  onClose: () => void;
}) {
  const taskId = useAppStore((state) => state.tasks.activeTaskId);
  const task = useTask(taskId);
  const plan = useAppStore((state) =>
    taskId ? state.taskPlans.byTaskId[taskId] ?? null : null
  );
  const [showNewSessionDialog, setShowNewSessionDialog] = useState(false);

  const handleImplement = useCallback(async () => {
    if (!taskId || !sessionId || !plan?.content) return;
    const client = getWebSocketClient();
    if (!client) return;

    // Close plan mode first
    onClose();

    // Send the plan as an implementation prompt (not in plan mode)
    try {
      await client.request(
        'message.add',
        {
          task_id: taskId,
          session_id: sessionId,
          content: `Implement the following plan:\n\n${plan.content}`,
        },
        10000
      );
    } catch (err) {
      console.error('Failed to send implement plan message:', err);
    }
  }, [taskId, sessionId, plan, onClose]);

  const handleImplementNewSession = useCallback(() => {
    // Close plan mode and open the new session dialog
    onClose();
    setShowNewSessionDialog(true);
  }, [onClose]);

  return (
    <>
      <div className="flex items-center">
        <Button
          variant="ghost"
          size="sm"
          className="h-6 gap-1 px-2 cursor-pointer text-xs hover:bg-muted/40"
          onClick={handleImplement}
          disabled={!plan?.content}
        >
          <IconPlayerPlay className="h-3 w-3" />
          Implement
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="h-6 w-5 p-0 cursor-pointer hover:bg-muted/40"
              disabled={!plan?.content}
            >
              <IconChevronDown className="h-3 w-3" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-64">
            <DropdownMenuItem onClick={handleImplementNewSession} className="cursor-pointer">
              <IconPlus className="h-4 w-4 mr-2 shrink-0 self-start mt-0.5" />
              <div>
                <div>Implement in a new session</div>
                <div className="text-[11px] text-muted-foreground font-normal">Starts fresh with a clean context window</div>
              </div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <TaskCreateDialog
        open={showNewSessionDialog}
        onOpenChange={setShowNewSessionDialog}
        mode="session"
        workspaceId={null}
        workflowId={null}
        defaultStepId={null}
        steps={[]}
        taskId={taskId}
        initialValues={{
          title: task?.title ?? '',
          description: plan?.content ? `Implement the following plan:\n\n${plan.content}` : '',
        }}
      />
    </>
  );
});

const DocumentPlanContent = memo(function DocumentPlanContent() {
  const activeTaskId = useAppStore((state) => state.tasks.activeTaskId);
  return <TaskPlanPanel taskId={activeTaskId} visible />;
});

const DocumentFileContent = memo(function DocumentFileContent({
  doc,
}: {
  doc: ActiveDocument;
}) {
  if (doc.type === 'plan') return null;

  return (
    <SessionPanelContent>
      <div className="flex h-full items-center justify-center text-muted-foreground text-sm">
        File viewer: {doc.path}
      </div>
    </SessionPanelContent>
  );
});