"use client";

// The viewer for one archived social post.
//
// A SIBLING of TranscriptModal, deliberately not a generalization of it:
// TranscriptModal is a transcript-follows-playhead component (16:9 reserved
// layout, playhead auto-scroll, per-row seek buttons, clip markers) and none of
// that applies to a post. This renders the post, its thread context and its
// outbound links, and nothing else.

import { useEffect, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import { XIcon } from "lucide-react";
import { Button } from "./ui/button";
import { useUrlParams, writeUrlParams } from "./urlState";
import { fetchPost, fetchThread } from "./postsCache";
import { postPlatformLabel, type Post } from "../lib/posts";

function formatWhen(iso: string): string {
  const ms = Date.parse(iso);
  if (!Number.isFinite(ms)) return iso;
  const d = new Date(ms);
  return d.toLocaleString(undefined, {
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function platformLabel(platform: Post["platform"]): string {
  return postPlatformLabel(platform);
}

// A post's capture (a screenshot and its attached media, taken by the
// editor's capture-posts job), as the page that renders this modal serves it.
// EDITOR-ONLY: the files live beside the channel (`posts-media/<id>/`) and are
// never published, so the export never passes `loadCapture` and never shows
// any of this.
export type PostCaptureView = {
  capturedAt: string;
  // The capture's state ("captured", "deleted", …), as recorded.
  state: string;
  // The post sat behind a sensitive-media cover when it was shot.
  sensitive?: boolean;
  shot?: { src: string };
  media: { src: string; name: string }[];
  // The X Article the post links to, when the capture opened it: its title,
  // how that went, and its markdown when saved.
  article?: { state: string; title?: string; md?: { src: string } };
};

export type PostModalProps = {
  // Where the editor reads a post's capture from. Absent (the export): no
  // capture is looked for or shown.
  loadCapture?: (post: Post) => Promise<PostCaptureView | null>;
};

export default function PostModal({ loadCapture }: PostModalProps = {}) {
  const { v: slug, vm } = useUrlParams();
  const open = vm === "post" && !!slug;

  const post = useQuery({
    queryKey: ["post", slug],
    queryFn: () => fetchPost(slug!),
    enabled: open,
  });
  const capture = useQuery({
    queryKey: ["post-capture", slug],
    queryFn: () => loadCapture!(post.data!),
    enabled: open && !!loadCapture && !!post.data,
  });
  const thread = useQuery({
    queryKey: ["post-thread", slug],
    queryFn: () => fetchThread(slug!),
    enabled: open,
  });

  const close = () => writeUrlParams({ v: null, t: null });

  // Escape closes, matching the transcript modal's behavior.
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  if (!open) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="Post"
      data-post-modal=""
      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 p-4 sm:p-8"
      onClick={(e) => {
        if (e.target === e.currentTarget) close();
      }}
    >
      <div className="max-h-[90dvh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-card shadow-lg">
        <div className="flex items-center gap-2 border-b border-border px-4 py-2">
          <span className="text-xs uppercase tracking-wide text-muted-foreground">
            {post.data ? platformLabel(post.data.platform) : "Post"}
          </span>
          <Button
            type="button"
            variant="ghost"
            aria-label="Close"
            onClick={close}
            className="ml-auto size-11 sm:size-9"
          >
            <XIcon className="size-4" />
          </Button>
        </div>

        {post.isPending && (
          <p className="px-4 py-6 text-sm text-muted-foreground">Loading…</p>
        )}
        {post.isError && (
          <p className="px-4 py-6 text-sm text-destructive">
            Could not load this post.
          </p>
        )}

        {post.data && (
          <div className="flex flex-col gap-4 px-4 py-4">
            <PostBody post={post.data} primary capture={capture.data} />

            {/* Thread context: the archived parent + replies around this post.
                The post-corpus analogue of a transcript's surrounding cues. */}
            {thread.data && thread.data.length > 1 && (
              <section className="flex flex-col gap-2">
                <h3 className="text-xs uppercase tracking-wide text-muted-foreground">
                  Thread ({thread.data.length} posts)
                </h3>
                <ol className="flex flex-col gap-2 border-l border-border pl-3">
                  {thread.data.map((p) => (
                    <li key={p.id}>
                      <PostBody post={p} primary={p.slug === slug} compact />
                    </li>
                  ))}
                </ol>
              </section>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function PostBody({
  post,
  primary = false,
  compact = false,
  capture,
}: {
  post: Post;
  primary?: boolean;
  compact?: boolean;
  capture?: PostCaptureView | null;
}) {
  const links = useMemo(() => post.links ?? [], [post.links]);
  const capturedMedia = capture?.media.length ?? 0;
  return (
    <article
      data-post-id={post.id}
      className={
        "rounded-md " +
        (primary && compact ? "bg-warning-soft " : "") +
        (compact ? "px-2 py-1.5" : "")
      }
    >
      <header className="flex flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
        <span className="font-medium text-foreground">
          {post.authorName || post.author}
        </span>
        {post.authorName && <span>@{post.author}</span>}
        <span>·</span>
        <time dateTime={post.createdAt}>{formatWhen(post.createdAt)}</time>
        {post.isRepost && <Badge>repost</Badge>}
        {/* Every forum post after the first answers the thread; the badge
            would be on all of them. Its place in the thread says more. */}
        {post.isReply && !post.forum && <Badge>reply</Badge>}
        {post.forum?.position && <Badge>#{post.forum.position}</Badge>}
        {post.forum?.editedAt && (
          <span title={`Last edited ${formatWhen(post.forum.editedAt)}`}>
            <Badge>edited</Badge>
          </span>
        )}
        {/* The whole point of archiving: this post no longer exists upstream. */}
        {post.isDeleted && (
          <span
            title={
              post.availabilityCheckedAt
                ? `Confirmed removed from the source (checked ${new Date(post.availabilityCheckedAt).toLocaleString()})`
                : "Removed from the source platform"
            }
            className="rounded bg-rose-100 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-rose-800 dark:bg-rose-900/40 dark:text-rose-200"
          >
            deleted
          </span>
        )}
      </header>

      <p className={"whitespace-pre-wrap " + (compact ? "text-sm" : "text-base mt-2")}>
        {post.text}
      </p>

      {capture && <PostCapturePanel capture={capture} />}

      {post.forum?.threadTitle && !compact && (
        <p className="mt-1 text-xs text-muted-foreground">
          In thread: {post.forum.threadTitle}
          {post.forum.page ? ` · page ${post.forum.page}` : ""}
        </p>
      )}

      {post.media && post.media.length > 0 && !capturedMedia && (
        <ul data-post-media="" className="mt-2 flex flex-col gap-1">
          {post.media.map((m) => (
            <li key={`${m.kind}:${m.url}`} className="text-xs text-muted-foreground">
              {m.kind}
              {m.provider ? ` (${m.provider})` : ""}:{" "}
              {/^https?:\/\//.test(m.url) ? (
                <a
                  href={m.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary underline break-all"
                >
                  {m.name || m.url}
                </a>
              ) : (
                <span className="break-all">{m.name || m.url}</span>
              )}
            </li>
          ))}
        </ul>
      )}

      {links.length > 0 && (
        <ul className="mt-2 flex flex-col gap-1">
          {links.map((href) => (
            <li key={href}>
              <a
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-primary underline break-all"
              >
                {href}
              </a>
            </li>
          ))}
        </ul>
      )}

      <footer className="mt-2 flex flex-wrap items-center gap-x-3 text-xs text-muted-foreground">
        <a
          href={post.url}
          target="_blank"
          rel="noopener noreferrer"
          className="underline"
        >
          {post.isDeleted ? "Original (deleted)" : "Open original"}
        </a>
        {post.engagement?.likes != null && (
          <span>{post.engagement.likes} likes</span>
        )}
        {post.engagement?.reposts != null && (
          <span>{post.engagement.reposts} reposts</span>
        )}
        {post.engagement?.replies != null && (
          <span>{post.engagement.replies} replies</span>
        )}
        {capturedMedia > 0 ? (
          <span>{capturedMedia} media (captured)</span>
        ) : post.mediaCount ? (
          <span>{post.mediaCount} media (not archived)</span>
        ) : null}
      </footer>
    </article>
  );
}

function Badge({ children }: { children: React.ReactNode }) {
  return (
    <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
      {children}
    </span>
  );
}

// What a captured file is, by its extension.
export function captureMediaKind(name: string): "image" | "video" | "other" {
  const ext = name.toLowerCase().split(".").pop() ?? "";
  if (["jpg", "jpeg", "png", "gif", "webp", "avif"].includes(ext)) return "image";
  if (["mp4", "webm", "mov", "m4v"].includes(ext)) return "video";
  return "other";
}

// The captured screenshot and media of one post, and a line for its article.
// Nothing when the capture holds none of them (a deleted post's record, say).
export function PostCapturePanel({ capture }: { capture: PostCaptureView }) {
  const { article } = capture;
  if (!capture.shot && capture.media.length === 0 && !article) return null;
  return (
    <section data-post-capture="" className="mt-3 flex flex-col gap-2">
      <h3 className="text-xs uppercase tracking-wide text-muted-foreground">
        Captured {formatWhen(capture.capturedAt)}
        {capture.sensitive ? " · behind a sensitive-media cover" : ""}
      </h3>
      {article && (
        <p data-post-capture-article="" className="text-xs text-muted-foreground">
          Article: {article.title ?? "untitled"}
          {article.state !== "captured" ? ` (${article.state})` : ""}
          {article.md && (
            <>
              {" · "}
              <a href={article.md.src} className="text-primary underline">
                article.md
              </a>
            </>
          )}
        </p>
      )}
      {capture.shot && (
        <img
          src={capture.shot.src}
          alt="Screenshot of the post as captured"
          data-post-capture-shot=""
          className="max-w-full rounded-md border border-border"
        />
      )}
      {capture.media.length > 0 && (
        <ul className="flex flex-col gap-2">
          {capture.media.map((m) => {
            const kind = captureMediaKind(m.name);
            return (
              <li key={m.src} data-post-capture-media={kind}>
                {kind === "image" ? (
                  <img src={m.src} alt={m.name} className="max-w-full rounded-md" />
                ) : kind === "video" ? (
                  <video src={m.src} controls preload="metadata" className="max-w-full rounded-md" />
                ) : (
                  <a href={m.src} className="text-xs text-primary underline break-all">
                    {m.name}
                  </a>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </section>
  );
}