#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

// Warna Hex Custom
#define NAVY_BLUE 0x001F
#define DARK_GREY 0x3186
#define LIGHT_GREY 0x7BEF

void setup() {
  tft.init();
  tft.setRotation(1); // Landscape 320x240
  tft.fillScreen(TFT_BLACK);

  // --- 1. GAMBAR HEADER ---
  tft.fillRect(0, 0, 320, 45, NAVY_BLUE);
  tft.drawFastHLine(0, 45, 320, LIGHT_GREY);
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(2);
  String title = "6 BANK BMS SYSTEM";
  tft.setCursor((320 - tft.textWidth(title)) / 2, 15);
  tft.print(title);

  // Tombol Charger Merah di pojok kanan header
  tft.fillRoundRect(230, 7, 80, 30, 4, TFT_RED);
  tft.setTextSize(1);
  tft.setCursor(245, 17);
  tft.print("CHARGER");

  // --- 2. KONFIGURASI DIMENSI BAR ---
  int startX = 12;      // Margin kiri
  int startY = 75;      // Posisi Y bar
  int barW = 42;        // Lebar tiap bar
  int barH = 90;        // Tinggi tiap bar
  int gap = 10;         // Jarak antar bar

  // Data Dummy untuk visualisasi
  float dummySOC[] = {100, 85, 60, 45, 20, 10};
  float dummyVolt[] = {54.2, 53.8, 52.1, 51.5, 49.8, 48.2};
  float dummyCurr[] = {15.2, 10.5, 0.0, -2.5, -8.1, -12.0};

  // --- 3. LOOP MENGGAMBAR 6 BANK ---
  for (int i = 0; i < 6; i++) {
    int x = startX + i * (barW + gap);

    // A. Gambar Outline/Bingkai Baterai
    tft.drawRoundRect(x, startY, barW, barH, 3, TFT_WHITE);
    tft.fillRect(x + (barW/4), startY - 4, barW/2, 4, TFT_WHITE); // Kepala Baterai

    // B. Tentukan Warna berdasarkan SOC
    uint16_t color;
    if (dummySOC[i] > 75) color = TFT_GREEN;
    else if (dummySOC[i] > 40) color = TFT_YELLOW;
    else color = TFT_RED;

    // C. Gambar Isi Baterai (Fill)
    int fillHeight = (int)((barH - 4) * (dummySOC[i] / 100.0));
    tft.fillRect(x + 2, startY + barH - fillHeight - 2, barW - 4, fillHeight, color);

    // D. Teks Persentase (di atas bar)
    tft.setTextColor(color);
    tft.setTextSize(1);
    tft.setCursor(x + 8, startY - 15);
    tft.print((int)dummySOC[i]); tft.print("%");

    // E. Label Nama (SAC / JIK)
    tft.setTextColor(LIGHT_GREY);
    tft.setCursor(x + 2, startY + barH + 8);
    tft.print(i < 3 ? "SAC-" : "JIK-");
    tft.print(i + 1);

    // F. Data Voltase & Arus (di bawah bar)
    tft.setTextColor(TFT_WHITE);
    tft.setCursor(x, startY + barH + 22);
    tft.printf("%.1fV", dummyVolt[i]);

    tft.setCursor(x, startY + barH + 32);
    tft.setTextColor(dummyCurr[i] >= 0 ? TFT_GREEN : TFT_RED);
    tft.printf("%s%.1fA", dummyCurr[i] >= 0 ? "+" : "", dummyCurr[i]);
  }

  // --- 4. GAMBAR FOOTER ---
  tft.drawFastHLine(10, 215, 300, DARK_GREY);
  tft.setTextColor(LIGHT_GREY);
  tft.setTextSize(1);
  tft.setCursor(10, 222);
  tft.print("Status: System Online | Auto Mode: ");
  tft.setTextColor(TFT_GREEN);
  tft.print("ACTIVE");
}

void loop() {
  // Kosong karena kita hanya ingin melihat gambar diam (static)
}