"use client";
import { useState } from "react";
import type { MouseEvent } from "react";
import { FileTree, useFileTree, useFileTreeSelection } from "@pierre/trees/react";
import { FileViewer } from "./FileViewer";

type FileTreeClickEvent = MouseEvent<HTMLElement> & { item?: { path?: unknown } };

export type TreeBrowserProps = {
  paths: string[];
};

export function TreeBrowser({ paths }: TreeBrowserProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>(null);

  const { model } = useFileTree({
    paths,
    search: true,
    fileTreeSearchMode: "hide-non-matches",
    flattenEmptyDirectories: true,
  });

  const selectedPaths = useFileTreeSelection(model);

  const selected = selectedPaths[0];
  const currentFile = selected && !selected.endsWith("/") ? selected : selectedFile;

  return (
    <>
      <div className="flex w-72 flex-col border-r border-gray-800">
        <div className="border-b border-gray-800 px-3 py-2 text-xs font-medium text-gray-500 uppercase">Files</div>
        <div className="flex-1 overflow-auto">
          <FileTree
            model={model}
            className="h-full"
            style={{ minHeight: "100%" }}
            onClick={(event) => {
              const path = (event as FileTreeClickEvent).item?.path;
              if (typeof path === "string" && !path.endsWith("/")) {
                setSelectedFile(path);
              }
            }}
          />
        </div>
      </div>
      <div className="flex-1 overflow-auto">
        {currentFile ? (
          <FileViewer path={currentFile} gitRef="HEAD" />
        ) : (
          <div className="flex h-full items-center justify-center text-gray-600">Select a file to view</div>
        )}
      </div>
    </>
  );
}