import type { TreeEntry } from "../../services/git.ts";

interface FileTreeTableProps {
    repoName: string;
    treeRef: string;
    subpath: string;
    entries: TreeEntry[];
}

export function FileTreeTable({
    repoName,
    treeRef,
    subpath,
    entries,
}: FileTreeTableProps) {
    const parts = subpath ? subpath.split("/") : [];
    const parentPath = parts.slice(0, -1).join("/");
    const parentHref = parentPath
        ? `/${repoName}/tree/${treeRef}/${parentPath}`
        : `/${repoName}/tree/${treeRef}`;

    const sorted = [...entries].sort((a, b) => {
        if (a.type !== b.type) return a.type === "tree" ? -1 : 1;
        return a.name.localeCompare(b.name);
    });

    return (
        <table class="file-tree">
            <tbody>
                {subpath && (
                    <tr class="file-tree-row file-tree-row-up">
                        <td class="file-icon file-icon-dir">{DirIcon()}</td>
                        <td class="file-name" colspan="2">
                            <a href={parentHref}>..</a>
                        </td>
                    </tr>
                )}
                {sorted.map((entry) => {
                    const entryPath = subpath
                        ? `${subpath}/${entry.name}`
                        : entry.name;
                    const href =
                        entry.type === "tree"
                            ? `/${repoName}/tree/${treeRef}/${entryPath}`
                            : `/${repoName}/blob/${treeRef}/${entryPath}`;
                    return (
                        <tr class="file-tree-row">
                            <td
                                class={`file-icon ${entry.type === "tree" ? "file-icon-dir" : "file-icon-file"}`}
                            >
                                {entry.type === "tree" ? DirIcon() : FileIcon()}
                            </td>
                            <td class="file-name">
                                <a
                                    href={href}
                                    class={
                                        entry.type === "tree"
                                            ? "file-name-dir"
                                            : undefined
                                    }
                                >
                                    {entry.name}
                                </a>
                            </td>
                            <td class="file-size">
                                {entry.type === "blob" && entry.size !== "-"
                                    ? formatSize(parseInt(entry.size, 10))
                                    : ""}
                            </td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
}

function formatSize(bytes: number): string {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}

function DirIcon(): JSX.Element {
    return `<svg class="tree-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"/></svg>`;
}

function FileIcon(): JSX.Element {
    return `<svg class="tree-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"/></svg>`;
}