import React, { useEffect, useMemo, useState } from "react";

/**
 * Duplicate Review UI (simple, boring, effective)
 *
 * Assumes backend endpoints like:
 *  GET  /api/dup-groups
 *    -> [{ groupId, hash, sizeBytes, fileCount, wastedBytes }]
 *
 *  GET  /api/dup-groups/:groupId
 *    -> { groupId, hash, sizeBytes, files: [{ id, path, sizeBytes, mtime, ctime }] }
 *
 *  POST /api/dup-groups/:groupId/plan
 *    body -> { keepFileId, deleteFileIds, mode: "quarantine"|"delete", dryRun: boolean }
 *    -> { ok: true, planned: n }
 *
 * You can adapt the fetch URLs to FastAPI/Flask easily.
 */

function formatBytes(bytes) {
  if (bytes == null) return "";
  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
  let b = bytes;
  let u = 0;
  while (b >= 1024 && u < units.length - 1) {
    b /= 1024;
    u++;
  }
  return `${b.toFixed(u === 0 ? 0 : 2)} ${units[u]}`;
}

function formatDate(isoOrEpoch) {
  if (!isoOrEpoch) return "";
  const d = typeof isoOrEpoch === "number" ? new Date(isoOrEpoch) : new Date(isoOrEpoch);
  if (Number.isNaN(d.getTime())) return String(isoOrEpoch);
  return d.toLocaleString();
}

function basename(p) {
  if (!p) return "";
  const s = p.replace(/\\/g, "/");
  const parts = s.split("/");
  return parts[parts.length - 1] || s;
}

function dirOf(p) {
  if (!p) return "";
  const s = p.replace(/\\/g, "/");
  const i = s.lastIndexOf("/");
  return i >= 0 ? s.slice(0, i) : "";
}

async function apiGet(url) {
  const r = await fetch(url, { headers: { Accept: "application/json" } });
  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
  return r.json();
}

async function apiPost(url, body) {
  const r = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify(body),
  });
  if (!r.ok) {
    let msg = `${r.status} ${r.statusText}`;
    try {
      const j = await r.json();
      msg = j?.detail || j?.error || msg;
    } catch {}
    throw new Error(msg);
  }
  return r.json();
}

export default function DuplicateReviewPage() {
  const [groups, setGroups] = useState([]);
  const [groupsLoading, setGroupsLoading] = useState(false);
  const [groupsErr, setGroupsErr] = useState("");

  const [selectedGroupId, setSelectedGroupId] = useState(null);

  const [groupDetail, setGroupDetail] = useState(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detailErr, setDetailErr] = useState("");

  const [search, setSearch] = useState("");
  const [sortGroups, setSortGroups] = useState("wastedDesc"); // wastedDesc|countDesc|sizeDesc
  const [sortFiles, setSortFiles] = useState("pathAsc"); // pathAsc|newest|oldest|dirAsc|nameAsc

  const [keepFileId, setKeepFileId] = useState(null);
  const [deleteIds, setDeleteIds] = useState(new Set());

  const [mode, setMode] = useState("quarantine"); // quarantine|delete
  const [dryRun, setDryRun] = useState(true);

  const [actionMsg, setActionMsg] = useState("");
  const [actionErr, setActionErr] = useState("");
  const [actionLoading, setActionLoading] = useState(false);

  // Load groups
  useEffect(() => {
    let alive = true;
    (async () => {
      setGroupsLoading(true);
      setGroupsErr("");
      try {
        const data = await apiGet("/api/dup-groups");
        if (!alive) return;
        setGroups(Array.isArray(data) ? data : []);
        // auto-select first group if none selected
        if (!selectedGroupId && data?.length) setSelectedGroupId(data[0].groupId);
      } catch (e) {
        if (!alive) return;
        setGroupsErr(e?.message || String(e));
      } finally {
        if (alive) setGroupsLoading(false);
      }
    })();
    return () => {
      alive = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Load selected group detail
  useEffect(() => {
    if (!selectedGroupId) return;
    let alive = true;
    (async () => {
      setDetailLoading(true);
      setDetailErr("");
      setGroupDetail(null);
      setKeepFileId(null);
      setDeleteIds(new Set());
      setActionMsg("");
      setActionErr("");
      try {
        const data = await apiGet(`/api/dup-groups/${encodeURIComponent(selectedGroupId)}`);
        if (!alive) return;
        setGroupDetail(data);
        // default keep = "best guess": shortest path, else newest
        const files = Array.isArray(data?.files) ? data.files : [];
        if (files.length) {
          const best = [...files].sort((a, b) => {
            const ap = (a.path || "").length;
            const bp = (b.path || "").length;
            if (ap !== bp) return ap - bp;
            const am = new Date(a.mtime || 0).getTime();
            const bm = new Date(b.mtime || 0).getTime();
            return bm - am;
          })[0];
          setKeepFileId(best?.id ?? null);
        }
      } catch (e) {
        if (!alive) return;
        setDetailErr(e?.message || String(e));
      } finally {
        if (alive) setDetailLoading(false);
      }
    })();
    return () => {
      alive = false;
    };
  }, [selectedGroupId]);

  const filteredGroups = useMemo(() => {
    const q = search.trim().toLowerCase();
    let g = groups || [];
    if (q) {
      g = g.filter((x) => {
        const hay =
          `${x.groupId ?? ""} ${x.hash ?? ""} ${x.fileCount ?? ""} ${x.sizeBytes ?? ""}`.toLowerCase();
        return hay.includes(q);
      });
    }
    const sorted = [...g];
    sorted.sort((a, b) => {
      if (sortGroups === "countDesc") return (b.fileCount || 0) - (a.fileCount || 0);
      if (sortGroups === "sizeDesc") return (b.sizeBytes || 0) - (a.sizeBytes || 0);
      // wastedDesc default
      return (b.wastedBytes || 0) - (a.wastedBytes || 0);
    });
    return sorted;
  }, [groups, search, sortGroups]);

  const sortedFiles = useMemo(() => {
    const files = Array.isArray(groupDetail?.files) ? groupDetail.files : [];
    const s = [...files];
    s.sort((a, b) => {
      const ap = a.path || "";
      const bp = b.path || "";
      if (sortFiles === "pathAsc") return ap.localeCompare(bp);
      if (sortFiles === "dirAsc") return dirOf(ap).localeCompare(dirOf(bp)) || basename(ap).localeCompare(basename(bp));
      if (sortFiles === "nameAsc") return basename(ap).localeCompare(basename(bp)) || dirOf(ap).localeCompare(dirOf(bp));
      const am = new Date(a.mtime || 0).getTime();
      const bm = new Date(b.mtime || 0).getTime();
      if (sortFiles === "newest") return bm - am;
      if (sortFiles === "oldest") return am - bm;
      return ap.localeCompare(bp);
    });
    return s;
  }, [groupDetail, sortFiles]);

  function toggleDelete(id) {
    setDeleteIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function applyKeep(id) {
    setKeepFileId(id);
    // Ensure keep isn't marked for delete
    setDeleteIds((prev) => {
      const next = new Set(prev);
      next.delete(id);
      return next;
    });
  }

  function smartSelectDeleteAllButKeep() {
    const files = Array.isArray(groupDetail?.files) ? groupDetail.files : [];
    const next = new Set();
    for (const f of files) {
      if (f.id !== keepFileId) next.add(f.id);
    }
    setDeleteIds(next);
  }

  function smartKeepNewest() {
    const files = Array.isArray(groupDetail?.files) ? groupDetail.files : [];
    if (!files.length) return;
    const newest = [...files].sort((a, b) => new Date(b.mtime || 0) - new Date(a.mtime || 0))[0];
    if (newest?.id != null) applyKeep(newest.id);
  }

  function smartKeepShortestPath() {
    const files = Array.isArray(groupDetail?.files) ? groupDetail.files : [];
    if (!files.length) return;
    const best = [...files].sort((a, b) => (a.path || "").length - (b.path || "").length)[0];
    if (best?.id != null) applyKeep(best.id);
  }

  async function submitPlan() {
    setActionMsg("");
    setActionErr("");

    if (!selectedGroupId) {
      setActionErr("No group selected.");
      return;
    }
    if (!keepFileId) {
      setActionErr("Pick a file to keep.");
      return;
    }
    if (deleteIds.size === 0) {
      setActionErr("Select at least one file to delete/quarantine.");
      return;
    }

    setActionLoading(true);
    try {
      const body = {
        keepFileId,
        deleteFileIds: Array.from(deleteIds),
        mode,
        dryRun,
      };
      const res = await apiPost(`/api/dup-groups/${encodeURIComponent(selectedGroupId)}/plan`, body);
      setActionMsg(
        dryRun
          ? `Dry run OK: planned ${res?.planned ?? deleteIds.size} actions.`
          : `Done: processed ${res?.planned ?? deleteIds.size} files (${mode}).`
      );
      // If not dry run, you might want to refresh group list/detail.
      if (!dryRun) {
        // Quick refresh detail
        const data = await apiGet(`/api/dup-groups/${encodeURIComponent(selectedGroupId)}`);
        setGroupDetail(data);
        // Reset selections
        setDeleteIds(new Set());
      }
    } catch (e) {
      setActionErr(e?.message || String(e));
    } finally {
      setActionLoading(false);
    }
  }

  const groupMeta = useMemo(() => {
    const g = (groups || []).find((x) => x.groupId === selectedGroupId);
    return g || null;
  }, [groups, selectedGroupId]);

  return (
    <div style={{ fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif" }}>
      <div style={{ display: "flex", height: "100vh" }}>
        {/* Left pane: groups */}
        <aside style={{ width: 420, borderRight: "1px solid #ddd", padding: 16, overflow: "auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <h2 style={{ margin: 0, fontSize: 18 }}>Duplicate Groups</h2>
            {groupsLoading && <span style={{ fontSize: 12 }}>Loading…</span>}
          </div>

          <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search hash / id / size…"
              style={{ flex: 1, padding: "8px 10px", border: "1px solid #ccc", borderRadius: 6 }}
            />
            <select
              value={sortGroups}
              onChange={(e) => setSortGroups(e.target.value)}
              style={{ padding: "8px 10px", border: "1px solid #ccc", borderRadius: 6 }}
              title="Sort groups"
            >
              <option value="wastedDesc">Wasted ↓</option>
              <option value="countDesc">Count ↓</option>
              <option value="sizeDesc">Size ↓</option>
            </select>
          </div>

          {groupsErr && (
            <div style={{ marginTop: 12, padding: 10, border: "1px solid #f5c2c7", background: "#f8d7da", borderRadius: 6 }}>
              {groupsErr}
            </div>
          )}

          <div style={{ marginTop: 12 }}>
            {filteredGroups.map((g) => {
              const active = g.groupId === selectedGroupId;
              return (
                <button
                  key={g.groupId}
                  onClick={() => setSelectedGroupId(g.groupId)}
                  style={{
                    width: "100%",
                    textAlign: "left",
                    padding: 12,
                    marginBottom: 8,
                    borderRadius: 8,
                    border: active ? "2px solid #000" : "1px solid #ddd",
                    background: active ? "#f2f2f2" : "#fff",
                    cursor: "pointer",
                  }}
                >
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                    <div style={{ fontWeight: 700, fontSize: 13 }}>#{g.groupId}</div>
                    <div style={{ fontSize: 12, opacity: 0.75 }}>{g.fileCount} files</div>
                  </div>
                  <div style={{ marginTop: 6, fontSize: 12, opacity: 0.85 }}>
                    Size: {formatBytes(g.sizeBytes)} • Wasted: {formatBytes(g.wastedBytes)}
                  </div>
                  <div style={{ marginTop: 6, fontSize: 11, opacity: 0.75, wordBreak: "break-all" }}>
                    {g.hash}
                  </div>
                </button>
              );
            })}
            {!groupsLoading && filteredGroups.length === 0 && (
              <div style={{ padding: 12, border: "1px dashed #ccc", borderRadius: 8, opacity: 0.8 }}>
                No duplicate groups found (or your search filtered them out).
              </div>
            )}
          </div>
        </aside>

        {/* Right pane: group detail */}
        <main style={{ flex: 1, padding: 16, overflow: "auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
            <div>
              <h2 style={{ margin: 0, fontSize: 18 }}>Group Review</h2>
              <div style={{ marginTop: 6, fontSize: 12, opacity: 0.8 }}>
                {groupMeta ? (
                  <>
                    Group <b>#{groupMeta.groupId}</b> • {groupMeta.fileCount} files • Each {formatBytes(groupMeta.sizeBytes)} •
                    Wasted {formatBytes(groupMeta.wastedBytes)}
                  </>
                ) : (
                  "Select a group on the left."
                )}
              </div>
              {groupMeta?.hash && (
                <div style={{ marginTop: 6, fontSize: 11, opacity: 0.75, wordBreak: "break-all" }}>{groupMeta.hash}</div>
              )}
            </div>

            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <label style={{ fontSize: 12, opacity: 0.9, display: "flex", alignItems: "center", gap: 6 }}>
                Mode:
                <select
                  value={mode}
                  onChange={(e) => setMode(e.target.value)}
                  style={{ padding: "6px 8px", border: "1px solid #ccc", borderRadius: 6 }}
                >
                  <option value="quarantine">Quarantine (move)</option>
                  <option value="delete">Delete (hard)</option>
                </select>
              </label>

              <label style={{ fontSize: 12, opacity: 0.9, display: "flex", alignItems: "center", gap: 6 }}>
                <input type="checkbox" checked={dryRun} onChange={(e) => setDryRun(e.target.checked)} />
                Dry run
              </label>

              <button
                onClick={submitPlan}
                disabled={actionLoading || !groupDetail}
                style={{
                  padding: "8px 10px",
                  borderRadius: 8,
                  border: "1px solid #111",
                  background: actionLoading ? "#eee" : "#111",
                  color: actionLoading ? "#111" : "#fff",
                  cursor: actionLoading ? "not-allowed" : "pointer",
                  fontWeight: 700,
                }}
                title="Submit planned actions"
              >
                {actionLoading ? "Working…" : dryRun ? "Plan (Dry Run)" : "Execute"}
              </button>
            </div>
          </div>

          {detailLoading && (
            <div style={{ marginTop: 12, padding: 12, border: "1px solid #ddd", borderRadius: 8 }}>Loading group…</div>
          )}
          {detailErr && (
            <div style={{ marginTop: 12, padding: 10, border: "1px solid #f5c2c7", background: "#f8d7da", borderRadius: 6 }}>
              {detailErr}
            </div>
          )}

          {!!actionMsg && (
            <div style={{ marginTop: 12, padding: 10, border: "1px solid #badbcc", background: "#d1e7dd", borderRadius: 6 }}>
              {actionMsg}
            </div>
          )}
          {!!actionErr && (
            <div style={{ marginTop: 12, padding: 10, border: "1px solid #f5c2c7", background: "#f8d7da", borderRadius: 6 }}>
              {actionErr}
            </div>
          )}

          {groupDetail && (
            <>
              <div style={{ marginTop: 16, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                <div style={{ fontSize: 12, opacity: 0.9, display: "flex", alignItems: "center", gap: 6 }}>
                  Sort files:
                  <select
                    value={sortFiles}
                    onChange={(e) => setSortFiles(e.target.value)}
                    style={{ padding: "6px 8px", border: "1px solid #ccc", borderRadius: 6 }}
                  >
                    <option value="pathAsc">Path A→Z</option>
                    <option value="dirAsc">Directory A→Z</option>
                    <option value="nameAsc">Filename A→Z</option>
                    <option value="newest">Newest first</option>
                    <option value="oldest">Oldest first</option>
                  </select>
                </div>

                <button onClick={smartKeepNewest} style={{ padding: "6px 8px", borderRadius: 8, border: "1px solid #ccc", background: "#fff" }}>
                  Keep newest
                </button>
                <button
                  onClick={smartKeepShortestPath}
                  style={{ padding: "6px 8px", borderRadius: 8, border: "1px solid #ccc", background: "#fff" }}
                >
                  Keep shortest path
                </button>
                <button
                  onClick={smartSelectDeleteAllButKeep}
                  style={{ padding: "6px 8px", borderRadius: 8, border: "1px solid #ccc", background: "#fff" }}
                >
                  Delete all but keep
                </button>

                <div style={{ marginLeft: "auto", fontSize: 12, opacity: 0.85 }}>
                  Keep: <b>{keepFileId ?? "—"}</b> • Marked: <b>{deleteIds.size}</b>
                </div>
              </div>

              <div style={{ marginTop: 12, border: "1px solid #ddd", borderRadius: 10, overflow: "hidden" }}>
                <div style={{ background: "#f6f6f6", padding: 10, fontSize: 12, display: "grid", gridTemplateColumns: "90px 80px 1fr 170px 170px", gap: 10, fontWeight: 700 }}>
                  <div>Keep</div>
                  <div>Delete</div>
                  <div>Path</div>
                  <div>Modified</div>
                  <div>Created</div>
                </div>

                {sortedFiles.map((f) => {
                  const isKeep = f.id === keepFileId;
                  const isDelete = deleteIds.has(f.id);

                  return (
                    <div
                      key={f.id}
                      style={{
                        padding: 10,
                        display: "grid",
                        gridTemplateColumns: "90px 80px 1fr 170px 170px",
                        gap: 10,
                        borderTop: "1px solid #eee",
                        background: isKeep ? "#fffbe6" : isDelete ? "#fff5f5" : "#fff",
                        alignItems: "center",
                      }}
                    >
                      <div>
                        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
                          <input type="radio" name="keep" checked={isKeep} onChange={() => applyKeep(f.id)} />
                          Keep
                        </label>
                      </div>

                      <div>
                        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, opacity: isKeep ? 0.4 : 1 }}>
                          <input type="checkbox" checked={isDelete} disabled={isKeep} onChange={() => toggleDelete(f.id)} />
                          Del
                        </label>
                      </div>

                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                          {basename(f.path)}
                        </div>
                        <div style={{ fontSize: 12, opacity: 0.8, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                          {dirOf(f.path)}
                        </div>
                        <div style={{ fontSize: 11, opacity: 0.65, marginTop: 4 }}>
                          ID {f.id} • {formatBytes(f.sizeBytes)}
                        </div>
                      </div>

                      <div style={{ fontSize: 12, opacity: 0.85 }}>{formatDate(f.mtime)}</div>
                      <div style={{ fontSize: 12, opacity: 0.85 }}>{formatDate(f.ctime)}</div>
                    </div>
                  );
                })}

                {sortedFiles.length === 0 && (
                  <div style={{ padding: 12, opacity: 0.8 }}>No files in this group.</div>
                )}
              </div>

              <div style={{ marginTop: 12, fontSize: 12, opacity: 0.8, lineHeight: 1.4 }}>
                Safety note: make the backend re-check the file exists and is under allowed roots before moving/deleting. Humans will misclick. That’s not a moral failure;
                it’s a UI constant.
              </div>
            </>
          )}
        </main>
      </div>
    </div>
  );
}