refactor state storge, UI editor

src/app/editor/[id]/featureCommands.ts

@@ -39,18 +39,26 @@ export function useFeatureCommands(options: Options) {
         setEntityFormStatus,
     } = options;
 
-    const applyGeometryMetadata = useCallback(async () => {
+    const applyGeometryMetadata = useCallback(async (): Promise<{ ok: boolean; error?: string }> => {
         if (!selectedFeature) {
-            setEntityFormStatus("Hãy chọn một geometry trước.");
-            return;
+            const msg = "Hãy chọn một geometry trước.";
+            setEntityFormStatus(msg);
+            return { ok: false, error: msg };
+        }
+
+        if (!geometryMetaForm.time_start.trim() || !geometryMetaForm.time_end.trim()) {
+            const msg = "time_start và time_end là bắt buộc.";
+            setEntityFormStatus(msg);
+            return { ok: false, error: msg };
         }
 
         let metadata;
         try {
             metadata = buildGeometryMetadataPatch(geometryMetaForm);
         } catch (err) {
-            setEntityFormStatus(err instanceof Error ? err.message : "Thời gian không hợp lệ.");
-            return;
+            const msg = err instanceof Error ? err.message : "Thời gian không hợp lệ.";
+            setEntityFormStatus(msg);
+            return { ok: false, error: msg };
         }
 
         setIsEntitySubmitting(true);
@@ -59,6 +67,7 @@ export function useFeatureCommands(options: Options) {
             editor.patchFeatureProperties(selectedFeature.properties.id, metadata.patch);
             setGeometryMetaForm(metadata.formState);
             setEntityFormStatus("Đã cập nhật thuộc tính GEO. Commit khi sẵn sàng.");
+            return { ok: true };
         } finally {
             setIsEntitySubmitting(false);
         }
@@ -111,4 +120,3 @@ export function useFeatureCommands(options: Options) {
         applyEntitiesToSelectedGeometry,
     };
 }
-

src/app/page.tsx

@@ -1,9 +1,186 @@
-import AdminLayout from "./user/layout";
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import Map from "@/uhm/components/Map";
+import BackgroundLayersPanel from "@/uhm/components/BackgroundLayersPanel";
+import TimelineBar from "@/uhm/components/TimelineBar";
+import { fetchGeometriesByBBox } from "@/uhm/api/geometries";
+import { ApiError } from "@/uhm/api/http";
+import { API_BASE_URL } from "@/uhm/api/config";
+import {
+  BackgroundLayerId,
+  BackgroundLayerVisibility,
+  DEFAULT_BACKGROUND_LAYER_VISIBILITY,
+  HIDDEN_BACKGROUND_LAYER_VISIBILITY,
+} from "@/uhm/lib/backgroundLayers";
+import {
+  loadBackgroundLayerVisibilityFromStorage,
+  persistBackgroundLayerVisibility,
+} from "@/uhm/lib/editor/background/backgroundVisibilityStorage";
+import { EMPTY_FEATURE_COLLECTION, WORLD_BBOX } from "@/uhm/lib/geo/constants";
+import { clampYearToFixedRange, TIMELINE_DEBOUNCE_MS } from "@/uhm/lib/timeline";
+import type { Feature, FeatureCollection } from "@/uhm/types/geo";
+
+const CURRENT_YEAR = new Date().getUTCFullYear();
 
 export default function Page() {
+  const [data, setData] = useState<FeatureCollection>(EMPTY_FEATURE_COLLECTION);
+  const [selectedFeatureId, setSelectedFeatureId] = useState<string | number | null>(null);
+  const [timelineYear, setTimelineYear] = useState<number>(() => clampYearToFixedRange(CURRENT_YEAR));
+  const [timelineDraftYear, setTimelineDraftYear] = useState<number>(() => clampYearToFixedRange(CURRENT_YEAR));
+  const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+  const [timelineStatus, setTimelineStatus] = useState<string | null>(null);
+  const [backgroundVisibility, setBackgroundVisibility] = useState<BackgroundLayerVisibility>(
+    () => ({ ...HIDDEN_BACKGROUND_LAYER_VISIBILITY })
+  );
+  const [isBackgroundVisibilityReady, setIsBackgroundVisibilityReady] = useState(false);
+  const timelineFetchRequestRef = useRef(0);
+  const [lastLoadedAt, setLastLoadedAt] = useState<string | null>(null);
+
+  const selectedFeature: Feature | null = useMemo(() => {
+    if (selectedFeatureId === null) return null;
+    return (
+      data.features.find((feature) => String(feature.properties.id) === String(selectedFeatureId)) || null
+    );
+  }, [data.features, selectedFeatureId]);
+
+  useEffect(() => {
+    if (selectedFeatureId === null) return;
+    const stillExists = data.features.some((feature) => String(feature.properties.id) === String(selectedFeatureId));
+    if (!stillExists) setSelectedFeatureId(null);
+  }, [data.features, selectedFeatureId]);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      if (timelineDraftYear !== timelineYear) setTimelineYear(timelineDraftYear);
+    }, TIMELINE_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [timelineDraftYear, timelineYear]);
+
+  useEffect(() => {
+    setBackgroundVisibility(loadBackgroundLayerVisibilityFromStorage());
+    setIsBackgroundVisibilityReady(true);
+  }, []);
+
+  useEffect(() => {
+    let disposed = false;
+    const requestId = ++timelineFetchRequestRef.current;
+
+    async function loadByTimeline() {
+      setIsTimelineLoading(true);
+      setTimelineStatus(null);
+      try {
+        const next = await fetchGeometriesByBBox({ ...WORLD_BBOX, time: timelineYear });
+        if (disposed || requestId !== timelineFetchRequestRef.current) return;
+        setData(next);
+        setLastLoadedAt(new Date().toISOString());
+      } catch (err) {
+        if (err instanceof ApiError) {
+          console.error("Load timeline data failed", err.body);
+        } else {
+          console.error("Load timeline data failed", err);
+        }
+        if (!disposed && requestId === timelineFetchRequestRef.current) {
+          setTimelineStatus("Không tải được geometry tại mốc thời gian đã chọn.");
+        }
+      } finally {
+        if (!disposed && requestId === timelineFetchRequestRef.current) {
+          setIsTimelineLoading(false);
+        }
+      }
+    }
+
+    loadByTimeline();
+    return () => {
+      disposed = true;
+    };
+  }, [timelineYear]);
+
+  const updateBackgroundVisibility = (updater: (prev: BackgroundLayerVisibility) => BackgroundLayerVisibility) => {
+    setBackgroundVisibility((prev) => {
+      const next = updater(prev);
+      persistBackgroundLayerVisibility(next);
+      return next;
+    });
+  };
+
+  const handleToggleBackgroundLayer = (id: BackgroundLayerId) => {
+    updateBackgroundVisibility((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const handleShowAllBackgroundLayers = () => {
+    updateBackgroundVisibility(() => ({ ...DEFAULT_BACKGROUND_LAYER_VISIBILITY }));
+  };
+
+  const handleHideAllBackgroundLayers = () => {
+    updateBackgroundVisibility(() => ({ ...HIDDEN_BACKGROUND_LAYER_VISIBILITY }));
+  };
+
+  const handleTimelineYearChange = (nextYear: number) => {
+    setTimelineDraftYear(clampYearToFixedRange(Math.trunc(nextYear)));
+  };
+
   return (
-    <AdminLayout>
-      <div className=''>Page</div>
-    </AdminLayout>
+    <div style={{ display: "flex", minHeight: "100vh" }}>
+      <div style={{ flex: 1, position: "relative", minHeight: "100vh" }}>
+        {isBackgroundVisibilityReady ? (
+          <Map
+            mode="select"
+            draft={data}
+            selectedFeatureId={selectedFeatureId}
+            onSelectFeatureId={setSelectedFeatureId}
+            backgroundVisibility={backgroundVisibility}
+            allowGeometryEditing={false}
+            respectBindingFilter={false}
+          />
+        ) : (
+          <div style={{ width: "100%", height: "100%", background: "#0b1220" }} />
+        )}
+
+        <TimelineBar
+          year={timelineDraftYear}
+          onYearChange={handleTimelineYearChange}
+          isLoading={isTimelineLoading}
+          disabled={false}
+          statusText={timelineStatus}
+        />
+      </div>
+
+      <BackgroundLayersPanel
+        visibility={backgroundVisibility}
+        onToggleLayer={handleToggleBackgroundLayer}
+        onShowAll={handleShowAllBackgroundLayers}
+        onHideAll={handleHideAllBackgroundLayers}
+        topContent={
+          <div
+            style={{
+              padding: "10px",
+              background: "#0b1220",
+              borderRadius: "8px",
+              border: "1px solid #1f2937",
+              display: "grid",
+              gap: "8px",
+            }}
+          >
+            <div style={{ fontWeight: 700, fontSize: "14px", color: "#f8fafc" }}>Viewer</div>
+            <div style={{ color: "#94a3b8", fontSize: "12px" }}>
+              API: {API_BASE_URL}
+            </div>
+            <div style={{ color: "#94a3b8", fontSize: "12px" }}>
+              Year: {timelineYear} | Features: {data.features.length}
+            </div>
+            <div style={{ color: "#94a3b8", fontSize: "12px" }}>
+              {isTimelineLoading ? "Loading geometries..." : lastLoadedAt ? `Loaded: ${lastLoadedAt}` : "Not loaded yet"}
+            </div>
+            <div style={{ color: "#cbd5e1", fontSize: "13px", overflowWrap: "anywhere" }}>
+              {selectedFeature ? `ID: ${String(selectedFeature.properties.id)}` : "Chưa chọn geometry"}
+            </div>
+            <div style={{ color: "#94a3b8", fontSize: "12px" }}>
+              {selectedFeature?.properties?.type ? `Type: ${String(selectedFeature.properties.type)}` : "Type: -"}
+            </div>
+          </div>
+        }
+      />
+    </div>
   );
 }

src/app/user/submissions/[id]/page.tsx

@@ -1,330 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { useParams } from "next/navigation";
-import { toast } from "sonner";
-
-import PageBreadcrumb from "@/components/common/PageBreadCrumb";
-import ComponentCard from "@/components/common/ComponentCard";
-import Badge from "@/components/ui/badge/Badge";
-import Button from "@/components/ui/button/Button";
-
-import Map from "@/uhm/components/Map";
-import { DEFAULT_BACKGROUND_LAYER_VISIBILITY } from "@/uhm/lib/backgroundLayers";
-import { EMPTY_FEATURE_COLLECTION } from "@/uhm/lib/geo/constants";
-import { fetchSectionCommits } from "@/uhm/api/sections";
-import { normalizeEditorSnapshot } from "@/uhm/lib/editor/snapshot/editorSnapshot";
-import type { EditorSnapshot, SectionCommit } from "@/uhm/types/sections";
-import type { EntitySnapshot } from "@/uhm/types/entities";
-
-import type { Submission } from "@/interface/submission";
-import { apiGetSubmissionById } from "@/service/submissionService";
-import type { Project } from "@/interface/project";
-import { apiGetProjectDetail } from "@/service/projectService";
-
-function formatTime(value?: string | null) {
-  if (!value) return "-";
-  const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return String(value);
-  return d.toLocaleString("vi-VN");
-}
-
-export default function SubmissionDetailPage() {
-  const params = useParams();
-  const id = String(params.id || "");
-  const [row, setRow] = useState<Submission | null>(null);
-  const [project, setProject] = useState<Project | null>(null);
-  const [commits, setCommits] = useState<SectionCommit[]>([]);
-  const [snapshot, setSnapshot] = useState<EditorSnapshot | null>(null);
-  const [snapshotEntities, setSnapshotEntities] = useState<EntitySnapshot[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingExtras, setIsLoadingExtras] = useState(false);
-
-  const headCommitSnapshotJson = useMemo(() => {
-    const headId = project?.latest_commit_id || null;
-    if (!headId) return null;
-    const head = commits.find((c) => c.id === headId) || null;
-    return (head as any)?.snapshot_json ?? null;
-  }, [commits, project?.latest_commit_id]);
-
-  const draft = useMemo(
-    () => snapshot?.editor_feature_collection || EMPTY_FEATURE_COLLECTION,
-    [snapshot]
-  );
-
-  useEffect(() => {
-    let disposed = false;
-    async function load() {
-      if (!id) return;
-      try {
-        setIsLoading(true);
-        const res = await apiGetSubmissionById(id);
-        if (!disposed) setRow(res?.data || null);
-      } catch (err) {
-        console.error(err);
-        toast.error("Khong the tai submission.");
-      } finally {
-        if (!disposed) setIsLoading(false);
-      }
-    }
-    load();
-    return () => {
-      disposed = true;
-    };
-  }, [id]);
-
-  useEffect(() => {
-    let disposed = false;
-    async function loadExtras() {
-      if (!row?.project_id) return;
-      try {
-        setIsLoadingExtras(true);
-
-        const [projectRes, commitRows] = await Promise.all([
-          apiGetProjectDetail(row.project_id),
-          fetchSectionCommits(row.project_id),
-        ]);
-
-        if (disposed) return;
-        setProject(projectRes?.data || null);
-        setCommits(commitRows || []);
-
-        const commit = (commitRows || []).find((c) => c.id === row.commit_id) || null;
-        const snap = normalizeEditorSnapshot(commit?.snapshot_json || null);
-        setSnapshot(snap);
-        setSnapshotEntities((snap?.entities || []) as EntitySnapshot[]);
-      } catch (err) {
-        console.error(err);
-        toast.error("Khong the tai thong tin project/commit.");
-      } finally {
-        if (!disposed) setIsLoadingExtras(false);
-      }
-    }
-    loadExtras();
-    return () => {
-      disposed = true;
-    };
-  }, [row?.commit_id, row?.project_id]);
-
-  return (
-    <div className="max-w-6xl mx-auto pb-10">
-      <PageBreadcrumb
-        pageTitle="Chi tiet submission"
-        paths={[{ name: "Kiem duyet submissions", href: "/user/submissions" }]}
-      />
-
-      <div className="mt-6">
-        <ComponentCard title="Thong tin">
-          {isLoading ? (
-            <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Dang tai...</div>
-          ) : row ? (
-            <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">ID</div>
-                <div className="font-mono break-all">{row.id}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Status</div>
-                <div className="mt-1">
-                  <Badge size="sm" variant="light" color="light">
-                    {row.status}
-                  </Badge>
-                </div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Project</div>
-                <div className="font-medium break-words">{row.project_title || "-"}</div>
-                <div className="font-mono break-all text-xs text-gray-500 dark:text-gray-400 mt-1">{row.project_id}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Commit</div>
-                <div className="font-mono break-all">{row.commit_id}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">User</div>
-                <div className="font-mono break-all">{row.user_id}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Created</div>
-                <div>{formatTime(row.created_at)}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Reviewed by</div>
-                <div className="font-mono break-all">{row.reviewed_by || "-"}</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">Reviewed at</div>
-                <div>{formatTime(row.reviewed_at)}</div>
-              </div>
-              <div className="md:col-span-2">
-                <div className="text-xs text-gray-500 dark:text-gray-400">Review note</div>
-                <div className="mt-1 whitespace-pre-wrap">{row.review_note || "-"}</div>
-              </div>
-              <div className="md:col-span-2">
-                <div className="text-xs text-gray-500 dark:text-gray-400">Content</div>
-                <div className="mt-1 whitespace-pre-wrap">{row.content || "-"}</div>
-              </div>
-
-              <div className="md:col-span-2 flex justify-end">
-                <Button size="sm" variant="outline" onClick={() => (window.location.href = `/editor/${row.project_id}`)}>
-                  Open editor
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong tim thay submission.</div>
-          )}
-        </ComponentCard>
-      </div>
-
-      {row ? (
-        <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <ComponentCard title="Map view">
-            <div className="p-4">
-              <div className="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800">
-                <Map
-                  mode="idle"
-                  draft={draft}
-                  selectedFeatureId={null}
-                  onSelectFeatureId={() => {}}
-                  backgroundVisibility={DEFAULT_BACKGROUND_LAYER_VISIBILITY}
-                  allowGeometryEditing={false}
-                  respectBindingFilter={false}
-                  height="320px"
-                  fitToDraftBounds
-                  fitBoundsKey={row.id}
-                />
-              </div>
-              {isLoadingExtras ? (
-                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">Dang tai snapshot/commits...</div>
-              ) : snapshot ? (
-                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">Da tai snapshot.</div>
-              ) : (
-                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
-                  Khong tim thay snapshot cho commit nay.
-                </div>
-              )}
-            </div>
-          </ComponentCard>
-
-          <ComponentCard title="Entities (snapshot)">
-            <div className="p-4">
-              {snapshotEntities.length === 0 ? (
-                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co entities trong snapshot.</div>
-              ) : (
-                <div className="max-w-full overflow-x-auto">
-                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[720px]">
-                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
-                      <div className="col-span-2">Op</div>
-                      <div className="col-span-6">Name</div>
-                      <div className="col-span-4">Entity ID</div>
-                    </div>
-                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
-                      {snapshotEntities.map((e) => (
-                        <div key={`${e.operation}:${e.id}`} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
-                          <div className="col-span-2">
-                            <Badge size="sm" variant="light" color="dark">
-                              {e.operation}
-                            </Badge>
-                          </div>
-                          <div className="col-span-6 min-w-0 truncate">{e.name || "-"}</div>
-                          <div className="col-span-4 font-mono text-xs break-all">{e.id}</div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </ComponentCard>
-        </div>
-      ) : null}
-
-      {row ? (
-        <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <ComponentCard title="Head commit snapshot_json">
-            <div className="p-4">
-              <pre className="text-xs whitespace-pre-wrap break-words rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0d1117] p-4 overflow-auto max-h-[420px]">
-                {JSON.stringify(headCommitSnapshotJson, null, 2)}
-              </pre>
-            </div>
-          </ComponentCard>
-
-          <ComponentCard title="Project members">
-            <div className="p-4">
-              {!project ? (
-                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co du lieu project.</div>
-              ) : (project.members || []).length === 0 ? (
-                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co thanh vien.</div>
-              ) : (
-                <div className="max-w-full overflow-x-auto">
-                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[640px]">
-                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
-                      <div className="col-span-5">Member</div>
-                      <div className="col-span-3">Role</div>
-                      <div className="col-span-4">User ID</div>
-                    </div>
-                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
-                      {(project.members || []).map((m) => (
-                        <div key={m.user_id} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
-                          <div className="col-span-5 min-w-0 truncate">{m.display_name || "-"}</div>
-                          <div className="col-span-3">
-                            <Badge size="sm" variant="light" color="info">
-                              {m.role}
-                            </Badge>
-                          </div>
-                          <div className="col-span-4 font-mono text-xs break-all">{m.user_id}</div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </ComponentCard>
-        </div>
-      ) : null}
-
-      {row ? (
-        <div className="mt-6">
-          <ComponentCard title="Commits">
-            <div className="p-4">
-              {commits.length === 0 ? (
-                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co commits.</div>
-              ) : (
-                <div className="max-w-full overflow-x-auto">
-                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[900px]">
-                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
-                      <div className="col-span-3">Commit</div>
-                      <div className="col-span-5">Title</div>
-                      <div className="col-span-2">Created</div>
-                      <div className="col-span-2">User</div>
-                    </div>
-                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
-                      {commits.map((c) => {
-                        const isTarget = c.id === row.commit_id;
-                        return (
-                          <div
-                            key={c.id}
-                            className={`grid grid-cols-12 gap-4 px-5 py-3 text-sm ${isTarget ? "bg-brand-50/60 dark:bg-brand-500/10" : ""}`}
-                          >
-                            <div className="col-span-3 font-mono text-xs break-all">
-                              {isTarget ? <b>{c.id}</b> : c.id}
-                            </div>
-                            <div className="col-span-5 min-w-0 truncate">{c.edit_summary || "-"}</div>
-                            <div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(c.created_at)}</div>
-                            <div className="col-span-2 font-mono text-xs break-all">{c.user_id}</div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </ComponentCard>
-        </div>
-      ) : null}
-    </div>
-  );
-}

src/app/user/submissions/page.tsx

@@ -1,326 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-import { toast } from "sonner";
-
-import PageBreadcrumb from "@/components/common/PageBreadCrumb";
-import ComponentCard from "@/components/common/ComponentCard";
-import Badge from "@/components/ui/badge/Badge";
-import Button from "@/components/ui/button/Button";
-import Label from "@/components/form/Label";
-import { Modal } from "@/components/ui/modal";
-import { useModal } from "@/hooks/useModal";
-
-import type { Submission, SubmissionStatus } from "@/interface/submission";
-import { apiSearchSubmissions, apiUpdateSubmissionStatus } from "@/service/submissionService";
-
-type Decision = "APPROVED" | "REJECTED";
-
-function statusBadge(status: SubmissionStatus) {
-  switch (status) {
-    case "PENDING":
-      return (
-        <Badge size="sm" variant="light" color="warning">
-          PENDING
-        </Badge>
-      );
-    case "APPROVED":
-      return (
-        <Badge size="sm" variant="light" color="success">
-          APPROVED
-        </Badge>
-      );
-    case "REJECTED":
-      return (
-        <Badge size="sm" variant="light" color="error">
-          REJECTED
-        </Badge>
-      );
-    default:
-      return (
-        <Badge size="sm" variant="light" color="light">
-          {String(status || "UNKNOWN")}
-        </Badge>
-      );
-  }
-}
-
-function formatTime(value?: string | null) {
-  if (!value) return "-";
-  const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return String(value);
-  return d.toLocaleString("vi-VN");
-}
-
-export default function SubmissionsPage() {
-  const [items, setItems] = useState<Submission[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [page, setPage] = useState(1);
-  const limit = 20;
-  const [totalPages, setTotalPages] = useState(1);
-
-  const [search, setSearch] = useState("");
-  const [projectId, setProjectId] = useState("");
-  const [status, setStatus] = useState<"ALL" | "PENDING" | "APPROVED" | "REJECTED">("PENDING");
-
-  const { isOpen, openModal, closeModal } = useModal();
-  const [active, setActive] = useState<Submission | null>(null);
-  const [decision, setDecision] = useState<Decision>("APPROVED");
-  const [reviewNote, setReviewNote] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const query = useMemo(() => {
-    const trimmedSearch = search.trim();
-    const trimmedProject = projectId.trim();
-    return {
-      page,
-      limit,
-      project_id: trimmedProject.length ? trimmedProject : undefined,
-      search: trimmedSearch.length ? trimmedSearch : undefined,
-      statuses: status === "ALL" ? undefined : ([status] as any),
-      sort: "created_at" as const,
-    };
-  }, [limit, page, projectId, search, status]);
-
-  const fetchList = async () => {
-    try {
-      setIsLoading(true);
-      const res = await apiSearchSubmissions(query);
-      const payload = res?.data;
-      const rows = payload?.data || [];
-      setItems(rows);
-      setTotalPages(payload?.pagination?.total_pages || 1);
-    } catch (err) {
-      console.error(err);
-      toast.error("Khong the tai danh sach submissions.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchList();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query]);
-
-  const openReview = (row: Submission, nextDecision: Decision) => {
-    setActive(row);
-    setDecision(nextDecision);
-    setReviewNote("");
-    openModal();
-  };
-
-  const submitDecision = async () => {
-    if (!active) return;
-    const note = reviewNote.trim();
-    if (note.length < 10) {
-      toast.error("Review note toi thieu 10 ky tu.");
-      return;
-    }
-
-    try {
-      setIsSubmitting(true);
-      await apiUpdateSubmissionStatus(active.id, { status: decision, review_note: note });
-      toast.success(decision === "APPROVED" ? "Da duyet submission." : "Da tu choi submission.");
-      closeModal();
-      await fetchList();
-    } catch (err: any) {
-      console.error(err);
-      toast.error(err?.response?.data?.message || "Cap nhat trang thai that bai.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="max-w-7xl mx-auto pb-10">
-      <PageBreadcrumb pageTitle="Kiem duyet submissions" />
-
-      <div className="mt-6">
-        <ComponentCard title="Danh sach submissions">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-5">
-            <div className="md:col-span-2">
-              <Label>Search</Label>
-              <input
-                value={search}
-                onChange={(e) => {
-                  setPage(1);
-                  setSearch(e.target.value);
-                }}
-                placeholder="Tim theo keyword (>= 2 ky tu)"
-                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
-              />
-            </div>
-            <div>
-              <Label>Project ID</Label>
-              <input
-                value={projectId}
-                onChange={(e) => {
-                  setPage(1);
-                  setProjectId(e.target.value);
-                }}
-                placeholder="UUID"
-                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
-              />
-            </div>
-            <div>
-              <Label>Status</Label>
-              <select
-                value={status}
-                onChange={(e) => {
-                  setPage(1);
-                  setStatus(e.target.value as any);
-                }}
-                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
-              >
-                <option value="PENDING">PENDING</option>
-                <option value="APPROVED">APPROVED</option>
-                <option value="REJECTED">REJECTED</option>
-                <option value="ALL">ALL</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="relative min-h-[260px]">
-            {isLoading ? (
-              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded-xl">
-                <div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin" />
-              </div>
-            ) : null}
-
-            <div className="max-w-full overflow-x-auto">
-              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[900px]">
-                <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
-                  <div className="col-span-4">Project</div>
-                  <div className="col-span-2">Submitter</div>
-                  <div className="col-span-1">Status</div>
-                  <div className="col-span-2">Created</div>
-                  <div className="col-span-3 text-right">Actions</div>
-                </div>
-
-                <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
-                  {items.length === 0 ? (
-                    <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong co submissions.</div>
-                  ) : null}
-                  {items.map((row) => (
-                    <div
-                      key={row.id}
-                      className="grid grid-cols-12 gap-4 px-5 py-4 text-sm hover:bg-gray-50 dark:hover:bg-[#161b22] cursor-pointer"
-                      onClick={(e) => {
-                        const target = e.target as HTMLElement | null;
-                        if (target && target.closest("button")) return;
-                        window.location.href = `/user/submissions/${row.id}`;
-                      }}
-                      role="link"
-                      tabIndex={0}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") window.location.href = `/user/submissions/${row.id}`;
-                      }}
-                    >
-                      <div className="col-span-4 min-w-0">
-                        <div className="font-medium text-gray-800 dark:text-gray-200 truncate">
-                          {row.project_title || row.project_id}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                          Submission:{" "}
-                          <Link className="hover:underline" href={`/user/submissions/${row.id}`}>
-                            {row.id}
-                          </Link>
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                          Commit: {row.commit_id}
-                        </div>
-                      </div>
-                      <div className="col-span-2 min-w-0 text-xs text-gray-600 dark:text-gray-300 truncate">
-                        {row.user?.display_name || row.user?.email || row.user_id}
-                      </div>
-                      <div className="col-span-1">{statusBadge(row.status)}</div>
-                      <div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(row.created_at)}</div>
-                      <div className="col-span-3 flex justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => (window.location.href = `/editor/${row.project_id}`)}
-                        >
-                          Open editor
-                        </Button>
-                        {row.status === "PENDING" ? (
-                          <>
-                            <Button size="sm" className="bg-brand-500 hover:bg-brand-600 text-white" onClick={() => openReview(row, "APPROVED")}>
-                              Duyet
-                            </Button>
-                            <Button size="sm" variant="outline" onClick={() => openReview(row, "REJECTED")}>
-                              Tu choi
-                            </Button>
-                          </>
-                        ) : (
-                          <Button size="sm" variant="outline" onClick={() => openReview(row, row.status === "APPROVED" ? "REJECTED" : "APPROVED")}>
-                            Doi trang thai
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between mt-4">
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                Page {page} / {totalPages}
-              </div>
-              <div className="flex gap-2">
-                <Button size="sm" variant="outline" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
-                  Prev
-                </Button>
-                <Button size="sm" variant="outline" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>
-                  Next
-                </Button>
-              </div>
-            </div>
-          </div>
-        </ComponentCard>
-      </div>
-
-      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[620px] m-4">
-        <div className="p-6 bg-white rounded-3xl dark:bg-gray-900">
-          <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">
-            {decision === "APPROVED" ? "Duyet submission" : "Tu choi submission"}
-          </h3>
-          <div className="text-xs text-gray-500 dark:text-gray-400 mb-4 break-all">
-            {active?.id}
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <div>
-              <Label>Review note (&gt;= 10 ky tu)</Label>
-              <textarea
-                rows={4}
-                value={reviewNote}
-                onChange={(e) => setReviewNote(e.target.value)}
-                className="w-full rounded-xl border border-gray-200 bg-transparent px-4 py-3 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800 custom-scrollbar"
-                placeholder={decision === "APPROVED" ? "Ly do duyet..." : "Ly do tu choi..."}
-              />
-            </div>
-
-            <div className="flex items-center justify-end gap-3 mt-2">
-              <Button size="sm" variant="outline" type="button" onClick={closeModal} disabled={isSubmitting}>
-                Huy
-              </Button>
-              <Button
-                size="sm"
-                type="button"
-                onClick={submitDecision}
-                disabled={isSubmitting}
-                className={decision === "APPROVED" ? "bg-brand-500 hover:bg-brand-600 text-white" : "bg-red-600 hover:bg-red-700 text-white"}
-              >
-                {isSubmitting ? "Dang xu ly..." : decision === "APPROVED" ? "Duyet" : "Tu choi"}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Modal>
-    </div>
-  );
-}