/**
 * TaskMate Approvals Card
 * A custom Lovelace card for managing pending chore approvals
 */

const LitElement = customElements.get("hui-masonry-view")
  ? Object.getPrototypeOf(customElements.get("hui-masonry-view"))
  : Object.getPrototypeOf(customElements.get("hui-view"));

const html = LitElement.prototype.html;
const css = LitElement.prototype.css;

// Security defense-in-depth: only ever emit our own auth-gated photo endpoint
// into an href/src. The backend already rejects foreign/crafted photo_url
// values, but guard here too so a stored bad value can never become a
// javascript:/external link in a parent's browser.
const tmSafePhotoUrl = (u) =>
  typeof u === "string" && u.startsWith("/api/taskmate/photo/") ? u : "";

const _safeColor = (c, d) => (typeof c === "string" && /^#[0-9a-fA-F]{3,8}$/.test(c) ? c : d);

class TaskMateApprovalsCard extends LitElement {
  static get properties() {
    return {
      hass: { type: Object },
      config: { type: Object },
      _loading: { type: Object },
    };
  }

  shouldUpdate(changedProps) {
    if (changedProps.has("hass")) {
      return window.__taskmate_hasChanged
        ? window.__taskmate_hasChanged(changedProps.get("hass"), this.hass, this.config?.entity)
        : true;
    }
    return true;
  }

  constructor() {
    super();
    this._loading = {};
  }

  _t(key, params) {
    const fn = window.__taskmate_localize;
    return fn ? fn(this.hass, key, params) : key;
  }

  static get styles() {
    const base = css`
      :host {
        display: block;
      }

      ha-card { overflow: hidden; }

      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: var(--taskmate-header-bg, #27ae60);
        color: white;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
      }

      .header-icon {
        --mdc-icon-size: 22px;
        color: white;
        opacity: 0.9;
        flex-shrink: 0;
      }

      .card-title {
        font-size: 1.05rem;
        font-weight: 600;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pending-count {
        background: #e74c3c;
        color: white;
        border-radius: 12px;
        padding: 3px 10px;
        font-size: 0.82rem;
        font-weight: 700;
        flex-shrink: 0;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }

      .approve-all-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 14px;
        padding: 5px 12px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
      }
      .approve-all-btn:hover { background: rgba(255, 255, 255, 0.3); }
      .approve-all-btn:disabled { opacity: 0.6; cursor: default; }

      .card-content { padding: 16px; }

      .day-group {
        margin-bottom: 20px;
      }

      .day-header {
        font-size: 0.95em;
        font-weight: 600;
        color: var(--primary-text-color);
        margin-bottom: 12px;
        padding: 8px 12px;
        background: var(--secondary-background-color);
        border-radius: 8px;
      }

      .time-group {
        margin-left: 8px;
        margin-bottom: 12px;
      }

      .time-header {
        font-size: 0.85em;
        font-weight: 500;
        color: var(--secondary-text-color);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .time-header ha-icon {
        --mdc-icon-size: 16px;
      }

      .approval-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        margin-bottom: 8px;
        background: var(--card-background-color);
        border: 1px solid var(--divider-color);
        border-radius: 8px;
        transition: box-shadow 0.2s ease;
      }

      .approval-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .approval-item.loading {
        opacity: 0.6;
        pointer-events: none;
      }

      .item-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
      }

      .chore-name {
        font-weight: 500;
        color: var(--primary-text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .approval-photo {
        display: inline-block;
        margin-top: 4px;
        line-height: 0;
      }
      .approval-photo img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--divider-color, #e0e0e0);
      }

      .item-details {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        font-size: 0.85em;
        color: var(--secondary-text-color);
      }

      .child-name {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .points-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--accent-color, #ffc107);
        color: var(--text-primary-color, #000);
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 500;
      }

      .points-badge ha-icon {
        --mdc-icon-size: 14px;
      }

      .duration-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(26, 188, 156, 0.15);
        color: #1abc9c;
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.85em;
      }
      .duration-badge ha-icon {
        --mdc-icon-size: 14px;
      }

      .action-buttons {
        display: flex;
        gap: 8px;
      }

      .action-buttons.left {
        margin-right: 12px;
      }

      .action-buttons.right {
        margin-left: 12px;
      }

      .action-button {
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }

      .action-button:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .action-button:active {
        transform: scale(0.95);
      }

      .action-button.approve {
        background: #4caf50;
        color: white;
      }

      .action-button.reject {
        background: #f44336;
        color: white;
      }

      /* Mandatory-miss review actions (#532) */
      .action-button.penalty {
        background: var(--fun-red, #e74c3c);
        color: white;
      }

      .action-button.postpone {
        background: var(--fun-orange, #e67e22);
        color: white;
      }

      .action-button.dismiss {
        background: var(--fun-green, #2ecc71);
        color: white;
      }

      .approval-item.mandatory {
        border-left: 5px solid var(--fun-red, #e74c3c);
      }

      .approval-item.mandatory .penalty-note {
        display: block;
        margin-top: 2px;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--fun-red, #e74c3c);
      }

      .approval-item.mandatory .penalty-note.none {
        color: var(--secondary-text-color, #888);
        font-weight: 600;
      }

      .action-button ha-icon {
        --mdc-icon-size: 20px;
      }

      .action-button.loading {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: var(--secondary-text-color);
        text-align: center;
      }

      .empty-state ha-icon {
        --mdc-icon-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }

      .empty-state .message {
        font-size: 1.1em;
        margin-bottom: 4px;
      }

      .empty-state .submessage {
        font-size: 0.9em;
        opacity: 0.8;
      }

      .error-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: var(--error-color);
        text-align: center;
      }

      .error-state ha-icon {
        --mdc-icon-size: 48px;
        margin-bottom: 16px;
      }

      .loading-spinner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--divider-color);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      /* ── Designed styles (playroom / console / cleanpro) ──
         Shared .tmd kit + design tokens come from taskmate-design.js styles().
         Only card-specific layout classes are declared here. */
      .ap-group-label { font-weight: 800; font-size: 12px; text-transform: uppercase;
        letter-spacing: .04em; margin: 4px 0 9px; }
      .ap-group-label + .ap-group-label { margin-top: 14px; }

      /* Playroom — soft cards */
      .ap-pl-item { background: var(--tmd-surface-2); border-radius: 18px; padding: 12px; }
      .ap-pl-item + .ap-pl-item { margin-top: 11px; }
      .ap-pl-title { font-weight: 800; }
      .ap-pl-sub { font-size: 12.5px; }
      .ap-pl-photo { width: 46px; height: 46px; border-radius: 14px; overflow: hidden;
        display: grid; place-items: center; background: var(--tmd-accent); color: #fff;
        font-size: 20px; flex: none; }
      .ap-pl-photo img { width: 100%; height: 100%; object-fit: cover; }
      .ap-gold { background: var(--tmd-gold); border-color: transparent; color: #3a2e26; }

      /* Console — compact HUD rows */
      .ap-cn-item { background: var(--tmd-surface-2); border: 1px solid var(--tmd-border);
        border-radius: 10px; padding: 11px; }
      .ap-cn-item + .ap-cn-item { margin-top: 9px; }
      .ap-cn-title { font-weight: 700; }
      .ap-cn-sub { font-size: 11px; }
      .ap-cn-photo { width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
        background: #0b1424; border: 1px solid var(--tmd-border); display: grid;
        place-items: center; font-size: 15px; color: var(--tmd-accent); flex: none; }
      .ap-cn-photo img { width: 100%; height: 100%; object-fit: cover; }

      /* Clean Pro — divided list */
      .ap-cp-item { padding: 10px 0; }
      .ap-cp-title { font-weight: 600; }
      .ap-cp-sub { font-size: 12px; }
      .ap-cp-photo { width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
        background: var(--tmd-surface-2); border: 1px solid var(--tmd-border); display: grid;
        place-items: center; font-size: 14px; flex: none; }
      .ap-cp-photo img { width: 100%; height: 100%; object-fit: cover; }
      .ap-gold-soft { color: var(--tmd-gold); }

      .ap-d-photo-link { line-height: 0; text-decoration: none; }

      /* Scrollable list (parity with classic content) */
      .ap-d-scroll { max-height: 360px; overflow-y: auto; }
    `;
    const tokens = window.__taskmate_design && window.__taskmate_design.styles
      ? window.__taskmate_design.styles() : null;
    return tokens ? [tokens, base] : base;
  }

  setConfig(config) {
    if (!config.entity) {
      throw new Error("Please define an entity (pending_approvals sensor)");
    }
    this.config = {
      title: "",
      header_color: '#27ae60',
      ...config,
    };
  }

  getCardSize() {
    return 3;
  }

  static getConfigElement() {
    return document.createElement("taskmate-approvals-card-editor");
  }

  static getStubConfig() {
    return {
      entity: "sensor.taskmate_overview",
      title: "Pending Approvals",
    };
  }

  render() {
    if (!this.hass || !this.config) {
      return html``;
    }

    const design = window.__taskmate_design
      ? window.__taskmate_design.apply(this, this.hass, this.config, this.config.entity)
      : "classic";
    if (design !== "classic") return this._renderDesigned(design);

    const entity = this.hass.states[this.config.entity];

    if (!entity) {
      return html`
        <ha-card>
          <div class="error-state">
            <ha-icon icon="mdi:alert-circle"></ha-icon>
            <div>${this._t('common.entity_not_found', { entity: this.config.entity })}</div>
          </div>
        </ha-card>
      `;
    }

    // Support both the pending_approvals sensor (chore_completions)
    // and the overview sensor (todays_completions filtered to unapproved).
    // The resolver is used so pending_reward_claims / todays_completions
    // resolve from their new companion sensors when the card is pointed at
    // the overview entity.
    const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config.entity)) || entity.attributes || {};
    // Prefer the full pending list (chore_completions, resolved from the
    // pending_approvals companion sensor) so approvals left pending from a
    // previous day still appear after a recurring chore resets at midnight.
    // Fall back to today's completions only on older backends that don't
    // expose chore_completions via the resolver.
    let completions = attrs.chore_completions;
    if (!completions) {
      completions = (attrs.todays_completions || []).filter(c => !c.approved);
    }
    const filteredCompletions = this._filterByChild(completions);
    const groupedByDay = this._groupByDay(filteredCompletions);

    // Pending reward claims: supported via either the pending_approvals sensor
    // (reward_claims attribute) or the rewards sensor (pending_reward_claims).
    let rewardClaims =
      entity.attributes.reward_claims ||
      attrs.pending_reward_claims ||
      [];
    const filteredClaims = this._filterClaimsByChild(rewardClaims);

    // Missed mandatory chores awaiting parent review (#532)
    const misses = this._filterMissesByChild(attrs.mandatory_misses || []);

    const totalPending = filteredCompletions.length + filteredClaims.length + misses.length;

    return html`
      <ha-card>
        <style>:host { --taskmate-header-bg: ${_safeColor(this.config.header_color, '#27ae60')}; }</style>
        <div class="card-header">
          <div class="header-left">
            <ha-icon class="header-icon" icon="mdi:check-circle-outline"></ha-icon>
            <span class="card-title">${this.config.title || this._t('approvals.default_title')}</span>
          </div>
          <div class="header-right">
            ${filteredCompletions.length > 0
              ? html`<button class="approve-all-btn" ?disabled="${this._loading['__all__']}"
                  @click="${() => this._handleApproveAll(filteredCompletions)}">${this._t('approvals.approve_all')}</button>`
              : ""}
            ${totalPending > 0 ? html`<span class="pending-count">${totalPending}</span>` : ""}
          </div>
        </div>

        <div class="card-content">
          ${totalPending === 0
            ? this._renderEmptyState()
            : html`
                ${misses.length > 0 ? this._renderMandatoryMisses(misses) : ''}
                ${filteredClaims.length > 0 ? this._renderRewardClaims(filteredClaims) : ''}
                ${filteredCompletions.length > 0 ? this._renderApprovals(groupedByDay) : ''}
              `}
        </div>
      </ha-card>
    `;
  }

  /* ══════════════════════════════════════════════════════════════════════
     DESIGNED STYLES (playroom / console / cleanpro) — see taskmate-design.js
     Ported from docs/design/redesigns/frag/11-approvals.html.
     Wraps the SAME data + handlers as the classic path.
  ══════════════════════════════════════════════════════════════════════ */

  _designTone(i) { return `var(--tmd-c${(i % 6) + 1})`; }

  _av(name, avatar, tone, size) {
    const a = avatar || "";
    const inner = a.startsWith("mdi:")
      ? html`<ha-icon icon="${a}"></ha-icon>`
      : a
        ? html`<img src="${a}" alt="${name || ''}">`
        : (name || "?").split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
    return html`<div class="av" style="--av:${size}px;--ac:${tone}">${inner}</div>`;
  }

  // Resolve a child's avatar from the overview sensor's children list (the
  // completion/claim payloads don't carry an avatar field).
  _childAvatar(childId) {
    const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config.entity))
      || this.hass?.states?.[this.config.entity]?.attributes || {};
    const child = (attrs.children || []).find(c => c.id === childId);
    return child ? child.avatar : null;
  }

  // Flatten all pending items into a single ordered, day/time-grouped list so
  // the designed views can render approvals, reward claims and mandatory misses
  // together while reusing every existing handler.
  _designItems() {
    const entity = this.hass.states[this.config.entity];
    const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config.entity)) || entity.attributes || {};

    let completions = attrs.chore_completions;
    if (!completions) completions = (attrs.todays_completions || []).filter(c => !c.approved);
    const filteredCompletions = this._filterByChild(completions);

    const rewardClaims = entity.attributes.reward_claims || attrs.pending_reward_claims || [];
    const filteredClaims = this._filterClaimsByChild(rewardClaims);

    const misses = this._filterMissesByChild(attrs.mandatory_misses || []);

    const items = [];

    misses.forEach((miss) => {
      const penalty = miss.penalty_points ?? 0;
      items.push({
        kind: "miss",
        id: miss.id,
        title: miss.chore_name || "",
        childName: miss.child_name || "",
        childId: miss.child_id,
        points: penalty,
        penalty,
        sortTime: 0,
      });
    });

    filteredClaims.forEach((claim) => {
      const claimId = claim.claim_id || claim.id;
      items.push({
        kind: "claim",
        id: claimId,
        title: claim.reward_name || "",
        childName: claim.child_name || "",
        childId: claim.child_id,
        points: claim.cost ?? 0,
        icon: claim.reward_icon || "mdi:gift",
        sortTime: claim.claimed_at ? new Date(claim.claimed_at).getTime() : 1,
      });
    });

    filteredCompletions.forEach((c) => {
      items.push({
        kind: "completion",
        completion: c,
        id: c.completion_id,
        title: c.chore_name || "",
        childName: c.child_name || "",
        childId: c.child_id,
        points: c.points,
        photo: c.photo_url || "",
        completedAt: c.completed_at,
        timeCategory: c.time_category || "anytime",
        sortTime: c.completed_at ? new Date(c.completed_at).getTime() : 2,
      });
    });

    return items;
  }

  // Group designed items by day label, then by time-category, mirroring the
  // classic _groupByDay/_renderTimeCategories ordering. Non-completion items
  // (misses/claims) bucket under "Today" so they stay visible at the top.
  _designGrouped(items) {
    const groups = new Map();
    const todayLabel = this._t('common.today');
    items.forEach((it) => {
      let dayLabel = todayLabel;
      let cat = "anytime";
      if (it.kind === "completion" && it.completedAt) {
        dayLabel = this._getDayLabel(new Date(it.completedAt));
        cat = it.timeCategory || "anytime";
      }
      if (!groups.has(dayLabel)) groups.set(dayLabel, new Map());
      const cats = groups.get(dayLabel);
      if (!cats.has(cat)) cats.set(cat, []);
      cats.get(cat).push(it);
    });
    // Build ordered list of { dayLabel, sub, items[] } sections.
    const sections = [];
    for (const [dayLabel, cats] of groups) {
      const ordered = [...cats.entries()].sort(
        ([a], [b]) => this._getTimeCategoryOrder(a) - this._getTimeCategoryOrder(b)
      );
      for (const [cat, list] of ordered) {
        const sub = cat === "anytime" ? dayLabel : `${dayLabel} · ${this._getTimeCategoryLabel(cat)}`;
        sections.push({ label: sub, items: list });
      }
    }
    return sections;
  }

  _renderDesigned(design) {
    const entity = this.hass.states[this.config.entity];
    const hd = _safeColor(this.config.header_color, '#27ae60');

    if (!entity) {
      return html`<ha-card class="tmd" style="--hd:${hd}">
        ${this._designHeader(hd, 0)}
        <div class="tmd-bd"><div class="tmd-empty">${this._t('common.entity_not_found', { entity: this.config.entity })}</div></div>
      </ha-card>`;
    }

    const items = this._designItems();
    const sections = this._designGrouped(items);

    let body;
    if (!items.length) {
      body = html`<div class="tmd-empty">${this._t('approvals.no_pending_approvals')}</div>`;
    } else {
      const rowFn =
        design === "playroom" ? (it, i) => this._apPlayroom(it, i) :
        design === "console"  ? (it, i) => this._apConsole(it, i) :
                                (it, i) => this._apCleanpro(it, i);
      let idx = 0;
      body = html`<div class="ap-d-scroll">${sections.map((sec) => html`
        <div class="ap-group-label muted">${sec.label}</div>
        ${sec.items.map((it) => rowFn(it, idx++))}
      `)}</div>`;
    }

    const completions = items.filter((it) => it.kind === "completion").map((it) => it.completion);
    return html`<ha-card class="tmd" style="--hd:${hd}">
      ${this._designHeader(hd, items.length, completions)}
      <div class="tmd-bd">${body}</div>
    </ha-card>`;
  }

  _designHeader(hd, count, completions = []) {
    const title = this.config.title || this._t('approvals.default_title');
    return html`
      <div class="tmd-hd">
        <span class="ic">✅</span>
        <span class="tt">${title}</span>
        ${completions.length > 0
          ? html`<button class="approve-all-btn" ?disabled="${this._loading['__all__']}"
              @click="${() => this._handleApproveAll(completions)}">${this._t('approvals.approve_all')}</button>`
          : ""}
        ${count > 0 ? html`<span class="cnt">${count}</span>` : ""}
      </div>`;
  }

  // Approve/reject (or miss-review) buttons wired to the EXISTING handlers,
  // varying only label/shape per design.
  _designActions(it, shape) {
    const isLoading = !!this._loading[it.id];
    if (it.kind === "completion") {
      const approve = () => this._handleApprove(it.completion);
      const reject = () => this._handleReject(it.completion);
      return this._apActionPair(approve, reject, isLoading, shape);
    }
    if (it.kind === "claim") {
      const approve = () => this._handleApproveReward(it.id);
      const reject = () => this._handleRejectReward(it.id);
      return this._apActionPair(approve, reject, isLoading, shape);
    }
    // mandatory miss: apply penalty (if any) / postpone / dismiss
    if (shape === "round") {
      return html`
        ${it.penalty > 0 ? html`<button class="btn bad sm round" ?disabled="${isLoading}"
          title="${this._t('approvals.apply_penalty')}"
          @click="${() => this._handleApplyPenalty(it.id)}">!</button>` : ""}
        <button class="btn ghost sm round" ?disabled="${isLoading}"
          title="${this._t('approvals.postpone')}"
          @click="${() => this._handlePostpone(it.id)}">⏲</button>
        <button class="btn good sm round" ?disabled="${isLoading}"
          title="${this._t('approvals.dismiss')}"
          @click="${() => this._handleDismiss(it.id)}">✓</button>`;
    }
    const sm = shape === "sm" ? "sm" : "";
    return html`
      ${it.penalty > 0 ? html`<button class="btn bad ${sm}" ?disabled="${isLoading}"
        @click="${() => this._handleApplyPenalty(it.id)}">${this._t('approvals.apply_penalty')}</button>` : ""}
      <button class="btn ghost ${sm}" ?disabled="${isLoading}"
        @click="${() => this._handlePostpone(it.id)}">${this._t('approvals.postpone')}</button>
      <button class="btn good ${sm}" ?disabled="${isLoading}"
        @click="${() => this._handleDismiss(it.id)}">${this._t('approvals.dismiss')}</button>`;
  }

  _apActionPair(approve, reject, isLoading, shape) {
    if (shape === "round") {
      return html`
        <button class="btn good sm round" ?disabled="${isLoading}"
          title="${this._t('approvals.approve')}" @click="${approve}">✓</button>
        <button class="btn bad sm round" ?disabled="${isLoading}"
          title="${this._t('approvals.reject')}" @click="${reject}">✕</button>`;
    }
    if (shape === "ghost") {
      return html`
        <button class="btn good sm" ?disabled="${isLoading}" @click="${approve}">${this._t('approvals.approve')}</button>
        <button class="btn ghost sm" ?disabled="${isLoading}" @click="${reject}">${this._t('approvals.reject')}</button>`;
    }
    return html`
      <button class="btn good" style="flex:1" ?disabled="${isLoading}" @click="${approve}">👍 ${this._t('approvals.approve')}</button>
      <button class="btn bad" style="flex:1" ?disabled="${isLoading}" @click="${reject}">👎 ${this._t('approvals.reject')}</button>`;
  }

  _apPhotoDesigned(it, cls, fallback) {
    const photoUrl = tmSafePhotoUrl(it.photo);
    if (it.kind !== "completion" || !photoUrl) {
      return it.kind === "claim" && it.icon
        ? html`<div class="${cls}"><ha-icon icon="${it.icon}"></ha-icon></div>`
        : "";
    }
    const cap = this._photoCaption(it.title, it.childName, it.completedAt);
    return html`<a class="ap-d-photo-link" href="${photoUrl}" target="_blank" rel="noopener"
      @click="${(e) => this._openPhoto(e, photoUrl, cap)}"
      title="${this._t('approvals.view_photo') || 'View photo'}"><div class="${cls}"><img src="${photoUrl}" alt=""></div></a>`;
  }

  // Build "Chore · Child · date" for the lightbox caption from whatever row
  // fields are present (any missing part is dropped).
  _photoCaption(chore, child, iso) {
    let when = "";
    if (iso) {
      const d = new Date(iso);
      if (!isNaN(d)) when = d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
    }
    return [chore, child, when].filter(Boolean).join(" · ");
  }

  // Open the shared in-page lightbox; fall through to the href (new tab) if the
  // shared design layer somehow isn't loaded.
  _openPhoto(e, url, caption) {
    if (window.__taskmate_lightbox) {
      e.preventDefault();
      window.__taskmate_lightbox(url, caption, this._t("common.close"));
    }
  }

  _apPlayroom(it, i) {
    const tone = this._designTone(i);
    return html`
      <div class="ap-pl-item" style="--ac:${tone}">
        <div class="row">
          ${this._av(it.childName, this._childAvatar(it.childId), tone, 40)}
          <div style="flex:1;min-width:0">
            <div class="ap-pl-title">${it.title}</div>
            <div class="muted ap-pl-sub">${it.childName}</div>
          </div>
          ${this._apPhotoDesigned(it, "ap-pl-photo")}
          <div class="chip ap-gold">+${it.points} ⭐</div>
        </div>
        <div class="row" style="margin-top:11px;gap:8px">
          ${this._designActions(it, "full")}
        </div>
      </div>`;
  }

  _apConsole(it, i) {
    const tone = this._designTone(i);
    return html`
      <div class="row ap-cn-item" style="--ac:${tone}">
        ${this._av(it.childName, this._childAvatar(it.childId), tone, 34)}
        <div style="flex:1;min-width:0">
          <div class="ap-cn-title">${it.title}</div>
          <div class="muted num ap-cn-sub">${(it.childName || '').toUpperCase()} · +${it.points} XP</div>
        </div>
        ${this._apPhotoDesigned(it, "ap-cn-photo")}
        ${this._designActions(it, "round")}
      </div>`;
  }

  _apCleanpro(it, i) {
    const tone = this._designTone(i);
    const time = it.completedAt
      ? new Date(it.completedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
      : "";
    return html`
      <div class="row ap-cp-item" style="--ac:${tone}">
        ${this._av(it.childName, this._childAvatar(it.childId), tone, 38)}
        <div style="flex:1;min-width:0">
          <div class="ap-cp-title">${it.title}</div>
          <div class="muted ap-cp-sub">${it.childName}${time ? html` · ${time}` : ""}</div>
        </div>
        ${this._apPhotoDesigned(it, "ap-cp-photo")}
        <span class="chip soft ap-gold-soft">+${it.points}</span>
        ${this._designActions(it, "ghost")}
      </div>`;
  }

  _filterByChild(completions) {
    if (!this.config.child_id) {
      return completions;
    }
    return completions.filter(
      (c) => c.child_id === this.config.child_id
    );
  }

  _filterClaimsByChild(claims) {
    if (!this.config.child_id) return claims;
    return claims.filter((c) => c.child_id === this.config.child_id);
  }

  _renderRewardClaims(claims) {
    return html`
      <div class="day-group">
        <div class="day-header">
          <ha-icon icon="mdi:gift-outline" style="--mdc-icon-size: 18px; vertical-align: -3px; margin-right: 6px;"></ha-icon>
          ${this._t('approvals.reward_claims_section')}
        </div>
        ${claims.map((claim) => this._renderClaimItem(claim))}
      </div>
    `;
  }

  _renderClaimItem(claim) {
    const claimId = claim.claim_id || claim.id;
    const isLoading = this._loading[claimId];
    const rewardName = claim.reward_name || '';
    const childName = claim.child_name || '';
    const cost = claim.cost ?? 0;

    return html`
      <div class="approval-item ${isLoading ? 'loading' : ''}">
        <div class="action-buttons left">
          <button
            class="action-button reject ${isLoading ? 'loading' : ''}"
            @click="${() => this._handleRejectReward(claimId)}"
            title="${this._t('approvals.reject')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:close"></ha-icon>
          </button>
        </div>
        <div class="item-info">
          <span class="chore-name">
            <ha-icon icon="${claim.reward_icon || 'mdi:gift'}" style="--mdc-icon-size: 16px; vertical-align: -3px; margin-right: 4px;"></ha-icon>
            ${rewardName}
          </span>
          <div class="item-details">
            <span class="child-name">
              <ha-icon icon="mdi:account"></ha-icon>
              ${childName}
            </span>
            <span class="points-badge">
              <ha-icon icon="mdi:star"></ha-icon>
              ${cost}
            </span>
          </div>
        </div>
        <div class="action-buttons right">
          <button
            class="action-button approve ${isLoading ? 'loading' : ''}"
            @click="${() => this._handleApproveReward(claimId)}"
            title="${this._t('approvals.approve')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:check"></ha-icon>
          </button>
        </div>
      </div>
    `;
  }

  async _handleApproveReward(claimId) {
    await this._callClaimService('approve_reward', claimId);
  }

  async _handleRejectReward(claimId) {
    await this._callClaimService('reject_reward', claimId);
  }

  async _callClaimService(service, claimId) {
    if (this._loading[claimId]) return;
    this._loading = { ...this._loading, [claimId]: true };
    this.requestUpdate();
    try {
      await this.hass.callService('taskmate', service, { claim_id: claimId });
    } catch (error) {
      console.error(`Failed to call ${service}:`, error);
      if (this.hass.callService) {
        this.hass.callService('persistent_notification', 'create', {
          title: this._t('approvals.error_title'),
          message: this._t('approvals.error_failed_service', {
            service: service.replace('_', ' '),
            message: error.message,
          }),
          notification_id: `taskmate_error_${claimId}`,
        });
      }
    } finally {
      this._loading = { ...this._loading, [claimId]: false };
      this.requestUpdate();
    }
  }

  // ---- mandatory-miss review (#532) ------------------------------------
  _filterMissesByChild(misses) {
    if (!this.config.child_id) return misses;
    return misses.filter((m) => m.child_id === this.config.child_id);
  }

  _renderMandatoryMisses(misses) {
    return html`
      <div class="day-group">
        <div class="day-header">
          <ha-icon icon="mdi:alert-octagon-outline" style="--mdc-icon-size: 18px; vertical-align: -3px; margin-right: 6px;"></ha-icon>
          ${this._t('approvals.mandatory_section')}
        </div>
        ${misses.map((miss) => this._renderMissItem(miss))}
      </div>
    `;
  }

  _renderMissItem(miss) {
    const missId = miss.id;
    const isLoading = this._loading[missId];
    const choreName = miss.chore_name || '';
    const childName = miss.child_name || '';
    const penalty = miss.penalty_points ?? 0;

    return html`
      <div class="approval-item mandatory ${isLoading ? 'loading' : ''}">
        <div class="item-info">
          <span class="chore-name">
            <ha-icon icon="mdi:alert-circle-outline" style="--mdc-icon-size: 16px; vertical-align: -3px; margin-right: 4px;"></ha-icon>
            ${choreName}
          </span>
          <div class="item-details">
            <span class="child-name">
              <ha-icon icon="mdi:account"></ha-icon>
              ${childName}
            </span>
          </div>
          ${penalty > 0
            ? html`<span class="penalty-note">${this._t('approvals.penalty_points', { points: penalty })}</span>`
            : html`<span class="penalty-note none">${this._t('approvals.no_penalty')}</span>`}
        </div>
        <div class="action-buttons right">
          ${penalty > 0 ? html`
            <button
              class="action-button penalty ${isLoading ? 'loading' : ''}"
              @click="${() => this._handleApplyPenalty(missId)}"
              title="${this._t('approvals.apply_penalty')}"
              ?disabled="${isLoading}"
            >
              <ha-icon icon="mdi:alert-circle"></ha-icon>
            </button>
          ` : ''}
          <button
            class="action-button postpone ${isLoading ? 'loading' : ''}"
            @click="${() => this._handlePostpone(missId)}"
            title="${this._t('approvals.postpone')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:clock-plus-outline"></ha-icon>
          </button>
          <button
            class="action-button dismiss ${isLoading ? 'loading' : ''}"
            @click="${() => this._handleDismiss(missId)}"
            title="${this._t('approvals.dismiss')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:check"></ha-icon>
          </button>
        </div>
      </div>
    `;
  }

  async _handleApplyPenalty(missId) {
    await this._callMissService('apply_mandatory_penalty', missId);
  }

  async _handlePostpone(missId) {
    await this._callMissService('postpone_mandatory_chore', missId);
  }

  async _handleDismiss(missId) {
    await this._callMissService('dismiss_mandatory_chore', missId);
  }

  async _callMissService(service, missId) {
    if (this._loading[missId]) return;
    this._loading = { ...this._loading, [missId]: true };
    this.requestUpdate();
    try {
      await this.hass.callService('taskmate', service, { miss_id: missId });
    } catch (error) {
      console.error(`Failed to call ${service}:`, error);
      if (this.hass.callService) {
        this.hass.callService('persistent_notification', 'create', {
          title: this._t('approvals.error_title'),
          message: this._t('approvals.error_failed_service', {
            service: service.replace(/_/g, ' '),
            message: error.message,
          }),
          notification_id: `taskmate_error_${missId}`,
        });
      }
    } finally {
      this._loading = { ...this._loading, [missId]: false };
      this.requestUpdate();
    }
  }

  _groupByDay(completions) {
    const groups = {};

    completions.forEach((completion) => {
      const date = new Date(completion.completed_at);
      const dayKey = this._getDayKey(date);

      if (!groups[dayKey]) {
        groups[dayKey] = {
          label: this._getDayLabel(date),
          date: date,
          timeCategories: {},
        };
      }

      const timeCategory = completion.time_category || "anytime";
      if (!groups[dayKey].timeCategories[timeCategory]) {
        groups[dayKey].timeCategories[timeCategory] = [];
      }
      groups[dayKey].timeCategories[timeCategory].push(completion);
    });

    // Sort groups by date (most recent first)
    const sortedGroups = Object.entries(groups).sort(
      ([, a], [, b]) => b.date - a.date
    );

    return sortedGroups;
  }

  _getTimezone() {
    // Get timezone from Home Assistant config, fallback to browser timezone
    return this.hass?.config?.time_zone || Intl.DateTimeFormat().resolvedOptions().timeZone;
  }

  _getLocale() {
    // Get locale from Home Assistant, fallback to browser locale
    return this.hass?.locale?.language || this.hass?.language || navigator.language || "en";
  }

  _formatDateInTimezone(date, options = {}) {
    const timezone = this._getTimezone();
    const locale = this._getLocale();
    return date.toLocaleDateString(locale, { ...options, timeZone: timezone });
  }

  _getDatePartsInTimezone(date) {
    const timezone = this._getTimezone();
    // Get year, month, day in the HA timezone
    const formatter = new Intl.DateTimeFormat("en-CA", {
      timeZone: timezone,
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    });
    // en-CA formats as YYYY-MM-DD
    const dateStr = formatter.format(date);
    const [year, month, day] = dateStr.split("-").map(Number);
    return { year, month, day };
  }

  _getDayKey(date) {
    // Use HA timezone to determine the day key
    const { year, month, day } = this._getDatePartsInTimezone(date);
    return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
  }

  _getDayLabel(date) {
    const timezone = this._getTimezone();

    // Get today's date parts in HA timezone
    const now = new Date();
    const todayParts = this._getDatePartsInTimezone(now);
    const dateParts = this._getDatePartsInTimezone(date);

    // Calculate yesterday in HA timezone
    const yesterdayDate = new Date(now);
    yesterdayDate.setDate(yesterdayDate.getDate() - 1);
    const yesterdayParts = this._getDatePartsInTimezone(yesterdayDate);

    // Compare date parts
    const isToday =
      dateParts.year === todayParts.year &&
      dateParts.month === todayParts.month &&
      dateParts.day === todayParts.day;

    const isYesterday =
      dateParts.year === yesterdayParts.year &&
      dateParts.month === yesterdayParts.month &&
      dateParts.day === yesterdayParts.day;

    if (isToday) {
      return this._t('common.today');
    } else if (isYesterday) {
      return this._t('common.yesterday');
    } else {
      return this._formatDateInTimezone(date, {
        month: "short",
        day: "numeric",
      });
    }
  }

  // User-defined periods from the overview sensor; legacy fixed four when
  // the integration hasn't published time_periods yet.
  _getTimePeriods() {
    const entity = this.hass?.states?.[this.config?.entity];
    const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config?.entity))
      || entity?.attributes || {};
    if (Array.isArray(attrs.time_periods) && attrs.time_periods.length) {
      return attrs.time_periods.filter(p => p && p.id);
    }
    return [
      { id: "morning",   label: "", icon: "mdi:weather-sunset-up" },
      { id: "afternoon", label: "", icon: "mdi:weather-sunny" },
      { id: "evening",   label: "", icon: "mdi:weather-sunset-down" },
      { id: "night",     label: "", icon: "mdi:weather-night" },
    ];
  }

  _getTimeCategoryIcon(category) {
    const period = this._getTimePeriods().find(p => p.id === category);
    if (period && period.icon) return period.icon;
    const icons = {
      morning: "mdi:weather-sunset-up",
      afternoon: "mdi:weather-sunny",
      evening: "mdi:weather-sunset-down",
      night: "mdi:weather-night",
      anytime: "mdi:clock-outline",
    };
    return icons[category] || icons.anytime;
  }

  _getTimeCategoryLabel(category) {
    const period = this._getTimePeriods().find(p => p.id === category);
    if (period && period.label) return period.label;
    const keyMap = {
      morning: 'common.morning',
      afternoon: 'common.afternoon',
      evening: 'common.evening',
      night: 'common.night',
      anytime: 'common.anytime',
    };
    return keyMap[category] ? this._t(keyMap[category]) : category;
  }

  _getTimeCategoryOrder(category) {
    const ids = this._getTimePeriods().map(p => p.id);
    const idx = ids.indexOf(category);
    if (idx >= 0) return idx;
    return category === "anytime" ? ids.length : ids.length + 1;
  }

  _renderEmptyState() {
    return html`
      <div class="empty-state">
        <ha-icon icon="mdi:check-circle-outline"></ha-icon>
        <div class="message">${this._t('approvals.all_caught_up')}</div>
        <div class="submessage">${this._t('approvals.no_pending_approvals')}</div>
      </div>
    `;
  }

  _renderApprovals(groupedByDay) {
    return html`
      ${groupedByDay.map(
        ([dayKey, dayGroup]) => html`
          <div class="day-group">
            <div class="day-header">${dayGroup.label}</div>
            ${this._renderTimeCategories(dayGroup.timeCategories)}
          </div>
        `
      )}
    `;
  }

  _renderTimeCategories(timeCategories) {
    const sortedCategories = Object.entries(timeCategories).sort(
      ([a], [b]) => this._getTimeCategoryOrder(a) - this._getTimeCategoryOrder(b)
    );

    return html`
      ${sortedCategories.map(
        ([category, completions]) => html`
          <div class="time-group">
            <div class="time-header">
              <ha-icon icon="${this._getTimeCategoryIcon(category)}"></ha-icon>
              ${this._getTimeCategoryLabel(category)}
            </div>
            ${completions.map((completion) => this._renderApprovalItem(completion))}
          </div>
        `
      )}
    `;
  }

  _renderApprovalItem(completion) {
    const isLoading = this._loading[completion.completion_id];

    return html`
      <div class="approval-item ${isLoading ? "loading" : ""}">
        <div class="action-buttons left">
          <button
            class="action-button reject ${isLoading ? "loading" : ""}"
            @click="${() => this._handleReject(completion)}"
            title="${this._t('approvals.reject')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:close"></ha-icon>
          </button>
        </div>
        <div class="item-info">
          <span class="chore-name">${completion.chore_name}</span>
          <div class="item-details">
            <span class="child-name">
              <ha-icon icon="mdi:account"></ha-icon>
              ${completion.child_name}
            </span>
            ${completion.timed_duration_seconds > 0 ? html`
              <span class="duration-badge">
                <ha-icon icon="mdi:timer-outline"></ha-icon>
                ${this._t('approvals.timed_duration', {count: Math.floor(completion.timed_duration_seconds / 60)})}
              </span>
            ` : ''}
            <span class="points-badge">
              <ha-icon icon="mdi:star"></ha-icon>
              ${completion.points}
            </span>
          </div>
          ${tmSafePhotoUrl(completion.photo_url) ? html`
            <a class="approval-photo" href="${tmSafePhotoUrl(completion.photo_url)}" target="_blank" rel="noopener"
               @click="${(e) => this._openPhoto(e, tmSafePhotoUrl(completion.photo_url), this._photoCaption(completion.chore_name, completion.child_name, completion.completed_at))}"
               title="${this._t('approvals.view_photo') || 'View photo'}">
              <img src="${tmSafePhotoUrl(completion.photo_url)}" alt="" loading="lazy">
            </a>
          ` : ''}
        </div>
        <div class="action-buttons right">
          <button
            class="action-button approve ${isLoading ? "loading" : ""}"
            @click="${() => this._handleApprove(completion)}"
            title="${this._t('approvals.approve')}"
            ?disabled="${isLoading}"
          >
            <ha-icon icon="mdi:check"></ha-icon>
          </button>
        </div>
      </div>
    `;
  }

  async _handleApprove(completion) {
    await this._callService("approve_chore", completion.completion_id);
  }

  async _handleReject(completion) {
    await this._callService("reject_chore", completion.completion_id);
  }

  async _handleApproveAll(completions) {
    const ids = (completions || []).map(c => c.completion_id).filter(Boolean);
    if (ids.length === 0) return;
    if (!window.confirm(this._t('approvals.approve_all_confirm', { count: ids.length }))) return;
    if (this._loading['__all__']) return;
    this._loading = { ...this._loading, '__all__': true };
    this.requestUpdate();
    try {
      await this.hass.callService('taskmate', 'approve_all_chores', { completion_ids: ids });
    } catch (error) {
      console.error('Failed to approve all:', error);
      if (this.hass.callService) {
        this.hass.callService('persistent_notification', 'create', {
          title: this._t('approvals.error_title'),
          message: this._t('approvals.error_failed_service', { service: 'approve all', message: error.message }),
          notification_id: 'taskmate_error_approve_all',
        });
      }
    } finally {
      this._loading = { ...this._loading, '__all__': false };
      this.requestUpdate();
    }
  }

  async _callService(service, completionId) {
    if (this._loading[completionId]) return;
    this._loading = { ...this._loading, [completionId]: true };
    this.requestUpdate();

    try {
      await this.hass.callService("taskmate", service, {
        completion_id: completionId,
      });
    } catch (error) {
      console.error(`Failed to call ${service}:`, error);
      // Show error toast if available
      if (this.hass.callService) {
        this.hass.callService("persistent_notification", "create", {
          title: this._t('approvals.error_title'),
          message: this._t('approvals.error_failed_service', { service: service.replace("_", " "), message: error.message }),
          notification_id: `taskmate_error_${completionId}`,
        });
      }
    } finally {
      this._loading = { ...this._loading, [completionId]: false };
      this.requestUpdate();
    }
  }
}

// Card Editor
class TaskMateApprovalsCardEditor extends LitElement {
  static get properties() {
    return {
      hass: { type: Object },
      config: { type: Object },
    };
  }

  _t(key, params) {
    const fn = window.__taskmate_localize;
    return fn ? fn(this.hass, key, params) : key;
  }

  static get styles() {
    return css`
      :host { display: block; }
      ha-form { display: block; margin-bottom: 16px; }
      .colour-field { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--outline-color, var(--divider-color, #e0e0e0)); border-radius: 4px; background: var(--mdc-text-field-fill-color, var(--card-background-color)); }
      .colour-field-label { font-size: 0.82rem; color: var(--primary-color); font-weight: 500; }
      .colour-field-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
      .colour-swatch-wrapper { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid var(--divider-color, #e0e0e0); flex-shrink: 0; }
      .colour-swatch-wrapper input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
      .colour-swatch-preview { position: absolute; inset: 0; pointer-events: none; }
      .colour-hex { font-family: var(--code-font-family, monospace); font-size: 0.85rem; color: var(--secondary-text-color); min-width: 70px; }
      .colour-presets { display: flex; gap: 6px; flex-wrap: wrap; }
      .preset-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid var(--divider-color, #e0e0e0); transition: transform 0.1s; padding: 0; }
      .preset-swatch:hover { transform: scale(1.15); }
      .preset-swatch.active { border-color: var(--primary-text-color); box-shadow: 0 0 0 2px var(--primary-color); }
      .colour-reset { font-size: 0.78rem; color: var(--secondary-text-color); background: none; border: 1px solid var(--divider-color, #e0e0e0); border-radius: 4px; padding: 4px 10px; cursor: pointer; margin-left: auto; }
      .colour-helper { color: var(--secondary-text-color); font-size: 0.82rem; line-height: 1.3; }
    `;
  }

  setConfig(config) {
    this.config = config;
  }

  _buildSchema() {
    const overviewEntity = this.config?.entity
      ? this.hass?.states?.[this.config.entity]
      : null;
    const children = overviewEntity?.attributes?.children || [];
    return [
      { name: 'entity', selector: { entity: { domain: 'sensor' } } },
      { name: 'title', selector: { text: {} } },
      {
        name: 'child_id',
        selector: {
          select: {
            options: [
              { value: '__all__', label: this._t('common.editor.filter_by_child_all') },
              ...children.map((c) => ({ value: c.id, label: c.name })),
            ],
            mode: 'dropdown',
          },
        },
      },
      {
        name: 'card_design',
        selector: {
          select: {
            options: window.__taskmate_design
              ? window.__taskmate_design.editorOptions(this._t.bind(this))
              : [{ value: 'global', label: 'Use global default' }],
            mode: 'dropdown',
          },
        },
      },
    ];
  }

  _computeLabel = (entry) => {
    const labels = {
      entity: this._t('common.entity'),
      title: this._t('common.title'),
      child_id: this._t('approvals.editor.child_id'),
      card_design: this._t('common.design.field_label'),
    };
    return labels[entry.name] ?? entry.name;
  };

  _computeHelper = (entry) => {
    const helpers = {
      entity: this._t('approvals.editor.entity_helper'),
      child_id: this._t('approvals.editor.child_id_helper'),
    };
    return helpers[entry.name] ?? '';
  };

  render() {
    if (!this.hass || !this.config) return html``;
    const data = {
      entity: this.config.entity || '',
      title: this.config.title || '',
      child_id: this.config.child_id || '__all__',
      card_design: this.config.card_design || 'global',
    };
    return html`
      <ha-form
        .hass=${this.hass}
        .data=${data}
        .schema=${this._buildSchema()}
        .computeLabel=${this._computeLabel}
        .computeHelper=${this._computeHelper}
        @value-changed=${this._formChanged}
      ></ha-form>
      ${this._renderColourPicker('header_color', '#27ae60')}
    `;
  }

  _renderColourPicker(key, defaultValue) {
    const d = window.__taskmate_design;
    const current = this.config[key] || defaultValue;
    if (!d || !d.colourPicker) return html``;
    return d.colourPicker({
      defaultValue, current,
      label: this._t('common.editor.header_colour'),
      helper: this._t('common.editor.header_colour_helper'),
      resetLabel: this._t('common.reset'),
      onInput: (v) => this._updateConfig(key, v),
      onPreset: (v) => this._updateConfig(key, v),
      onReset: () => this._updateConfig(key, defaultValue),
    });
  }

  _formChanged(e) {
    const newValues = e.detail.value || {};
    const newConfig = { ...this.config };
    for (const [key, value] of Object.entries(newValues)) {
      if (
        value === '' || value === null || value === undefined
        || (key === 'child_id' && value === '__all__')
        || (key === 'card_design' && value === 'global')
      ) {
        delete newConfig[key];
      } else {
        newConfig[key] = value;
      }
    }
    this.dispatchEvent(new CustomEvent('config-changed', {
      detail: { config: newConfig }, bubbles: true, composed: true,
    }));
  }

  _updateConfig(key, value) {
    const newConfig = { ...this.config, [key]: value };
    if (value === undefined || value === "") {
      delete newConfig[key];
    }
    const event = new CustomEvent("config-changed", {
      detail: { config: newConfig },
      bubbles: true,
      composed: true,
    });
    this.dispatchEvent(event);
  }
}

// Register the cards
customElements.define(
  "taskmate-approvals-card",
  TaskMateApprovalsCard
);
customElements.define(
  "taskmate-approvals-card-editor",
  TaskMateApprovalsCardEditor
);

// Register with Home Assistant
window.customCards = window.customCards || [];
window.customCards.push({
  type: "taskmate-approvals-card",
  name: "TaskMate Approvals",
  description: "A card to manage pending chore approvals for TaskMate",
  preview: true,
  getEntitySuggestion: (hass, entityId) =>
    window.__taskmate_suggest(hass, entityId, "taskmate-approvals-card", "overview"),
});

// Version is injected by the HA resource URL (?v=x.x.x) and read from the DOM
const _tmVersion = new URLSearchParams(
  Array.from(document.querySelectorAll('script[src*="/taskmate-approvals-card.js"]'))
    .map(s => s.src.split("?")[1]).find(Boolean) || ""
).get("v") || "?";
console.info(
  "%c TASKMATE APPROVALS CARD %c v" + _tmVersion + " ",
  "background:#27ae60;color:white;font-weight:bold;padding:2px 4px;border-radius:4px 0 0 4px;",
  "background:#2c3e50;color:white;font-weight:bold;padding:2px 4px;border-radius:0 4px 4px 0;"
);