import type { RepositoryRow } from "../db/index.ts";
import type { RenderedDiffFile } from "../services/diffHighlight.ts";

export function slugify(s: string): string {
    return `diff-${s.replace(/[^a-zA-Z0-9]/g, "-")}`;
}

export function statusLetter(status: string): string {
    return (
        (
            {
                added: "A",
                deleted: "D",
                modified: "M",
                renamed: "R",
                copied: "C",
            } as Record<string, string>
        )[status] ?? "M"
    );
}

export type FileTreeNode =
    | { type: "file"; file: RenderedDiffFile }
    | { type: "dir"; children: Map<string, FileTreeNode> };

export function buildFileTree(
    files: RenderedDiffFile[],
): Map<string, FileTreeNode> {
    const root = new Map<string, FileTreeNode>();
    for (const f of files) {
        const p = f.newPath || f.oldPath;
        const parts = p.split("/");
        let current = root;
        for (let i = 0; i < parts.length - 1; i++) {
            const part = parts[i]!;
            if (!current.has(part)) {
                current.set(part, { type: "dir", children: new Map() });
            }
            const node = current.get(part)!;
            if (node.type === "dir") current = node.children;
        }
        current.set(parts[parts.length - 1]!, { type: "file", file: f });
    }
    return root;
}

export function renderFileTree(tree: Map<string, FileTreeNode>): JSX.Element {
    return (
        <ul class="file-nav-list">
            {[...tree.entries()]
                .sort(([, a], [, b]) =>
                    a.type === b.type ? 0 : a.type === "dir" ? -1 : 1,
                )
                .map(([name, node]) =>
                    node.type === "dir" ? (
                        <li class="file-nav-dir">
                            <details open>
                                <summary class="file-nav-dir-toggle">
                                    <span class="file-nav-toggle-icon">▾</span>
                                    <span safe>{name}/</span>
                                </summary>
                                {renderFileTree(node.children)}
                            </details>
                        </li>
                    ) : (
                        <li>
                            <a
                                href={`#${slugify(node.file.newPath || node.file.oldPath)}`}
                                class="file-nav-item"
                                title={node.file.newPath || node.file.oldPath}
                            >
                                <span
                                    class={`file-nav-status file-status-${node.file.status}`}
                                    safe
                                >
                                    {statusLetter(node.file.status)}
                                </span>
                                <span class="file-nav-name" safe>
                                    {name}
                                </span>
                                <span class="file-nav-stat">
                                    {node.file.isBinary ? (
                                        <span class="nav-binary">
                                            {node.file.binarySize ? (
                                                <>
                                                    <span class="nav-del">
                                                        {
                                                            node.file.binarySize
                                                                .before
                                                        }
                                                    </span>
                                                    {" \u2192 "}
                                                    <span class="nav-add">
                                                        {
                                                            node.file.binarySize
                                                                .after
                                                        }
                                                    </span>
                                                </>
                                            ) : (
                                                "Bin"
                                            )}
                                        </span>
                                    ) : (
                                        <>
                                            {node.file.added > 0 && (
                                                <span class="nav-add">
                                                    +{node.file.added}
                                                </span>
                                            )}
                                            {node.file.removed > 0 && (
                                                <span class="nav-del">
                                                    -{node.file.removed}
                                                </span>
                                            )}
                                        </>
                                    )}
                                </span>
                            </a>
                        </li>
                    ),
                )}
        </ul>
    );
}

interface DiffViewProps {
    files: RenderedDiffFile[];
    repo: RepositoryRow;
    /** If provided, an extra "view at sha" link is shown in each file header. */
    sha?: string;
}

export function DiffView({ files, repo, sha }: DiffViewProps) {
    const totalAdded = files.reduce((s, f) => s + f.added, 0);
    const totalRemoved = files.reduce((s, f) => s + f.removed, 0);

    const changedStr = [
        `${files.length} file${files.length !== 1 ? "s" : ""} changed`,
        totalAdded > 0
            ? `${totalAdded} insertion${totalAdded !== 1 ? "s" : ""}(+)`
            : "",
        totalRemoved > 0
            ? `${totalRemoved} deletion${totalRemoved !== 1 ? "s" : ""}(-)`
            : "",
    ]
        .filter(Boolean)
        .join(", ");

    return (
        <>
            {files.length > 0 && (
                <div class="commit-stats-bar">
                    <span class="commit-stats-text" safe>{changedStr}</span>
                </div>
            )}

            {files.length === 0 ? (
                <p class="text-muted" style="margin-top: var(--space-6)">
                    Empty diff or no diff available.
                </p>
            ) : (
                <div class="commit-layout">
                    <aside class="commit-file-nav">
                        <details class="file-nav-details" open>
                            <summary class="file-nav-toggle">
                                <span class="file-nav-toggle-icon">▾</span>
                                <span>Files changed ({files.length})</span>
                            </summary>
                            {renderFileTree(buildFileTree(files))}
                        </details>
                    </aside>

                    <div class="commit-diffs">
                        {files.map((f) => {
                            const displayPath = f.newPath || f.oldPath;
                            const sl = statusLetter(f.status);
                            return (
                                <details
                                    class="diff-file"
                                    id={slugify(displayPath)}
                                    open
                                >
                                    <summary class="diff-file-header">
                                        <div class="diff-file-header-left">
                                            <span class="diff-file-toggle-icon">
                                                ▾
                                            </span>
                                            <span
                                                class={`diff-status-badge diff-status-${f.status}`}
                                                safe
                                            >
                                                {sl}
                                            </span>
                                            <span class="diff-file-path mono" safe>
                                                {displayPath}
                                            </span>
                                            {f.status === "renamed" &&
                                                f.oldPath !== f.newPath && (
                                                    <span class="diff-rename-arrow" safe>
                                                        ← {f.oldPath}
                                                    </span>
                                                )}
                                        </div>
                                        <div class="diff-file-header-right">
                                            {f.isBinary ? (
                                                <span class="diff-stat-binary">
                                                    {f.binarySize ? (
                                                        <>
                                                            {"Bin "}
                                                            <span class="diff-stat-del">
                                                                {
                                                                    f.binarySize
                                                                        .before
                                                                }
                                                            </span>
                                                            {" \u2192 "}
                                                            <span class="diff-stat-add">
                                                                {
                                                                    f.binarySize
                                                                        .after
                                                                }
                                                            </span>
                                                            {" bytes"}
                                                        </>
                                                    ) : (
                                                        "Binary"
                                                    )}
                                                </span>
                                            ) : (
                                                <>
                                                    {f.added > 0 && (
                                                        <span class="diff-stat-add">
                                                            +{f.added}
                                                        </span>
                                                    )}
                                                    {f.removed > 0 && (
                                                        <span class="diff-stat-del">
                                                            -{f.removed}
                                                        </span>
                                                    )}
                                                </>
                                            )}
                                            {f.status !== "deleted" && (
                                                <>
                                                    {!!sha && (
                                                        <a
                                                            href={`/${repo.name}/blob/${sha}/${displayPath}`}
                                                            class="btn btn-xs btn-secondary"
                                                            title={`View file at ${sha.slice(0, 7)}`}
                                                            safe
                                                        >
                                                            @ {sha.slice(0, 7)}
                                                        </a>
                                                    )}
                                                    <a
                                                        href={`/${repo.name}/blob/${repo.default_branch}/${displayPath}`}
                                                        class="btn btn-xs btn-secondary"
                                                        title={`View file at ${repo.default_branch}`}
                                                        safe
                                                    >
                                                        @ {repo.default_branch}
                                                    </a>
                                                </>
                                            )}
                                        </div>
                                    </summary>

                                    {f.isBinary ? (
                                        <div class="diff-binary-notice">
                                            Binary file — not shown
                                        </div>
                                    ) : f.hunks.length === 0 ? (
                                        <div class="diff-binary-notice">
                                            No textual changes.
                                        </div>
                                    ) : (
                                        <div class="diff-file-body">
                                            {f.hunks.map((hunk) => (
                                                <div class="diff-hunk">
                                                    <table class="diff-table">
                                                        <thead>
                                                            <tr>
                                                                <th
                                                                    colspan="4"
                                                                    class="diff-hunk-header"
                                                                    safe
                                                                >
                                                                    {
                                                                        hunk.header
                                                                    }
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {hunk.rows.map(
                                                                (row) => (
                                                                    <tr
                                                                        class={`diff-row diff-row-${row.type}`}
                                                                    >
                                                                        <td class="diff-ln diff-ln-old">
                                                                            {row.oldLine ??
                                                                                ""}
                                                                        </td>
                                                                        <td class="diff-ln diff-ln-new">
                                                                            {row.newLine ??
                                                                                ""}
                                                                        </td>
                                                                        <td class="diff-sign">
                                                                            {row.type ===
                                                                            "add"
                                                                                ? "+"
                                                                                : row.type ===
                                                                                    "del"
                                                                                  ? "-"
                                                                                  : " "}
                                                                        </td>
                                                                        <td class="diff-code">
                                                                            {
                                                                                row.html as "safe"
                                                                            }
                                                                        </td>
                                                                    </tr>
                                                                ),
                                                            )}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </details>
                            );
                        })}
                    </div>
                </div>
            )}
        </>
    );
}