<script lang="ts">
  import { createEventDispatcher } from "svelte";

  export let running = false;
  export let filterLiftEnabled = true;
  export let saveAsXlsx = false;
  export let locale: "zh-CN" | "en-US" = "zh-CN";
  export let lastProcessResult: {
    outputPath: string;
    groupsUsed: number;
    meanValue: number;
    threshold: number;
    rowsTotal: number;
    rowsKept: number;
  } | null = null;

  const dispatch = createEventDispatcher<{
    close: void;
    togglefilterlift: void;
    togglexlsx: void;
  }>();

  $: labels =
    locale === "zh-CN"
      ? {
          title: "开发工具配置",
          close: "关闭",
          status: "状态",
          connected: "已连接",
          disconnected: "未连接",
          filterLift: "导出后过滤抬起",
          filterLiftHint: "导出 CSV 时自动过滤掉抬起阶段的小值数据。",
          saveXlsx: "保存为 xlsx",
          saveXlsxHint: "将导出文件转换为 xlsx 格式。",
          lastResult: "最近一次处理",
          output: "输出文件",
          groups: "分组数",
          mean: "均值",
          threshold: "阈值",
          rows: "总行数",
          kept: "保留行数",
          rowsFlow: "行数变化"
        }
      : {
          title: "DevKit Config",
          close: "Close",
          status: "Status",
          connected: "Connected",
          disconnected: "Disconnected",
          filterLift: "Filter lift on export",
          filterLiftHint: "Automatically filter out small values from lift-off phases during CSV export.",
          saveXlsx: "Save as xlsx",
          saveXlsxHint: "Convert exported file to xlsx format.",
          lastResult: "Last process",
          output: "Output",
          groups: "Groups",
          mean: "Mean",
          threshold: "Threshold",
          rows: "Rows",
          kept: "Kept rows",
          rowsFlow: "Rows flow"
        };
</script>

<div class="dk-panel">
  <header class="dk-head">
    <h3 class="dk-title">{labels.title}</h3>
    <button type="button" class="dk-close" on:click={() => dispatch("close")} aria-label={labels.close}>
      <span></span><span></span>
    </button>
  </header>

  <section class="dk-section">
    <div class="dk-status-row">
      <span class="dk-dot" class:active={running}></span>
      <span class="dk-label">{labels.status}</span>
      <span class="dk-value">{running ? labels.connected : labels.disconnected}</span>
    </div>
  </section>

  <section class="dk-section">
    <button type="button" class="dk-toggle" class:active={filterLiftEnabled} on:click={() => dispatch("togglefilterlift")}>
      <span class="dk-toggle-indicator"></span>
      <div class="dk-toggle-text">
        <span class="dk-toggle-label">{labels.filterLift}</span>
        <span class="dk-toggle-hint">{labels.filterLiftHint}</span>
      </div>
    </button>
  </section>

  <section class="dk-section">
    <button type="button" class="dk-toggle" class:active={saveAsXlsx} on:click={() => dispatch("togglexlsx")}>
      <span class="dk-toggle-indicator"></span>
      <div class="dk-toggle-text">
        <span class="dk-toggle-label">{labels.saveXlsx}</span>
        <span class="dk-toggle-hint">{labels.saveXlsxHint}</span>
      </div>
    </button>
  </section>

  {#if lastProcessResult}
    <section class="dk-section dk-result">
      <p class="dk-section-title">{labels.lastResult}</p>
      <div class="dk-result-grid">
        <div class="dk-result-item">
          <span class="dk-result-label">{labels.output}</span>
          <span class="dk-result-value">{lastProcessResult.outputPath}</span>
        </div>
        <div class="dk-result-item">
          <span class="dk-result-label">{labels.groups}</span>
          <span class="dk-result-value">{lastProcessResult.groupsUsed}</span>
        </div>
        <div class="dk-result-item">
          <span class="dk-result-label">{labels.mean}</span>
          <span class="dk-result-value">{lastProcessResult.meanValue.toFixed(3)}</span>
        </div>
        <div class="dk-result-item">
          <span class="dk-result-label">{labels.threshold}</span>
          <span class="dk-result-value">{lastProcessResult.threshold.toFixed(3)}</span>
        </div>
        <div class="dk-result-item">
          <span class="dk-result-label">{labels.rowsFlow}</span>
          <span class="dk-result-value">{lastProcessResult.rowsTotal} -> {lastProcessResult.rowsKept}</span>
        </div>
      </div>
    </section>
  {/if}
</div>

<style>
  .dk-panel {
    display: grid;
    gap: 0.7rem;
    inline-size: min(22rem, 100%);
    padding: 0.9rem 0.96rem 1rem;
    border: 1px solid rgb(var(--hud-border-rgb) / 0.3);
    border-radius: 0.82rem;
    background:
      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-deep-rgb) / 0.88)),
      radial-gradient(circle at 100% 0, rgb(var(--hud-info-rgb) / 0.07), transparent 38%);
    box-shadow:
      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
      0 18px 46px rgb(0 0 0 / 0.28);
    backdrop-filter: blur(10px);
  }

  .dk-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dk-title {
    margin: 0;
    color: rgb(var(--hud-text-main-rgb) / 0.98);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .dk-close {
    position: relative;
    inline-size: 1.8rem;
    block-size: 1.8rem;
    border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
    border-radius: 999px;
    background: rgb(var(--hud-surface-deep-rgb) / 0.72);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .dk-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    inline-size: 0.7rem;
    block-size: 1px;
    background: rgb(var(--hud-text-main-rgb) / 0.9);
    transform-origin: center;
  }

  .dk-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
  .dk-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

  .dk-section {
    display: grid;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgb(var(--hud-border-rgb) / 0.22);
    border-radius: 0.68rem;
    background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.76), rgb(var(--hud-surface-deep-rgb) / 0.64));
  }

  .dk-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .dk-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: rgb(var(--hud-text-dim-rgb) / 0.8);
    transition: background 200ms ease;
  }

  .dk-dot.active {
    background: rgb(var(--hud-lime-rgb) / 0.95);
    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
  }

  .dk-label {
    color: rgb(var(--hud-text-dim-rgb) / 0.8);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dk-value {
    color: rgb(var(--hud-text-main-rgb) / 0.96);
    font-size: 0.82rem;
    font-weight: 500;
    margin-inline-start: auto;
  }

  .dk-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid rgb(var(--hud-border-rgb) / 0.24);
    border-radius: 0.58rem;
    padding: 0.55rem 0.65rem;
    background: rgb(var(--hud-surface-rgb) / 0.82);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .dk-toggle:hover {
    border-color: rgb(var(--hud-cyan-rgb) / 0.36);
  }

  .dk-toggle.active {
    border-color: rgb(var(--hud-lime-rgb) / 0.48);
    box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08), 0 0 14px rgb(var(--hud-glow-alt-rgb) / 0.12);
  }

  .dk-toggle-indicator {
    inline-size: 0.56rem;
    block-size: 0.56rem;
    min-inline-size: 0.56rem;
    border-radius: 50%;
    margin-block-start: 0.15rem;
    background: rgb(var(--hud-text-dim-rgb) / 0.7);
    transition: background 180ms ease;
  }

  .dk-toggle.active .dk-toggle-indicator {
    background: rgb(var(--hud-lime-rgb) / 0.92);
    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
  }

  .dk-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .dk-toggle-label {
    color: rgb(var(--hud-text-main-rgb) / 0.96);
    font-size: 0.78rem;
    font-weight: 500;
  }

  .dk-toggle-hint {
    color: rgb(var(--hud-text-dim-rgb) / 0.7);
    font-size: 0.64rem;
    line-height: 1.35;
  }

  .dk-section-title {
    margin: 0;
    color: rgb(var(--hud-text-dim-rgb) / 0.8);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .dk-result {
    display: grid;
    gap: 0.45rem;
  }

  .dk-result-grid {
    display: grid;
    gap: 0.3rem;
  }

  .dk-result-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.14);
  }

  .dk-result-item:last-child {
    border-bottom: none;
  }

  .dk-result-label {
    color: rgb(var(--hud-text-dim-rgb) / 0.72);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .dk-result-value {
    color: rgb(var(--hud-text-main-rgb) / 0.94);
    font-size: 0.76rem;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
  }
</style>
