import type {
    IssueCommentRow,
    IssueRow,
    LabelRow,
    RepositoryRow,
} from "../../db/index.ts";
import { labelTextColor } from "../../lib/labelColor.ts";
import { displayName } from "../../lib/users.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Avatar } from "../Avatar.tsx";
import { DateWithEdited } from "../DateWithEdited.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 IssueDetailProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    issue: IssueRow & {
        author_username: string;
        author_avatar_version: number | null;
    };
    bodyHtml: string;
    comments: (IssueCommentRow & {
        author_username: string;
        author_avatar_version: number | null;
        bodyHtml: string;
    })[];
    reactions: ReactionCount[];
    commentReactions: Map<number, ReactionCount[]>;
    issueLabels: LabelRow[];
    repoLabels: LabelRow[];
}

export function IssueDetail({
    user,
    repo,
    issue,
    bodyHtml,
    comments,
    reactions,
    commentReactions,
    issueLabels,
    repoLabels,
}: IssueDetailProps) {
    const canEditIssue =
        user != null &&
        (user.isAdmin ||
            (user.id === issue.author_id && issue.status === "open"));
    const canEditComment = (c: IssueCommentRow) =>
        user != null &&
        (user.isAdmin || (user.id === c.author_id && issue.status === "open"));
    return (
        <Layout user={user} title={`${issue.title} — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="issues" user={user} />
                <div class="issue-detail">
                    <div class="issue-detail-header">
                        <span class="issue-number">#{issue.number}</span>
                        <div class="title-with-edit">
                            <h2 class="issue-detail-title">{issue.title}</h2>
                            {canEditIssue && (
                                <>
                                    <div class="title-edit-form-area">
                                        <form
                                            method="POST"
                                            action={`/${repo.name}/issues/${issue.number}/edit`}
                                            class="title-edit-form"
                                        >
                                            <input
                                                class="form-input"
                                                name="title"
                                                value={issue.title}
                                                required
                                            />
                                            <input
                                                type="hidden"
                                                name="edit_body"
                                                value={issue.body}
                                            />
                                            <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">
                                            Edit title
                                        </summary>
                                    </details>
                                </>
                            )}
                        </div>
                        <span class={`issue-badge ${issue.status}`}>
                            {issue.status}
                        </span>
                        {canEditIssue && (
                            <div class="issue-detail-meta-actions">
                                {user?.isAdmin && issue.status === "open" && (
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/issues/${issue.number}/complete`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-primary"
                                        >
                                            Completed
                                        </button>
                                    </form>
                                )}
                                {user?.isAdmin && (
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/issues/${issue.number}/close`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-sm"
                                        >
                                            {issue.status === "open"
                                                ? "Close issue"
                                                : "Reopen issue"}
                                        </button>
                                    </form>
                                )}
                                <details class="confirm-details">
                                    <summary class="btn btn-sm btn-danger">
                                        Delete
                                    </summary>
                                    <div class="confirm-popup">
                                        Permanently delete this issue?
                                        <form
                                            method="POST"
                                            action={`/${repo.name}/issues/${issue.number}/delete`}
                                            class="inline-form"
                                        >
                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-danger"
                                            >
                                                Yes, delete
                                            </button>
                                        </form>
                                    </div>
                                </details>
                            </div>
                        )}
                    </div>

                    {(issueLabels.length > 0 || user?.isAdmin) && (
                        <div class="issue-labels-row">
                            {issueLabels.map((label) => (
                                <span class="label-badge-wrap">
                                    <span
                                        class="label-badge"
                                        style={`background:${label.color};color:${labelTextColor(label.color)}`}
                                    >
                                        {label.name}
                                    </span>
                                    {user?.isAdmin && (
                                        <form
                                            method="POST"
                                            action={`/${repo.name}/issues/${issue.number}/labels/remove`}
                                            class="label-remove-form"
                                        >
                                            <input
                                                type="hidden"
                                                name="label_id"
                                                value={String(label.id)}
                                            />
                                            <button
                                                type="submit"
                                                class="label-remove-btn"
                                                title="Remove label"
                                            >
                                                ×
                                            </button>
                                        </form>
                                    )}
                                </span>
                            ))}
                            {user?.isAdmin &&
                                repoLabels.filter(
                                    (l) =>
                                        !issueLabels.some((il) => il.id === l.id),
                                ).length > 0 && (
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/issues/${issue.number}/labels/add`}
                                        class="label-add-inline-form"
                                    >
                                        <select name="label_id" class="label-select">
                                            {repoLabels
                                                .filter(
                                                    (l) =>
                                                        !issueLabels.some(
                                                            (il) => il.id === l.id,
                                                        ),
                                                )
                                                .map((label) => (
                                                    <option
                                                        value={String(label.id)}
                                                    >
                                                        {label.name}
                                                    </option>
                                                ))}
                                        </select>
                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-secondary"
                                        >
                                            Add label
                                        </button>
                                    </form>
                                )}
                        </div>
                    )}

                    <div class="timeline-item">
                        <div class="timeline-author">
                            <Avatar
                                userId={issue.author_id}
                                version={issue.author_avatar_version}
                                size={24}
                            />
                            <strong>
                                {displayName(issue.author_username)}
                            </strong>
                            <div class="timeline-author-right">
                                {canEditIssue && (
                                    <details class="inline-edit-details">
                                        <summary class="btn btn-xs">
                                            <span class="when-closed">
                                                Edit
                                            </span>
                                            <span class="when-open">
                                                Stop editing
                                            </span>
                                        </summary>
                                    </details>
                                )}
                                <DateWithEdited
                                    date={issue.created_at}
                                    editedAt={issue.edited_at}
                                />
                            </div>
                        </div>
                        {canEditIssue && (
                            <div class="inline-edit-form-area">
                                <form
                                    method="POST"
                                    action={`/${repo.name}/issues/${issue.number}/edit`}
                                    class="inline-edit-form"
                                >
                                    <input
                                        type="hidden"
                                        name="title"
                                        value={issue.title}
                                    />
                                    <div class="form-group">
                                        <textarea
                                            class="form-input"
                                            id="edit-issue-body"
                                            name="edit_body"
                                            rows="6"
                                        >
                                            {issue.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">
                            {bodyHtml || (
                                <em class="text-muted">
                                    No description provided.
                                </em>
                            )}
                        </div>
                        <ReactionBar
                            reactions={reactions}
                            postUrl={`/${repo.name}/issues/${issue.number}/react`}
                            user={user}
                        />
                    </div>

                    {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">
                                                <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={`/${repo.name}/issues/${issue.number}/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={`/${repo.name}/issues/${issue.number}/react`}
                                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={`/${repo.name}/issues/${issue.number}/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>
            </div>
        </Layout>
    );
}