homeio

1"use client";
2
3import { useRef, useState } from "react";
4import { cn } from "@/lib/utils";
5import { FILES_PANEL_INSET } from "@/modules/files/components/file-manager-surface";
6import {
7  useGoogleDriveFiles,
8  useGoogleDriveDeleteFile,
9  useGoogleDriveCreateFolder,
10  useGoogleDriveUpload,
11  buildDriveDownloadUrl,
12} from "@/modules/files/hooks/useGoogleDriveFiles";
13import type { DriveFileEntry } from "@/lib/shared/contracts/google-drive";
14import {
15  Cloud,
16  Loader2,
17  Trash2,
18  FolderOpen,
19  Download,
20  Upload,
21  Plus,
22  ChevronRight,
23  File,
24} from "@/components/icons/platform-icons";
25
26type NavEntry = { id: string; name: string };
27
28type Props = {
29  connectionId: string;
30  accountEmail: string;
31};
32
33function formatSize(bytes: number | null): string {
34  if (bytes == null) return "";
35  if (bytes < 1024) return `${bytes} B`;
36  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
37  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
38  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
39}
40
41function formatDate(iso: string | null): string {
42  if (!iso) return "";
43  return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
44}
45
46function isGoogleNative(mimeType: string): boolean {
47  return mimeType.startsWith("application/vnd.google-apps.");
48}
49
50export function GoogleDrivePanel({ connectionId, accountEmail }: Props) {
51  const [navStack, setNavStack] = useState<NavEntry[]>([{ id: "root", name: "My Drive" }]);
52  const [newFolderName, setNewFolderName] = useState("");
53  const [showNewFolder, setShowNewFolder] = useState(false);
54  const [deleteConfirm, setDeleteConfirm] = useState<DriveFileEntry | null>(null);
55  const uploadRef = useRef<HTMLInputElement>(null);
56
57  const current = navStack[navStack.length - 1];
58  const folderId = current.id;
59
60  const browseQuery = useGoogleDriveFiles(connectionId, folderId);
61  const deleteFile = useGoogleDriveDeleteFile(connectionId, folderId);
62  const createFolder = useGoogleDriveCreateFolder(connectionId, folderId);
63  const uploadFiles = useGoogleDriveUpload(connectionId, folderId);
64
65  function navigateInto(entry: DriveFileEntry) {
66    setNavStack((prev) => [...prev, { id: entry.id, name: entry.name }]);
67  }
68
69  function navigateTo(index: number) {
70    setNavStack((prev) => prev.slice(0, index + 1));
71  }
72
73  function handleUpload(files: FileList | null) {
74    if (!files || files.length === 0) return;
75    void uploadFiles.mutate({ files: Array.from(files) });
76  }
77
78  function handleCreateFolder() {
79    const name = newFolderName.trim();
80    if (!name) return;
81    createFolder.mutate(
82      { parentId: folderId, name },
83      {
84        onSuccess: () => {
85          setNewFolderName("");
86          setShowNewFolder(false);
87        },
88      },
89    );
90  }
91
92  function handleDelete(entry: DriveFileEntry) {
93    deleteFile.mutate(entry.id, { onSuccess: () => setDeleteConfirm(null) });
94  }
95
96  const entries = browseQuery.data?.entries ?? [];
97
98  return (
99    <div className="flex h-full flex-col overflow-hidden">
100      {/* Header */}
101      <div className={cn("flex shrink-0 items-center justify-between border-b border-glass-border/50 px-4 py-2.5", FILES_PANEL_INSET)}>
102        {/* Breadcrumb */}
103        <nav className="flex min-w-0 items-center gap-1 text-[12px]">
104          <Cloud className="size-3.5 shrink-0 text-sky-400" />
105          {navStack.map((seg, i) => (
106            <span key={seg.id} className="flex items-center gap-1">
107              {i > 0 && <ChevronRight className="size-3 shrink-0 text-muted-foreground/40" />}
108              <button
109                onClick={() => navigateTo(i)}
110                className={cn(
111                  "max-w-[120px] truncate transition-colors",
112                  i === navStack.length - 1
113                    ? "font-medium text-foreground"
114                    : "text-muted-foreground hover:text-foreground",
115                )}
116              >
117                {seg.name}
118              </button>
119            </span>
120          ))}
121        </nav>
122
123        {/* Toolbar actions */}
124        <div className="flex shrink-0 items-center gap-1">
125          <button
126            onClick={() => setShowNewFolder((v) => !v)}
127            title="New folder"
128            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-background/50 hover:text-foreground"
129          >
130            <Plus className="size-4" />
131          </button>
132          <button
133            onClick={() => uploadRef.current?.click()}
134            title="Upload files"
135            disabled={uploadFiles.isPending}
136            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-background/50 hover:text-foreground disabled:opacity-40"
137          >
138            {uploadFiles.isPending ? (
139              <Loader2 className="size-4 animate-spin" />
140            ) : (
141              <Upload className="size-4" />
142            )}
143          </button>
144          <input
145            ref={uploadRef}
146            type="file"
147            multiple
148            className="hidden"
149            onChange={(e) => handleUpload(e.target.files)}
150          />
151        </div>
152      </div>
153
154      {/* New folder input */}
155      {showNewFolder && (
156        <div className={cn("flex shrink-0 items-center gap-2 border-b border-glass-border/40 px-4 py-2", FILES_PANEL_INSET)}>
157          <input
158            autoFocus
159            type="text"
160            value={newFolderName}
161            onChange={(e) => setNewFolderName(e.target.value)}
162            onKeyDown={(e) => {
163              if (e.key === "Enter") handleCreateFolder();
164              if (e.key === "Escape") { setShowNewFolder(false); setNewFolderName(""); }
165            }}
166            placeholder="Folder name"
167            className="h-7 flex-1 rounded-md border border-glass-border/60 bg-background/40 px-2 text-[12px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-primary/40"
168          />
169          <button
170            onClick={handleCreateFolder}
171            disabled={!newFolderName.trim() || createFolder.isPending}
172            className="rounded-md bg-primary/15 px-2.5 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-primary/25 disabled:opacity-40"
173          >
174            {createFolder.isPending ? <Loader2 className="size-3 animate-spin" /> : "Create"}
175          </button>
176        </div>
177      )}
178
179      {/* Content */}
180      <div className="flex-1 overflow-y-auto px-2 py-2">
181        {browseQuery.isLoading ? (
182          <div className="flex items-center justify-center py-16">
183            <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
184          </div>
185        ) : browseQuery.isError ? (
186          <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
187            <Cloud className="size-10 text-muted-foreground/20" />
188            <p className="text-sm text-status-red">
189              {browseQuery.error instanceof Error ? browseQuery.error.message : "Failed to load"}
190            </p>
191            <button
192              onClick={() => void browseQuery.refetch()}
193              className="rounded-md bg-background/50 px-3 py-1 text-[11px] text-muted-foreground hover:text-foreground"
194            >
195              Retry
196            </button>
197          </div>
198        ) : entries.length === 0 ? (
199          <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
200            <FolderOpen className="size-10 text-muted-foreground/20" />
201            <p className="text-sm text-muted-foreground">This folder is empty</p>
202          </div>
203        ) : (
204          <div className="flex flex-col gap-0.5">
205            {entries.map((entry) => (
206              <div
207                key={entry.id}
208                className="group flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-background/50"
209              >
210                {/* Icon */}
211                <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-glass-border/40 bg-background/40">
212                  {entry.isFolder ? (
213                    <FolderOpen className="size-4 text-amber-400/80" />
214                  ) : (
215                    <File className="size-4 text-muted-foreground/60" />
216                  )}
217                </span>
218
219                {/* Name + meta */}
220                <button
221                  onClick={() => entry.isFolder && navigateInto(entry)}
222                  className={cn(
223                    "flex min-w-0 flex-1 flex-col text-left",
224                    entry.isFolder ? "cursor-pointer" : "cursor-default",
225                  )}
226                >
227                  <span className="truncate text-[13px] font-medium text-foreground">
228                    {entry.name}
229                  </span>
230                  <span className="text-[10px] text-muted-foreground/50">
231                    {[formatSize(entry.size), formatDate(entry.modifiedAt)].filter(Boolean).join(" · ")}
232                    {isGoogleNative(entry.mimeType) && (
233                      <span className="ml-1 rounded-sm bg-sky-500/10 px-1 py-0.5 text-[9px] text-sky-400">
234                        Google
235                      </span>
236                    )}
237                  </span>
238                </button>
239
240                {/* Actions */}
241                <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
242                  {!entry.isFolder && !isGoogleNative(entry.mimeType) && (
243                    <a
244                      href={buildDriveDownloadUrl(connectionId, entry.id, entry.name, entry.mimeType)}
245                      download={entry.name}
246                      title="Download"
247                      className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-background/50 hover:text-foreground"
248                    >
249                      <Download className="size-3.5" />
250                    </a>
251                  )}
252                  {!entry.isFolder && isGoogleNative(entry.mimeType) && entry.webViewLink && (
253                    <a
254                      href={entry.webViewLink}
255                      target="_blank"
256                      rel="noopener noreferrer"
257                      title="Open in Google Drive"
258                      className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-background/50 hover:text-sky-400"
259                    >
260                      <Cloud className="size-3.5" />
261                    </a>
262                  )}
263                  <button
264                    onClick={() => setDeleteConfirm(entry)}
265                    title="Delete"
266                    className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-background/50 hover:text-status-red"
267                  >
268                    <Trash2 className="size-3.5" />
269                  </button>
270                </div>
271              </div>
272            ))}
273          </div>
274        )}
275      </div>
276
277      {/* Footer */}
278      <div className={cn("shrink-0 border-t border-glass-border/50 px-4 py-2", FILES_PANEL_INSET)}>
279        <p className="text-[11px] text-muted-foreground/50 truncate">
280          <Cloud className="mr-1 inline-block size-3 text-sky-400/70" />
281          {accountEmail}
282        </p>
283      </div>
284
285      {/* Delete confirm overlay */}
286      {deleteConfirm && (
287        <div className="absolute inset-0 z-20 flex items-center justify-center bg-background/60 backdrop-blur-sm">
288          <div className="w-72 rounded-xl border border-glass-border bg-popover/96 p-5 shadow-xl shadow-black/30">
289            <p className="text-[13px] font-medium text-foreground">
290              Delete &ldquo;{deleteConfirm.name}&rdquo;?
291            </p>
292            <p className="mt-1 text-[11px] text-muted-foreground">
293              This will move the file to Google Drive Trash.
294            </p>
295            <div className="mt-4 flex justify-end gap-2">
296              <button
297                onClick={() => setDeleteConfirm(null)}
298                className="rounded-md px-3 py-1.5 text-[11px] text-muted-foreground hover:text-foreground"
299              >
300                Cancel
301              </button>
302              <button
303                onClick={() => handleDelete(deleteConfirm)}
304                disabled={deleteFile.isPending}
305                className="flex items-center gap-1.5 rounded-md bg-status-red/15 px-3 py-1.5 text-[11px] font-medium text-status-red transition-colors hover:bg-status-red/25 disabled:opacity-40"
306              >
307                {deleteFile.isPending && <Loader2 className="size-3 animate-spin" />}
308                Delete
309              </button>
310            </div>
311          </div>
312        </div>
313      )}
314    </div>
315  );
316}
317