"use client";

// Composer (spec "Composer", ADR 0001). Styles live in src/styles/composer.css.
import {
  useEffect,
  useRef,
  useState,
  type ChangeEvent,
  type FocusEvent,
  type FormEvent,
  type KeyboardEvent,
} from "react";
import { FlipButton, type FlipState } from "./Buttons";
import { HexAvatar } from "./HexAvatar";
import { attachmentMeta, COMPOSER_EMOJI, insertBullets } from "./composer-text";

export interface ComposerProps {
  value: string;
  busy: boolean;
  error: boolean;
  /** The selected image or video file, when the pickers are wired. */
  file?: File | null;
  onChange: (value: string) => void;
  /** When present, the composer shows image and video pickers and reports the choice. */
  onFile?: (file: File | null) => void;
  onSubmit: () => void;
  /** The signed-in person, shown as a hex avatar beside the field. */
  person?: { name: string; email?: string; pictureUrl?: string | null } | null;
}

// Content types the picker offers (spec: allowed image types).
const IMAGE_ACCEPT = "image/jpeg,image/jpg,image/png,image/gif,image/webp,image/heic";
const VIDEO_ACCEPT = "video/mp4,video/quicktime,video/webm";

const iconProps = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.7,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
  "aria-hidden": true,
};

/** True for Ctrl + Enter or Cmd + Enter. */
export function isPublishShortcut(e: { key: string; ctrlKey: boolean; metaKey: boolean }): boolean {
  return e.key === "Enter" && (e.ctrlKey || e.metaKey);
}

export function Composer({ value, busy, error, file = null, onChange, onFile, onSubmit, person }: ComposerProps) {
  const empty = value.trim().length === 0;
  // A post needs either text or a file.
  const canSubmit = (!empty || !!file) && !busy;
  const [preview, setPreview] = useState<string | null>(null);
  const [focused, setFocused] = useState(false);
  const [emojiOpen, setEmojiOpen] = useState(false);
  const text = useRef<HTMLTextAreaElement | null>(null);
  const imageInput = useRef<HTMLInputElement | null>(null);
  const videoInput = useRef<HTMLInputElement | null>(null);
  const emojiWrap = useRef<HTMLDivElement | null>(null);
  // Caret to restore after a toolbar edit re-renders the text.
  const pendingSelection = useRef<[number, number] | null>(null);

  // Build a preview URL client-side only, and revoke it when the file changes.
  useEffect(() => {
    if (!file) {
      setPreview(null);
      return;
    }
    const url = URL.createObjectURL(file);
    setPreview(url);
    return () => URL.revokeObjectURL(url);
  }, [file]);

  useEffect(() => {
    const sel = pendingSelection.current;
    if (!sel || !text.current) return;
    pendingSelection.current = null;
    text.current.focus();
    text.current.setSelectionRange(sel[0], sel[1]);
  }, [value]);

  // Close the emoji popover on an outside click or Escape.
  useEffect(() => {
    if (!emojiOpen) return;
    function onDown(e: MouseEvent) {
      if (emojiWrap.current && !emojiWrap.current.contains(e.target as Node)) setEmojiOpen(false);
    }
    function onKey(e: globalThis.KeyboardEvent) {
      if (e.key === "Escape") setEmojiOpen(false);
    }
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [emojiOpen]);

  useEffect(() => {
    if (busy) setEmojiOpen(false);
  }, [busy]);

  function submit(e: FormEvent) {
    e.preventDefault();
    if (canSubmit) onSubmit();
  }
  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (!isPublishShortcut(e)) return;
    e.preventDefault();
    if (canSubmit) onSubmit();
  }
  function pick(e: ChangeEvent<HTMLInputElement>) {
    const chosen = e.target.files && e.target.files[0] ? e.target.files[0] : null;
    onFile?.(chosen);
    // One file per post: picking one kind clears the other input.
    e.target.value = "";
  }
  function remove() {
    onFile?.(null);
  }
  function addEmoji(emoji: string) {
    // Spec: the emoji goes at the end of the text.
    const next = value + emoji;
    pendingSelection.current = [next.length, next.length];
    onChange(next);
    setEmojiOpen(false);
  }
  function addBullets() {
    const el = text.current;
    const start = el ? el.selectionStart : value.length;
    const end = el ? el.selectionEnd : value.length;
    const edit = insertBullets(value, start, end);
    pendingSelection.current = [edit.selectionStart, edit.selectionEnd];
    if (edit.text !== value) onChange(edit.text);
    else el?.focus();
  }
  function onFocus() {
    setFocused(true);
  }
  function onBlur(e: FocusEvent<HTMLFormElement>) {
    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocused(false);
  }

  const isVideo = !!file && file.type.startsWith("video/");
  const open = focused || !empty || !!file;
  const flip: FlipState = busy ? "posting" : canSubmit ? "ready" : "disabled";

  return (
    <form
      className={`composer${open ? " composer-open" : ""}`}
      onSubmit={submit}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      <div className="composer-top">
        {person ? <HexAvatar name={person.name || person.email || ""} pictureUrl={person.pictureUrl} size="lg" /> : null}
        <label htmlFor="composer-text" className="composer-label">New post</label>
        <textarea
          id="composer-text"
          ref={text}
          value={value}
          placeholder="Share an insight with the feed"
          disabled={busy}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={onKeyDown}
        />
      </div>
      {onFile && file ? (
        <div className={`composer-att${person ? " composer-att-indent" : ""}`}>
          <span className="composer-thumb">
            {preview && isVideo ? (
              <video src={preview} muted playsInline preload="metadata" aria-label={`Selected video: ${file.name}`} />
            ) : preview ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={preview} alt={`Selected image: ${file.name}`} />
            ) : null}
            {isVideo ? (
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M8 5.5v13l11-6.5z" fill="currentColor" />
              </svg>
            ) : null}
          </span>
          <div className="composer-att-text">
            <strong className="composer-filename">{file.name}</strong>
            <span>{attachmentMeta(file)}{busy ? ", uploading" : ""}</span>
            <div
              className={`composer-prog${busy ? " composer-prog-busy" : ""}`}
              role="progressbar"
              aria-label={busy ? "Uploading" : "Attached"}
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={busy ? undefined : 100}
            >
              <i />
            </div>
          </div>
          <button
            type="button"
            className="composer-tool composer-remove"
            aria-label="Remove attachment"
            title="Remove attachment"
            onClick={remove}
            disabled={busy}
          >
            <svg {...iconProps}>
              <path d="M6 6l12 12M18 6 6 18" />
            </svg>
          </button>
        </div>
      ) : null}
      {error ? (
        <p className="composer-error" role="alert">Publishing the post failed. Your text is still here.</p>
      ) : null}
      <div className="composer-bar">
        {onFile ? (
          <>
            <button
              type="button"
              className="composer-tool"
              aria-label="Add image"
              title="Add image"
              disabled={busy}
              onClick={() => imageInput.current?.click()}
            >
              <svg {...iconProps}>
                <rect x="3" y="4" width="18" height="16" rx="3" />
                <circle cx="9" cy="10" r="1.8" />
                <path d="m21 16-5-5-9 9" />
              </svg>
            </button>
            <input
              ref={imageInput}
              className="composer-file"
              type="file"
              accept={IMAGE_ACCEPT}
              disabled={busy}
              tabIndex={-1}
              aria-hidden="true"
              onChange={pick}
            />
            <button
              type="button"
              className="composer-tool"
              aria-label="Add video"
              title="Add video"
              disabled={busy}
              onClick={() => videoInput.current?.click()}
            >
              <svg {...iconProps}>
                <rect x="2.5" y="5.5" width="13" height="13" rx="3" />
                <path d="m15.5 10 6-3.5v11l-6-3.5" />
              </svg>
            </button>
            <input
              ref={videoInput}
              className="composer-file"
              type="file"
              accept={VIDEO_ACCEPT}
              disabled={busy}
              tabIndex={-1}
              aria-hidden="true"
              onChange={pick}
            />
          </>
        ) : null}
        <div className="composer-emoji-wrap" ref={emojiWrap}>
          <button
            type="button"
            className={`composer-tool${emojiOpen ? " composer-tool-on" : ""}`}
            aria-label="Add emoji"
            title="Emoji"
            aria-expanded={emojiOpen}
            aria-haspopup="dialog"
            disabled={busy}
            onClick={() => setEmojiOpen((o) => !o)}
          >
            <svg {...iconProps}>
              <circle cx="12" cy="12" r="9" />
              <path d="M8.5 14.5a4.5 4.5 0 0 0 7 0" />
              <path d="M9 9.5h.01M15 9.5h.01" strokeWidth={2.8} />
            </svg>
          </button>
          {emojiOpen ? (
            <div className="composer-emoji" role="dialog" aria-label="Emoji">
              <span className="composer-eyebrow">Frequently used</span>
              <div className="composer-emoji-grid">
                {COMPOSER_EMOJI.map((m) => (
                  <button type="button" key={m} aria-label={`Insert ${m}`} onClick={() => addEmoji(m)}>
                    {m}
                  </button>
                ))}
              </div>
            </div>
          ) : null}
        </div>
        <span className="composer-sep" aria-hidden="true" />
        <button
          type="button"
          className="composer-tool"
          aria-label="Bulleted list"
          title="Bulleted list"
          disabled={busy}
          onMouseDown={(e) => e.preventDefault()}
          onClick={addBullets}
        >
          <svg {...iconProps}>
            <path d="M9 6h11M9 12h11M9 18h11" />
            <path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01" strokeWidth={2.8} />
          </svg>
        </button>
        <span className="composer-spacer" />
        <span className="composer-kbd" aria-hidden="true">
          <b>Ctrl</b> + <b>Enter</b>
        </span>
        <FlipButton state={flip} className="composer-post" type="submit" aria-keyshortcuts="Control+Enter Meta+Enter" />
      </div>
    </form>
  );
}