/**
 * Renders the page where a dump's poster, or a moderator, edits or deletes it.
 *
 * @module
 */

import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";

import { API_URL } from "../config/api.ts";
import {
  DUMP_MAX_FILE_SIZE_BYTES,
  VALIDATION,
} from "../../shared/validation.ts";
import type { Dump, UpdateDumpRequest } from "../../shared/dump.ts";
import type { Wire } from "../../shared/api.ts";
import { deserializeDump } from "../utils/shared/deserialize.ts";
import {
  expectOk,
  friendlyFetchError,
  parseAPIResponse,
} from "../utils/shared/api.ts";
import { useAuth, useRequiredAuth } from "../hooks/auth/useAuth.ts";
import { can } from "../utils/auth/permissions.ts";
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
import { formatBytes } from "../utils/shared/format.ts";
import {
  dumpFileUrl,
  dumpThumbnailUrl,
  dumpUrl,
} from "../utils/shared/urls.ts";
import { PageShell } from "../components/layout/PageShell.tsx";
import { PageError } from "../components/layout/PageError.tsx";
import { ErrorCard } from "../components/shared/ErrorCard.tsx";
import { ConfirmModal } from "../components/shared/ConfirmModal.tsx";
import { RichContentCard } from "../components/dump/RichContentCard.tsx";
import { FilePreview } from "../components/dump/FilePreview.tsx";
import { ImagePicker } from "../components/shared/ImagePicker.tsx";
import { CategorySelect } from "../components/category/CategorySelect.tsx";
import { useCategorySelection } from "../hooks/category/useCategorySelection.ts";
import { FileField } from "../components/form/FileField.tsx";
import { FormError } from "../components/form/FormError.tsx";
import { FormProvider } from "react-hook-form";
import { RichTextField } from "../components/form/RichTextField.tsx";
import { SubmitButton } from "../components/form/SubmitButton.tsx";
import { TextField } from "../components/form/TextField.tsx";
import { useApiForm } from "../hooks/form/useApiForm.ts";
import { VisibilityToggle } from "../components/form/SegmentedField.tsx";
import { DeleteButton } from "../components/form/DeleteButton.tsx";
import { SlugField } from "../components/form/SlugField.tsx";
import { useCanonicalPath } from "../hooks/shared/useCanonicalPath.ts";
import { userPath } from "../../shared/paths.ts";

type DumpEditState =
  | { status: "loading" }
  | { status: "error"; error: string }
  | { status: "loaded"; dump: Dump };

/**
 * Renders `/@:username/dumps/:slug/edit`, for the dump's poster and
 * moderators; anyone else signed in gets an error rather than a form the API
 * would refuse to save. The dump comes from
 * `GET /api/users/@:username/dumps/:slug`, which answers a former slug too,
 * and the URL then takes the current one. The thumbnail, the preview refresh
 * and the deletion apply at once, and the form's other fields on "Save",
 * which goes back to the dump's page, at its new path if the slug changed. A
 * deletion goes to the index.
 */
export function DumpEdit(): React.JSX.Element {
  const { handle, slug } = useParams();
  const username = handle?.slice(1);
  const navigate = useNavigate();
  const { authFetch, token, mediaToken, user } = useRequiredAuth();

  const [state, setState] = useState<DumpEditState>({ status: "loading" });

  useDocumentTitle(
    state.status === "loaded"
      ? t`Editing ${state.dump.title}`
      : state.status === "error"
      ? null
      : undefined,
  );

  const [confirmDelete, setConfirmDelete] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [refreshError, setRefreshError] = useState<string | null>(null);
  const [thumbUploading, setThumbUploading] = useState(false);
  const [thumbError, setThumbError] = useState<string | null>(null);
  const [deleteError, setDeleteError] = useState<string | null>(null);

  useCanonicalPath(
    state.status === "loaded" ? `${dumpUrl(state.dump)}/edit` : null,
  );

  useEffect(() => {
    if (!username || !slug) return;

    (async () => {
      setState({ status: "loading" });
      try {
        const res = await fetch(
          `${API_URL}/api/users/@${username}/dumps/${slug}`,
          {
            cache: "no-store",
            headers: token ? { Authorization: `Bearer ${token}` } : {},
          },
        );
        const apiResponse = parseAPIResponse<Wire<Dump>>(await res.json());

        if (apiResponse.success) {
          const dump = deserializeDump(apiResponse.data);
          // The same rule as the API's.
          if (dump.userId !== user.id && !can(user, "dump:moderate")) {
            setState({
              status: "error",
              error: t`Only its poster or a moderator can edit this dump.`,
            });
            return;
          }
          setState({ status: "loaded", dump });
        } else {
          setState({ status: "error", error: apiResponse.error.message });
        }
      } catch (err) {
        setState({ status: "error", error: friendlyFetchError(err) });
      }
    })();
  }, [username, slug, token, user]);

  const handleRefreshMetadata = async () => {
    if (state.status !== "loaded" || state.dump.kind !== "url") return;

    setRefreshing(true);
    setRefreshError(null);
    try {
      const res = await authFetch(
        `${API_URL}/api/dumps/${state.dump.id}/metadata`,
        { method: "POST" },
      );
      const apiResponse = parseAPIResponse<Wire<Dump>>(await res.json());
      if (apiResponse.success) {
        setState({ status: "loaded", dump: deserializeDump(apiResponse.data) });
      } else {
        setRefreshError(apiResponse.error.message);
      }
    } catch (err) {
      setRefreshError(friendlyFetchError(err));
    } finally {
      setRefreshing(false);
    }
  };

  const changeThumbnail = async (init: RequestInit) => {
    if (state.status !== "loaded") return;
    setThumbUploading(true);
    setThumbError(null);
    try {
      const updated = await expectOk<Wire<Dump>>(
        await authFetch(
          `${API_URL}/api/dumps/${state.dump.id}/thumbnail`,
          init,
        ),
      );
      setState({ status: "loaded", dump: deserializeDump(updated) });
    } catch (err) {
      setThumbError(friendlyFetchError(err));
    } finally {
      setThumbUploading(false);
    }
  };

  const handleThumbnailChange = (file: File) => {
    const formData = new FormData();
    formData.append("file", file);
    return changeThumbnail({ method: "PUT", body: formData });
  };

  const handleThumbnailReset = () => changeThumbnail({ method: "DELETE" });

  const handleDelete = async () => {
    if (state.status !== "loaded") return;
    setConfirmDelete(false);
    setDeleteError(null);
    try {
      const res = await authFetch(`${API_URL}/api/dumps/${state.dump.id}`, {
        method: "DELETE",
      });
      if (!res.ok) {
        const body = await res.json().catch(() => null);
        throw new Error(
          body?.error?.message ?? t`Delete failed (${res.status})`,
        );
      }
    } catch (err) {
      setDeleteError(friendlyFetchError(err));
      return;
    }
    // For Index, to hide the dump before `dump_deleted` arrives.
    navigate("/", { state: { deletedDumpId: state.dump.id } });
  };

  if (state.status === "loading") {
    return (
      <PageShell>
        <p className="page-loading">
          <Trans>Loading dump…</Trans>
        </p>
      </PageShell>
    );
  }

  if (state.status === "error") {
    return (
      <PageError
        message={state.error}
        actions={
          <>
            <button
              className="btn-border"
              type="button"
              onClick={() => globalThis.location.reload()}
            >
              <Trans>Retry</Trans>
            </button>
            <button
              className="btn-border"
              type="button"
              onClick={() => navigate("/")}
            >
              <Trans>← Back to all dumps</Trans>
            </button>
          </>
        }
      />
    );
  }

  const { dump } = state;

  const currentThumbnailSrc = dump.thumbnailMime
    ? dumpThumbnailUrl(dump, mediaToken)
    : dump.kind === "file"
    ? (dump.fileMime?.startsWith("image/")
      ? dumpFileUrl(dump, mediaToken)
      : dump.fileMime?.startsWith("video/")
      ? dumpThumbnailUrl(dump, mediaToken)
      : null)
    : dump.richContent?.thumbnailUrl ?? null;

  return (
    <PageShell>
      <div className="form-page form-page--two-col">
        <div className="form-page-header">
          <p className="form-page-eyebrow">
            <Trans>Editing</Trans>
          </p>
          <h1 className="form-page-title">{dump.title}</h1>
        </div>

        <DumpEditForm
          key={dump.id}
          dump={dump}
          preview={
            <div className="dump-edit-preview">
              {dump.kind === "file"
                ? <FilePreview dump={dump} />
                : dump.richContent
                ? <RichContentCard richContent={dump.richContent} />
                : dump.url && (
                  <a
                    href={dump.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="dump-url-link"
                  >
                    {dump.url}
                  </a>
                )}
              {dump.kind === "url" && (
                <button
                  type="button"
                  className="btn-secondary dump-edit-refresh"
                  onClick={handleRefreshMetadata}
                  disabled={refreshing}
                >
                  {refreshing
                    ? <Trans>Refreshing…</Trans>
                    : <Trans>Refresh metadata</Trans>}
                </button>
              )}
              {refreshError && (
                <p className="dump-edit-refresh-error">{refreshError}</p>
              )}
            </div>
          }
          currentThumbnailSrc={currentThumbnailSrc}
          thumbUploading={thumbUploading}
          thumbError={thumbError}
          deleteError={deleteError}
          onThumbnailChange={handleThumbnailChange}
          onThumbnailReset={handleThumbnailReset}
          onRequestDelete={() => setConfirmDelete(true)}
          // Passed along so the dump's page shows the saved dump without
          // refetching it.
          onSaved={(updated) =>
            navigate(dumpUrl(updated), { state: { dump: updated } })}
        />
      </div>
      {confirmDelete && (
        <ConfirmModal
          message={t`Delete this dump? This cannot be undone.`}
          confirmLabel={t`Delete dump`}
          onConfirm={handleDelete}
          onCancel={() => setConfirmDelete(false)}
        />
      )}
    </PageShell>
  );
}

// The thumbnail and deletion are handled by DumpEdit, which applies them at
// once; the form only reports them.
interface DumpEditFormProps {
  dump: Dump;
  preview: React.ReactNode;
  currentThumbnailSrc: string | null;
  thumbUploading: boolean;
  thumbError: string | null;
  deleteError: string | null;
  onThumbnailChange: (file: File) => void;
  onThumbnailReset: () => void;
  onRequestDelete: () => void;
  onSaved: (dump: Dump) => void;
}

interface EditValues {
  title: string;
  slug: string;
  url: string;
  comment: string;
  isPublic: boolean;
  newFile: File | null;
}

/**
 * Renders the edit form of `dump`, which saves through
 * `PUT /api/dumps/:dumpId`, or `PUT /api/dumps/:dumpId/file` when a new file
 * is attached. `DumpEdit` keys it by dump, so the fields reset for another.
 */
function DumpEditForm({
  dump,
  preview,
  currentThumbnailSrc,
  thumbUploading,
  thumbError,
  deleteError,
  onThumbnailChange,
  onThumbnailReset,
  onRequestDelete,
  onSaved,
}: DumpEditFormProps) {
  const { authFetch } = useAuth();
  const [selectedCategoryIds, toggleCategory] = useCategorySelection(
    dump.categoryIds ?? [],
  );
  const form = useApiForm<EditValues>({
    defaultValues: {
      title: dump.title,
      slug: dump.slug,
      url: dump.url ?? "",
      comment: dump.comment ?? "",
      isPublic: !dump.isPrivate,
      newFile: null,
    },
  });

  // The title scraped from the link, which "Reset to default" puts back.
  const metaTitle = dump.richContent?.title?.trim() ?? "";
  const currentTitle = form.watch("title");

  const onSubmit = form.submit(
    async ({ title, slug, url, comment, isPublic, newFile }) => {
      const trimmedTitle = title.trim();
      const isPrivate = !isPublic;
      // Sent only when changed, since each change counts against its limit.
      const newSlug = slug !== dump.slug ? slug : undefined;
      let res: Response;

      const categoryIds = [...selectedCategoryIds];

      if (dump.kind === "file" && newFile) {
        const formData = new FormData();
        formData.append("file", newFile);
        formData.append("title", trimmedTitle);
        if (newSlug) formData.append("slug", newSlug);
        if (comment.trim()) formData.append("comment", comment.trim());
        formData.append("categoryIds", JSON.stringify(categoryIds));
        // In the same request, so the new file never goes out under the old
        // visibility, and a failure leaves neither applied.
        formData.append("isPrivate", String(isPrivate));
        res = await authFetch(`${API_URL}/api/dumps/${dump.id}/file`, {
          method: "PUT",
          body: formData,
        });
      } else {
        // An emptied note is sent as null: left out, the server keeps the old
        // one.
        const body: UpdateDumpRequest = dump.kind === "url"
          ? {
            url: url.trim() || undefined,
            title: trimmedTitle,
            slug: newSlug,
            comment: comment.trim() || null,
            isPrivate,
            categoryIds,
          }
          : {
            title: trimmedTitle,
            slug: newSlug,
            comment: comment.trim() || null,
            isPrivate,
            categoryIds,
          };
        res = await authFetch(`${API_URL}/api/dumps/${dump.id}`, {
          method: "PUT",
          body: JSON.stringify(body),
        });
      }

      onSaved(deserializeDump(await expectOk<Wire<Dump>>(res)));
    },
  );

  return (
    <FormProvider {...form}>
      <form className="form dump-edit-form" onSubmit={onSubmit}>
        {
          /* The source panel holds what was dumped, the details panel how it
            is presented and who sees it. */
        }
        <div className="form-panel dump-edit-panel--source">
          {preview}

          <div className="form-field">
            <span className="form-label">
              <Trans>Thumbnail</Trans>
            </span>
            <div className="dump-edit-thumbnail-row">
              <ImagePicker
                src={currentThumbnailSrc}
                size={64}
                onChange={onThumbnailChange}
                uploading={thumbUploading}
              />
              {dump.thumbnailMime && (
                <button
                  type="button"
                  className="btn-border"
                  onClick={onThumbnailReset}
                  disabled={thumbUploading}
                >
                  <Trans>Reset to default</Trans>
                </button>
              )}
            </div>
            {thumbError && (
              <span className="form-hint form-hint--error" role="alert">
                {thumbError}
              </span>
            )}
          </div>

          {dump.kind === "url"
            ? (
              <TextField<EditValues>
                name="url"
                type="url"
                label={t`URL`}
                placeholder="https://..."
                rules={{ required: true }}
              />
            )
            : (
              <div className="form-field">
                <span className="form-label">
                  <Trans>Replace file</Trans>
                </span>
                <p className="dump-file-notice">
                  <strong>{dump.fileName}</strong>
                  {dump.fileSize != null && ` — ${formatBytes(dump.fileSize)}`}
                </p>
                <FileField<EditValues>
                  name="newFile"
                  hint={t`Drop a replacement here`}
                  maxBytes={DUMP_MAX_FILE_SIZE_BYTES}
                  showLimit={false}
                />
              </div>
            )}
        </div>

        <div className="form-panel dump-edit-panel--details">
          <FormError title={t`Could not save`} />

          <TextField<EditValues>
            name="title"
            label={t`Title`}
            labelAction={metaTitle
              ? (
                <button
                  type="button"
                  className="form-label-action"
                  onClick={() =>
                    form.setValue("title", metaTitle, { shouldDirty: true })}
                  disabled={currentTitle.trim() === metaTitle}
                >
                  <Trans>Reset to default</Trans>
                </button>
              )
              : undefined}
            maxLength={VALIDATION.DUMP_TITLE_MAX}
            rules={{ required: true }}
          />

          <SlugField<EditValues>
            name="slug"
            titleName="title"
            prefix={`${userPath(dump.ownerUsername, "dumps")}/`}
            saved={dump}
          />

          <RichTextField<EditValues>
            name="comment"
            label={t`Why?`}
            placeholder={t`What makes it worth it?`}
            rows={3}
            maxLength={VALIDATION.DUMP_COMMENT_MAX}
          />

          <CategorySelect
            kind="dump"
            selected={selectedCategoryIds}
            onToggle={toggleCategory}
          />

          <VisibilityToggle<EditValues> name="isPublic" />
        </div>

        <div className="form-panel form-panel--bar">
          {deleteError && (
            <ErrorCard title={t`Could not delete`} message={deleteError} />
          )}
          <div className="form-actions">
            <DeleteButton label={t`Delete dump`} onClick={onRequestDelete} />
            <div className="form-actions-right">
              <Link to={dumpUrl(dump)} className="form-cancel">
                <Trans>Cancel</Trans>
              </Link>
              <SubmitButton className="btn-primary btn-sm">
                <Trans>Save</Trans>
              </SubmitButton>
            </div>
          </div>
        </div>
      </form>
    </FormProvider>
  );
}