import { Link, router, usePage } from '@inertiajs/react';
import { CornerDownRight } from 'lucide-react';
import type { MouseEvent, PointerEvent, ReactNode } from 'react';
import { useCallback, useContext, useRef, useState } from 'react';
import CommitController from '@/actions/App/Http/Controllers/CommitController';
import CommitLinkPreviewController from '@/actions/App/Http/Controllers/CommitLinkPreviewController';
import { CommitAuthorFollowButton } from '@/components/commit-author-follow-button';
import { FoldedCommitBody } from '@/components/commit-body';
import { CommitImages } from '@/components/commit-images';
import { CommitPastelButton } from '@/components/commit-pastel-button';
import { CommitPoll } from '@/components/commit-poll';
import { CommitQuoteButton } from '@/components/commit-quote-button';
import { CommitSecondaryActions } from '@/components/commit-secondary-actions';
import { CommitStarButton } from '@/components/commit-star-button';
import { CommitStatusBadge } from '@/components/commit-status-badge';
import {
    ShowThreadLink,
    ThreadActions,
    ThreadReplies,
    ThreadReplyComposer,
    useThread,
} from '@/components/commit-thread';
import { useCommitTranslation } from '@/components/commit-translation';
import {
    GraphDimmed,
    GraphScope,
    useGraphNode,
} from '@/components/graph-canvas';
import {
    ChainedEntrance,
    GraphRail,
    RailAvatar,
    RailDot,
    RailSegment,
    railDotRing,
} from '@/components/graph-rail';
import { HiddenLinkPreviewContext } from '@/components/hidden-link-preview-context';
import { LinkPreview } from '@/components/link-preview';
import { LiveStreamTrigger } from '@/components/live-stream-card';
import { QuotedCommit } from '@/components/quoted-commit';
import {
    ThreadPositionBadge,
    type ThreadPosition,
} from '@/components/thread-position-badge';
import { TimestampTooltip } from '@/components/timestamp-tooltip';
import { Button } from '@/components/ui/button';
import { UserPreview } from '@/components/user-preview';
import {
    useCommitNotFound,
    useIsCommitDeleted,
} from '@/hooks/use-deleted-resources';
import { useNow } from '@/hooks/use-now';
import { useOwnsCommit } from '@/hooks/use-owns-commit';
import { clickedCommit } from '@/lib/commit-click';
import { commitMutationOptions } from '@/lib/commit-mutation-options';
import { measureCommitSize } from '@/lib/commit-size';
import {
    authorLaneColor,
    cn,
    formatFullDateTime,
    formatRelativeTime,
    isDeleted,
    isWithinSeconds,
    shortHash,
} from '@/lib/utils';
import { show } from '@/routes/user';
import type { Commit, CursorPaginated, ThreadCommit } from '@/types';

export function CommitCard({
    commit,
    previousLane,
    isDimmed = false,
    isPreviousDimmed = false,
    isHighlighted = false,
    isGroupedWithPrevious = false,
    onAuthorHover,
    onHover,
    actions,
    isFocused = false,
    canDelete = true,
    isFolded = true,
    initialReplies,
    threadActions,
    showImages = true,
    loadsReplies = false,
    endsWithDot = false,
    railNodePosition = 'top',
    hasRailTail = true,
    exceptReplyId,
    threadPosition,
    graphAfter,
}: {
    commit: Commit;
    previousLane?: string;
    /** In a graph canvas, the node the commit follows on the rail. */
    graphAfter?: string;
    isDimmed?: boolean;
    isPreviousDimmed?: boolean;
    isHighlighted?: boolean;
    isGroupedWithPrevious?: boolean;
    onAuthorHover?: (isHovering: boolean) => void;
    onHover?: (isHovering: boolean, event: PointerEvent<HTMLElement>) => void;
    actions?: ReactNode;
    isFocused?: boolean;
    canDelete?: boolean;
    isFolded?: boolean;
    initialReplies?: CursorPaginated<ThreadCommit>;
    threadActions?: ReactNode;
    showImages?: boolean;
    loadsReplies?: boolean;
    endsWithDot?: boolean;
    railNodePosition?: 'top' | 'center' | 'bottom' | 'author';
    hasRailTail?: boolean;
    exceptReplyId?: string;
    threadPosition?: ThreadPosition;
}) {
    const {
        props: { auth },
        component,
    } = usePage();
    const now = useNow();
    const hiddenLinkPreviewUrl = useContext(HiddenLinkPreviewContext);
    const { bodyRef, ...translation } = useCommitTranslation(commit);
    const nodeRef = useRef<HTMLAnchorElement>(null);
    const graphNodeRef = useGraphNode({
        id: commit.id,
        lane: authorLaneColor(commit.author),
        after: graphAfter,
        dimmed: isDimmed,
        ring: isGroupedWithPrevious ? railDotRing : 0,
    });
    // A stable ref, so the node stays registered across renders, like hover dimming its lane.
    const nodeLinkRef = useCallback(
        (element: HTMLAnchorElement | null) => {
            nodeRef.current = element;
            graphNodeRef(element);
        },
        [graphNodeRef],
    );
    const deleteButtonRef = useRef<HTMLButtonElement>(null);
    const thread = useThread(
        commit,
        initialReplies,
        loadsReplies,
        exceptReplyId,
    );
    const wasDeleted = useIsCommitDeleted(commit.id);
    const commitNotFound = useCommitNotFound();
    const [deletion, setDeletion] = useState<
        'idle' | 'confirming' | 'deleting'
    >('idle');

    const hasVisibleReplies = thread.isOpen && !!thread.replies?.length;
    const endsOnDot =
        hasRailTail && railNodePosition !== 'bottom' && endsWithDot;
    const graphEndId = `${commit.id}:end`;
    const isOwn = useOwnsCommit()(commit);
    const isFresh = isOwn && isWithinSeconds(commit.created_at, 15);
    const isDeletable = isOwn && canDelete;
    const hash = shortHash(commit.id);
    const permalink = CommitController.show({ profile: commit.author, commit });

    const openClickedCommit = (event: MouseEvent<HTMLElement>) => {
        const click = clickedCommit(
            event,
            window.getSelection()?.toString() ?? '',
            window.location.pathname,
        );

        if (click?.newTab) {
            window.open(click.url, '_blank', 'noopener');
        } else if (click) {
            router.visit(click.url);
        }
    };

    const deleteFrom = isDeletable
        ? (trigger: HTMLButtonElement | null) => {
              deleteButtonRef.current = trigger;
              setDeletion('confirming');
          }
        : undefined;

    const prefetchClickedCommit = (event: MouseEvent<HTMLElement>) => {
        const click = clickedCommit(event, '', window.location.pathname);

        if (click && !click.newTab) {
            router.prefetch(click.url, { method: 'get' }, {});
        }
    };

    const cancelDeletion = () => {
        setDeletion('idle');
        deleteButtonRef.current?.focus();
    };

    const deleteCommit = () => {
        setDeletion('deleting');

        const prefersReducedMotion = window.matchMedia(
            '(prefers-reduced-motion: reduce)',
        ).matches;

        window.setTimeout(
            () =>
                router
                    .optimistic(
                        (props: {
                            commits?: CursorPaginated<Commit>;
                            user?: { commits_count?: number };
                            pinnedCommit?: Commit | null;
                        }) => ({
                            ...(props.commits?.data
                                ? {
                                      commits: {
                                          ...props.commits,
                                          data: props.commits.data.filter(
                                              (c: Commit) => c.id !== commit.id,
                                          ),
                                      },
                                  }
                                : {}),
                            ...(props.user?.commits_count !== undefined
                                ? {
                                      user: {
                                          ...props.user,
                                          commits_count: Math.max(
                                              0,
                                              props.user.commits_count - 1,
                                          ),
                                      },
                                  }
                                : {}),
                            ...(props.pinnedCommit?.id === commit.id
                                ? { pinnedCommit: null }
                                : {}),
                        }),
                    )
                    .visit(CommitController.destroy(commit), {
                        ...commitMutationOptions(component),
                        onError: () => setDeletion('idle'),
                        onHttpException: (response) => {
                            if (commitNotFound(commit.id, response)) {
                                setDeletion('idle');

                                return false;
                            }
                        },
                    }),
            prefersReducedMotion ? 0 : 700,
        );
    };

    return (
        <article
            ref={measureCommitSize}
            className={cn(
                'grid scroll-mt-28 transition-[grid-template-rows,opacity,background-color] duration-300 ease-out outline-none hover:bg-accent/50 focus-visible:bg-accent',
                {
                    'bg-primary-soft/60': isHighlighted,
                    'cursor-pointer': !isFocused && !wasDeleted,
                },
                deletion === 'deleting'
                    ? 'grid-rows-[0fr] opacity-0 delay-400'
                    : 'grid-rows-[1fr]',
            )}
            tabIndex={-1}
            data-commit={commit.id}
            data-permalink={wasDeleted ? undefined : permalink.url}
            data-test="commit"
            onMouseDown={prefetchClickedCommit}
            onClick={openClickedCommit}
            onAuxClick={openClickedCommit}
            onPointerMove={
                onHover &&
                ((event) =>
                    event.pointerType === 'mouse' && onHover(true, event))
            }
            onPointerLeave={onHover && ((event) => onHover(false, event))}
        >
            {commit.author.type === 'user' && (
                <CommitAuthorFollowButton
                    user={commit.author}
                    keyShortcut="f"
                />
            )}
            <div
                className="grid min-h-0 grid-cols-[4rem_minmax(0,1fr)] overflow-hidden sm:grid-cols-[4.5rem_minmax(0,1fr)]"
                data-graph-leaving={deletion === 'deleting' || undefined}
            >
                <GraphRail
                    lane={authorLaneColor(commit.author)}
                    previousLane={previousLane}
                    endsWithDot={endsWithDot}
                    endsOnActions
                    nodePosition={railNodePosition}
                    hasTail={hasRailTail && railNodePosition !== 'bottom'}
                    hasReplyTail={
                        hasVisibleReplies && (!hasRailTail || endsWithDot)
                    }
                    isFresh={isFresh}
                    isDimmed={isDimmed}
                    isPreviousDimmed={isPreviousDimmed}
                    onHoverChange={onAuthorHover}
                    graph={{
                        id: commit.id,
                        endId: graphEndId,
                        measuresNode: false,
                    }}
                    node={
                        <UserPreview
                            user={commit.author}
                            anchor={nodeRef}
                            className="flex"
                        >
                            <LiveStreamTrigger
                                user={commit.author}
                                hoverCard={false}
                                className="flex"
                            >
                                <Link
                                    prefetch
                                    ref={nodeLinkRef}
                                    href={show(commit.author)}
                                    tabIndex={-1}
                                    className={cn(
                                        'group/node flex rounded-full',
                                        {
                                            'translate-y-[-9px]':
                                                isGroupedWithPrevious &&
                                                railNodePosition === 'top',
                                        },
                                    )}
                                >
                                    {isGroupedWithPrevious ? (
                                        <RailDot className="group-hover/node:scale-125" />
                                    ) : (
                                        <RailAvatar user={commit.author} />
                                    )}
                                </Link>
                            </LiveStreamTrigger>
                        </UserPreview>
                    }
                />

                <ChainedEntrance
                    isFresh={isFresh}
                    previousLane={previousLane}
                    className="min-w-0 pt-3 pr-4"
                >
                    <div
                        inert={wasDeleted}
                        className={cn('flex transition-opacity duration-200', {
                            'opacity-70': isDimmed,
                            'opacity-50': wasDeleted,
                        })}
                    >
                        <div className="min-w-0 flex-1">
                            <div className="flex items-baseline gap-1.5 text-[15px]">
                                <UserPreview
                                    user={commit.author}
                                    anchor={nodeRef}
                                    className="flex min-w-0 items-baseline gap-1.5"
                                    onHoverChange={onAuthorHover}
                                >
                                    <Link
                                        prefetch
                                        href={show(commit.author)}
                                        className="truncate font-semibold hover:underline"
                                    >
                                        {commit.author.name}
                                    </Link>
                                    <Link
                                        prefetch
                                        href={show(commit.author)}
                                        tabIndex={-1}
                                        className="shrink-4 truncate font-mono text-[13px] text-muted-foreground"
                                    >
                                        @{commit.author.handle}
                                    </Link>
                                </UserPreview>
                                <span
                                    aria-hidden
                                    className="text-muted-foreground"
                                >
                                    ·
                                </span>
                                <TimestampTooltip
                                    date={commit.created_at}
                                    author={
                                        commit.author.type === 'user'
                                            ? commit.author
                                            : undefined
                                    }
                                >
                                    <Link
                                        prefetch
                                        href={permalink}
                                        className="shrink-0 font-mono text-[13px] text-muted-foreground hover:underline"
                                        data-test="commit-permalink"
                                    >
                                        <time dateTime={commit.created_at}>
                                            {formatRelativeTime(
                                                commit.created_at,
                                                now,
                                            )}
                                        </time>
                                    </Link>
                                </TimestampTooltip>

                                <ThreadPositionBadge
                                    threadPosition={threadPosition}
                                />

                                <CommitStatusBadge commit={commit} />

                                <span
                                    data-commit-hash
                                    className="relative ml-auto flex shrink-0 items-center self-center"
                                >
                                    <Link
                                        prefetch
                                        href={permalink}
                                        tabIndex={-1}
                                        className={cn(
                                            'hidden font-mono text-[13px] text-muted-foreground transition-opacity hover:text-foreground sm:inline',
                                            { 'sm:hidden': isFocused },
                                        )}
                                        title={`Commit ${commit.id}`}
                                    >
                                        {hash}
                                    </Link>
                                </span>
                            </div>

                            {commit.parent && isDeleted(commit.parent) && (
                                <p className="mt-0.5 flex w-fit items-center gap-1 font-mono text-xs text-muted-foreground">
                                    <CornerDownRight className="size-3" />
                                    replying to [deleted]
                                </p>
                            )}
                            {commit.parent && !isDeleted(commit.parent) && (
                                <Link
                                    prefetch
                                    href={CommitController.show({
                                        profile: commit.parent.author,
                                        commit: commit.parent,
                                    })}
                                    className="mt-0.5 flex w-fit items-center gap-1 font-mono text-xs text-muted-foreground hover:text-foreground"
                                >
                                    <CornerDownRight className="size-3" />
                                    replying to @{commit.parent.author.handle}
                                </Link>
                            )}
                            <div ref={bodyRef} style={translation.bodyStyle}>
                                <FoldedCommitBody
                                    segments={translation.segments}
                                    mentions={commit.mentions}
                                    organizationMentions={
                                        commit.organization_mentions
                                    }
                                    previewSegments={
                                        isFolded && !isFocused
                                            ? translation.previewSegments
                                            : null
                                    }
                                    className={cn(
                                        'mt-0.5',
                                        isFocused
                                            ? 'text-[17px]'
                                            : 'text-[15px]',
                                    )}
                                />
                            </div>
                            {translation.notice}
                            {showImages && <CommitImages commit={commit} />}
                            {commit.poll && (
                                <CommitPoll
                                    key={`${commit.poll.id}-${commit.poll.has_voted}-${commit.poll.total_votes}`}
                                    commit={commit}
                                    poll={commit.poll}
                                />
                            )}
                            {commit.quoted_commit_id !== null && (
                                <QuotedCommit
                                    commit={commit.quoted_commit ?? null}
                                />
                            )}
                            {commit.link_preview &&
                                commit.link_preview.url !==
                                    hiddenLinkPreviewUrl && (
                                    <LinkPreview
                                        refreshUrl={CommitLinkPreviewController.show.url(
                                            commit.id,
                                        )}
                                        preview={commit.link_preview}
                                    />
                                )}
                            {isFocused && (
                                <p className="mt-2 font-mono text-[13px] text-muted-foreground">
                                    <TimestampTooltip
                                        date={commit.created_at}
                                        author={
                                            commit.author.type === 'user'
                                                ? commit.author
                                                : undefined
                                        }
                                    >
                                        <time dateTime={commit.created_at}>
                                            {formatFullDateTime(
                                                commit.created_at,
                                                auth.user?.timezone ??
                                                    undefined,
                                            )}
                                        </time>
                                    </TimestampTooltip>
                                    <span aria-hidden> · </span>
                                    <span
                                        title={`Commit ${commit.id}`}
                                        className="whitespace-nowrap"
                                    >
                                        commit {hash}
                                    </span>
                                </p>
                            )}

                            {!isFocused && <ShowThreadLink thread={thread} />}

                            {commit.replies_count === undefined ? (
                                <div className="mt-1 -ml-2 flex flex-wrap items-center justify-between gap-0.5 text-[13px] not-has-[button]:hidden">
                                    <div className="flex flex-wrap items-center gap-0.5">
                                        <CommitStarButton
                                            commit={commit}
                                            keyShortcut="s"
                                            className="px-2 py-0.5"
                                        />
                                        <CommitPastelButton
                                            commit={commit}
                                            className="px-2 py-0.5"
                                        />
                                        <CommitQuoteButton
                                            commit={commit}
                                            keyShortcut="q"
                                        />
                                        {translation.button}
                                    </div>
                                    <CommitSecondaryActions
                                        commit={commit}
                                        onDelete={deleteFrom}
                                    />
                                </div>
                            ) : (
                                <ThreadActions
                                    thread={thread}
                                    hasKeyboardShortcuts
                                    hasComposer={false}
                                    onDelete={deleteFrom}
                                    actions={
                                        <>
                                            <CommitStarButton
                                                commit={commit}
                                                keyShortcut="s"
                                                className="px-2 py-0.5"
                                            />
                                            <CommitPastelButton
                                                commit={commit}
                                                className="px-2 py-0.5"
                                            />
                                            <CommitQuoteButton
                                                commit={commit}
                                                keyShortcut="q"
                                            />
                                            {translation.button}
                                            {threadActions}
                                        </>
                                    }
                                />
                            )}
                        </div>
                    </div>
                </ChainedEntrance>
                {/* What opens below the actions row gets a row of its own, so the rail's row, and its end dot, end on the actions. */}
                <RailSegment
                    lane={
                        hasRailTail && !endsWithDot
                            ? authorLaneColor(commit.author)
                            : undefined
                    }
                    isDimmed={isDimmed}
                />
                <ChainedEntrance
                    isFresh={isFresh}
                    previousLane={previousLane}
                    className={cn('min-w-0 pr-4', {
                        'border-b pb-3': !hasVisibleReplies,
                    })}
                >
                    <div
                        inert={wasDeleted}
                        className={cn('transition-opacity duration-200', {
                            'opacity-70': isDimmed,
                            'opacity-50': wasDeleted,
                        })}
                    >
                        <ThreadReplyComposer thread={thread} />

                        {actions}

                        {deletion === 'deleting' && (
                            <p
                                className="mt-3 flex min-h-12 items-center rounded-md bg-destructive/8 px-3 py-2 font-mono text-sm text-muted-foreground"
                                role="status"
                            >
                                rm {hash} → /dev/null
                            </p>
                        )}

                        {deletion === 'confirming' && (
                            <div
                                role="group"
                                aria-label="Confirm delete"
                                onKeyDown={(event) => {
                                    if (event.key === 'Escape') {
                                        cancelDeletion();
                                    }
                                }}
                                className="mt-3 flex min-h-12 flex-wrap items-center gap-x-3 gap-y-2 rounded-md bg-destructive/8 px-3 py-2 text-sm"
                            >
                                <span className="mr-auto">
                                    Delete this commit? You can undo for 30
                                    seconds.
                                </span>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    autoFocus
                                    onClick={cancelDeletion}
                                >
                                    Cancel
                                </Button>
                                <Button
                                    variant="destructive"
                                    size="sm"
                                    onClick={deleteCommit}
                                    data-test="confirm-delete-commit-button"
                                >
                                    Delete
                                </Button>
                            </div>
                        )}
                    </div>
                </ChainedEntrance>
                {commit.replies_count !== undefined && (
                    <>
                        <RailSegment
                            lane={
                                hasRailTail && !endsWithDot
                                    ? authorLaneColor(commit.author)
                                    : undefined
                            }
                            isDimmed={isDimmed}
                        />
                        <div
                            className={cn('min-w-0 pr-4', {
                                'border-b pb-3': hasVisibleReplies,
                            })}
                        >
                            <div
                                className={cn(
                                    'transition-opacity duration-200',
                                    { 'opacity-70': isDimmed },
                                )}
                            >
                                <GraphDimmed isDimmed={isDimmed}>
                                    <GraphScope scope={commit.id}>
                                        <ThreadReplies
                                            thread={thread}
                                            depth={0}
                                            graphParent={
                                                endsOnDot
                                                    ? graphEndId
                                                    : commit.id
                                            }
                                            isOnTrunk={
                                                hasRailTail && !endsWithDot
                                            }
                                        />
                                    </GraphScope>
                                </GraphDimmed>
                            </div>
                        </div>
                    </>
                )}
            </div>
        </article>
    );
}

export function CommitTombstone({
    id,
    previousLane,
    endsWithDot = false,
    graphAfter,
}: {
    id?: string;
    previousLane?: string;
    endsWithDot?: boolean;
    graphAfter?: string;
}) {
    return (
        <article className="flex" data-test="commit-tombstone">
            <GraphRail
                lane="var(--rail)"
                previousLane={previousLane}
                endsWithDot={endsWithDot}
                graph={id ? { id, after: graphAfter } : undefined}
                node={
                    <span className="size-12 rounded-full border-2 border-dashed border-rail bg-card" />
                }
            />

            <div className="flex min-w-0 flex-1 items-center gap-3 border-b py-3 pr-4">
                <p className="flex items-baseline gap-1.5 text-[15px] text-muted-foreground">
                    <span className="font-mono text-[13px]">[deleted]</span>
                    This commit was deleted.
                </p>
            </div>
        </article>
    );
}