import { escapeHtml } from "@kitajs/html";
import type {
    PatchCommentRow,
    PatchRow,
    RepositoryRow,
} from "../../db/index.ts";
import { displayName } from "../../lib/users.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { RenderedDiffFile } from "../../services/diffHighlight.ts";
import type { ApplyResult } from "../../services/patchCache.ts";
import { Avatar } from "../Avatar.tsx";
import { DateWithEdited } from "../DateWithEdited.tsx";
import { DiffView } from "../DiffView.tsx";
import { Layout } from "../layout.tsx";
import { ReactionBar, type ReactionCount } from "../ReactionBar.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "../repos/RepoNav.tsx";

interface PatchDetailProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    patch: PatchRow & {
        author_username: string;
        author_avatar_version: number | null;
        author_name: string;
        author_email: string;
    };
    descriptionHtml: string;
    applyResult: ApplyResult | null;
    files: RenderedDiffFile[];
    tab: "conversation" | "changes";
    comments: (PatchCommentRow & {
        author_username: string;
        author_avatar_version: number | null;
        bodyHtml: string;
    })[];
    reactions: ReactionCount[];
    commentReactions: Map<number, ReactionCount[]>;
}

export function PatchDetail({
    user,
    repo,
    patch,
    descriptionHtml,
    applyResult,
    files,
    tab,
    comments,
    reactions,
    commentReactions,
}: PatchDetailProps) {
    const canEdit =
        user != null &&
        (user.isAdmin ||
            (user.id === patch.author_id && patch.status === "open"));
    const canEditComment = (c: PatchCommentRow) =>
        user != null &&
        (user.isAdmin || (user.id === c.author_id && patch.status === "open"));

    const baseUrl = `/${repo.name}/patches/${patch.number}`;
    const reactUrl = `${baseUrl}/react`;

    return (
        <Layout user={user} title={`${patch.title} — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="patches" user={user} />

                <div class="issue-detail">
                    <div class="issue-detail-header">
                        <span class="issue-number">#{patch.number}</span>
                        <div class="title-with-edit">
                            <h2 class="issue-detail-title">{patch.title}</h2>
                            {canEdit && (
                                <>
                                    <div class="title-edit-form-area">
                                        <form
                                            method="POST"
                                            action={`${baseUrl}/edit`}
                                            class="title-edit-form"
                                        >
                                            <input
                                                class="form-input"
                                                name="title"
                                                value={patch.title}
                                                required
                                            />
                                            <input
                                                type="hidden"
                                                name="edit_description"
                                                value={patch.description}
                                            />
                                            <div class="title-edit-actions">
                                                <button
                                                    type="submit"
                                                    class="btn btn-sm btn-primary"
                                                >
                                                    Save
                                                </button>
                                                <button
                                                    type="button"
                                                    class="btn btn-sm"
                                                    onclick="this.closest('.title-with-edit').querySelector('details').removeAttribute('open')"
                                                >
                                                    Cancel
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <details class="title-edit-details">
                                        <summary class="btn btn-xs btn-ghost">
                                            Edit title
                                        </summary>
                                    </details>
                                </>
                            )}
                        </div>
                        <span class={`patch-badge ${patch.status}`}>
                            {patch.status}
                        </span>
                        {canEdit && (
                            <div class="issue-detail-meta-actions">
                                {user?.isAdmin &&
                                    patch.status === "open" &&
                                    applyResult?.status === "clean" && (
                                        <form
                                            method="POST"
                                            action={`${baseUrl}/merge`}
                                            class="inline-form"
                                        >
                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-primary"
                                            >
                                                Merge patch
                                            </button>
                                        </form>
                                    )}
                                {user?.isAdmin && patch.status !== "merged" && (
                                    <form
                                        method="POST"
                                        action={`${baseUrl}/close`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-sm"
                                        >
                                            {patch.status === "open"
                                                ? "Close patch"
                                                : "Reopen patch"}
                                        </button>
                                    </form>
                                )}
                                <details class="confirm-details">
                                    <summary class="btn btn-sm btn-danger">
                                        Delete
                                    </summary>
                                    <div class="confirm-popup">
                                        Permanently delete this patch?
                                        <form
                                            method="POST"
                                            action={`${baseUrl}/delete`}
                                            class="inline-form"
                                        >
                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-danger"
                                            >
                                                Yes, delete
                                            </button>
                                        </form>
                                    </div>
                                </details>
                            </div>
                        )}
                    </div>
                    <div class="patch-author-meta">
                        <span class="patch-author-label">git author:</span>
                        <span class="patch-author-identity">{escapeHtml(`${patch.author_name} <${patch.author_email}>`)}</span>
                    </div>
                </div>

                {/* Subview tabs */}
                <div class="patch-tab-nav">
                    <a
                        href={baseUrl}
                        class={`repo-tab${tab === "conversation" ? " active" : ""}`}
                    >
                        Conversation{" "}
                        {comments.length > 0 && (
                            <span class="tab-count">{comments.length}</span>
                        )}
                    </a>
                    <a
                        href={`${baseUrl}?tab=changes`}
                        class={`repo-tab${tab === "changes" ? " active" : ""}`}
                    >
                        Changes{" "}
                        {files.length > 0 && (
                            <span class="tab-count">{files.length}</span>
                        )}
                    </a>
                </div>

                {tab === "conversation" ? (
                    <div class="issue-detail">
                        {/* Patch description */}
                        <div class="timeline-item">
                            <div class="timeline-author">
                                <Avatar
                                    userId={patch.author_id}
                                    version={patch.author_avatar_version}
                                    size={24}
                                />
                                <strong>
                                    {displayName(patch.author_username)}
                                </strong>
                                <div class="timeline-author-right">
                                    {canEdit && (
                                        <details class="inline-edit-details">
                                            <summary class="btn btn-xs btn-ghost">
                                                <span class="when-closed">
                                                    Edit
                                                </span>
                                                <span class="when-open">
                                                    Stop editing
                                                </span>
                                            </summary>
                                        </details>
                                    )}
                                    <DateWithEdited
                                        date={patch.created_at}
                                        editedAt={patch.edited_at}
                                    />
                                </div>
                            </div>
                            {canEdit && (
                                <div class="inline-edit-form-area">
                                    <form
                                        method="POST"
                                        action={`${baseUrl}/edit`}
                                        class="inline-edit-form"
                                    >
                                        <input
                                            type="hidden"
                                            name="title"
                                            value={patch.title}
                                        />
                                        <div class="form-group">
                                            <textarea
                                                class="form-input"
                                                id="edit-patch-desc"
                                                name="edit_description"
                                                rows="6"
                                            >
                                                {patch.description}
                                            </textarea>
                                        </div>
                                        <div class="form-actions">
                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-primary"
                                            >
                                                Save
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            )}
                            <div class="timeline-body markdown-body">
                                {descriptionHtml || (
                                    <em class="text-muted">
                                        No description provided.
                                    </em>
                                )}
                            </div>
                            <ReactionBar
                                reactions={reactions}
                                postUrl={reactUrl}
                                user={user}
                            />
                        </div>

                        {/* Apply status */}
                        {applyResult && (
                            <div class="timeline-item">
                                <div
                                    class={`apply-result apply-${applyResult.status}`}
                                >
                                    <div>
                                        <span class="apply-icon">
                                            {applyResult.status === "clean"
                                                ? "✓"
                                                : "✗"}
                                        </span>
                                        <span>
                                            {applyResult.status === "clean"
                                                ? "Applies cleanly"
                                                : "Has conflicts"}
                                        </span>
                                    </div>
                                    {applyResult.output && (
                                        <pre class="apply-output">
                                            {applyResult.output}
                                        </pre>
                                    )}
                                </div>
                            </div>
                        )}

                        {/* Comments */}
                        {comments.map((comment) => (
                            <div class="timeline-item">
                                <div class="timeline-author">
                                    <Avatar
                                        userId={comment.author_id}
                                        version={comment.author_avatar_version}
                                        size={24}
                                    />
                                    <strong>
                                        {displayName(comment.author_username)}
                                    </strong>
                                    <div class="timeline-author-right">
                                        {canEditComment(comment) && (
                                            <details class="inline-edit-details">
                                                <summary class="btn btn-xs btn-ghost">
                                                    <span class="when-closed">
                                                        Edit
                                                    </span>
                                                    <span class="when-open">
                                                        Stop editing
                                                    </span>
                                                </summary>
                                            </details>
                                        )}
                                        <DateWithEdited
                                            date={comment.created_at}
                                            editedAt={comment.edited_at}
                                        />
                                    </div>
                                </div>
                                {canEditComment(comment) && (
                                    <div class="inline-edit-form-area">
                                        <form
                                            method="POST"
                                            action={`${baseUrl}/comments/${comment.id}/edit`}
                                            class="inline-edit-form"
                                        >
                                            <div class="form-group">
                                                <textarea
                                                    class="form-input"
                                                    name="edit_body"
                                                    rows="6"
                                                >
                                                    {comment.body}
                                                </textarea>
                                            </div>
                                            <div class="form-actions">
                                                <button
                                                    type="submit"
                                                    class="btn btn-sm btn-primary"
                                                >
                                                    Save
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                )}
                                <div class="timeline-body markdown-body">
                                    {comment.bodyHtml}
                                </div>
                                <ReactionBar
                                    reactions={
                                        commentReactions.get(comment.id) ?? []
                                    }
                                    postUrl={reactUrl}
                                    commentId={comment.id}
                                    user={user}
                                />
                            </div>
                        ))}

                        {user && (
                            <div class="timeline-item timeline-item-new">
                                <h3 class="section-title">Add a comment</h3>
                                <form
                                    method="POST"
                                    action={`${baseUrl}/comments`}
                                >
                                    <div class="form-group">
                                        <textarea
                                            name="body"
                                            rows="6"
                                            placeholder="Leave a comment (Markdown supported)"
                                            required
                                        />
                                    </div>
                                    <div class="form-actions">
                                        <button
                                            type="submit"
                                            class="btn btn-primary"
                                        >
                                            Comment
                                        </button>
                                    </div>
                                </form>
                            </div>
                        )}
                        {!user && (
                            <p class="text-muted">
                                <a href="/login">Sign in</a> to leave a comment.
                            </p>
                        )}
                    </div>
                ) : (
                    <DiffView files={files} repo={repo} />
                )}
            </div>
        </Layout>
    );
}