From f6147a078784a1b74558205d5267666760c278e9 Mon Sep 17 00:00:00 2001
From: Gemini Bot <gemini@example.com>
Date: Fri, 21 Nov 2025 12:13:59 +0100
Subject: [PATCH] Initial commit: Add Pstryk Energy Card v4.1.0

- Add main card implementation with full/compact/super_compact modes
- Support for sparkline and bars widgets with effects
- Price color coding based on best/worst price ranges
- Alert system for high/low price thresholds
- Polish/English translations support
- HACS integration configuration
- Development guidelines in AGENTS.md
---
 AGENTS.md      |   27 ++
 README.md      |   94 ++++
 hacs.json      |    5 +
 pstryk-card.js | 1230 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1356 insertions(+)
 create mode 100644 AGENTS.md
 create mode 100644 README.md
 create mode 100644 hacs.json
 create mode 100644 pstryk-card.js

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..8455996
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,27 @@
+# Agent Guidelines for Pstryk Energy Card
+
+## Build/Test Commands
+- No build system - single JavaScript file (`pstryk-card.js`)
+- Test by adding card to Home Assistant dashboard
+- Debug mode: set `debug: true` in card config
+- No linting/formatting tools configured
+
+## Code Style Guidelines
+- **Language**: Vanilla JavaScript ES6+ (no frameworks)
+- **File structure**: Single file with embedded CSS in template literals
+- **Class naming**: PascalCase (e.g., `PstrykCard`)
+- **Method naming**: camelCase with underscore prefix for private methods (e.g., `_getTranslations`)
+- **Variables**: camelCase, use const/let appropriately
+- **Comments**: Polish comments for user-facing text, English for technical notes
+- **Error handling**: Throw descriptive Error objects in `setConfig()` for validation
+- **Translations**: Support PL/EN via `_getTranslations()` method
+- **CSS**: Use CSS custom properties for theming, embed in `<style>` tags
+- **SVG**: Inline SVG for charts, use viewBox for responsiveness
+- **Home Assistant**: Follow custom card conventions, register with `customElements.define()`
+
+## Key Patterns
+- Shadow DOM for encapsulation
+- Lifecycle methods: `connectedCallback()`, `disconnectedCallback()`
+- Config validation in `setConfig()`
+- Performance optimization in `set hass()` with change detection
+- Timer management for hourly refreshes
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4c1ede6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,94 @@
+# 🏠 Pstryk Energy Card dla Home Assistant
+
+![Version](https://img.shields.io/badge/version-4.1.0-blue.svg) ![HACS](https://img.shields.io/badge/HACS-Custom-orange.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg)
+
+---
+
+## ✨ Co potrafi?
+
+* 🎨 Trzy tryby wyświetlania: **pełny**, **kompaktowy**, **super kompaktowy**
+* 📊 Widgety: słupki lub linia z animacją
+* 🚨 Alerty: ostrzeżenia, gdy cena przekracza ustalone progi
+* 🔴🟢 Zmiana koloru na czerwony/zielony w zależności od ustawień cen w integracji
+* 🌍 Obsługa PL i EN – karta sama wykryje język
+* 🎯 Efekty i zbędne bajery
+
+![{8ADD4FD9-6CE4-4984-B94C-3022E159F392}](https://github.com/user-attachments/assets/d27dab7a-0055-4e85-9b22-12e0a8c3f8cf)
+![{55E1D715-4207-4254-A312-30519EF5FC50}](https://github.com/user-attachments/assets/9ca7fef7-1693-4b67-ba07-32cb5d36f38b)
+![{4FC17EE9-74AA-4445-BF92-BE63CAB8F9BD}](https://github.com/user-attachments/assets/e65754ac-1a92-49d7-bd03-0af2f87a8117)
+
+## 📦 Jak zainstalować?
+
+**1. HACS (najprościej)**
+
+1. Otwórz HACS → **+**
+2. Wybierz **Custom repositories**
+3. Wklej URL: `https://github.com/balgerion/ha_Pstryk_card`
+4. W kategorii zaznacz **Dashboard** i kliknij **Add**
+5. Zainstaluj **Pstryk Energy Card**
+6. Zrestartuj Home Assistant
+
+**2. Ręcznie**
+
+1. Ściągnij plik `pstryk-card.js` i wrzuć do `/www/community/pstryk-card`
+2. W Home Assistant: **Settings → Dashboards → Resources → Add Resource**
+
+   * URL: `/local/community/pstryk-card/pstryk-card.js`
+   * Typ: **JavaScript Module**
+3. Zrestartuj
+
+---
+
+## 🚀 Szybki start - przykłady
+
+##full
+                   
+```yaml
+type: custom:pstryk-card
+buy_entity: sensor.pstryk_current_buy_price
+sell_entity: sensor.pstryk_current_sell_price
+card_mode: full                   # full | compact | super_compact
+show_title: true                  # true | false
+show_legend: true                 # true | false
+show_widget: sparkline            # none | bars | sparkline
+widget_effect: pulse              # none | pulse (sparkline) | fill (bars)
+widget_hours: 24                  # 1-48
+alert_buy_above: 1.15             # liczba lub null
+alert_sell_below: 0.25            # liczba lub null
+hover_effect: lift                # none | lift | glow | shake | pulse
+click_action: none                # none | more-info
+```
+##Kompaktowy z słupkami
+```yaml
+type: custom:pstryk-card
+buy_entity: sensor.pstryk_current_buy_price
+sell_entity: sensor.pstryk_current_sell_price
+card_mode: compact                # full | compact | super_compact
+show_widget: bars                 # none | bars | sparkline
+widget_effect: fill               # none | fill (bars) | pulse (sparkline) 
+widget_hours: 12                  # 1-48
+hover_effect: glow                # none | lift | glow | shake | pulse
+attribute_config: average_24      # next_hour | average_remaining | average_24 | null | custom_attribute
+```
+
+##Super kompaktowy (minimalny)
+```yaml
+type: custom:pstryk-card
+buy_entity: sensor.pstryk_current_buy_price
+sell_entity: sensor.pstryk_current_sell_price
+card_mode: super_compact          # full | compact | super_compact
+alert_buy_above: 1.0              # liczba lub null
+alert_sell_below: 0.1             # liczba lub null
+```
+
+## ⚙️ Wszystkie opcje
+
+* **buy\_entity** (`string`) – encja z ceną zakupu (np. `sensor.pstryk_current_buy_price`)
+* **sell\_entity** (`string`) – encja z ceną sprzedaży
+* **card\_mode** (`full`/`compact`/`super_compact`) – wybierz wygląd karty
+* **title** (`string`) – tekst nagłówka (domyślnie "Energy Prices")
+* **show\_title** (`true`/`false`) – wyświetl tytuł
+* **show\_legend** (`true`/`false`) – legenda kolorów (tylko w `full`)
+* **attribute\_config** (`next_hour`/`average_remaining`/`average_24`/`null`/`custom`) – dodatkowy atrybut
+* **show\_widget** (`none`/`bars`/`sparkline`) – typ wykresu
+* **widget\_effect** (`none`/`pulse`/`fill`) – animacja wykresu (pulse (sparkline), fill (bars))
diff --git a/hacs.json b/hacs.json
new file mode 100644
index 0000000..bd4cd36
--- /dev/null
+++ b/hacs.json
@@ -0,0 +1,5 @@
+{
+  "name": "Pstryk Energy Card",
+  "filename": "pstryk-card.js",
+  "render_readme": true
+}
diff --git a/pstryk-card.js b/pstryk-card.js
new file mode 100644
index 0000000..d967afe
--- /dev/null
+++ b/pstryk-card.js
@@ -0,0 +1,1230 @@
+/**
+ * Pstryk Energy Card v4.1.0
+ * 
+ * Przykładowe konfiguracje:
+ * 
+ * FULL MODE:
+ * type: custom:pstryk-card
+ * buy_entity: sensor.pstryk_current_buy_price
+ * sell_entity: sensor.pstryk_current_sell_price
+ * card_mode: full # full | compact | super_compact
+ * title: Energy Prices
+ * show_title: true # true | false
+ * show_legend: true # true | false
+ * attribute_config: next_hour # next_hour | average_remaining | average_24 | custom_attribute_name | null
+ * hover_effect: lift # none | lift | glow | shake | pulse
+ * show_widget: sparkline # none | bars | sparkline
+ * widget_hours: 24 # liczba godzin do pokazania (1-48)
+ * widget_effect: pulse # none | pulse (dla sparkline) | fill (dla bars)
+ * alert_buy_above: 1.15 # próg alertu lub null
+ * alert_sell_below: 0.25 # próg alertu lub null
+ * click_action: none # none | more-info
+ * debug: false # true | false
+ * 
+ * COMPACT MODE:
+ * type: custom:pstryk-card
+ * buy_entity: sensor.pstryk_current_buy_price
+ * sell_entity: sensor.pstryk_current_sell_price
+ * card_mode: compact
+ * title: Energy Prices
+ * show_title: true # true | false
+ * show_legend: false # domyślnie false dla compact
+ * attribute_config: average_24 # next_hour | average_remaining | average_24 | custom_attribute_name | null
+ * hover_effect: glow # none | lift | glow | shake | pulse
+ * show_widget: bars # none | bars | sparkline
+ * widget_hours: 12 # liczba godzin do pokazania (1-48)
+ * widget_effect: fill # none | pulse (dla sparkline) | fill (dla bars)
+ * alert_buy_above: null
+ * alert_sell_below: null
+ * click_action: more-info # none | more-info
+ * debug: false
+ * 
+ * SUPER_COMPACT MODE:
+ * type: custom:pstryk-card
+ * buy_entity: sensor.pstryk_current_buy_price
+ * sell_entity: sensor.pstryk_current_sell_price
+ * card_mode: super_compact
+ * title: Energy Prices # ignorowane w super_compact
+ * show_title: false # zawsze false w super_compact
+ * show_legend: false # zawsze false w super_compact
+ * attribute_config: null # zawsze null w super_compact
+ * hover_effect: none # none | lift | glow | shake | pulse
+ * show_widget: none # zawsze none w super_compact
+ * widget_hours: 12 # ignorowane w super_compact
+ * widget_effect: none # ignorowane w super_compact
+ * alert_buy_above: 1.0
+ * alert_sell_below: 0.1
+ * click_action: none # none | more-info
+ * debug: false
+ * 
+ * Changelog v4.1.0:
+ * - DODANO opcję widget_effect: fill dla trybu bars
+ * - Efekt wypełniania aktualnego słupka w trybie bars jest teraz opcjonalny
+ * - widget_effect: none - wyłącza efekt wypełniania (wszystkie słupki jednolite)
+ * - widget_effect: fill - włącza efekt wypełniania aktualnego słupka
+ * 
+ * Changelog v4.0.12:
+ * - USUNIĘTO linię zero z widgetu bars (była niewidoczna na dole)
+ * - Zachowano linię zero w sparkline (bez zmian)
+ * - Zachowano prawidłową obsługę wartości ujemnych w bars
+ * - Wartości dodatnie: słupki w górę, ujemne: słupki w dół (od niewidocznej linii zero)
+ */
+
+class PstrykCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._config = {};
+    this._hass = null;
+    this._remainingHours = null;
+    this._translations = null;
+    this._avgPriceRegex = null;
+    this._refreshInterval = null;
+  }
+
+  connectedCallback() {
+    // Uruchom timer odświeżania co godzinę
+    this._startRefreshTimer();
+  }
+
+  disconnectedCallback() {
+    // Zatrzymaj timer przy usuwaniu karty
+    this._stopRefreshTimer();
+  }
+
+  _startRefreshTimer() {
+    this._stopRefreshTimer();
+    
+    // Odświeżaj co godzinę jeśli widget jest włączony
+    if (this._config.show_widget !== 'none') {
+      // Oblicz czas do następnej pełnej godziny
+      const now = new Date();
+      const msToNextHour = (60 - now.getMinutes()) * 60 * 1000 - now.getSeconds() * 1000 - now.getMilliseconds();
+      
+      // Pierwsze odświeżenie na początku następnej godziny
+      setTimeout(() => {
+        this.render();
+        // Potem odświeżaj co godzinę
+        this._refreshInterval = setInterval(() => {
+          this.render();
+        }, 3600000); // 60 minut
+      }, msToNextHour);
+    }
+  }
+
+  _stopRefreshTimer() {
+    if (this._refreshInterval) {
+      clearInterval(this._refreshInterval);
+      this._refreshInterval = null;
+    }
+  }
+
+  setConfig(config) {
+    if (!config.buy_entity || !config.sell_entity) {
+      throw new Error('You must define buy_entity and sell_entity');
+    }
+    
+    // Walidacja card_mode
+    const validModes = ['full', 'compact', 'super_compact'];
+    if (config.card_mode && !validModes.includes(config.card_mode)) {
+      throw new Error(`Invalid card_mode: ${config.card_mode}. Use: ${validModes.join(', ')}`);
+    }
+    
+    // Walidacja show_widget
+    const validWidgets = ['none', 'bars', 'sparkline'];
+    if (config.show_widget && !validWidgets.includes(config.show_widget)) {
+      throw new Error(`Invalid show_widget: ${config.show_widget}. Use: ${validWidgets.join(', ')}`);
+    }
+    
+    // Walidacja widget_effect
+    const validEffects = ['none', 'pulse', 'fill'];
+    if (config.widget_effect && !validEffects.includes(config.widget_effect)) {
+      throw new Error(`Invalid widget_effect: ${config.widget_effect}. Use: ${validEffects.join(', ')}`);
+    }
+    
+    // Ustaw domyślny tryb jeśli nie podano
+    const cardMode = config.card_mode || 'full';
+    
+    // Zastosuj domyślne wartości w zależności od trybu
+    this._config = this._applyModeDefaults({
+      ...config,
+      card_mode: cardMode
+    });
+  }
+
+  _applyModeDefaults(config) {
+    const mode = config.card_mode || 'full';
+    
+    // Domyślne wartości dla wszystkich trybów
+    const defaults = {
+      title: 'Energy Prices',
+      show_title: true,
+      show_legend: true,
+      attribute_config: 'next_hour',
+      hover_effect: 'lift',
+      show_widget: 'none',
+      widget_hours: 24,
+      widget_effect: 'none',
+      alert_buy_above: null,
+      alert_sell_below: null,
+      click_action: 'none',
+      debug: false
+    };
+    
+    // Modyfikacje dla trybu compact
+    if (mode === 'compact') {
+      defaults.show_legend = false;
+      defaults.widget_hours = 12;
+    }
+    
+    // Modyfikacje dla trybu super_compact
+    if (mode === 'super_compact') {
+      defaults.show_title = false;
+      defaults.show_legend = false;
+      defaults.attribute_config = null;
+      defaults.show_widget = 'none';
+    }
+    
+    // Połącz z konfiguracją użytkownika (config ma priorytet)
+    return { ...defaults, ...config };
+  }
+
+  set hass(hass) {
+    const oldHass = this._hass;
+    this._hass = hass;
+    
+    // Optymalizacja: renderuj tylko gdy zmienią się wartości encji
+    if (oldHass && this._config.buy_entity && this._config.sell_entity) {
+      const oldBuy = oldHass.states[this._config.buy_entity];
+      const oldSell = oldHass.states[this._config.sell_entity];
+      const newBuy = hass.states[this._config.buy_entity];
+      const newSell = hass.states[this._config.sell_entity];
+      
+      if (oldBuy === newBuy && oldSell === newSell) {
+        return;
+      }
+    }
+    
+    // Czyść cache tłumaczeń przy zmianie języka
+    if (oldHass && oldHass.language !== hass.language) {
+      this._translations = null;
+    }
+    
+    this.render();
+  }
+
+  getCardSize() {
+    switch(this._config.card_mode) {
+      case 'super_compact':
+        return 1;
+      case 'compact':
+        return this._config.show_widget !== 'none' ? 2 : 1;
+      case 'full':
+      default:
+        return this._config.show_widget !== 'none' ? 3 : 2;
+    }
+  }
+
+  static getStubConfig() {
+    return {
+      buy_entity: 'sensor.pstryk_current_buy_price',
+      sell_entity: 'sensor.pstryk_current_sell_price',
+      card_mode: 'full',
+      show_widget: 'sparkline',
+      widget_effect: 'pulse'
+    };
+  }
+
+  _getTranslations() {
+    if (!this._translations) {
+      const isPolish = this._hass?.language === 'pl' || 
+                      (this._hass?.locale?.language === 'pl') ||
+                      (navigator.language?.startsWith('pl'));
+      
+      this._translations = {
+        'buy_price': isPolish ? 'Cena Zakupu' : 'Buy Price',
+        'sell_price': isPolish ? 'Cena Sprzedaży' : 'Sell Price',
+        'best_prices': isPolish ? 'Najlepsze ceny' : 'Best prices',
+        'normal_prices': isPolish ? 'Normalne ceny' : 'Normal prices',
+        'worst_prices': isPolish ? 'Najgorsze ceny' : 'Worst prices',
+        'next_hour': isPolish ? 'Następna godzina' : 'Next hour',
+        'average_24': isPolish ? 'Średnia 24h' : 'Average 24h',
+        'alert': isPolish ? 'Uwaga!' : 'Alert!',
+        'high_price': isPolish ? 'Wysoka cena' : 'High price',
+        'low_price': isPolish ? 'Niska cena' : 'Low price',
+        'no_data': isPolish ? 'Brak danych' : 'No data',
+        'entity_not_found': isPolish ? 'Nie znaleziono encji' : 'Entity not found'
+      };
+    }
+    return this._translations;
+  }
+
+  translate(key) {
+    return this._getTranslations()[key] || key;
+  }
+
+  checkAlert(type, value) {
+    const numValue = parseFloat(value);
+    if (isNaN(numValue)) return false;
+    
+    if (type === 'buy' && this._config.alert_buy_above) {
+      return numValue > this._config.alert_buy_above;
+    }
+    if (type === 'sell' && this._config.alert_sell_below) {
+      return numValue < this._config.alert_sell_below;
+    }
+    return false;
+  }
+
+  getPriceColor(entity, price, type) {
+    if (!entity?.attributes) return 'var(--primary-text-color)';
+    
+    const currentPrice = parseFloat(price);
+    if (isNaN(currentPrice)) return 'var(--primary-text-color)';
+    
+    // Pobierz tablice najlepszych i najgorszych cen
+    const bestPrices = entity.attributes['Najlepsze ceny'] || 
+                      entity.attributes['Best prices'] || 
+                      entity.attributes['best_prices'] || [];
+    const worstPrices = entity.attributes['Najgorsze ceny'] || 
+                       entity.attributes['Worst prices'] || 
+                       entity.attributes['worst_prices'] || [];
+    
+    const epsilon = 0.001;
+    
+    // Sprawdź w najlepszych
+    for (const priceData of bestPrices) {
+      const checkPrice = typeof priceData === 'object' ? priceData.price : priceData;
+      if (Math.abs(checkPrice - currentPrice) < epsilon) {
+        return '#4ade80'; // Zielony
+      }
+    }
+    
+    // Sprawdź w najgorszych
+    for (const priceData of worstPrices) {
+      const checkPrice = typeof priceData === 'object' ? priceData.price : priceData;
+      if (Math.abs(checkPrice - currentPrice) < epsilon) {
+        return '#f87171'; // Czerwony
+      }
+    }
+    
+    return 'var(--primary-text-color)';
+  }
+
+  formatPrice(price) {
+    if (price === null || price === undefined || price === '') return '--';
+    const numPrice = parseFloat(price);
+    if (isNaN(numPrice)) return '--';
+    return `${numPrice.toFixed(2)} PLN/kWh`;
+  }
+
+  getAttributeValue(entity, config) {
+    if (!entity?.attributes || !config) return null;
+    
+    switch(config) {
+      case 'next_hour':
+        return entity.attributes['Next hour'];
+               
+      case 'average_remaining':
+        if (!this._avgPriceRegex) {
+          this._avgPriceRegex = /Average price today \/(\d+)/;
+        }
+        
+        for (const [key, value] of Object.entries(entity.attributes)) {
+          const match = key.match(this._avgPriceRegex);
+          if (match && match[1] !== '24') {
+            this._remainingHours = match[1];
+            return value;
+          }
+        }
+        return null;
+        
+      case 'average_24':
+        return entity.attributes['Average price today /24'];
+               
+      default:
+        return entity.attributes[config];
+    }
+  }
+
+  getAttributeLabel(config) {
+    switch(config) {
+      case 'next_hour':
+        return this.translate('next_hour');
+        
+      case 'average_remaining':
+        const hours = this._remainingHours || 'X';
+        const translations = this._getTranslations();
+        const isPolish = translations['buy_price'] === 'Cena Zakupu';
+        return isPolish ? `Średnia ${hours}h` : `Average ${hours}h`;
+        
+      case 'average_24':
+        return this.translate('average_24');
+        
+      default:
+        return config;
+    }
+  }
+
+  generateWidgetData(entity, entityType) {
+    if (!entity?.attributes) return { data: [], currentIndex: 0 };
+    
+    // Debug
+    if (this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} generateWidgetData - attributes:`, entity.attributes);
+    }
+    
+    // Szukaj historii cen w różnych możliwych atrybutach
+    let allPrices = entity.attributes['All prices'] || 
+                   entity.attributes['all_prices'] || 
+                   entity.attributes['prices'] ||
+                   entity.attributes['hourly_prices'] ||
+                   [];
+    
+    if (this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} raw prices data:`, allPrices);
+      console.log(`[PstrykCard] ${entityType} raw data sample:`, allPrices.slice(0, 10).map((item, idx) => `${idx}: ${JSON.stringify(item)}`));
+      // Pokaż problematyczne elementy dla sell
+      if (entityType === 'sell') {
+        console.log(`[PstrykCard] ${entityType} items 9-16:`, allPrices.slice(9, 17).map((item, idx) => `${idx+9}: ${JSON.stringify(item)}`));
+      }
+    }
+    
+    if (!Array.isArray(allPrices) || allPrices.length === 0) {
+      if (this._config.debug) {
+        console.warn(`[PstrykCard] No price data found for ${entityType}`);
+      }
+      return { data: [], currentIndex: 0 };
+    }
+    
+    const now = new Date();
+    const currentHour = now.getHours();
+    const currentMinutes = now.getMinutes();
+    const currentPrice = parseFloat(entity.state);
+    
+    if (this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} current: hour=${currentHour}, minutes=${currentMinutes}, price=${currentPrice}`);
+    }
+    
+    // Konwertuj do tablicy z informacją o czasie - POPRAWIONE FILTROWANIE
+    const pricesWithTime = allPrices.map((item, index) => {
+      let price, hour, startTime, rawValue;
+      
+      if (typeof item === 'object') {
+        rawValue = item.price || item.value || item.val || item;
+        // Sprawdź czy to jest zagnieżdżony obiekt z wartościami
+        if (typeof rawValue === 'object' && rawValue !== null) {
+          rawValue = rawValue.price || rawValue.value || rawValue.val || 0;
+        }
+        price = parseFloat(rawValue);
+        // Próbuj pobrać informację o czasie z różnych możliwych pól
+        if (item.start_time) {
+          startTime = new Date(item.start_time);
+          hour = startTime.getHours();
+        } else if (item.time) {
+          startTime = new Date(item.time);
+          hour = startTime.getHours();
+        } else if (item.hour !== undefined) {
+          hour = parseInt(item.hour);
+        } else {
+          // Jeśli nie ma informacji o czasie, zakładamy sekwencyjne godziny
+          hour = index % 24;
+        }
+      } else {
+        rawValue = item;
+        price = parseFloat(item);
+        hour = index % 24;
+      }
+      
+      return { price, hour, index, originalIndex: index, rawValue };
+    }).filter(item => {
+      // LEPSZE FILTROWANIE: sprawdź czy wartość da się przekonwertować na liczbę
+      const isValid = !isNaN(item.price) && isFinite(item.price) && item.rawValue !== null && item.rawValue !== undefined && item.rawValue !== '';
+      
+      if (this._config.debug && !isValid) {
+        console.log(`[PstrykCard] ${entityType} filtered out:`, JSON.stringify(item.rawValue), 'at index', item.originalIndex, 'parsed as:', item.price);
+      }
+      
+      return isValid;
+    });
+    
+    if (this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} processed prices:`, pricesWithTime.map(p => `${p.hour}:00 = ${p.price}`));
+    }
+    
+    // Sprawdź kolejność godzin w danych
+    if (this._config.debug && pricesWithTime.length > 1) {
+      const hourSequence = pricesWithTime.slice(0, 5).map(p => p.hour);
+      console.log(`[PstrykCard] ${entityType} first 5 hours sequence:`, hourSequence);
+    }
+    
+    // Znajdź indeks aktualnej godziny
+    let currentIndex = -1;
+    
+    // Metoda 1: Szukaj dokładnego dopasowania godziny
+    currentIndex = pricesWithTime.findIndex(item => item.hour === currentHour);
+    
+    if (currentIndex !== -1 && this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} found current hour ${currentHour} at index ${currentIndex}`);
+    }
+    
+    // Metoda 2: Jeśli nie znaleziono, szukaj po cenie (z tolerancją)
+    if (currentIndex === -1) {
+      const epsilon = 0.01;
+      currentIndex = pricesWithTime.findIndex(item => Math.abs(item.price - currentPrice) < epsilon);
+      
+      if (currentIndex !== -1 && this._config.debug) {
+        console.log(`[PstrykCard] ${entityType} found current by price match at index ${currentIndex}, hour: ${pricesWithTime[currentIndex].hour}`);
+      }
+    }
+    
+    // Metoda 3: Jeśli nadal nie znaleziono i mamy pełne 24h danych
+    if (currentIndex === -1 && pricesWithTime.length >= 24) {
+      // Spróbuj znaleźć najbliższą godzinę
+      let minDiff = 24;
+      pricesWithTime.forEach((item, idx) => {
+        const diff = Math.abs(item.hour - currentHour);
+        if (diff < minDiff) {
+          minDiff = diff;
+          currentIndex = idx;
+        }
+      });
+      
+      if (currentIndex !== -1 && this._config.debug) {
+        console.log(`[PstrykCard] ${entityType} using closest hour at index ${currentIndex}, hour: ${pricesWithTime[currentIndex].hour}`);
+      }
+    }
+    
+    // Ostatnia deska ratunku - użyj środka
+    if (currentIndex === -1) {
+      currentIndex = Math.floor(pricesWithTime.length / 2);
+      if (this._config.debug) {
+        console.warn(`[PstrykCard] ${entityType} could not find current hour, using middle at index ${currentIndex}`);
+      }
+    }
+    
+    // Pobierz dane tylko dla przyszłych godzin (od aktualnej)
+    const hoursToShow = Math.min(this._config.widget_hours || 24, pricesWithTime.length - currentIndex);
+    const futureData = pricesWithTime.slice(currentIndex, currentIndex + hoursToShow);
+    
+    // Oblicz pozycję kropki (0-1) w aktualnej godzinie
+    const dotPosition = currentMinutes / 60;
+    
+    if (this._config.debug) {
+      console.log(`[PstrykCard] ${entityType} showing hours:`, futureData.map(d => `${d.hour}:00 = ${d.price}`).join(', '));
+    }
+    
+    return { 
+      data: futureData.map(d => d.price),
+      hours: futureData.map(d => d.hour),
+      currentIndex: 0, // Zawsze 0, bo zaczynamy od aktualnej
+      dotPosition: dotPosition
+    };
+  }
+
+  createSparkline(data, hours, height, color, currentIndex, dotPosition, uniqueId) {
+    if (!data || data.length < 2) return '';
+    
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    
+    // Zawsze uwzględnij 0 w zakresie
+    const displayMin = Math.min(min, 0);
+    const displayMax = Math.max(max, 0);
+    const range = displayMax - displayMin || 1;
+    
+    const viewBoxWidth = 200;
+    const viewBoxHeight = 50;
+    const paddingX = 5;
+    const paddingY = 5;
+    const chartWidth = viewBoxWidth - (paddingX * 2);
+    const chartHeight = viewBoxHeight - (paddingY * 2);
+    
+    // Oblicz pozycję linii zero - zawsze będzie widoczna
+    const zeroY = paddingY + chartHeight - ((0 - displayMin) / range) * chartHeight;
+    
+    // Generuj punkty dla linii
+    const points = data.map((value, index) => {
+      const x = paddingX + (index / (data.length - 1)) * chartWidth;
+      const y = paddingY + chartHeight - ((value - displayMin) / range) * chartHeight;
+      return `${x},${y}`;
+    }).join(' ');
+    
+    let currentDot = '';
+    let pulseEffect = '';
+    
+    // Kropka na aktualnej pozycji
+    if (currentIndex === 0 && data.length > 0) {
+      // Pozycja X między pierwszym a drugim punktem
+      const x1 = paddingX;
+      const x2 = data.length > 1 ? paddingX + (1 / (data.length - 1)) * chartWidth : x1;
+      const currentX = x1 + (x2 - x1) * dotPosition;
+      
+      // Pozycja Y - interpolacja między wartościami
+      const y1 = paddingY + chartHeight - ((data[0] - displayMin) / range) * chartHeight;
+      const y2 = data.length > 1 ? paddingY + chartHeight - ((data[1] - displayMin) / range) * chartHeight : y1;
+      const currentY = y1 + (y2 - y1) * dotPosition;
+      
+      // Efekt pulsowania
+      if (this._config.widget_effect === 'pulse') {
+        pulseEffect = `
+          <circle cx="${currentX}" cy="${currentY}" r="8" fill="${color}" opacity="0.3">
+            <animate attributeName="r" values="4;8;4" dur="2s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0.3;0.1;0.3" dur="2s" repeatCount="indefinite"/>
+          </circle>
+        `;
+      }
+      
+      currentDot = `
+        ${pulseEffect}
+        <circle cx="${currentX}" cy="${currentY}" r="4" fill="${color}" opacity="1"/>
+      `;
+    }
+    
+    // Linia zero - zawsze widoczna z lepszym kolorem
+    const zeroLine = `
+      <line
+        x1="${paddingX}"
+        y1="${zeroY}"
+        x2="${paddingX + chartWidth}"
+        y2="${zeroY}"
+        stroke="#888888"
+        stroke-width="1.5"
+        stroke-dasharray="4,2"
+        opacity="0.9"
+      />
+    `;
+    
+    // Debug info
+    if (this._config.debug) {
+      console.log(`[PstrykCard] Sparkline ${uniqueId}: data=[${data.join(', ')}]`);
+      console.log(`[PstrykCard] Sparkline ${uniqueId}: min=${min}, max=${max}, displayMin=${displayMin}, displayMax=${displayMax}, zeroY=${zeroY}`);
+    }
+    
+    return `
+      <svg viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}" preserveAspectRatio="xMidYMid meet" 
+           style="width: 100%; height: ${height}px; display: block; margin-top: 8px;">
+        ${zeroLine}
+        <polyline
+          points="${points}"
+          fill="none"
+          stroke="${color}"
+          stroke-width="2"
+          opacity="0.7"
+          vector-effect="non-scaling-stroke"
+        />
+        ${currentDot}
+      </svg>
+    `;
+  }
+
+  createBars(data, hours, height, color, currentIndex, dotPosition, type) {
+    if (!data || data.length < 1) return '';
+    
+    const viewBoxWidth = 200;
+    const viewBoxHeight = 60;
+    const paddingX = 5;
+    const paddingY = 10;
+    const chartWidth = viewBoxWidth - (paddingX * 2);
+    const chartHeight = viewBoxHeight - (paddingY * 2);
+    
+    const prices = data;
+    const min = Math.min(...prices, 0);
+    const max = Math.max(...prices, 0);
+    const range = max - min || 0.01;
+    
+    // Pozycja "linii zero" (środka) bez rysowania linii
+    const zeroY = paddingY + chartHeight - ((0 - min) / range) * chartHeight;
+    
+    // Szerokość pojedynczego słupka
+    const barWidth = Math.max(chartWidth / data.length * 0.8, 2);
+    const barGap = chartWidth / data.length * 0.2;
+    
+    if (this._config.debug) {
+      console.log(`[PstrykCard] Bars ${type}: data=[${data.join(', ')}], min=${min}, max=${max}, zeroY=${zeroY}, chartHeight=${chartHeight}`);
+    }
+    
+    const bars = data.map((price, index) => {
+      const x = paddingX + index * (barWidth + barGap);
+      let barHeight, y;
+      
+      // POPRAWNA LOGIKA: Słupki rosną od linii zero (bez rysowania linii)
+      if (price >= 0) {
+        // Wartość dodatnia - słupek w górę od linii zero
+        barHeight = ((price - 0) / range) * chartHeight;
+        y = zeroY - barHeight;
+      } else {
+        // Wartość ujemna - słupek w dół od linii zero  
+        barHeight = ((0 - price) / range) * chartHeight;
+        y = zeroY;
+      }
+      
+      // Upewnij się, że słupek ma minimalną wysokość dla widoczności
+      barHeight = Math.max(Math.abs(barHeight), 1);
+      
+      // Określ przeźroczystość
+      let opacity = '0.3';
+      
+      // Pierwszy słupek (aktualna godzina) - tylko jeśli widget_effect === 'fill'
+      if (index === 0 && this._config.widget_effect === 'fill') {
+        opacity = '1';
+        const filledHeight = barHeight * dotPosition;
+        const unfilledHeight = barHeight - filledHeight;
+        
+        let filledY, filledBarHeight;
+        if (price >= 0) {
+          // Dodatnia wartość - wypełnienie od dołu słupka w górę
+          filledY = y + unfilledHeight;
+          filledBarHeight = filledHeight;
+        } else {
+          // Ujemna wartość - wypełnienie od góry słupka w dół
+          filledY = y;
+          filledBarHeight = filledHeight;
+        }
+        
+        return `
+          <rect
+            x="${x}"
+            y="${y}"
+            width="${barWidth}"
+            height="${barHeight}"
+            fill="${color}"
+            opacity="0.3"
+            rx="1"
+          />
+          <rect
+            x="${x}"
+            y="${filledY}"
+            width="${barWidth}"
+            height="${filledBarHeight}"
+            fill="${color}"
+            opacity="1"
+            rx="1"
+          />
+          <text
+            x="${x + barWidth / 2}"
+            y="${price >= 0 ? y - 3 : y + barHeight + 12}"
+            text-anchor="middle"
+            font-size="9"
+            fill="${color}"
+            font-weight="bold"
+          >
+            ${hours[index]}:00
+          </text>
+        `;
+      }
+      
+      // Jeśli to pierwszy słupek i efekt fill jest włączony, to dodaj etykietę z godziną
+      if (index === 0 && this._config.widget_effect === 'fill') {
+        return `
+          <rect
+            x="${x}"
+            y="${y}"
+            width="${barWidth}"
+            height="${barHeight}"
+            fill="${color}"
+            opacity="${opacity}"
+            rx="1"
+          />
+          <text
+            x="${x + barWidth / 2}"
+            y="${price >= 0 ? y - 3 : y + barHeight + 12}"
+            text-anchor="middle"
+            font-size="9"
+            fill="${color}"
+            font-weight="bold"
+          >
+            ${hours[index]}:00
+          </text>
+        `;
+      }
+      
+      // Zwykły słupek
+      return `
+        <rect
+          x="${x}"
+          y="${y}"
+          width="${barWidth}"
+          height="${barHeight}"
+          fill="${color}"
+          opacity="${opacity}"
+          rx="1"
+        />
+      `;
+    }).join('');
+    
+    return `
+      <svg viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}" preserveAspectRatio="xMidYMid meet" 
+           style="width: 100%; height: ${height}px; display: block; margin-top: 8px;">
+        ${bars}
+      </svg>
+    `;
+  }
+
+  handleClick(entityId) {
+    if (!this._config.click_action || this._config.click_action === 'none') return;
+    
+    if (this._config.click_action === 'more-info') {
+      const event = new CustomEvent('hass-more-info', {
+        detail: { entityId },
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(event);
+    }
+  }
+
+  getHoverEffect() {
+    if (!this._config.hover_effect || this._config.hover_effect === 'none') return '';
+    
+    const effects = {
+      'lift': `
+        .price-box:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+      `,
+      'glow': `
+        .price-box:hover {
+          box-shadow: 0 0 15px rgba(var(--rgb-primary-color), 0.5);
+        }
+      `,
+      'shake': `
+        @keyframes shake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-2px); }
+          75% { transform: translateX(2px); }
+        }
+        .price-box:hover {
+          animation: shake 0.3s ease-in-out;
+        }
+      `,
+      'pulse': `
+        @keyframes pulse {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.05); }
+          100% { transform: scale(1); }
+        }
+        .price-box:hover {
+          animation: pulse 0.5s ease-in-out;
+        }
+      `
+    };
+    
+    return effects[this._config.hover_effect] || '';
+  }
+
+  _getModeStyles() {
+    const mode = this._config.card_mode;
+    const isCompact = mode === 'compact';
+    const isSuperCompact = mode === 'super_compact';
+    
+    return {
+      card: {
+        padding: isSuperCompact ? '8px' : (isCompact ? '12px' : '16px')
+      },
+      header: {
+        fontSize: isCompact ? '18px' : '20px',
+        marginBottom: isCompact ? '12px' : '16px'
+      },
+      container: {
+        gap: isCompact ? '16px' : '24px'
+      },
+      priceBox: {
+        padding: isCompact ? '12px' : '16px'
+      },
+      priceLabel: {
+        fontSize: isCompact ? '12px' : '14px',
+        marginBottom: isCompact ? '4px' : '8px'
+      },
+      priceValue: {
+        fontSize: isCompact ? '20px' : '24px'
+      },
+      priceIcon: {
+        width: isCompact ? '20px' : '24px',
+        height: isCompact ? '20px' : '24px',
+        marginBottom: isCompact ? '4px' : '8px'
+      },
+      attribute: {
+        fontSize: isCompact ? '11px' : '12px',
+        marginTop: isCompact ? '4px' : '8px',
+        paddingTop: isCompact ? '4px' : '8px'
+      },
+      legend: {
+        gap: isCompact ? '16px' : '24px',
+        marginTop: isCompact ? '12px' : '16px',
+        paddingTop: isCompact ? '12px' : '16px',
+        fontSize: isCompact ? '11px' : '12px'
+      },
+      legendDot: {
+        width: isCompact ? '10px' : '12px',
+        height: isCompact ? '10px' : '12px'
+      },
+      widget: {
+        height: isCompact ? 40 : 50
+      }
+    };
+  }
+
+  render() {
+    if (!this._hass || !this._config) return;
+
+    const buyEntity = this._hass.states[this._config.buy_entity];
+    const sellEntity = this._hass.states[this._config.sell_entity];
+
+    if (!buyEntity || !sellEntity) {
+      this.shadowRoot.innerHTML = `
+        <ha-card>
+          <div style="padding: 16px;">
+            <div style="color: var(--error-color);">
+              ${this.translate('entity_not_found')}: ${this._config.buy_entity} or ${this._config.sell_entity}
+            </div>
+          </div>
+        </ha-card>
+      `;
+      return;
+    }
+
+    const mode = this._config.card_mode;
+    const isSuperCompact = mode === 'super_compact';
+    const styles = this._getModeStyles();
+    
+    const buyPrice = buyEntity.state;
+    const sellPrice = sellEntity.state;
+    const buyAlert = this.checkAlert('buy', buyPrice);
+    const sellAlert = this.checkAlert('sell', sellPrice);
+    const buyColor = this.getPriceColor(buyEntity, buyPrice, 'buy');
+    const sellColor = this.getPriceColor(sellEntity, sellPrice, 'sell');
+    
+    // Reset godzin przed pobraniem nowych wartości
+    this._remainingHours = null;
+    
+    const buyAttribute = this._config.attribute_config ? 
+      this.getAttributeValue(buyEntity, this._config.attribute_config) : null;
+    const sellAttribute = this._config.attribute_config ? 
+      this.getAttributeValue(sellEntity, this._config.attribute_config) : null;
+    const attributeLabel = this.getAttributeLabel(this._config.attribute_config);
+
+    // Generuj widgety
+    let buyWidgetHtml = '';
+    let sellWidgetHtml = '';
+    if (this._config.show_widget !== 'none' && !isSuperCompact) {
+      const buyData = this.generateWidgetData(buyEntity, 'buy');
+      const sellData = this.generateWidgetData(sellEntity, 'sell');
+      
+      if (this._config.debug) {
+        console.log('[PstrykCard] Buy widget data:', buyData);
+        console.log('[PstrykCard] Sell widget data:', sellData);
+      }
+      
+      if (this._config.show_widget === 'sparkline') {
+        if (buyData.data.length > 1) {
+          buyWidgetHtml = this.createSparkline(
+            buyData.data,
+            buyData.hours,
+            styles.widget.height,
+            buyColor,
+            buyData.currentIndex,
+            buyData.dotPosition,
+            'buy-sparkline'
+          );
+        }
+        if (sellData.data.length > 1) {
+          sellWidgetHtml = this.createSparkline(
+            sellData.data,
+            sellData.hours,
+            styles.widget.height,
+            sellColor,
+            sellData.currentIndex,
+            sellData.dotPosition,
+            'sell-sparkline'
+          );
+        }
+      } else if (this._config.show_widget === 'bars') {
+        if (buyData.data.length > 0) {
+          buyWidgetHtml = this.createBars(
+            buyData.data,
+            buyData.hours,
+            styles.widget.height,
+            buyColor,
+            buyData.currentIndex,
+            buyData.dotPosition,
+            'buy'
+          );
+        } else {
+          buyWidgetHtml = `
+            <div style="font-size: 11px; color: var(--secondary-text-color); margin-top: 8px; text-align: center;">
+              ${this.translate('no_data')} (Buy)
+            </div>
+          `;
+        }
+        
+        if (sellData.data.length > 0) {
+          sellWidgetHtml = this.createBars(
+            sellData.data,
+            sellData.hours,
+            styles.widget.height,
+            sellColor,
+            sellData.currentIndex,
+            sellData.dotPosition,
+            'sell'
+          );
+        } else {
+          sellWidgetHtml = `
+            <div style="font-size: 11px; color: var(--secondary-text-color); margin-top: 8px; text-align: center;">
+              ${this.translate('no_data')} (Sell)
+            </div>
+          `;
+        }
+      }
+    }
+
+    // Restart timer jeśli potrzebny
+    this._startRefreshTimer();
+
+    // Generowanie HTML elementów
+    const titleHtml = this._config.show_title && !isSuperCompact ? 
+      `<div class="header">${this._config.title}</div>` : '';
+    
+    const attributeHtml = (value) => {
+      if (isSuperCompact || !this._config.attribute_config || value === null) return '';
+      return `
+        <div class="attribute-info">
+          ${attributeLabel}: <span class="attribute-value">${this.formatPrice(value)}</span>
+        </div>
+      `;
+    };
+    
+    const legendHtml = this._config.show_legend && mode === 'full' ? `
+      <div class="legend">
+        <div class="legend-item">
+          <div class="legend-dot" style="background-color: #4ade80;"></div>
+          <span>${this.translate('best_prices')}</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-dot" style="background-color: var(--primary-text-color);"></div>
+          <span>${this.translate('normal_prices')}</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-dot" style="background-color: #f87171;"></div>
+          <span>${this.translate('worst_prices')}</span>
+        </div>
+      </div>
+    ` : '';
+
+    // Style specyficzne dla trybu super_compact
+    const superCompactStyles = isSuperCompact ? `
+      .prices-container {
+        grid-template-columns: 1fr 1fr;
+        gap: 8px !important;
+      }
+      .price-box {
+        padding: 8px !important;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .price-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+      }
+      .price-icon {
+        margin: 0 !important;
+        width: 16px !important;
+        height: 16px !important;
+      }
+      .price-label {
+        display: none;
+      }
+      .price-value {
+        font-size: 16px !important;
+        margin: 0 !important;
+      }
+    ` : '';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        ha-card {
+          padding: ${styles.card.padding};
+        }
+        .header {
+          font-size: ${styles.header.fontSize};
+          font-weight: 500;
+          margin-bottom: ${styles.header.marginBottom};
+          color: var(--primary-text-color);
+        }
+        .prices-container {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: ${styles.container.gap};
+        }
+        .price-box {
+          background-color: var(--card-background-color);
+          border-radius: 8px;
+          padding: ${styles.priceBox.padding};
+          border: 1px solid var(--divider-color);
+          text-align: center;
+          transition: all 0.3s ease;
+          cursor: ${this._config.click_action !== 'none' ? 'pointer' : 'default'};
+          position: relative;
+          overflow: hidden;
+        }
+        .price-label {
+          font-size: ${styles.priceLabel.fontSize};
+          color: var(--secondary-text-color);
+          margin-bottom: ${styles.priceLabel.marginBottom};
+        }
+        .price-value {
+          font-size: ${styles.priceValue.fontSize};
+          font-weight: 500;
+          margin-bottom: 4px;
+          transition: color 0.3s ease;
+        }
+        .price-icon {
+          width: ${styles.priceIcon.width};
+          height: ${styles.priceIcon.height};
+          margin: 0 auto ${styles.priceIcon.marginBottom};
+          opacity: 0.8;
+        }
+        .attribute-info {
+          font-size: ${styles.attribute.fontSize};
+          color: var(--secondary-text-color);
+          margin-top: ${styles.attribute.marginTop};
+          padding-top: ${styles.attribute.paddingTop};
+          border-top: 1px solid var(--divider-color);
+        }
+        .attribute-value {
+          font-weight: 500;
+        }
+        .legend {
+          display: flex;
+          justify-content: center;
+          gap: ${styles.legend.gap};
+          margin-top: ${styles.legend.marginTop};
+          padding-top: ${styles.legend.paddingTop};
+          border-top: 1px solid var(--divider-color);
+          font-size: ${styles.legend.fontSize};
+          color: var(--secondary-text-color);
+        }
+        .legend-item {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        .legend-dot {
+          width: ${styles.legendDot.width};
+          height: ${styles.legendDot.height};
+          border-radius: 50%;
+        }
+        .alert-badge {
+          position: absolute;
+          top: 4px;
+          right: 4px;
+          background-color: #ef4444;
+          color: white;
+          border-radius: 4px;
+          padding: 2px 6px;
+          font-size: 10px;
+          font-weight: 500;
+        }
+        @keyframes alertPulseBorder {
+          0%, 100% { 
+            border-color: var(--divider-color);
+            box-shadow: none;
+          }
+          50% { 
+            border-color: #ef4444;
+            box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+          }
+        }
+        .alert {
+          animation: alertPulseBorder 2s infinite;
+        }
+        ${this.getHoverEffect()}
+        ${superCompactStyles}
+      </style>
+      
+      <ha-card>
+        ${titleHtml}
+        
+        <div class="prices-container">
+          <div class="price-box ${buyAlert ? 'alert' : ''}">
+            ${buyAlert && !isSuperCompact ? `<div class="alert-badge">${this.translate('alert')}</div>` : ''}
+            ${isSuperCompact ? `
+              <div class="price-content">
+                <div class="price-icon">
+                  <ha-icon icon="mdi:transmission-tower-import" style="color: ${buyColor};"></ha-icon>
+                </div>
+                <div class="price-value" style="color: ${buyColor};">
+                  ${this.formatPrice(buyPrice)}
+                </div>
+              </div>
+            ` : `
+              <div class="price-icon">
+                <ha-icon icon="mdi:transmission-tower-import" style="color: ${buyColor};"></ha-icon>
+              </div>
+              <div class="price-label">${this.translate('buy_price')}</div>
+              <div class="price-value" style="color: ${buyColor};">
+                ${this.formatPrice(buyPrice)}
+              </div>
+              ${attributeHtml(buyAttribute)}
+              ${buyWidgetHtml}
+            `}
+          </div>
+          
+          <div class="price-box ${sellAlert ? 'alert' : ''}">
+            ${sellAlert && !isSuperCompact ? `<div class="alert-badge">${this.translate('alert')}</div>` : ''}
+            ${isSuperCompact ? `
+              <div class="price-content">
+                <div class="price-icon">
+                  <ha-icon icon="mdi:transmission-tower-export" style="color: ${sellColor};"></ha-icon>
+                </div>
+                <div class="price-value" style="color: ${sellColor};">
+                  ${this.formatPrice(sellPrice)}
+                </div>
+              </div>
+            ` : `
+              <div class="price-icon">
+                <ha-icon icon="mdi:transmission-tower-export" style="color: ${sellColor};"></ha-icon>
+              </div>
+              <div class="price-label">${this.translate('sell_price')}</div>
+              <div class="price-value" style="color: ${sellColor};">
+                ${this.formatPrice(sellPrice)}
+              </div>
+              ${attributeHtml(sellAttribute)}
+              ${sellWidgetHtml}
+            `}
+          </div>
+        </div>
+        
+        ${legendHtml}
+      </ha-card>
+    `;
+
+    // Dodaj event listenery po renderowaniu
+    if (this._config.click_action !== 'none') {
+      this.shadowRoot.querySelectorAll('.price-box').forEach((box, index) => {
+        const entityId = index === 0 ? this._config.buy_entity : this._config.sell_entity;
+        box.addEventListener('click', () => this.handleClick(entityId));
+      });
+    }
+  }
+}
+
+// Rejestracja karty
+customElements.define('pstryk-card', PstrykCard);
+
+// Dodaj do okna dla łatwego debugowania
+window.customCards = window.customCards || [];
+window.customCards.push({
+  type: 'pstryk-card',
+  name: 'Pstryk Energy Card',
+  description: 'Display energy prices with color coding, widgets (sparkline/bars), and alerts',
+  preview: true,
+  version: '4.1.0'
+});