import config from "../../config.ts";
import type {
    IssueCommentRow,
    IssueRow,
    LabelRow,
    RepositoryRow,
} from "../../db/index.ts";
import { displayName } from "../../lib/users.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Avatar } from "../Avatar.tsx";
import { CommentThread } from "../CommentThread.tsx";
import { DateWithEdited } from "../DateWithEdited.tsx";
import { EditableTitle } from "../EditableTitle.tsx";
import { LabelBadges } from "../LabelBadges.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 baseUrl = `/${repo.name}/issues/${issue.number}`;
    const canEditIssue =
        user != null &&
        (user.isAdmin ||
            (user.id === issue.author_id && issue.status === "open"));
    const canManageLabels =
        user != null &&
        (user.isAdmin ||
            (repo.allow_user_labels === 1 && user.id === issue.author_id));
    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>
                        <EditableTitle
                            title={issue.title}
                            canEdit={canEditIssue}
                            editAction={`${baseUrl}/edit`}
                            bodyFieldName="edit_body"
                            bodyValue={issue.body}
                        />
                        <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={`${baseUrl}/complete`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-primary"
                                        >
                                            Completed
                                        </button>
                                    </form>
                                )}
                                {user?.isAdmin && (
                                    <form
                                        method="POST"
                                        action={`${baseUrl}/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={`${baseUrl}/delete`}
                                            class="inline-form"
                                        >
                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-danger"
                                            >
                                                Yes, delete
                                            </button>
                                        </form>
                                    </div>
                                </details>
                            </div>
                        )}
                    </div>

                    <LabelBadges
                        labels={issueLabels}
                        repoLabels={repoLabels}
                        canManage={canManageLabels}
                        baseUrl={baseUrl}
                    />

                    <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={`${baseUrl}/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"
                                            maxlength={
                                                config.MAX_TEXT_BODY_BYTES
                                            }
                                        >
                                            {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={`${baseUrl}/react`}
                            user={user}
                        />
                    </div>

                    <CommentThread
                        user={user}
                        comments={comments}
                        commentReactions={commentReactions}
                        baseUrl={baseUrl}
                        parentStatus={issue.status}
                    />
                </div>
            </div>
        </Layout>
    );
}