/** Documents section for an object's detail view.
 *
 * Self-contained: lists an object's documents (files + web-links), uploads a
 * file (multipart POST to the authenticated view — a WS frame can't carry a
 * binary body), downloads via a signed path (`auth/sign_path` → Companion-safe
 * anchor), adds web-links, and deletes. Write actions are gated by `canWrite`
 * (the server enforces it too); download/open is available to everyone.
 */

import { LitElement, html, css, nothing } from "lit";
import { isSafeHttpUrl } from "../helpers/url";
import { property, state } from "lit/decorators.js";
import { t, ensureLocale, langOf } from "../styles";
import { runWs } from "../helpers/ws-run";
import { downloadUrl } from "../helpers/download";
import { downloadSignedDocument, openSignedDocument, signDocumentPath } from "../helpers/document-url";
import { formatBytes } from "../helpers/format-bytes";
import { docCategory, docDisplayName, CATEGORIES, CATEGORY_ICONS } from "../helpers/document-categories";
import { DOC_FILTER_MIN, DOC_SORT_MODES, asDocSortMode, filterDocuments, sortDocuments, type DocSortMode } from "../helpers/document-filter";
import { LS_KEYS, lsGet, lsSet } from "../helpers/storage-keys";
import type { HomeAssistant } from "../types";
import { isAndroidCompanion } from "../helpers/companion";
import { uploadDocument } from "../helpers/photo-upload";
import "./ms-photo-picker";
import { photoPickerStyles } from "./ms-photo-picker";

interface MaintenanceDocument {
  id: string;
  kind: "file" | "weblink";
  title: string;
  filename?: string;
  url?: string;
  mime?: string;
  size?: number;
  tags?: string[];
  /** #164: a free-text note per document. */
  description?: string;
  added_at?: string;
}

export class MaintenanceDocumentsSection extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ attribute: false }) public entryId!: string;
  @property({ type: Boolean }) public canWrite = false;

  @state() private _docs: MaintenanceDocument[] = [];
  // Local filter (#171) — shown once the list is long enough to need one.
  @state() private _filter = "";
  @state() private _loaded = false;
  @state() private _busy = false;
  @state() private _error = "";
  @state() private _hint = "";
  @state() private _addingLink = false;
  @state() private _linkUrl = "";
  @state() private _linkTitle = "";
  @state() private _category = "manual";
  @state() private _thumbs: Record<string, string> = {};
  @state() private _lightboxUrl = "";
  @state() private _editingId = "";
  @state() private _editTitle = "";
  @state() private _editCategory = "manual";
  @state() private _editDescription = "";
  @state() private _linkDescription = "";
  /** #164: list order, remembered per browser. */
  @state() private _sort: DocSortMode = asDocSortMode(lsGet(LS_KEYS.docSort));
  @state() private _dragOver = false;

  private _loadedFor: string | null = null;
  /** Only the newest list fetch may land (bug audit 2026-09-26): the panel
   *  REUSES this element when the user moves to another object, and a slow
   *  answer for the previous object overwrote the new one's list. */
  private _loadSeq = 0;
  private _localeReady = false;

  private _isImage(doc: MaintenanceDocument): boolean {
    return doc.kind === "file" && (doc.mime || "").startsWith("image/");
  }

  private async _sign(doc: MaintenanceDocument): Promise<string> {
    return signDocumentPath(this.hass, doc.id);
  }

  private get _lang(): string {
    return langOf(this.hass);
  }

  updated(changed: Map<string, unknown>): void {
    super.updated(changed);
    if (this.hass && !this._localeReady) {
      this._localeReady = true;
      // Re-render once the runtime locale JSON arrives (t() falls back to English
      // until then), so a first paint before the fetch lands still localizes.
      void ensureLocale(this._lang).then(() => this.requestUpdate());
    }
    if (this.hass && this.entryId && this._loadedFor !== this.entryId) {
      const switched = this._loadedFor !== null;
      this._loadedFor = this.entryId;
      if (switched) this._resetForObject();
      void this._load();
    }
  }

  /** Another object in the same element: nothing of the previous one may
   *  survive — its list, thumbnails, an open link / edit form (whose Save
   *  would have written to the NEW object) or a message. */
  private _resetForObject(): void {
    this._docs = [];
    this._loaded = false;
    this._thumbs = {};
    this._filter = "";
    this._error = "";
    this._hint = "";
    this._addingLink = false;
    this._linkUrl = "";
    this._linkTitle = "";
    this._linkDescription = "";
    this._editingId = "";
    this._lightboxUrl = "";
  }

  private async _load(): Promise<void> {
    const entryId = this.entryId;
    const seq = ++this._loadSeq;
    const stale = () => seq !== this._loadSeq || entryId !== this.entryId;
    let failure = "";
    const r = await runWs<{ documents: MaintenanceDocument[] }>(
      this,
      { type: "maintenance_supporter/documents/list", entry_id: entryId },
      { onError: (m) => { failure = m; } },
    );
    if (stale()) return;
    this._loaded = true;
    if (r === undefined) {
      this._error = failure;
      return;
    }
    this._docs = r?.documents || [];
    this._error = "";
    this._thumbs = {};
    void this._loadThumbs(stale);
  }

  /** A document write — helpers/ws-run runWs with the busy flag, the error
   *  line and the list reload (`onDone` runs first). */
  private async _write(payload: Record<string, unknown>, onDone?: () => void, fallbackKey?: string): Promise<void> {
    this._error = "";
    await runWs(this, payload, {
      busy: (b) => { this._busy = b; },
      fallbackKey,
      reload: async () => {
        onDone?.();
        await this._load();
      },
      onError: (m) => { this._error = m; },
    });
  }

  /** The signed open / download helpers, their failure on the error line. */
  private async _signed(call: () => Promise<unknown>): Promise<void> {
    await runWs(this, call, { onError: (m) => { this._error = m; } });
  }

  /** Pre-sign a serve URL for each image doc so it can render as a thumbnail. */
  private async _loadThumbs(stale: () => boolean = () => false): Promise<void> {
    await Promise.all(
      this._docs.filter((d) => this._isImage(d)).map(async (d) => {
        try {
          const url = await this._sign(d);
          if (stale()) return;
          this._thumbs = { ...this._thumbs, [d.id]: url };
        } catch {
          /* leave the fallback icon */
        }
      }),
    );
  }

  private _category_of(doc: MaintenanceDocument): string {
    return docCategory(doc);
  }

  /** Keyboard support for the file-picker <label>s (Enter/Space → open). */
  private _labelKeydown(e: KeyboardEvent): void {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      (e.currentTarget as HTMLElement).querySelector("input")?.click();
    }
  }

  private _onFileInput(e: Event): void {
    const input = e.target as HTMLInputElement;
    const files = Array.from(input.files ?? []);
    if (files.length) void this._uploadFiles(files);
    input.value = ""; // let the same file be re-picked
  }

  /** The Android Companion app answers a multi-select with an EMPTY file
   *  list (helpers/companion.ts) — "Upload file" is single-select there.
   *  Evaluated once; the host app does not change. */
  private readonly _singlePick = isAndroidCompanion();

  private _onDrop(e: DragEvent): void {
    e.preventDefault();
    this._dragOver = false;
    if (!this.canWrite || this._busy) return;
    const files = Array.from(e.dataTransfer?.files ?? []);
    if (files.length) void this._uploadFiles(files);
  }

  private _onDragOver(e: DragEvent): void {
    if (!this.canWrite) return;
    e.preventDefault();
    this._dragOver = true;
  }

  private _onDragLeave(e: DragEvent): void {
    // Only clear when the pointer truly leaves the zone (not when moving over a
    // child element), otherwise the overlay flickers.
    const rt = e.relatedTarget as Node | null;
    if (!rt || !(e.currentTarget as HTMLElement).contains(rt)) this._dragOver = false;
  }

  private async _uploadFiles(files: File[], category?: string): Promise<void> {
    const cat = category ?? this._category;
    // Captured: the element may be moved to another object mid-upload — the
    // remaining files still belong to the object the user dropped them on.
    const entryId = this.entryId;
    this._busy = true;
    this._error = "";
    this._hint = "";
    let deduped = 0;
    let dupInObject = 0;
    try {
      // Bulk upload: one refused file (too large, rejected) is noted and
      // the rest still go up — unlike the photo dialogs, which stop.
      for (const file of files) {
        let doc;
        try {
          doc = await uploadDocument(this.hass, entryId, file, [cat]);
        } catch (e) {
          const key = e instanceof Error ? e.message : "";
          if (key !== "doc_too_large" && key !== "doc_upload_failed") throw e;
          this._error = t(key, this._lang);
          continue;
        }
        if (doc.duplicate_in_object) dupInObject++;
        else if (doc.deduped) deduped++;
      }
      if (entryId !== this.entryId) return; // the list shown is another object's now
      if (dupInObject) this._hint = t("doc_dup_in_object", this._lang);
      else if (deduped) this._hint = t("doc_deduped", this._lang);
      await this._load();
    } catch {
      this._error = t("doc_upload_failed", this._lang);
    } finally {
      this._busy = false;
    }
  }

  private async _download(doc: MaintenanceDocument): Promise<void> {
    await this._signed(() => downloadSignedDocument(this.hass, doc.id, doc.filename || doc.title || "document"));
  }

  /** Open a document for viewing: images in an in-app lightbox, everything else
   *  inline in a new tab (the serve view sends Content-Disposition: inline). */
  private async _preview(doc: MaintenanceDocument): Promise<void> {
    if (this._isImage(doc)) {
      this._lightboxUrl = this._thumbs[doc.id] || (await this._sign(doc));
      return;
    }
    await this._signed(() => openSignedDocument(this.hass, doc.id));
  }

  /** Open a document from a title/row click (not just the small icons): preview
   *  a file, open a web-link in a new tab. */
  private _openDoc(doc: MaintenanceDocument): void {
    if (doc.kind === "file") void this._preview(doc);
    // Only open http(s) links — never a javascript:/data: URL (the same scheme
    // guard the rest of the panel applies before opening user-supplied URLs).
    else if (isSafeHttpUrl(doc.url)) window.open(doc.url, "_blank", "noopener");
  }

  private _startEdit(doc: MaintenanceDocument): void {
    this._editingId = doc.id;
    this._editTitle = doc.title || "";
    this._editCategory = this._category_of(doc);
    this._editDescription = doc.description || "";
    this._addingLink = false;
    this._error = "";
  }

  private _cancelEdit(): void {
    this._editingId = "";
  }

  private _setSort(raw: string): void {
    this._sort = asDocSortMode(raw);
    lsSet(LS_KEYS.docSort, this._sort);
  }

  private async _saveEdit(doc: MaintenanceDocument): Promise<void> {
    // Keep any free (non-category) tags; swap in the chosen category.
    const freeTags = (doc.tags || []).filter(
      (x) => !(CATEGORIES as readonly string[]).includes(x),
    );
    const tags = doc.kind === "file" ? [this._editCategory, ...freeTags] : (doc.tags ?? []);
    await this._write(
      {
        type: "maintenance_supporter/documents/update",
        doc_id: doc.id,
        title: this._editTitle.trim() || doc.filename || doc.url || "",
        tags,
        description: this._editDescription.trim(),
      },
      () => { this._editingId = ""; },
    );
  }

  private async _delete(doc: MaintenanceDocument): Promise<void> {
    const name = docDisplayName(doc);
    if (!window.confirm(t("doc_delete_confirm", this._lang).replace("{name}", name))) return;
    await this._write({ type: "maintenance_supporter/documents/delete", doc_id: doc.id });
  }

  private async _addLink(): Promise<void> {
    const url = this._linkUrl.trim();
    if (!url) return;
    const entryId = this.entryId;
    await this._write(
      {
        type: "maintenance_supporter/documents/add_link",
        entry_id: entryId,
        url,
        title: this._linkTitle.trim() || null,
        description: this._linkDescription.trim() || null,
      },
      () => {
        this._linkUrl = "";
        this._linkTitle = "";
        this._linkDescription = "";
        this._addingLink = false;
      },
      "doc_link_invalid",
    );
  }

  render() {
    const L = this._lang;
    return html`
      <div
        class="doc-zone ${this._dragOver ? "drag-over" : ""}"
        @dragover=${this._onDragOver}
        @dragleave=${this._onDragLeave}
        @drop=${this._onDrop}
      >
        ${this._dragOver && this.canWrite
          ? html`<div class="drop-overlay">
              <ha-icon icon="mdi:tray-arrow-down"></ha-icon> ${t("doc_drop_hint", L)}
            </div>`
          : nothing}
      <div class="doc-header">
        <h3>${t("documents", L)} (${this._docs.length})</h3>
        ${this.canWrite
          ? html`
              <div class="doc-actions">
                <select
                  class="cat-select"
                  .value=${this._category}
                  ?disabled=${this._busy}
                  @change=${(e: Event) => (this._category = (e.target as HTMLSelectElement).value)}
                >
                  ${CATEGORIES.map((c) => html`<option value=${c}>${t(`doc_cat_${c}`, L)}</option>`)}
                </select>
                <label
                  class="btn primary ${this._busy ? "disabled" : ""}"
                  role="button"
                  tabindex="0"
                  @keydown=${this._labelKeydown}
                >
                  <ha-icon icon="mdi:upload"></ha-icon>
                  ${this._busy ? t("doc_uploading", L) : t("doc_upload", L)}
                  <input type="file" ?multiple=${!this._singlePick} hidden ?disabled=${this._busy} @change=${this._onFileInput} />
                </label>
                <ms-photo-picker compact .showGallery=${false} .lang=${L} .disabled=${this._busy}
                  @files-picked=${(e: CustomEvent<{ files: File[] }>) => this._uploadFiles(e.detail.files, "photo")}
                ></ms-photo-picker>
                <button class="btn" ?disabled=${this._busy} @click=${() => (this._addingLink = !this._addingLink)}>
                  <ha-icon icon="mdi:link-variant"></ha-icon> ${t("doc_add_link", L)}
                </button>
              </div>
            `
          : nothing}
      </div>

      ${this._error ? html`<div class="doc-msg error">${this._error}</div>` : nothing}
      ${this._hint ? html`<div class="doc-msg hint">${this._hint}</div>` : nothing}

      ${this._addingLink && this.canWrite
        ? html`
            <div class="link-form">
              <input
                type="url"
                placeholder=${t("doc_link_url", L)}
                .value=${this._linkUrl}
                ?disabled=${this._busy}
                @input=${(e: Event) => (this._linkUrl = (e.target as HTMLInputElement).value)}
              />
              <input
                type="text"
                placeholder=${t("doc_link_title", L)}
                .value=${this._linkTitle}
                ?disabled=${this._busy}
                @input=${(e: Event) => (this._linkTitle = (e.target as HTMLInputElement).value)}
              />
              <input
                type="text"
                class="link-desc"
                placeholder=${t("doc_description", L)}
                .value=${this._linkDescription}
                ?disabled=${this._busy}
                @input=${(e: Event) => (this._linkDescription = (e.target as HTMLInputElement).value)}
              />
              <button class="btn primary" ?disabled=${this._busy || !this._linkUrl.trim()} @click=${this._addLink}>
                ${t("add", L)}
              </button>
              <button class="btn" ?disabled=${this._busy} @click=${() => (this._addingLink = false)}>
                ${t("cancel", L)}
              </button>
            </div>
          `
        : nothing}

      ${this._loaded && this._docs.length >= 2
        ? html`<div class="doc-tools">
            <ha-icon icon="mdi:sort"></ha-icon>
            <select class="sort-select" aria-label=${t("doc_sort", L)} .value=${this._sort}
              @change=${(e: Event) => this._setSort((e.target as HTMLSelectElement).value)}>
              ${DOC_SORT_MODES.map((m) => html`<option value=${m} ?selected=${m === this._sort}>${t(`doc_sort_${m}`, L)}</option>`)}
            </select>
          </div>`
        : nothing}
      ${this._loaded && this._docs.length >= DOC_FILTER_MIN
        ? html`<div class="doc-filter">
            <ha-icon icon="mdi:magnify"></ha-icon>
            <input type="search" aria-label=${t("doc_search", L)} placeholder=${t("doc_search", L)}
              .value=${this._filter} @input=${(e: Event) => (this._filter = (e.target as HTMLInputElement).value)} />
          </div>`
        : nothing}
      ${!this._loaded
        ? html`<div class="doc-empty">${t("loading", L)}</div>`
        : this._docs.length === 0
          ? html`<div class="doc-empty">${t("documents_empty", L)}</div>`
          : (() => {
              // A query ranks by match; otherwise the remembered order applies.
              const shown = this._filter.trim() ? filterDocuments(this._docs, this._filter) : sortDocuments(this._docs, this._sort);
              return shown.length === 0
                ? html`<div class="doc-empty">${t("doc_search_none", L)}</div>`
                : html`<div class="doc-list">${shown.map((doc) => this._renderDoc(doc, L))}</div>`;
            })()}

      ${this._lightboxUrl
        ? html`<div class="lightbox" @click=${() => (this._lightboxUrl = "")}>
            <img class="lightbox-img" src=${this._lightboxUrl} @click=${(e: Event) => e.stopPropagation()} />
            <button class="lightbox-close" title=${t("doc_close", L)} @click=${() => (this._lightboxUrl = "")}>
              <ha-icon icon="mdi:close"></ha-icon>
            </button>
          </div>`
        : nothing}
      </div>
    `;
  }

  private _renderDoc(doc: MaintenanceDocument, L: string) {
    if (this._editingId === doc.id) return this._renderEdit(doc, L);
    const isFile = doc.kind === "file";
    const cat = this._category_of(doc);
    const meta = isFile
      ? `${t(`doc_cat_${cat}`, L)} · ${formatBytes(doc.size, L)}`
      : t("doc_link_badge", L);
    const thumb = this._thumbs[doc.id];
    return html`
      <div class="doc-row">
        ${isFile && thumb
          ? html`<img
              class="doc-thumb"
              src=${thumb}
              alt=${doc.title || ""}
              title=${t("doc_open", L)}
              @click=${() => this._preview(doc)}
            />`
          : html`<ha-icon
              class="doc-icon ${isFile ? "clickable" : ""}"
              icon=${isFile ? CATEGORY_ICONS[cat] : "mdi:link-variant"}
              @click=${() => isFile && this._preview(doc)}
            ></ha-icon>`}
        <div
          class="doc-info"
          role="button"
          tabindex="0"
          title=${t("doc_open", L)}
          @click=${() => this._openDoc(doc)}
          @keydown=${(e: KeyboardEvent) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              this._openDoc(doc);
            }
          }}
        >
          <div class="doc-title">${docDisplayName(doc)}</div>
          <div class="doc-meta">${meta}</div>
          ${doc.description ? html`<div class="doc-desc">${doc.description}</div>` : nothing}
        </div>
        <div class="doc-row-actions">
          ${isFile
            ? html`
                <button class="icon-btn" title=${t("doc_open", L)} @click=${() => this._preview(doc)}>
                  <ha-icon icon="mdi:eye-outline"></ha-icon>
                </button>
                <button class="icon-btn" title=${t("doc_download", L)} @click=${() => this._download(doc)}>
                  <ha-icon icon="mdi:download"></ha-icon>
                </button>`
            : html`<a
                class="icon-btn"
                href=${isSafeHttpUrl(doc.url) ? doc.url : "#"}
                target="_blank"
                rel="noopener noreferrer"
                title=${t("doc_open", L)}
              ><ha-icon icon="mdi:open-in-new"></ha-icon></a>`}
          ${this.canWrite
            ? html`
                <button class="icon-btn" title=${t("edit", L)} ?disabled=${this._busy} @click=${() => this._startEdit(doc)}>
                  <ha-icon icon="mdi:pencil"></ha-icon>
                </button>
                <button class="icon-btn danger" title=${t("delete", L)} ?disabled=${this._busy} @click=${() => this._delete(doc)}>
                  <ha-icon icon="mdi:delete"></ha-icon>
                </button>`
            : nothing}
        </div>
      </div>
    `;
  }

  private _renderEdit(doc: MaintenanceDocument, L: string) {
    const isFile = doc.kind === "file";
    return html`
      <div class="doc-row editing">
        <input
          class="edit-title"
          type="text"
          placeholder=${t("doc_link_title", L)}
          .value=${this._editTitle}
          ?disabled=${this._busy}
          @input=${(e: Event) => (this._editTitle = (e.target as HTMLInputElement).value)}
        />
        ${isFile
          ? html`<select
              class="cat-select"
              ?disabled=${this._busy}
              @change=${(e: Event) => (this._editCategory = (e.target as HTMLSelectElement).value)}
            >
              ${CATEGORIES.map(
                (c) => html`<option value=${c} ?selected=${c === this._editCategory}>${t(`doc_cat_${c}`, L)}</option>`,
              )}
            </select>`
          : nothing}
        <input
          class="edit-desc"
          type="text"
          placeholder=${t("doc_description", L)}
          .value=${this._editDescription}
          ?disabled=${this._busy}
          @input=${(e: Event) => (this._editDescription = (e.target as HTMLInputElement).value)}
        />
        <button class="icon-btn" title=${t("save", L)} ?disabled=${this._busy || !this._editTitle.trim()} @click=${() => this._saveEdit(doc)}>
          <ha-icon icon="mdi:check"></ha-icon>
        </button>
        <button class="icon-btn" title=${t("cancel", L)} ?disabled=${this._busy} @click=${this._cancelEdit}>
          <ha-icon icon="mdi:close"></ha-icon>
        </button>
      </div>
    `;
  }

  static styles = [photoPickerStyles, css`
    :host { display: block; margin: 8px 0 4px; }
    .doc-zone { position: relative; }
    .doc-zone.drag-over {
      outline: 2px dashed var(--primary-color); outline-offset: 4px; border-radius: 8px;
    }
    .drop-overlay {
      position: absolute; inset: 0; z-index: 5; pointer-events: none;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      border-radius: 8px; font-size: 15px; font-weight: 600;
      color: var(--primary-color); opacity: 0.95;
      background: var(--card-background-color, rgba(255, 255, 255, 0.85));
    }
    .drop-overlay ha-icon { --mdc-icon-size: 24px; }
    /* The camera picker (ms-photo-picker, light DOM) wears the toolbar's
       .btn look instead of the dialogs' dashed tile. */
    .doc-actions .photo-pick {
      padding: 6px 10px; gap: 6px; border-style: solid; border-radius: 6px;
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
      color: var(--primary-text-color); border-color: var(--divider-color);
    }
    .doc-actions .photo-pick ha-icon { --mdc-icon-size: 18px; }
    .doc-actions .photo-pick.disabled { opacity: 0.5; pointer-events: none; }
    .doc-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; flex-wrap: wrap;
    }
    h3 { margin: 8px 0; font-size: 16px; }
    .doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cat-select {
      padding: 6px 8px; border-radius: 6px; font: inherit;
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
      color: var(--primary-text-color); border: 1px solid var(--divider-color);
    }
    .btn {
      display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
      padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 13px;
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
      color: var(--primary-text-color); border: 1px solid var(--divider-color);
    }
    .btn.primary { background: var(--primary-color); color: var(--text-primary-color, #fff); border-color: var(--primary-color); }
    .btn:focus-visible, .icon-btn:focus-visible {
      outline: 2px solid var(--primary-color); outline-offset: 2px;
    }
    .btn.disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; }
    .btn ha-icon { --mdc-icon-size: 18px; }
    .link-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
    .link-form input {
      flex: 1 1 180px; padding: 6px 10px; border-radius: 6px; font: inherit;
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
      color: var(--primary-text-color); border: 1px solid var(--divider-color);
    }
    .doc-msg { font-size: 13px; margin: 6px 0; }
    .doc-msg.error { color: var(--error-color, #f44336); }
    .doc-msg.hint { color: var(--secondary-text-color, #888); }
    .doc-empty { color: var(--secondary-text-color, #888); font-size: 13px; padding: 8px 0; }
    .doc-filter { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
    .doc-filter ha-icon { --mdc-icon-size: 18px; color: var(--secondary-text-color, #888); }
    .doc-filter input {
      flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
      border: 1px solid var(--divider-color); background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
    }
    .doc-filter input:focus { outline: none; border-color: var(--primary-color); }
    .doc-list { display: flex; flex-direction: column; gap: 4px; }
    .doc-row {
      display: flex; align-items: center; gap: 12px; padding: 8px 10px;
      border: 1px solid var(--divider-color); border-radius: 8px;
      background: var(--card-background-color, transparent);
    }
    .doc-row.editing { gap: 8px; }
    .edit-title {
      flex: 1; min-width: 0; padding: 6px 10px; border-radius: 6px; font: inherit;
      background: var(--secondary-background-color, rgba(0, 0, 0, 0.06));
      color: var(--primary-text-color); border: 1px solid var(--divider-color);
    }
    .doc-icon { color: var(--primary-color); --mdc-icon-size: 24px; flex: none; }
    .doc-icon.clickable { cursor: pointer; }
    .doc-thumb {
      width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none;
      cursor: pointer; border: 1px solid var(--divider-color);
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
    }
    .lightbox {
      position: fixed; inset: 0; z-index: 9999; cursor: zoom-out;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0, 0, 0, 0.85);
    }
    .lightbox-img {
      max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: default;
      border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    }
    .lightbox-close {
      position: fixed; top: 16px; right: 16px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 50%; border: none;
      background: rgba(0, 0, 0, 0.5); color: #fff;
    }
    .lightbox-close ha-icon { --mdc-icon-size: 26px; }
    .doc-info { flex: 1; min-width: 0; cursor: pointer; border-radius: 6px; }
    .doc-info:hover .doc-title { text-decoration: underline; }
    .doc-info:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    .doc-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-meta { font-size: 12px; color: var(--secondary-text-color, #888); }
    .doc-desc { font-size: 12.5px; color: var(--secondary-text-color, #888); margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
    .doc-tools { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; color: var(--secondary-text-color, #888); }
    .doc-tools ha-icon { --mdc-icon-size: 18px; }
    .sort-select {
      padding: 4px 6px; border-radius: 6px; font: inherit; font-size: 13px;
      background: var(--secondary-background-color, rgba(0,0,0,0.06));
      color: var(--primary-text-color); border: 1px solid var(--divider-color);
    }
    .doc-row.editing { flex-wrap: wrap; }
    .edit-desc, .link-desc { flex: 1 1 100%; min-width: 0; }
    .doc-row-actions { display: flex; gap: 4px; flex: none; }
    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
      background: transparent; border: none; color: var(--primary-text-color);
      text-decoration: none;
    }
    .icon-btn:hover { background: var(--secondary-background-color, rgba(0,0,0,0.06)); }
    .icon-btn.danger { color: var(--error-color, #f44336); }
    .icon-btn[disabled] { opacity: 0.4; pointer-events: none; }
    .icon-btn ha-icon { --mdc-icon-size: 20px; }
  `];
}

if (!customElements.get("maintenance-documents-section")) {
  customElements.define("maintenance-documents-section", MaintenanceDocumentsSection);
}