"use client";

import { useState, useCallback, useEffect } from "react";
import { FileTree } from "@/components/FileTree";
import { CodeEditor } from "@/components/CodeEditor";
import {
  subscribeToCodeNavigation,
  type CodeNavigationTarget,
} from "@/lib/workbench-navigation";

interface FileEntry {
  path: string;
  name: string;
  content: string;
  language: string;
}

export function CodeView() {
  const [selectedFile, setSelectedFile] = useState<FileEntry | null>(null);
  const [selectedLine, setSelectedLine] = useState<number | undefined>(undefined);
  const [repositoryId, setRepositoryId] = useState<string | null>(() => {
    if (typeof window === "undefined") return null;
    return window.localStorage.getItem("activeRepositoryId");
  });

  const handleSelectFile = useCallback((file: FileEntry) => {
    setSelectedFile(file);
    setSelectedLine(undefined);
  }, []);

  const readFile = useCallback(
    async (targetRepositoryId: string, path: string): Promise<FileEntry> => {
      const res = await fetch("/api/files/read", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ repository_id: targetRepositoryId, path }),
      });

      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data?.error || "Failed to read file");
      }

      const data = await res.json();
      return {
        path: data.path,
        name: data.path.split("/").pop() || data.path,
        content: data.content,
        language: data.language,
      };
    },
    [],
  );

  useEffect(() => {
    const syncRepositoryId = () => {
      setRepositoryId(window.localStorage.getItem("activeRepositoryId"));
    };
    syncRepositoryId();
    window.addEventListener("storage", syncRepositoryId);
    const interval = window.setInterval(syncRepositoryId, 1000);
    return () => {
      window.removeEventListener("storage", syncRepositoryId);
      window.clearInterval(interval);
    };
  }, []);

  useEffect(() => {
    setSelectedFile(null);
    setSelectedLine(undefined);
  }, [repositoryId]);

  useEffect(() => {
    return subscribeToCodeNavigation(async (target: CodeNavigationTarget) => {
      const nextRepositoryId = target.repositoryId || window.localStorage.getItem("activeRepositoryId");
      if (!nextRepositoryId) {
        return;
      }

      if (target.repositoryId && target.repositoryId !== repositoryId) {
        window.localStorage.setItem("activeRepositoryId", target.repositoryId);
        setRepositoryId(target.repositoryId);
      }

      try {
        const file = await readFile(nextRepositoryId, target.path);
        setSelectedFile(file);
        setSelectedLine(target.line);
      } catch (err) {
        console.error("[code.navigation.failed]", err);
      }
    });
  }, [readFile, repositoryId]);

  return (
    <div className="flex h-full bg-rp-bg">
      <div className="w-60 h-full border-r border-rp-border/10 bg-rp-bg shrink-0 overflow-y-auto">
        <FileTree repositoryId={repositoryId} onSelectFile={handleSelectFile} />
      </div>

      <div className="flex-1 min-w-0">
        {selectedFile ? (
          <div className="flex flex-col h-full">
            <div className="h-10 px-4 flex items-center border-b border-rp-border/10 shrink-0">
              <span className="text-r-xs text-rp-muted font-mono truncate">
                {selectedFile.path.split("/").join(" / ")}
              </span>
            </div>
            <div className="flex-1 min-h-0">
              <CodeEditor
                content={selectedFile.content}
                language={selectedFile.language}
                focusLine={selectedLine}
              />
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-center h-full">
            <p className="text-rp-faint text-r-sm">
              Select a file to view
            </p>
          </div>
        )}
      </div>
    </div>
  );
}