'use client';

import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useMutation, useQuery } from 'convex/react';
import { FileCode, GitCompare, MessagesSquare } from 'lucide-react';
import { toast } from 'sonner';

import type { Id } from '@spoon/backend/convex/_generated/dataModel.js';
import { api } from '@spoon/backend/convex/_generated/api.js';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@spoon/ui';

import type { DiffResponse, FileResponse, FileTreeNode } from './types';
import { AgentThread } from './agent-thread';
import { CodeEditor } from './code-editor';
import { CommandPanel } from './command-panel';
import { DiffViewer } from './diff-viewer';
import { FileTabs } from './file-tabs';
import { FileTree } from './file-tree';
import { JobStatusBar } from './job-status-bar';
import { WorkspaceActions } from './workspace-actions';

type OpenFileState = {
  path: string;
  content: string;
  savedContent: string;
  loading: boolean;
  saving: boolean;
  error?: string;
};

type PendingOverwrite = {
  path: string;
  content: string;
};

export const AgentWorkspaceShell = ({ jobId }: { jobId: Id<'agentJobs'> }) => {
  const job = useQuery(api.agentJobs.get, { jobId });
  const messages =
    useQuery(api.agentJobs.listMessages, { jobId, limit: 200 }) ?? [];
  const events =
    useQuery(api.agentJobs.listEvents, { jobId, limit: 200 }) ?? [];
  const workspaceChanges =
    useQuery(api.agentJobs.listWorkspaceChanges, { jobId, limit: 200 }) ?? [];
  const interactions =
    useQuery(api.agentJobs.listInteractionRequests, {
      jobId,
      status: 'all',
    }) ?? [];
  const uiState = useQuery(api.agentJobs.getWorkspaceUiState, { jobId });
  const patchUiState = useMutation(api.agentJobs.patchWorkspaceUiState);
  const createJobForThread = useMutation(api.agentJobs.createForThread);
  const deleteWorkspace = useMutation(api.agentJobs.deleteWorkspace);
  const markWorkspaceLost = useMutation(api.agentJobs.markWorkspaceLost);
  const [tree, setTree] = useState<FileTreeNode | null>(null);
  const [files, setFiles] = useState<Record<string, OpenFileState>>({});
  const [openFilePaths, setOpenFilePaths] = useState<string[]>([]);
  const [activeFilePath, setActiveFilePath] = useState<string>();
  const [expandedDirectoryPaths, setExpandedDirectoryPaths] = useState<
    string[]
  >([]);
  const [agentThreadWidth, setAgentThreadWidth] = useState(420);
  const [vimEnabled, setVimEnabled] = useState(false);
  const [hydratedUiState, setHydratedUiState] = useState(false);
  const [diff, setDiff] = useState('');
  const [focusedDiffPath, setFocusedDiffPath] = useState<string>();
  const [workspaceError, setWorkspaceError] = useState<string>();
  const [agentTurnActive, setAgentTurnActive] = useState(false);
  const [activeWorkspaceTab, setActiveWorkspaceTab] = useState<
    'editor' | 'diff' | 'thread'
  >('editor');
  const [pendingOverwrite, setPendingOverwrite] = useState<PendingOverwrite>();
  const [pendingClosePath, setPendingClosePath] = useState<string>();

  const workspaceDisabled =
    !job ||
    ['draft_pr_opened', 'failed', 'cancelled', 'timed_out'].includes(
      job.status,
    ) ||
    ['stopped', 'expired', 'failed'].includes(job.workspaceStatus ?? '');

  const loadTree = useCallback(async () => {
    const response = await fetch(`/api/agent-jobs/${jobId}/tree`);
    if (!response.ok) throw new Error(await response.text());
    const data = (await response.json()) as { tree: FileTreeNode | null };
    setWorkspaceError(undefined);
    setTree(data.tree);
  }, [jobId]);

  const loadDiff = useCallback(async () => {
    const response = await fetch(`/api/agent-jobs/${jobId}/diff`);
    if (!response.ok) throw new Error(await response.text());
    const data = (await response.json()) as DiffResponse;
    setWorkspaceError(undefined);
    setDiff(data.diff);
  }, [jobId]);

  const loadAgentStatus = useCallback(async () => {
    const response = await fetch(`/api/agent-jobs/${jobId}/agent/status`);
    if (!response.ok) {
      setAgentTurnActive(false);
      return;
    }
    const data = (await response.json()) as { active?: boolean };
    setAgentTurnActive(Boolean(data.active));
  }, [jobId]);

  const loadFile = useCallback(
    async (path: string) => {
      setFiles((current) => ({
        ...current,
        [path]: current[path] ?? {
          path,
          content: '',
          savedContent: '',
          loading: true,
          saving: false,
        },
      }));
      const response = await fetch(
        `/api/agent-jobs/${jobId}/file?path=${encodeURIComponent(path)}`,
      );
      if (!response.ok) throw new Error(await response.text());
      const data = (await response.json()) as FileResponse;
      setFiles((current) => ({
        ...current,
        [data.path]: {
          path: data.path,
          content: data.content,
          savedContent: data.content,
          loading: false,
          saving: false,
        },
      }));
    },
    [jobId],
  );

  const openFile = useCallback(
    (path: string) => {
      setOpenFilePaths((current) =>
        current.includes(path) ? current : [...current, path],
      );
      setActiveFilePath(path);
      if (!files[path]) {
        void loadFile(path).catch((error) => {
          console.error(error);
          setFiles((current) => {
            const next = { ...current };
            delete next[path];
            return next;
          });
          setOpenFilePaths((current) =>
            current.filter((filePath) => filePath !== path),
          );
          toast.error('Could not load file.');
        });
      }
    },
    [files, loadFile],
  );

  useEffect(() => {
    if (!job) return;
    const timeout = window.setTimeout(() => {
      void loadTree().catch((error: unknown) => {
        console.error(error);
        setWorkspaceError(
          error instanceof Error ? error.message : String(error),
        );
      });
      void loadDiff().catch((error: unknown) => {
        console.error(error);
        setWorkspaceError(
          error instanceof Error ? error.message : String(error),
        );
      });
      void loadAgentStatus();
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [job, loadAgentStatus, loadDiff, loadTree]);

  useEffect(() => {
    const interval = window.setInterval(() => {
      void loadAgentStatus();
    }, 5_000);
    return () => window.clearInterval(interval);
  }, [loadAgentStatus]);

  useEffect(() => {
    if (!uiState || hydratedUiState) return;
    const timeout = window.setTimeout(() => {
      setOpenFilePaths(uiState.openFilePaths);
      setActiveFilePath(uiState.activeFilePath);
      setExpandedDirectoryPaths(uiState.expandedDirectoryPaths);
      setAgentThreadWidth(uiState.agentThreadWidth ?? 420);
      setVimEnabled(uiState.vimEnabled);
      setHydratedUiState(true);
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [hydratedUiState, uiState]);

  useEffect(() => {
    if (!hydratedUiState) return;
    const timeout = window.setTimeout(() => {
      void patchUiState({
        jobId,
        openFilePaths,
        activeFilePath,
        vimEnabled,
        expandedDirectoryPaths,
        agentThreadWidth,
      }).catch((error: unknown) => {
        console.error(error);
      });
    }, 400);
    return () => window.clearTimeout(timeout);
  }, [
    activeFilePath,
    expandedDirectoryPaths,
    agentThreadWidth,
    hydratedUiState,
    jobId,
    openFilePaths,
    patchUiState,
    vimEnabled,
  ]);

  useEffect(() => {
    if (!hydratedUiState) return;
    const timeout = window.setTimeout(() => {
      for (const path of openFilePaths) {
        if (!files[path]) {
          void loadFile(path).catch((error) => {
            console.error(error);
          });
        }
      }
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [files, hydratedUiState, loadFile, openFilePaths]);

  if (job === undefined) {
    return (
      <main className='text-muted-foreground p-6'>Loading workspace...</main>
    );
  }

  const activeFile = activeFilePath ? files[activeFilePath] : undefined;
  const recoverWorkspace = async () => {
    if (!job.threadId) return;
    await createJobForThread({
      threadId: job.threadId,
      jobType: job.jobType ?? 'user_change',
    });
    window.location.href = `/threads/${job.threadId}`;
  };

  const deleteStaleWorkspace = async () => {
    await markWorkspaceLost({ jobId });
    await deleteWorkspace({ jobId });
    window.location.href = job.threadId
      ? `/threads/${job.threadId}`
      : `/spoons/${job.spoonId}`;
  };

  const writeFileContent = async (path: string, content: string) => {
    setFiles((current) => ({
      ...current,
      [path]: {
        ...(current[path] ?? {
          path,
          savedContent: '',
          loading: false,
        }),
        content,
        saving: true,
      },
    }));
    const response = await fetch(`/api/agent-jobs/${jobId}/file`, {
      method: 'PUT',
      body: JSON.stringify({ path, content }),
    });
    if (!response.ok) {
      toast.error('Could not save file.');
      setFiles((current) => ({
        ...current,
        [path]: {
          ...(current[path] ?? {
            path,
            content,
            savedContent: '',
            loading: false,
          }),
          saving: false,
        },
      }));
      throw new Error(await response.text());
    }
    setFiles((current) => ({
      ...current,
      [path]: {
        ...(current[path] ?? {
          path,
          loading: false,
        }),
        content,
        savedContent: content,
        saving: false,
      },
    }));
    await loadDiff();
    toast.success('File saved.');
  };

  const saveFile = async (content: string) => {
    if (!activeFilePath) return;
    const path = activeFilePath;
    const activeFileBeforeSave = files[path];
    if (activeFileBeforeSave) {
      const latestResponse = await fetch(
        `/api/agent-jobs/${jobId}/file?path=${encodeURIComponent(path)}`,
      );
      if (latestResponse.ok) {
        const latestData = (await latestResponse.json()) as FileResponse;
        if (latestData.content !== activeFileBeforeSave.savedContent) {
          setPendingOverwrite({
            path,
            content,
          });
          return;
        }
      }
    }
    await writeFileContent(path, content);
  };

  const closeFileUnchecked = (path: string) => {
    const index = openFilePaths.indexOf(path);
    const nextOpen = openFilePaths.filter((filePath) => filePath !== path);
    setOpenFilePaths(nextOpen);
    setFiles((current) => {
      const next = { ...current };
      delete next[path];
      return next;
    });
    if (activeFilePath === path) {
      setActiveFilePath(nextOpen[index - 1] ?? nextOpen[index] ?? undefined);
    }
  };

  const closeFile = (path: string) => {
    const file = files[path];
    if (file && file.content !== file.savedContent) {
      setPendingClosePath(path);
      return;
    }
    closeFileUnchecked(path);
  };

  const toggleDirectory = (path: string) => {
    setExpandedDirectoryPaths((current) =>
      current.includes(path)
        ? current.filter((directoryPath) => directoryPath !== path)
        : [...current, path],
    );
  };

  const openFileFromActivity = (path: string) => {
    openFile(path);
    setActiveWorkspaceTab('editor');
  };

  const openDiffFromActivity = (path: string) => {
    setFocusedDiffPath(path);
    setActiveWorkspaceTab('diff');
  };

  const resizeAgentThread = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.preventDefault();
    const startX = event.clientX;
    const startWidth = agentThreadWidth;
    const move = (moveEvent: PointerEvent) => {
      const nextWidth = Math.min(
        Math.max(startWidth - (moveEvent.clientX - startX), 320),
        720,
      );
      setAgentThreadWidth(Math.round(nextWidth));
    };
    const up = () => {
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', up);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  };

  return (
    <main className='border-border bg-muted/20 flex h-[calc(100vh-8.5rem)] min-h-[720px] flex-col overflow-hidden rounded-md border'>
      <JobStatusBar job={job} />
      {workspaceError ? (
        <div className='border-border bg-background border-b p-4'>
          <div className='border-destructive/40 bg-destructive/5 rounded-md border p-4'>
            <p className='font-medium'>Thread workspace needs recovery</p>
            <p className='text-muted-foreground mt-1 text-sm'>
              The saved workspace record exists, but this worker cannot reach
              its active runtime. This usually happens after a worker restart or
              local container cleanup.
            </p>
            <p className='text-muted-foreground mt-2 text-xs break-all'>
              {workspaceError}
            </p>
            <div className='mt-3 flex flex-wrap gap-2'>
              {job.threadId ? (
                <Button type='button' onClick={() => void recoverWorkspace()}>
                  Start a fresh run
                </Button>
              ) : null}
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button type='button' variant='outline'>
                    Delete stale record
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>
                      Delete this stale workspace record?
                    </AlertDialogTitle>
                    <AlertDialogDescription>
                      This marks the unreachable workspace as failed and removes
                      its stored messages, events, artifacts, diffs, and UI
                      state. The thread itself is kept.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Keep record</AlertDialogCancel>
                    <AlertDialogAction
                      variant='destructive'
                      onClick={() => void deleteStaleWorkspace()}
                    >
                      Delete stale record
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
              {job.threadId ? (
                <Button type='button' variant='outline' asChild>
                  <a href={`/threads/${job.threadId}`}>Open thread</a>
                </Button>
              ) : null}
            </div>
          </div>
        </div>
      ) : null}
      <div className='border-border bg-background flex items-center justify-end border-b px-4 py-2'>
        <WorkspaceActions job={job} disabled={workspaceDisabled} />
      </div>
      <div
        className='grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] 2xl:grid-cols-[300px_minmax(0,1fr)_6px_var(--agent-thread-width)]'
        style={
          {
            '--agent-thread-width': `${agentThreadWidth}px`,
          } as CSSProperties
        }
      >
        <aside className='border-border bg-background min-h-0 border-r'>
          <div className='border-border border-b p-3'>
            <h2 className='text-sm font-semibold'>Files</h2>
            <p className='text-muted-foreground text-xs'>Current workspace</p>
          </div>
          <FileTree
            tree={tree}
            selectedPath={activeFilePath}
            expandedPaths={expandedDirectoryPaths}
            onSelect={openFile}
            onToggleDirectory={toggleDirectory}
          />
        </aside>
        <section className='bg-background flex min-w-0 flex-col overflow-hidden'>
          <Tabs
            value={activeWorkspaceTab}
            onValueChange={(value) =>
              setActiveWorkspaceTab(value as 'editor' | 'diff' | 'thread')
            }
            className='flex min-h-0 flex-1 flex-col'
          >
            <TabsList className='border-border bg-muted/30 h-12 flex-none justify-start rounded-none border-b px-3'>
              <TabsTrigger
                value='editor'
                className='data-active:bg-background data-active:text-foreground data-active:shadow-sm'
              >
                <FileCode className='size-4' />
                Editor
              </TabsTrigger>
              <TabsTrigger
                value='diff'
                className='data-active:bg-background data-active:text-foreground data-active:shadow-sm'
              >
                <GitCompare className='size-4' />
                Diff viewer
              </TabsTrigger>
              <TabsTrigger
                value='thread'
                className='data-active:bg-background data-active:text-foreground data-active:shadow-sm 2xl:hidden'
              >
                <MessagesSquare className='size-4' />
                Thread
              </TabsTrigger>
            </TabsList>
            <TabsContent
              value='editor'
              className='m-0 flex min-h-0 flex-1 flex-col'
            >
              <FileTabs
                tabs={openFilePaths.map((path) => ({
                  path,
                  dirty: files[path]
                    ? files[path].content !== files[path].savedContent
                    : false,
                }))}
                activePath={activeFilePath}
                onActivate={setActiveFilePath}
                onClose={closeFile}
              />
              <CodeEditor
                path={activeFilePath}
                content={activeFile?.content ?? ''}
                savedContent={activeFile?.savedContent ?? ''}
                readOnly={workspaceDisabled}
                vimEnabled={vimEnabled}
                onSave={saveFile}
                onVimEnabledChange={setVimEnabled}
                onChange={(content) => {
                  if (!activeFilePath) return;
                  setFiles((current) => ({
                    ...current,
                    [activeFilePath]: {
                      ...(current[activeFilePath] ?? {
                        path: activeFilePath,
                        savedContent: '',
                        loading: false,
                        saving: false,
                      }),
                      content,
                    },
                  }));
                }}
              />
            </TabsContent>
            <TabsContent value='diff' className='m-0 min-h-0 flex-1'>
              <DiffViewer
                diff={diff}
                focusedPath={focusedDiffPath}
                onRefresh={loadDiff}
                onClearFocusedPath={() => setFocusedDiffPath(undefined)}
              />
            </TabsContent>
            <TabsContent
              value='thread'
              className='m-0 min-h-0 flex-1 overflow-hidden 2xl:hidden'
            >
              <AgentThread
                jobId={jobId}
                messages={messages}
                events={events}
                interactions={interactions}
                workspaceChanges={workspaceChanges}
                disabled={workspaceDisabled}
                agentTurnActive={agentTurnActive}
                onOpenFile={openFileFromActivity}
                onOpenDiff={openDiffFromActivity}
              />
            </TabsContent>
          </Tabs>
          <CommandPanel jobId={jobId} disabled={workspaceDisabled} />
        </section>
        <div
          role='separator'
          aria-label='Resize agent thread'
          aria-orientation='vertical'
          className='bg-border hover:bg-primary/50 hidden cursor-col-resize transition-colors 2xl:block'
          onPointerDown={resizeAgentThread}
        />
        <aside className='border-border bg-muted/20 hidden min-h-0 min-w-0 overflow-hidden border-l 2xl:block'>
          <AgentThread
            jobId={jobId}
            messages={messages}
            events={events}
            interactions={interactions}
            workspaceChanges={workspaceChanges}
            disabled={workspaceDisabled}
            agentTurnActive={agentTurnActive}
            onOpenFile={openFileFromActivity}
            onOpenDiff={openDiffFromActivity}
          />
        </aside>
      </div>
      <AlertDialog
        open={Boolean(pendingOverwrite)}
        onOpenChange={(open) => {
          if (!open) setPendingOverwrite(undefined);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Overwrite newer workspace changes?
            </AlertDialogTitle>
            <AlertDialogDescription>
              {pendingOverwrite?.path} changed after you opened it. Overwriting
              will replace the newer workspace contents with your editor
              contents.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Keep editing</AlertDialogCancel>
            <AlertDialogAction
              variant='destructive'
              onClick={() => {
                const pending = pendingOverwrite;
                setPendingOverwrite(undefined);
                if (pending) {
                  void writeFileContent(pending.path, pending.content);
                }
              }}
            >
              Overwrite file
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <AlertDialog
        open={Boolean(pendingClosePath)}
        onOpenChange={(open) => {
          if (!open) setPendingClosePath(undefined);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
            <AlertDialogDescription>
              {pendingClosePath} has unsaved changes. Closing this tab will
              discard the editor contents that have not been saved.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Keep tab open</AlertDialogCancel>
            <AlertDialogAction
              variant='destructive'
              onClick={() => {
                const path = pendingClosePath;
                setPendingClosePath(undefined);
                if (path) closeFileUnchecked(path);
              }}
            >
              Discard and close
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </main>
  );
};