<?php
/* DTC Module – Premium View */
$status_text = $status_text ?? "Binary bekleniyor";
$ui_lang = $ui_lang ?? ($_SESSION["ui_lang"] ?? "tr");

/* Load DTC DB */
$dtc_rows = [];
try{
  $db_path = __DIR__ . "/data/dtc_db.json";
  if(file_exists($db_path)){
    $db = json_decode(file_get_contents($db_path), true);
    if(is_array($db) && isset($db["obd2"]) && is_array($db["obd2"])){
      foreach($db["obd2"] as $code=>$desc){
        $dtc_rows[] = [
          "status"=>"OK",
          "tip"=>"OBD2",
          "kod"=>strtoupper((string)$code),
          "fmi"=>"-",
          "acik"=>(string)$desc,
          "hex"=>"",
          "adet"=>1,
          "durum"=>"ON"
        ];
      }
    }
  }
}catch(Exception $e){}
$obd2_count = 0; $oem_count = 0;
?>

<div class="dtc-premium-container">
  <style>
    /* PREMIUM DTC UI - CYBER CRYSTAL STYLE */
    @keyframes scanShimmer{0%{transform:translateX(-60%);}100%{transform:translateX(60%);}}

    .dtc-premium-container { padding-bottom: 50px; }
    .scan-shimmer{animation:scanShimmer 1.2s linear infinite;}

    
    /* Header Stats */
    .dtc-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
    .stat-card {
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 20px;
      backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      gap: 15px;
      transition: all 0.3s ease;
    }
    .stat-card:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: translateY(-3px); }
    .stat-icon { font-size: 24px; width: 50px; height: 50px; background: rgba(255,255,255,0.03); border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); }
    .stat-meta { display: flex; flex-direction: column; }
    .stat-label { font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
    .stat-value { font-size: 16px; font-weight: 800; color: #fff; }

    /* Workspace */
    .dtc-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
    .dtc-card {
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: 28px;
      padding: 30px;
      backdrop-filter: blur(25px);
      min-height: 350px;
      display: flex;
      flex-direction: column;
    }
    .dtc-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
    .dtc-card-t { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }

    /* Upload Area */
    .dtc-drop-zone {
      flex: 1;
      border: 2px dashed rgba(255,255,255,0.08);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(255,255,255,0.01);
      position: relative;
      overflow: hidden;
    }
    .dtc-drop-zone:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.02); }
    .dtc-drop-icon { font-size: 40px; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.3)); }
    .dtc-drop-text { font-size: 14px; font-weight: 800; color: #fff; }
    .dtc-drop-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 5px; font-weight: 600; }

    /* Selected List */
    .selected-container { flex: 1; background: rgba(0,0,0,0.2); border-radius: 18px; padding: 20px; overflow-y: auto; max-height: 200px; }
    .selected-container::-webkit-scrollbar { width: 4px; }
    .selected-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
    .empty-msg { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 13px; font-weight: 600; font-style: italic; }

    /* Table Section */
    .dtc-table-card {
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: 28px;
      padding: 30px;
      backdrop-filter: blur(25px);
    }
    .table-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
    .dtc-search-wrap { position: relative; width: 300px; }
    .dtc-search-wrap input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 12px 15px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      outline: none;
      transition: all 0.3s ease;
    }
    .dtc-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1); }

    .premium-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .premium-table th { 
      text-align: left; padding: 18px 15px; 
      font-size: 11px; font-weight: 800; 
      color: rgba(255,255,255,0.4); 
      text-transform: uppercase; letter-spacing: 1px;
      border-bottom: 1px solid var(--border-light);
    }
    .premium-table td { 
      padding: 18px 15px; font-size: 13px; font-weight: 700; color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .premium-table tr:last-child td { border-bottom: none; }
    .premium-table tr:hover td { background: rgba(255,255,255,0.01); }
    
    .badge-tip { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; }
    .badge-status { color: #00ff8c; font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
    .badge-status::before { content: ''; width: 6px; height: 6px; background: #00ff8c; border-radius: 50%; box-shadow: 0 0 8px #00ff8c; }
  </style>

  <!-- STATS -->
  <section class="dtc-stats-grid">
    <div class="stat-card">
      <div class="stat-icon">🚗</div>
      <div class="stat-meta">
        <span class="stat-label">MARKA</span>
        <span class="stat-value" id="statBrand">-</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">🧠</div>
      <div class="stat-meta">
        <span class="stat-label">ECU</span>
        <span class="stat-value" id="statEcu">-</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">🟡</div>
      <div class="stat-meta">
        <span class="stat-label">OEM</span>
        <span class="stat-value" id="statOem">0</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">🟢</div>
      <div class="stat-meta">
        <span class="stat-label">OBD2</span>
        <span class="stat-value" id="statObd2">0</span>
      </div>
    </div>
  </section>

  <!-- WORKSPACE -->
  <section class="dtc-workspace">
    <div class="dtc-card">
      <div class="dtc-card-h">
        <span class="dtc-card-t">1. Veri Girişi</span>
        <span style="font-size: 10px; font-weight: 800; background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 8px; color: rgba(255,255,255,0.4);">BINARY</span>
      </div>
      <div class="dtc-drop-zone" onclick="document.getElementById('binFile').click()">
        <div class="dtc-drop-icon">🛡️</div>
        <div class="dtc-drop-text">BINARY DOSYASI SEÇ</div>
        <div class="dtc-drop-sub">Sürükle veya tıkla</div>
        <div id="scanVisuals" style="display:none; margin-top:12px; width:100%;">
          <div style="display:flex; gap:10px; justify-content:center; flex-wrap:wrap;">
            <div class="scan-card" style="width:150px; height:70px; border-radius:14px; border:1px solid var(--border-light); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
              <div class="scan-shimmer" style="position:absolute; inset:-40px; background:linear-gradient(120deg, transparent, rgba(var(--accent-rgb),0.18), transparent); transform:translateX(-60%);"></div>
              <div style="font-weight:900; letter-spacing:1px; opacity:.9;">HEX SCAN</div>
            </div>
            <div class="scan-card" style="width:150px; height:70px; border-radius:14px; border:1px solid var(--border-light); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
              <div class="scan-shimmer" style="position:absolute; inset:-40px; background:linear-gradient(120deg, transparent, rgba(0,255,120,0.16), transparent); transform:translateX(-60%);"></div>
              <div style="font-weight:900; letter-spacing:1px; opacity:.9;">DTC MAP</div>
            </div>
          </div>
          <div style="margin-top:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight:900; font-size:12px; color:rgba(255,255,255,0.85); text-align:center;">
            <span id="hexAnimInDrop" style="display:inline-block;"></span>
          </div>
        </div>
        <input type="file" id="binFile" accept=".bin,.ori,.dat" hidden onchange="window.DTC_UI && window.DTC_UI.onFileChange && window.DTC_UI.onFileChange(this)" />
      </div>

      <div class="dtc-upload-status" style="margin-top:14px; font-size:12px; font-weight:800; color:rgba(255,255,255,0.65); text-align:center;">
        <span id="matchStatus" style="display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--border-light); background:rgba(255,255,255,0.03);">Binary bekleniyor</span>
        <span id="alignMsg" style="display:none"></span>
        <span id="hexAnim" style="display:none; margin-left:10px; font-weight:900; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color:rgba(0,255,140,0.75);"></span>
      </div>
    </div>

    <div class="dtc-card">
      <div class="dtc-card-h">
        <span class="dtc-card-t">2. Seçilen Hatalar</span>
        <button class="btn primary" style="padding: 8px 20px; border-radius: 12px; font-size: 12px; font-weight: 800;" id="patchBtn">PATCH & DOWNLOAD</button>
      </div>
      <div class="selected-container" id="selectedList">
        <div class="empty-msg" id="selectedEmpty">Henüz bir seçim yapılmadı</div>
      </div>
      <p style="font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 15px; font-weight: 600; text-align: center;">
        <span style="color: var(--accent);">!</span> Seçilen tüm DTC kodları binary üzerinden patch edilecektir.
      </p>
    </div>
  </section>

  <!-- TABLE -->
  <section class="dtc-table-card">
    <div class="table-controls">
      <span class="dtc-card-t">DTC Listesi</span>
      <div class="dtc-search-wrap" style="display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--border-light); background:rgba(255,255,255,0.03); min-width:360px;">
        <span style="opacity:.7; font-weight:900;">🔎</span>
        <input type="text" id="dtcSearch" placeholder="DTC kodu / açıklama ara…" style="flex:1; background:transparent; border:0; outline:0; color:#fff; font-weight:800;" />
        <button type="button" id="dtcSearchClear" style="display:none; cursor:pointer; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.06); color:#fff; font-weight:900; padding:6px 10px; border-radius:10px;">X</button>
      </div>
    </div>
    <div style="overflow-x: auto;">
      <table class="premium-table">
        <thead>
          <tr>
            <th>STATUS</th><th>TİP</th><th>KOD</th><th>FMI</th><th>Açıklama</th><th>HEX</th><th>Adet</th><th>DURUM</th>
          </tr>
        </thead>
        <tbody id="dtcTbody"><tr><td colspan="8" style="text-align:center; padding:50px; color: rgba(255,255,255,0.35); font-weight:800;">Binary yükle → DTC listesi hazırlanacak</td></tr></tbody>
      </table>
    </div>
  </section>
</div>