/** v2.3.0 — Task Quick-Actions Dialog.
 *
 *  Opens from the Lovelace card / strategy when the user clicks a task row.
 *  Surfaces every action the panel's Task-Detail header offers, in-place,
 *  without forcing a panel-roundtrip:
 *
 *    • Quick info  — name + status + next due + last performed + interval
 *    • Primary actions — Complete (existing dialog), Skip (inline), Reset (inline)
 *    • Secondary (admin) — Edit settings (existing dialog), QR Code, Delete
 *    • Footer — "Open in Maintenance Panel" deep-link for History/Statistics
 *
 *  Mounted via dialog-mount.openTaskQuickActions(entryId, taskId).
 */

import { LitElement, html, css, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import { sharedStyles, t, formatDate, formatInterval, formatRecurrence, formatCost, formatDuration, currencySymbolOf, langOf, syncCurrencyDecimals} from "../styles";
import { runWs } from "../helpers/ws-run";
import { focusModalShell, modalShellStyles, renderModalShell } from "../helpers/modal-shell";
import { isoDateLocal } from "../helpers/calendar-bucket";
import { buildCompleteDialogArgs } from "../helpers/complete-dialog-args";
import { phaseLabel } from "../helpers/phases";
import { buildHistoryEntryDraft } from "../helpers/history-draft";
import { readingSlotDelta } from "../helpers/reading-slots";
import { taskRef } from "../helpers/reference";
import { newestFirst, renderHistoryEntry } from "../renderers/history";
import { renderStatusBadge, statusColor } from "../renderers/status";
import { fetchSettingsOnce } from "../helpers/settings-cache";
import { canWrite, NO_DELEGATION, type WriteAccess } from "../helpers/permissions";
import { confirmAction } from "../helpers/confirm";
import { ToastTimer } from "../helpers/toast";
import { renderWeibullSection } from "../renderers/weibull";
import { renderPredictionSection } from "../renderers/prediction";
import { renderRecommendationBars } from "../renderers/recommendation";
import "./ms-date-field";
import {
  renderSeasonalCardCompact,
  renderSeasonalCardExpanded,
} from "../renderers/seasonal";
import type {
  HomeAssistant,
  HistoryEntry,
  MaintenanceObjectResponse,
  MaintenanceTask,
  AdvancedFeatures,
} from "../types";

interface MaintenanceObjectFull {
  entry_id: string;
  object: { id: string; name: string; ref_no?: number | null };
  tasks: MaintenanceTask[];
}

export class MaintenanceTaskQuickActionsDialog extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _open = false;
  @state() private _entryId: string | null = null;
  @state() private _taskId: string | null = null;
  @state() private _task: MaintenanceTask | null = null;
  @state() private _objectName = "";
  /** #170: "8.3" once the backend numbered the task — the history rows' "#8.3-n" chips. */
  @state() private _taskRef: string | null = null;
  @state() private _busy = false;
  @state() private _error = "";
  @state() private _showSkip = false;
  @state() private _showReset = false;
  @state() private _showDetails = false;
  @state() private _showAdaptive = false;
  @state() private _skipReason = "";
  @state() private _resetDate = "";
  @state() private _features: AdvancedFeatures = {
    adaptive: false, predictions: false, seasonal: false, environmental: false,
    budget: false, groups: false, checklists: false, schedule_time: false,
    completion_actions: false,
  };
  @state() private _toast = "";
  private readonly _toastTimer = new ToastTimer();
  /** Operator-write delegation (helpers/permissions): Edit / Archive /
   *  Delete follow canWrite() like the panel, not `is_admin` alone. */
  @state() private _access: WriteAccess = NO_DELEGATION;
  /** Currency symbol for the complete dialog's cost suggestion — read off
   *  the same settings response as the feature flags. */
  private _currencySymbol = "";

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

  /** Open the dialog. Loads fresh data from /object via WS so dialog stays in
   *  sync even if the underlying card has stale data. */
  public async openFor(entryId: string, taskId: string): Promise<void> {
    // Reopened for ANOTHER task while open: never show the previous one
    // under the new ids until the fresh load lands.
    if (entryId !== this._entryId || taskId !== this._taskId) this._task = null;
    this._entryId = entryId;
    this._taskId = taskId;
    this._error = "";
    this._showSkip = false;
    this._showReset = false;
    this._showAdaptive = false;
    this._skipReason = "";
    // Local calendar date — toISOString() is UTC and prefills YESTERDAY for
    // users east of UTC before their morning (bug audit 2026-08-22).
    this._resetDate = isoDateLocal(new Date());
    this._open = true;
    await Promise.all([this._loadTask(), this._loadFeatures()]);
  }

  /** Pull the active feature flags so adaptive sections only render when
   *  Adaptive / Seasonal / Environmental are actually enabled (matches the
   *  panel's behaviour), plus the write delegation and currency. Through
   *  the page-wide settings cache (one fetch per page, invalidated by
   *  global/update) — the private fetch here bypassed it and never
   *  re-read after a settings change (DRY audit 2026-09-26). A failed
   *  fetch serves the all-off fallback and asks again next open. */
  private async _loadFeatures(): Promise<void> {
    const settings = await fetchSettingsOnce(this.hass);
    this._features = { ...this._features, ...settings.features };
    this._access = settings.access;
    this._currencySymbol = currencySymbolOf(settings.budget ?? undefined);
    syncCurrencyDecimals(settings.budget ?? undefined);
  }

  public close(): void {
    this._loadSeq++; // a load still in flight belongs to the closed dialog
    this._open = false;
    this._task = null;
    this._error = "";
    this._toastTimer.clear();
    this._toast = "";
  }

  private _showToast(msg: string, ms?: number): void {
    this._toast = msg;
    this._toastTimer.schedule(() => { this._toast = ""; }, ms);
  }

  /** Only the newest `_loadTask` may land: the answer for a task the dialog
   *  was opened for BEFORE (or after it closed) looked up the CURRENT task
   *  id in the wrong object, found nothing, and left the dialog stuck on
   *  "Loading" (bug audit 2026-09-26 #2). */
  private _loadSeq = 0;

  private async _loadTask(): Promise<void> {
    const entryId = this._entryId;
    const taskId = this._taskId;
    if (!entryId || !taskId) return;
    const seq = ++this._loadSeq;
    let failure = "";
    const r = await runWs<MaintenanceObjectFull>(
      this,
      { type: "maintenance_supporter/object", entry_id: entryId },
      { onError: (m) => { failure = m; } },
    );
    if (seq !== this._loadSeq) return;
    if (r === undefined) {
      this._error = failure;
      return;
    }
    this._objectName = r?.object?.name || "";
    const found = (r?.tasks || []).find((t) => t.id === taskId);
    this._task = found ?? null;
    this._taskRef = taskRef(r?.object, found);
    // A task deleted meanwhile: say so instead of "Loading" forever.
    if (!found) this._error = t("ws_err_not_found", this._lang);
  }

  /** helpers/ws-run runWs bound to this dialog's busy flag and error line. */
  private _runWs<T = unknown>(payload: Record<string, unknown>): Promise<T | undefined> {
    this._error = "";
    return runWs<T>(this, payload, {
      busy: (b) => { this._busy = b; },
      onError: (m) => { this._error = m; },
    });
  }

  private _notifyChanged(action: string): void {
    this.dispatchEvent(
      new CustomEvent("task-action-fired", {
        detail: { entry_id: this._entryId, task_id: this._taskId, action },
        bubbles: true,
        composed: true,
      }),
    );
  }

  private _onComplete(): void {
    if (!this._entryId || !this._taskId || !this._task) return;
    // Reuse the existing rich complete-dialog by mounting it on body.
    // Pass EVERYTHING the card's direct path passes — omitting
    // required_completion_fields let a mandatory note be skipped, and a
    // reading task without type+unit never rendered its value field
    // (bug audit 2026-08-22).
    import("../dialog-mount").then(async ({ openCompleteDialog }) => {
      const task = this._task!;
      // The object list resolves the parts picker (own inventory + shared
      // pools, #99/#111), the "consumes" hint lines and a buy task's restock
      // default — fetched for every task kind, since a buy task needs its
      // part's restock quantity + unit cost too.
      let objects: MaintenanceObjectResponse[] = [];
      try {
        const r = await this.hass.connection.sendMessagePromise<{
          objects: MaintenanceObjectResponse[];
        }>({ type: "maintenance_supporter/objects", compact: true });
        objects = r.objects || [];
      } catch {
        // Parts stay empty — the dialog still completes without them.
      }
      // Same derivation as the panel and the card (phase override, tag-scan
      // gate, checklist ticks …) — see helpers/complete-dialog-args.
      const ok = openCompleteDialog(
        buildCompleteDialogArgs({
          entryId: this._entryId!,
          taskId: this._taskId!,
          taskName: task.name,
          task,
          objects,
          lang: this._lang,
          // The feature switches gate the checklist and the adaptive
          // feedback exactly like the panel (DRY audit 2026-09-26).
          features: this._features,
          currencySymbol: this._currencySymbol,
        }),
      );
      if (ok) {
        this._notifyChanged("complete");
        this.close();
      }
    });
  }

  private async _onSkipConfirm(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/skip",
      entry_id: this._entryId,
      task_id: this._taskId,
      reason: this._skipReason.trim() || null,
    });
    if (ok !== undefined) {
      this._notifyChanged("skip");
      this.close();
    }
  }

  private async _onResetConfirm(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/reset",
      entry_id: this._entryId,
      task_id: this._taskId,
      date: this._resetDate || undefined,
    });
    if (ok !== undefined) {
      this._notifyChanged("reset");
      this.close();
    }
  }

  private _onEdit(): void {
    if (!this._entryId || !this._taskId) return;
    import("../dialog-mount").then(({ openEditTaskDialog }) => {
      openEditTaskDialog(this._entryId!, this._taskId!);
      this.close();
    });
  }

  private _onQr(): void {
    if (!this._entryId || !this._taskId || !this._task) return;
    import("../dialog-mount").then(({ openQrDialog }) => {
      openQrDialog({
        entry_id: this._entryId!,
        task_id: this._taskId!,
        task_name: this._task!.name,
        object_name: this._objectName,
      });
      this.close();
    });
  }

  private async _onDelete(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const confirmed = await confirmAction(this.hass, {
      title: t("delete", this._lang),
      message: t("delete_task_confirm", this._lang),
      confirmText: t("delete", this._lang),
      danger: true,
    });
    if (!confirmed) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/delete",
      entry_id: this._entryId,
      task_id: this._taskId,
    });
    if (ok !== undefined) {
      this._notifyChanged("delete");
      this.close();
    }
  }

  private async _onArchive(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/archive",
      entry_id: this._entryId,
      task_id: this._taskId,
    });
    if (ok !== undefined) {
      this._notifyChanged("archive");
      this.close();
    }
  }

  private async _onUnarchive(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/unarchive",
      entry_id: this._entryId,
      task_id: this._taskId,
    });
    if (ok !== undefined) {
      this._notifyChanged("unarchive");
      this.close();
    }
  }

  private _onOpenInPanel(): void {
    if (!this._entryId || !this._taskId) return;
    const path = `/maintenance-supporter?entry_id=${encodeURIComponent(this._entryId)}`
      + `&task_id=${encodeURIComponent(this._taskId)}`;
    history.pushState(null, "", path);
    window.dispatchEvent(new CustomEvent("location-changed"));
    this.close();
  }

  private async _applySuggestion(): Promise<void> {
    if (!this._entryId || !this._taskId || !this._task?.suggested_interval) return;
    const ok = await this._runWs({
      type: "maintenance_supporter/task/apply_suggestion",
      entry_id: this._entryId,
      task_id: this._taskId,
      interval: this._task.suggested_interval,
    });
    if (ok !== undefined) {
      this._showToast(t("suggestion_applied", this._lang));
      this._notifyChanged("apply_suggestion");
      // Refresh local task so the recommendation card hides
      await this._loadTask();
    }
  }

  private async _reanalyzeInterval(): Promise<void> {
    if (!this._entryId || !this._taskId) return;
    const r = await this._runWs<{
      recommended_interval: number | null;
      confidence: string;
      data_points: number;
    }>({
      type: "maintenance_supporter/task/analyze_interval",
      entry_id: this._entryId,
      task_id: this._taskId,
    });
    if (r === undefined) return;
    this._showToast(r?.recommended_interval
      // The analyzer always works in DAYS (helpers/interval_analyzer.py), so
      // the unit is pinned here rather than taken from the task's own unit.
      ? `${t("reanalyze_result", this._lang)}: ${formatInterval(r.recommended_interval, "days", this._lang)} (${r.data_points} pts)`
      : t("reanalyze_insufficient_data", this._lang));
    await this._loadTask();
  }

  private _onEditHistoryEntry(entry: HistoryEntry): void {
    if (!this._entryId || !this._taskId) return;
    const draft = buildHistoryEntryDraft(this._entryId, this._taskId, entry, this._task);
    import("../dialog-mount").then(({ openHistoryEditDialog }) => openHistoryEditDialog(draft));
  }

  /** Inline recommendation card (Current vs Suggested with apply/reanalyze).
   *  Bars + confidence badge come from the shared renderer; the action row
   *  uses native <button>s because <ha-button> isn't always registered in
   *  the Lovelace context (same lazy-load issue that bit complete-dialog
   *  with ha-textfield in #50). The panel uses ha-button + adds Dismiss. */
  private _renderRecommendation(task: MaintenanceTask) {
    if (!this._features.adaptive
      || !task.suggested_interval
      || task.suggested_interval === task.interval_days) {
      return nothing;
    }
    const L = this._lang;
    return html`
      <div class="recommendation-card">
        <h4>${t("suggested_interval", L)}</h4>
        ${renderRecommendationBars(
          task.interval_days, task.suggested_interval,
          task.interval_confidence || "medium", L,
        )}
        <div class="recommendation-actions">
          ${canWrite(this.hass?.user, this._access)
            ? html`<button class="btn primary qa-apply-suggestion"
                @click=${this._applySuggestion} ?disabled=${this._busy}>
                <ha-icon icon="mdi:check"></ha-icon>
                ${t("apply_suggestion", L)}
              </button>`
            : nothing /* task/apply_suggestion is write tier */}
          <button class="btn"
            @click=${this._reanalyzeInterval} ?disabled=${this._busy}>
            <ha-icon icon="mdi:refresh"></ha-icon>
            ${t("reanalyze", L)}
          </button>
        </div>
      </div>
    `;
  }

  /** Adaptive section: prediction + recommendation + Weibull + seasonal,
   *  reusing the panel's renderers. Only renders blocks that have data. */
  private _renderAdaptive(task: MaintenanceTask) {
    const L = this._lang;
    const hasRecommendation = this._features.adaptive
      && task.suggested_interval
      && task.suggested_interval !== task.interval_days;
    const hasPrediction = (task.degradation_trend != null
        && task.degradation_trend !== "insufficient_data")
      || task.days_until_threshold != null
      || (task.environmental_factor != null && task.environmental_factor !== 1.0);
    const hasWeibull = this._features.adaptive
      && task.interval_analysis?.weibull_beta != null
      && task.interval_analysis?.weibull_eta != null;
    const hasSeasonal = this._features.seasonal
      && task.seasonal_factor
      && task.seasonal_factor !== 1.0;

    if (!hasRecommendation && !hasPrediction && !hasWeibull && !hasSeasonal) {
      return html`<div class="adaptive-empty">
        ${t("adaptive_no_data", L)}
      </div>`;
    }
    return html`
      <div class="adaptive-stack">
        ${this._toast
          ? html`<div class="toast">${this._toast}</div>`
          : nothing}
        ${hasRecommendation ? this._renderRecommendation(task) : nothing}
        ${hasPrediction ? renderPredictionSection(task, L, this._features) : nothing}
        ${hasWeibull ? renderWeibullSection(task, L) : nothing}
        ${hasSeasonal ? html`
          ${renderSeasonalCardCompact(task, L, this._features)}
          ${task.seasonal_factors?.length === 12
              || task.interval_analysis?.seasonal_factors?.length === 12
            ? renderSeasonalCardExpanded(task, L)
            : nothing}
        ` : nothing}
      </div>
    `;
  }

  /** Read-only details panel: stats + history. Shown when the user clicks
   *  "Show details" in the dialog. Edit-buttons on history entries open the
   *  existing history-edit dialog (which lives in the same dialog-mount). */
  private _renderDetails(task: MaintenanceTask) {
    const L = this._lang;
    // The list payload carries only the most recent entries (payload diet,
    // 20) — the stats come from the server's totals over the WHOLE history,
    // not from that window: a task done 30 times read "20" here (DRY audit
    // 2026-09-26). The list itself stays the recent window, newest first by
    // timestamp (a backdated #133 completion is appended last).
    const history = (task.history || []) as HistoryEntry[];
    const totalEntries = task.history_count ?? history.length;
    const recent = newestFirst(history).slice(0, 20);

    return html`
      <div class="details">
        <div class="stats-grid">
          <div class="stat">
            <span class="stat-label">${t("times_performed", L)}</span>
            <span class="stat-value">${task.times_performed ?? 0}</span>
          </div>
          <div class="stat">
            <span class="stat-label">${t("total_cost", L)}</span>
            <span class="stat-value">${formatCost(task.total_cost ?? 0, this._currencySymbol, L)}</span>
          </div>
          <div class="stat">
            <span class="stat-label">${t("avg_duration", L)}</span>
            <span class="stat-value">${formatDuration(task.average_duration != null ? Math.round(task.average_duration) : null, L)}</span>
          </div>
        </div>
        <div class="history-header">
          <strong>${t("history", L)}</strong>
          <span class="history-count">${totalEntries}</span>
        </div>
        ${history.length === 0
          ? html`<div class="history-empty">${t("history_empty", L)}</div>`
          : html`
              <div class="history-list">
                ${recent.map((entry) => renderHistoryEntry(entry, {
                  lang: L,
                  hass: this.hass,
                  currencySymbol: this._currencySymbol,
                  // task/history/update is write tier: no pencil otherwise.
                  openEdit: canWrite(this.hass?.user, this._access) ? (e) => this._onEditHistoryEntry(e) : undefined,
                  readingUnit: task.reading_unit,
                  readingSlotDelta: (e, slotId) => readingSlotDelta(history, e, slotId),
                  taskRef: this._taskRef,
                }, { compact: true }))}
                ${totalEntries > recent.length
                  ? html`<div class="history-more">… +${totalEntries - recent.length} ${t("older_entries", L)}</div>`
                  : nothing}
              </div>
            `}
      </div>
    `;
  }

  render() {
    if (!this._open) return nothing;
    const L = this._lang;
    const task = this._task;
    const writer = canWrite(this.hass?.user, this._access);

    return renderModalShell(() => this.close(), html`
        ${task
          ? html`
              <div class="header">
                <div class="title">
                  <span class="status-dot" style="background: ${statusColor(task)}"></span>
                  <span class="task-name">${task.name}</span>
                  ${renderStatusBadge(task, L)}
                </div>
                <div class="object">
                  <button class="link-inline" @click=${() => {
                    if (!this._entryId) return;
                    import("../dialog-mount").then(({ openObjectQuickActions }) => {
                      openObjectQuickActions(this._entryId!);
                      this.close();
                    });
                  }}>${this._objectName}</button>
                </div>
                <div class="quick-info">
                  ${task.next_due
                    ? html`<span><strong>${t("next_due", L)}:</strong> ${formatDate(task.next_due, L)}</span>`
                    : nothing}
                  ${task.last_performed
                    ? html`<span><strong>${t("last_performed", L)}:</strong> ${formatDate(task.last_performed, L)}</span>`
                    : nothing}
                  ${(task.schedule?.kind && !["manual", "one_time"].includes(task.schedule.kind)) || task.interval_days != null
                    ? html`<span><strong>${t("interval", L)}:</strong> ${formatRecurrence(task, L)}</span>`
                    : nothing}
                  ${phaseLabel(task)
                    ? html`<span><strong>${t("phase_current", L)}:</strong> ${phaseLabel(task)}</span>`
                    : nothing}
                </div>
              </div>

              ${this._error
                ? html`<div class="error">${this._error}</div>`
                : nothing}

              ${this._showSkip
                ? html`
                    <div class="inline-form">
                      <label>${t("skip_reason", L)}</label>
                      <input type="text" .value=${this._skipReason}
                        @input=${(e: Event) => { this._skipReason = (e.target as HTMLInputElement).value; }} />
                      <div class="inline-actions">
                        <button class="btn cancel" @click=${() => { this._showSkip = false; }} ?disabled=${this._busy}>
                          ${t("cancel", L)}
                        </button>
                        <button class="btn primary" @click=${this._onSkipConfirm} ?disabled=${this._busy}>
                          ${t("skip", L)}
                        </button>
                      </div>
                    </div>
                  `
                : this._showReset
                ? html`
                    <div class="inline-form">
                      <label>${t("reset_to_date", L)}</label>
                      <ms-date-field
                        kind="date"
                        .hass=${this.hass}
                        .lang=${L}
                        .value=${this._resetDate}
                        @value-changed=${(e: CustomEvent) => { this._resetDate = e.detail.value as string; }}
                      ></ms-date-field>
                      <div class="inline-actions">
                        <button class="btn cancel" @click=${() => { this._showReset = false; }} ?disabled=${this._busy}>
                          ${t("cancel", L)}
                        </button>
                        <button class="btn primary" @click=${this._onResetConfirm} ?disabled=${this._busy}>
                          ${t("reset", L)}
                        </button>
                      </div>
                    </div>
                  `
                : html`
                    <div class="actions primary-row">
                      <ha-button appearance="accent" variant="success" @click=${this._onComplete} .disabled=${this._busy}>
                        <ha-icon slot="start" icon="mdi:check"></ha-icon>
                        ${t("complete", L)}
                      </ha-button>
                      ${task.allow_skip !== false
                        ? html`
                            <ha-button appearance="outlined" variant="warning" @click=${() => { this._showSkip = true; }} .disabled=${this._busy}>
                              <ha-icon slot="start" icon="mdi:skip-next"></ha-icon>
                              ${t("skip", L)}
                            </ha-button>
                          `
                        : nothing}
                      <ha-button appearance="outlined" variant="neutral" @click=${() => { this._showReset = true; }} .disabled=${this._busy}>
                        <ha-icon slot="start" icon="mdi:restart"></ha-icon>
                        ${t("reset", L)}
                      </ha-button>
                    </div>
                    <!-- QR is read tier (the panel offers it to operators too);
                         Edit / Archive / Delete follow canWrite() — the panel's
                         operator delegation, not is_admin alone. -->
                    <div class="actions secondary-row">
                      ${writer
                        ? html`<ha-button size="small" appearance="outlined" variant="neutral" class="qa-edit" @click=${this._onEdit} .disabled=${this._busy}>
                            <ha-icon slot="start" icon="mdi:pencil"></ha-icon>
                            ${t("edit", L)}
                          </ha-button>`
                        : nothing}
                      <ha-button size="small" appearance="outlined" variant="neutral" class="qa-qr" @click=${this._onQr} .disabled=${this._busy}>
                        <ha-icon slot="start" icon="mdi:qrcode"></ha-icon>
                        ${t("qr_code", L)}
                      </ha-button>
                      ${writer
                        ? html`<ha-button size="small" appearance="outlined" variant="neutral" class="qa-archive"
                            @click=${task.archived ? this._onUnarchive : this._onArchive}
                            .disabled=${this._busy}>
                            <ha-icon slot="start" icon="${task.archived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'}"></ha-icon>
                            ${task.archived ? t("unarchive", L) : t("archive", L)}
                          </ha-button>
                          <ha-button size="small" appearance="outlined" variant="danger" class="danger qa-delete" @click=${this._onDelete} .disabled=${this._busy}>
                            <ha-icon slot="start" icon="mdi:delete"></ha-icon>
                            ${t("delete", L)}
                          </ha-button>`
                        : nothing}
                    </div>
                    <div class="details-toggle">
                      <button class="link" @click=${() => { this._showDetails = !this._showDetails; }}>
                        <ha-icon icon="${this._showDetails ? 'mdi:chevron-up' : 'mdi:chevron-down'}"></ha-icon>
                        ${this._showDetails
                          ? t("hide_details", L)
                          : t("show_details", L)}
                      </button>
                      ${this._features.adaptive
                          || this._features.seasonal
                          || this._features.environmental
                        ? html`<button class="link" @click=${() => { this._showAdaptive = !this._showAdaptive; }}>
                            <ha-icon icon="${this._showAdaptive ? 'mdi:chart-line' : 'mdi:chart-line-variant'}"></ha-icon>
                            ${this._showAdaptive
                              ? t("hide_stats", L)
                              : t("show_stats", L)}
                          </button>`
                        : nothing}
                    </div>
                    ${this._showDetails ? this._renderDetails(task) : nothing}
                    ${this._showAdaptive ? this._renderAdaptive(task) : nothing}
                    <div class="footer">
                      <button class="link" @click=${this._onOpenInPanel}>
                        <ha-icon icon="mdi:open-in-new"></ha-icon>
                        ${t("open_in_panel", L)}
                      </button>
                    </div>
                  `}
            `
          : this._error
            ? html`<div class="error">${this._error}</div>`
            : html`<div class="loading">${t("loading", L)}</div>`}
    `);
  }

  protected updated(changed: Map<string, unknown>): void {
    if (changed.has("_open") && this._open) focusModalShell(this.shadowRoot);
  }

  static styles = [sharedStyles, modalShellStyles, css`
    :host { display: contents; --ms-modal-max-width: 460px; }
    .header { display: flex; flex-direction: column; gap: 6px; }
    .title { display: flex; align-items: center; gap: 10px; }
    .status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
    .task-name { font-size: 18px; font-weight: 600; }
    .object { font-size: 13px; color: var(--secondary-text-color); }
    .link-inline {
      background: transparent; border: none; padding: 0; cursor: pointer;
      color: var(--primary-color); font-size: inherit; font-family: inherit;
    }
    .link-inline:hover { text-decoration: underline; }
    .quick-info {
      display: flex; flex-wrap: wrap; gap: 12px;
      font-size: 12px; color: var(--secondary-text-color);
      padding-top: 4px; border-top: 1px solid var(--divider-color);
    }
    .quick-info strong { color: var(--primary-text-color); font-weight: 500; }
    .actions { display: flex; gap: 8px; }
    .actions.primary-row { gap: 6px; }
    .actions.primary-row .btn { flex: 1; }
    .actions.primary-row ha-button { flex: 1; }
    /* Edit + QR are admin-tools — left-align as a group; Delete is destructive
       so it gets pushed to the far right with margin-left:auto for visual
       separation. Earlier this row was flex-end which left a strange empty
       gap on the left (user feedback). */
    .actions.secondary-row {
      padding-top: 8px; border-top: 1px solid var(--divider-color);
      justify-content: flex-start;
    }
    .actions.secondary-row .btn.danger,
    .actions.secondary-row ha-button.danger {
      margin-left: auto;
    }
    .actions.secondary-row ha-button { --ha-button-font-size: 13px; }
    .btn {
      padding: 8px 12px; font-size: 14px;
      border-radius: 6px; cursor: pointer;
      border: 1px solid var(--divider-color);
      background: var(--secondary-background-color, transparent);
      color: var(--primary-text-color);
      font-weight: 500;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background 0.12s;
    }
    .btn:hover { background: var(--state-icon-color, rgba(255,255,255,0.06)); }
    .btn[disabled] { opacity: 0.5; cursor: wait; }
    .btn.primary {
      background: var(--primary-color);
      color: var(--text-primary-color, white);
      border-color: var(--primary-color);
    }
    .btn.cancel { background: transparent; }
    .btn.ghost { padding: 6px 10px; font-size: 13px; }
    .btn.danger { color: var(--error-color); }
    .btn ha-icon { --mdc-icon-size: 18px; }
    .inline-form { display: flex; flex-direction: column; gap: 8px; }
    .inline-form label { font-size: 13px; color: var(--secondary-text-color); }
    .inline-form input {
      padding: 8px; font-size: 14px;
      background: var(--secondary-background-color, #2c2c2c);
      color: var(--primary-text-color);
      border: 1px solid var(--divider-color, #444);
      border-radius: 6px;
    }
    .inline-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .footer { display: flex; justify-content: center; padding-top: 4px; }
    .link {
      background: transparent; border: none; cursor: pointer;
      color: var(--primary-color); font-size: 13px;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .link:hover { text-decoration: underline; }
    .link ha-icon { --mdc-icon-size: 14px; }
    .loading { padding: 24px; text-align: center; color: var(--secondary-text-color); }
    .error {
      padding: 8px; border-radius: 6px;
      background: rgba(211,47,47,0.1);
      color: var(--error-color, #d32f2f); font-size: 13px;
    }

    /* Details (expandable Show details section) */
    .details-toggle { display: flex; justify-content: center; margin-top: 4px; }
    .details {
      display: flex; flex-direction: column; gap: 12px;
      border-top: 1px solid var(--divider-color);
      padding-top: 12px;
    }
    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    }
    .stat {
      display: flex; flex-direction: column; gap: 2px;
      background: var(--secondary-background-color, rgba(255,255,255,0.04));
      padding: 8px; border-radius: 6px;
      align-items: center;
    }
    .stat-label { font-size: 11px; color: var(--secondary-text-color); text-transform: uppercase; letter-spacing: 0.5px; }
    .stat-value { font-size: 16px; font-weight: 600; }
    .history-header {
      display: flex; align-items: baseline; gap: 8px;
      font-size: 14px;
    }
    .history-count {
      font-size: 12px; color: var(--secondary-text-color);
      background: var(--secondary-background-color); padding: 2px 8px; border-radius: 999px;
    }
    .history-empty { color: var(--secondary-text-color); font-style: italic; font-size: 13px; }
    /* The rows themselves are the shared renderer's (.history-entry.compact
       + the history-* classes from sharedStyles); only the list chrome is
       local. */
    .history-list { display: flex; flex-direction: column; max-height: 280px; overflow: auto; }
    .history-list .history-entry {
      padding: 6px 8px; border-radius: 6px; border-bottom: none; margin-bottom: 6px;
      background: var(--secondary-background-color, rgba(255,255,255,0.03));
    }
    .history-list .history-date { font-size: 11px; }
    .history-list .history-details { font-size: 11px; }
    .history-more { padding: 8px; text-align: center; font-size: 12px; color: var(--secondary-text-color); font-style: italic; }

    /* Adaptive section — wraps the panel renderers (which assume sharedStyles
       are present) and adds dialog-specific layout. */
    .adaptive-stack {
      display: flex; flex-direction: column; gap: 12px;
      border-top: 1px solid var(--divider-color);
      padding-top: 12px;
    }
    .adaptive-empty {
      padding: 16px; text-align: center;
      color: var(--secondary-text-color);
      font-style: italic; font-size: 13px;
      border-top: 1px solid var(--divider-color);
    }
    .toast {
      padding: 8px 12px; border-radius: 6px;
      background: rgba(76, 175, 80, 0.15);
      color: #4caf50; font-size: 13px; font-weight: 500;
    }
    /* The panel's recommendation-card uses ha-button. We use plain <button>
       in this dialog's button styles. Re-style the action row to match. */
    .recommendation-actions {
      display: flex; gap: 8px; margin-top: 8px;
    }
    /* Constrain SVG charts so they fit the dialog width even on mobile. */
    .weibull-section, .seasonal-card-compact { max-width: 100%; }
    .weibull-chart svg { max-width: 100%; height: auto; }
    .details-toggle { gap: 12px; flex-wrap: wrap; }
  `];
}

if (!customElements.get("maintenance-task-quick-actions-dialog")) {
  customElements.define(
    "maintenance-task-quick-actions-dialog",
    MaintenanceTaskQuickActionsDialog,
  );
}