import { onCleanup, onMount, type Component } from "solid-js";
import { Sidebar, onLibraryChangedRefresh } from "./shell/Sidebar";
import { ContentArea } from "./shell/ContentArea";
import { DetailsPanel } from "./shell/DetailsPanel";
import { StatusBar } from "./shell/StatusBar";
import { Lightbox } from "./features/viewer/Lightbox";
import { ContextMenu } from "./features/fileops/ContextMenu";
import { MoveDialog } from "./features/fileops/MoveDialog";
import { DedupePanel } from "./features/dedupe/DedupePanel";
import { RemoteDialog } from "./features/sources/RemoteDialog";
import { onLibraryChanged, onThumbsReady, type UnlistenFn } from "./ipc/commands";
import { bumpThumbVersions, loadAppInfo, refreshSnapshot } from "./state/store";

const App: Component = () => {
  onMount(() => {
    void loadAppInfo();
    void refreshSnapshot();

    const unlisteners: Promise<UnlistenFn>[] = [
      onThumbsReady((ids) => bumpThumbVersions(ids)),
      onLibraryChanged(() => onLibraryChangedRefresh()),
    ];
    onCleanup(() => {
      for (const u of unlisteners) void u.then((f) => f());
    });
  });

  return (
    <div class="grid h-full grid-rows-[1fr_auto]">
      <div class="grid min-h-0 grid-cols-[240px_1fr_280px]">
        <Sidebar />
        <ContentArea />
        <DetailsPanel />
      </div>
      <StatusBar />
      <Lightbox />
      <ContextMenu />
      <MoveDialog />
      <DedupePanel />
      <RemoteDialog />
    </div>
  );
};

export default App;