path: root/makima/frontend/src/routes/files.tsx

import { useState, useCallback, useEffect, useRef } from "react";
import { useParams, useNavigate } from "react-router";
import { Masthead } from "../components/Masthead";
import { FileList } from "../components/files/FileList";
import { FileDetail } from "../components/files/FileDetail";
import { CliInput } from "../components/files/CliInput";
import { ConflictNotification } from "../components/files/ConflictNotification";
import { UpdateNotification } from "../components/files/UpdateNotification";
import { useFiles } from "../hooks/useFiles";
import { useVersionHistory } from "../hooks/useVersionHistory";
import {
  useFileSubscription,
  type FileUpdateEvent,
} from "../hooks/useFileSubscription";
import type { FileDetail as FileDetailType, BodyElement } from "../lib/api";

export default function FilesPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { files, loading, error, conflict, clearConflict, fetchFile, editFile, removeFile, saveFile } = useFiles();
  const [fileDetail, setFileDetail] = useState<FileDetailType | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [creating, setCreating] = useState(false);
  const [remoteUpdate, setRemoteUpdate] = useState<FileUpdateEvent | null>(null);
  const [remoteFileData, setRemoteFileData] = useState<FileDetailType | null>(null);
  const pendingUpdateRef = useRef(false);
  // Track the last version we sent to detect our own updates
  const lastSentVersionRef = useRef<number | null>(null);
  // Track the version we just successfully saved (to ignore its WebSocket notification)
  const lastSavedVersionRef = useRef<number | null>(null);
  // Use refs for values checked in WebSocket callback to avoid stale closures
  const hasLocalChangesRef = useRef(false);
  const isActivelyEditingRef = useRef(false);
  const currentVersionRef = useRef<number | null>(null);

  // Helper functions to update refs (used only in callbacks, not for rendering)
  const updateHasLocalChanges = useCallback((value: boolean) => {
    hasLocalChangesRef.current = value;
  }, []);

  const updateIsActivelyEditing = useCallback((value: boolean) => {
    isActivelyEditingRef.current = value;
  }, []);

  // Version history
  const {
    versions,
    loading: versionsLoading,
    selectedVersion,
    loadingVersion,
    restoring,
    fetchVersion,
    restoreToVersion,
    clearSelectedVersion,
    fetchVersions,
  } = useVersionHistory({
    fileId: id || null,
    currentVersion: fileDetail?.version || 0,
  });

  // Handle version restore
  const handleRestoreVersion = useCallback(
    async (targetVersion: number) => {
      const result = await restoreToVersion(targetVersion);
      if (result) {
        currentVersionRef.current = result.version;
        setFileDetail(result);
        updateHasLocalChanges(false);
        // Refresh version list after restore
        fetchVersions();
      }
    },
    [restoreToVersion, fetchVersions, updateHasLocalChanges]
  );

  // Load file detail when URL has an id
  useEffect(() => {
    if (id) {
      setDetailLoading(true);
      updateHasLocalChanges(false);
      // Reset pending update tracking when switching files
      pendingUpdateRef.current = false;
      lastSentVersionRef.current = null;
      lastSavedVersionRef.current = null;
      currentVersionRef.current = null;
      setRemoteUpdate(null);
      setRemoteFileData(null);
      fetchFile(id).then((detail) => {
        if (detail) {
          currentVersionRef.current = detail.version;
        }
        setFileDetail(detail);
        setDetailLoading(false);
      });
    } else {
      setFileDetail(null);
      currentVersionRef.current = null;
      updateHasLocalChanges(false);
    }
  }, [id, fetchFile, updateHasLocalChanges]);

  // Handle file update events from WebSocket
  const handleFileUpdate = useCallback(
    async (event: FileUpdateEvent) => {
      // Check if this is a version we just saved - ignore it
      // This handles the case where the WebSocket arrives after the HTTP response
      if (lastSavedVersionRef.current !== null && event.version === lastSavedVersionRef.current) {
        lastSavedVersionRef.current = null;
        return;
      }

      // If we have a pending update, check if this is our own update
      if (pendingUpdateRef.current) {
        if (lastSentVersionRef.current !== null) {
          const expectedNewVersion = lastSentVersionRef.current + 1;
          if (event.version === expectedNewVersion) {
            // This is our own update - ignore it
            pendingUpdateRef.current = false;
            lastSentVersionRef.current = null;
            return;
          }
        }
        // We sent an update but received a different version - could be a race condition
        // Still ignore since we have an update in flight
        return;
      }

      // Check if this version matches what we already have
      // This catches cases where our save's WebSocket arrives late
      if (currentVersionRef.current !== null && event.version === currentVersionRef.current) {
        return;
      }

      // If no local changes and not actively editing, auto-refresh
      // Use refs to get current values (avoid stale closure issues)
      if (!hasLocalChangesRef.current && !isActivelyEditingRef.current) {
        const detail = await fetchFile(event.fileId);
        if (detail) {
          currentVersionRef.current = detail.version;
        }
        setFileDetail(detail);
      } else {
        // Fetch remote version for diff display
        const remoteData = await fetchFile(event.fileId);
        setRemoteFileData(remoteData);
        // Show notification about remote update
        setRemoteUpdate(event);
      }
    },
    [fetchFile]
  );

  // Subscribe to file updates
  useFileSubscription({
    fileId: id || null,
    onUpdate: handleFileUpdate,
  });

  const handleSelectFile = useCallback(
    (fileId: string) => {
      navigate(`/files/${fileId}`);
    },
    [navigate]
  );

  const handleBack = useCallback(() => {
    navigate("/files");
  }, [navigate]);

  const handleDelete = useCallback(
    async (fileId: string) => {
      if (confirm("Are you sure you want to delete this file?")) {
        const success = await removeFile(fileId);
        if (success && id === fileId) {
          navigate("/files");
        }
      }
    },
    [removeFile, id, navigate]
  );

  const handleSave = useCallback(
    async (fileId: string, name: string, description: string) => {
      if (!fileDetail) return;
      pendingUpdateRef.current = true;
      lastSentVersionRef.current = fileDetail.version;
      try {
        const result = await editFile(fileId, { name, description, version: fileDetail.version });
        if (result) {
          // Track the saved version to ignore its WebSocket notification
          lastSavedVersionRef.current = result.version;
          currentVersionRef.current = result.version;
          setFileDetail(result);
          updateHasLocalChanges(false);
        }
      } finally {
        pendingUpdateRef.current = false;
        lastSentVersionRef.current = null;
      }
    },
    [editFile, fileDetail, updateHasLocalChanges]
  );

  const handleBodyUpdate = useCallback(
    (body: BodyElement[], summary: string | null) => {
      if (fileDetail) {
        setFileDetail({
          ...fileDetail,
          body,
          summary,
        });
      }
    },
    [fileDetail]
  );

  const handleBodyElementUpdate = useCallback(
    async (index: number, element: BodyElement) => {
      if (fileDetail && id) {
        // Create new body array with updated element
        const newBody = [...fileDetail.body];
        newBody[index] = element;

        // Update local state immediately for responsiveness
        setFileDetail({
          ...fileDetail,
          body: newBody,
        });
        updateHasLocalChanges(true);

        // Save to backend with version for optimistic locking
        pendingUpdateRef.current = true;
        lastSentVersionRef.current = fileDetail.version;
        try {
          const result = await editFile(id, { body: newBody, version: fileDetail.version });
          if (result) {
            // Track the saved version to ignore its WebSocket notification
            lastSavedVersionRef.current = result.version;
            currentVersionRef.current = result.version;
            setFileDetail(result);
            updateHasLocalChanges(false);
          }
        } finally {
          pendingUpdateRef.current = false;
          lastSentVersionRef.current = null;
        }
      }
    },
    [fileDetail, id, editFile, updateHasLocalChanges]
  );

  const handleBodyReorder = useCallback(
    async (fromIndex: number, toIndex: number) => {
      if (fileDetail && id) {
        // Create new body array with reordered elements
        const newBody = [...fileDetail.body];
        const [movedElement] = newBody.splice(fromIndex, 1);
        newBody.splice(toIndex, 0, movedElement);

        // Update local state immediately for responsiveness
        setFileDetail({
          ...fileDetail,
          body: newBody,
        });
        updateHasLocalChanges(true);

        // Save to backend with version for optimistic locking
        pendingUpdateRef.current = true;
        lastSentVersionRef.current = fileDetail.version;
        try {
          const result = await editFile(id, { body: newBody, version: fileDetail.version });
          if (result) {
            // Track the saved version to ignore its WebSocket notification
            lastSavedVersionRef.current = result.version;
            currentVersionRef.current = result.version;
            setFileDetail(result);
            updateHasLocalChanges(false);
          }
        } finally {
          pendingUpdateRef.current = false;
          lastSentVersionRef.current = null;
        }
      }
    },
    [fileDetail, id, editFile, updateHasLocalChanges]
  );

  const handleCreate = useCallback(async () => {
    if (creating) return;
    setCreating(true);
    try {
      const newFile = await saveFile({
        name: `Untitled ${new Date().toLocaleDateString()}`,
        transcript: [],
      });
      if (newFile) {
        navigate(`/files/${newFile.id}`);
      }
    } finally {
      setCreating(false);
    }
  }, [creating, saveFile, navigate]);

  // Conflict resolution handlers
  const handleConflictReload = useCallback(async () => {
    if (id) {
      clearConflict();
      const detail = await fetchFile(id);
      if (detail) {
        currentVersionRef.current = detail.version;
      }
      setFileDetail(detail);
      updateHasLocalChanges(false);
    }
  }, [id, clearConflict, fetchFile, updateHasLocalChanges]);

  const handleConflictForceOverwrite = useCallback(async () => {
    if (id && fileDetail) {
      clearConflict();
      // Fetch latest version first
      const latest = await fetchFile(id);
      if (latest) {
        // Retry with latest version
        pendingUpdateRef.current = true;
        lastSentVersionRef.current = latest.version;
        try {
          const result = await editFile(id, { body: fileDetail.body, version: latest.version });
          if (result) {
            // Track the saved version to ignore its WebSocket notification
            lastSavedVersionRef.current = result.version;
            currentVersionRef.current = result.version;
            setFileDetail(result);
            updateHasLocalChanges(false);
          }
        } finally {
          pendingUpdateRef.current = false;
          lastSentVersionRef.current = null;
        }
      }
    }
  }, [id, fileDetail, clearConflict, fetchFile, editFile, updateHasLocalChanges]);

  // Remote update handlers
  const handleRemoteUpdateRefresh = useCallback(async () => {
    if (id) {
      const detail = await fetchFile(id);
      if (detail) {
        currentVersionRef.current = detail.version;
      }
      setFileDetail(detail);
      setRemoteUpdate(null);
      setRemoteFileData(null);
      updateHasLocalChanges(false);
    }
  }, [id, fetchFile, updateHasLocalChanges]);

  const handleRemoteUpdateDismiss = useCallback(() => {
    setRemoteUpdate(null);
    setRemoteFileData(null);
  }, []);

  return (
    <div className="relative z-10 h-screen flex flex-col overflow-hidden">
      <Masthead showTicker={false} showNav />

      <main className="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
        {error && (
          <div className="mb-4 p-3 border border-red-400/50 bg-red-400/10 text-red-400 font-mono text-sm shrink-0">
            {error}
          </div>
        )}

        {id && fileDetail ? (
          <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
            <div className="flex-1 min-h-0 overflow-hidden">
              <FileDetail
                file={fileDetail}
                loading={detailLoading}
                onBack={handleBack}
                onSave={handleSave}
                onDelete={handleDelete}
                onBodyElementUpdate={handleBodyElementUpdate}
                onBodyReorder={handleBodyReorder}
                onEditingChange={updateIsActivelyEditing}
                hasPendingRemoteUpdate={!!remoteUpdate}
                onOverwrite={handleRemoteUpdateDismiss}
                versions={versions}
                versionsLoading={versionsLoading}
                selectedVersion={selectedVersion}
                loadingVersion={loadingVersion}
                restoring={restoring}
                onSelectVersion={fetchVersion}
                onRestoreVersion={handleRestoreVersion}
                onClearVersionSelection={clearSelectedVersion}
              />
            </div>
            <div className="shrink-0">
              <CliInput fileId={id} onUpdate={handleBodyUpdate} />
            </div>
          </div>
        ) : id && detailLoading ? (
          <div className="panel h-full flex items-center justify-center">
            <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
          </div>
        ) : (
          <FileList
            files={files}
            loading={loading || creating}
            onSelect={handleSelectFile}
            onDelete={handleDelete}
            onCreate={handleCreate}
          />
        )}
      </main>

      {/* Conflict notification */}
      {conflict?.hasConflict && (
        <ConflictNotification
          onReload={handleConflictReload}
          onForceOverwrite={handleConflictForceOverwrite}
          onDismiss={clearConflict}
        />
      )}

      {/* Remote update notification */}
      {remoteUpdate && (
        <UpdateNotification
          updatedBy={remoteUpdate.updatedBy}
          localBody={fileDetail?.body || []}
          remoteBody={remoteFileData?.body || []}
          onRefresh={handleRemoteUpdateRefresh}
          onDismiss={handleRemoteUpdateDismiss}
        />
      )}
    </div>
  );
}