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

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.setRotation(1); 
  tft.fillScreen(TFT_BLACK);

  // --- HEADER (Disesuaikan ke 320) ---
  tft.fillRect(0, 0, 320, 35, 0x001F);
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(1); // Size 1 agar tidak penuh
  tft.setCursor(45, 12);
  tft.print("CHARGER CONTROL - DUAL PARAM");

  // --- MAIN CONTAINER ---
  tft.fillRoundRect(5, 40, 310, 195, 5, 0x2104);
  tft.drawRoundRect(5, 40, 310, 195, 5, 0x7BEF);

  // Tombol Utama (Lebar diperkecil dari 100 ke 65)
  tft.setTextSize(1);
  for(int i=0; i<3; i++) {
    int x = 15 + (i * 75);
    tft.drawRoundRect(x, 50, 65, 30, 4, TFT_WHITE);
  }
  tft.setCursor(30, 60); tft.print("TURN");
  tft.setCursor(105, 60); tft.print("MODE");
  tft.setCursor(180, 60); tft.print("CYCLE");

  // --- LEFT PANEL (Settings) ---
  tft.fillRect(10, 90, 145, 110, 0x1082);
  tft.drawRect(10, 90, 145, 110, 0x7BEF);
  tft.setCursor(15, 95); tft.print("DUAL PARAM SETTINGS");

  // Tombol +/- (Disusun lebih rapat)
  for(int i=0; i<4; i++) {
    int y = 110 + (i * 22);
    tft.setCursor(15, y + 5);
    tft.print(i < 2 ? "ON:" : "OFF:");
    tft.drawRoundRect(85, y, 20, 18, 3, (i<2 ? 0x07E0 : 0xF800));
    tft.drawRoundRect(110, y, 20, 18, 3, (i<2 ? 0x07E0 : 0xF800));
  }

  // --- RIGHT PANEL (Cycle) ---
  tft.fillRect(160, 90, 145, 75, 0x1082);
  tft.drawRect(160, 90, 145, 75, 0x7BEF);
  tft.setCursor(165, 95); tft.print("CYCLE TIMER");
  
  // Footer Logika
  tft.setTextSize(1);
  tft.setTextColor(0x7BEF);
  tft.setCursor(10, 215);
  tft.print("ON: V<48.0 & S<20% | OFF: V>54.0 & S>95%");

  // Tombol Charger Merah di pojok kanan header
  //tombol back atau charger .fungsi void drawHeader(string stile)
  tft.fillRoundRect(230, 3, 80, 30, 3, TFT_RED);
  tft.setTextColor(TFT_GREEN);
  tft.setTextSize(2);
  tft.setCursor(245, 13);
  tft.print("BACK");

}

void loop() {}