@extends('layouts.app')

@section('title', '編輯主機')

@push('styles')
<link href="/vendor/select2/css/select2.min.css" rel="stylesheet">
<link href="/vendor/select2/css/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<style>
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
</style>
@endpush

@section('content')
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-12 col-lg-9 col-xxl-7">

      <div class="card shadow-lg border-0 rounded-4 overflow-hidden">

        {{-- 標頭 --}}
        <div class="card-header border-0 py-4 px-5 d-flex align-items-center justify-content-between"
             style="background:linear-gradient(135deg,#eff6ff,#dbeafe);">
          <h4 class="fw-bold mb-0 d-flex align-items-center gap-3">
            <span class="d-flex align-items-center justify-content-center rounded-3 flex-shrink-0"
                  style="width:42px;height:42px;background:#2563eb;">
              <i class="bi bi-pencil-fill text-white" style="font-size:.9rem;"></i>
            </span>
            編輯主機
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-1"
                  style="font-size:.75rem;font-weight:500;">{{ $host->name }}</span>
          </h4>
          <a href="{{ route('hosts.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>返回主機清單
          </a>
        </div>

        <div class="card-body px-5 py-4">
          <form action="{{ route('hosts.update', $host) }}" method="post" autocomplete="off">
            @csrf
            @method('PUT')

            {{-- ─── 識別資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-tag-fill text-primary"></i>識別資訊</div>
              <div class="row g-3">

                {{-- 關聯專案 + 主機類型 同一行 --}}
                <div class="col-md-7">
                  <label for="project_id" class="form-label small fw-semibold text-secondary">關聯專案</label>
                  <select name="project_id" id="project_id"
                    class="form-select @error('project_id') is-invalid @enderror" required>
                    <option value="">— 請選擇 —</option>
                    @foreach ($projects as $p)
                      <option value="{{ $p->id }}"
                        {{ old('project_id', $host->project_id) == $p->id ? 'selected' : '' }}>
                        {{ $p->client?->name ?? '未分類' }} ／ {{ $p->name }}
                      </option>
                    @endforeach
                  </select>
                  @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-5">
                  <label for="host_type" class="form-label small fw-semibold text-secondary">
                    主機類型 <span class="text-muted fw-normal">（選填）</span>
                  </label>
                  <select name="host_type" id="host_type" class="form-select">
                    <option value="">— 不指定 —</option>
                    @foreach(\App\Models\Host::TYPES as $key => $t)
                      <option value="{{ $key }}"
                        {{ old('host_type', $host->host_type) === $key ? 'selected' : '' }}>
                        {{ $t['label'] }}
                      </option>
                    @endforeach
                  </select>
                </div>

                {{-- 主機名稱 + 作業系統 + 狀態 同一行 --}}
                <div class="col-md-5">
                  <label for="name" class="form-label small fw-semibold text-secondary">主機名稱</label>
                  <input type="text" name="name" id="name"
                    class="form-control @error('name') is-invalid @enderror"
                    value="{{ old('name', $host->name) }}" required placeholder="例：Web 主機、DB 主機">
                  @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-3">
                  <label for="os_type" class="form-label small fw-semibold text-secondary">作業系統</label>
                  <select name="os_type" id="os_type" class="form-select">
                    <option value="linux"   {{ old('os_type', $host->os_type ?? 'linux') === 'linux'   ? 'selected' : '' }}>🐧 Linux</option>
                    <option value="windows" {{ old('os_type', $host->os_type ?? 'linux') === 'windows' ? 'selected' : '' }}>🪟 Windows</option>
                  </select>
                </div>

                <div class="col-md-4">
                  <label for="host_status" class="form-label small fw-semibold text-secondary">狀態</label>
                  <select name="host_status" id="host_status" class="form-select">
                    @foreach(\App\Models\Host::STATUS_OPTIONS as $opt)
                      @php $meta = \App\Models\Host::STATUS_META[$opt]; @endphp
                      <option value="{{ $opt }}"
                        {{ old('host_status', $host->host_status ?? '進行中') === $opt ? 'selected' : '' }}>
                        {{ $opt }}{{ $opt === '結束' ? '（過保不維護）' : '' }}
                      </option>
                    @endforeach
                  </select>
                  <div class="form-text text-muted" id="statusHint" style="font-size:.72rem;"></div>
                </div>

              </div>
            </div>

            {{-- ─── 網路資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-hdd-network-fill text-primary"></i>網路資訊</div>
              <div class="row g-3">

                {{-- IP 位址 + Port + API 網址 同一行 --}}
                <div class="col-md-3">
                  <label for="ip_address" class="form-label small fw-semibold text-secondary">IP 位址</label>
                  <input type="text" name="ip_address" id="ip_address"
                    class="form-control font-monospace @error('ip_address') is-invalid @enderror"
                    value="{{ old('ip_address', $host->ip_address) }}" placeholder="192.168.1.1">
                  @error('ip_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-2">
                  <label for="port" class="form-label small fw-semibold text-secondary">Port</label>
                  <input type="number" name="port" id="port"
                    class="form-control @error('port') is-invalid @enderror"
                    value="{{ old('port', $host->port) }}" min="1" max="65535" placeholder="22">
                  @error('port')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-7">
                  <label for="api_url" class="form-label small fw-semibold text-secondary">
                    API 網址 <span class="text-muted fw-normal">（選填）</span>
                  </label>
                  <div class="input-group">
                    <span class="input-group-text text-muted"><i class="bi bi-link-45deg"></i></span>
                    <input type="url" name="api_url" id="api_url"
                      class="form-control @error('api_url') is-invalid @enderror"
                      value="{{ old('api_url', $host->api_url) }}" placeholder="https://example.com">
                    @error('api_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                </div>

              </div>
            </div>

            {{-- ─── 認證資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-key-fill text-warning"></i>認證資訊</div>
              <div class="row g-3">

                <div class="col-md-6">
                  <label for="username" class="form-label small fw-semibold text-secondary">帳號</label>
                  <input type="text" name="username" id="username"
                    class="form-control @error('username') is-invalid @enderror"
                    value="{{ old('username', $host->username) }}" placeholder="root / admin">
                  @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                  <label for="password" class="form-label small fw-semibold text-secondary">密碼</label>
                  <div class="input-group">
                    <input type="password" name="password" id="password"
                      class="form-control @error('password') is-invalid @enderror"
                      value="{{ old('password', $host->password) }}">
                    <button class="btn btn-outline-secondary" type="button" id="togglePassword" tabindex="-1">
                      <i class="bi bi-eye" id="eyeIcon"></i>
                    </button>
                  </div>
                  @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

              </div>
            </div>

            {{-- 告警閾值（個別覆蓋） --}}
            @php
              $gCpu       = \App\Models\SystemSetting::get('host_alert_cpu',           85);
              $gMem       = \App\Models\SystemSetting::get('host_alert_mem',           85);
              $gDisk      = \App\Models\SystemSetting::get('host_alert_disk',          80);
              $gCpuCrit   = \App\Models\SystemSetting::get('host_alert_cpu_critical',  95);
              $gMemCrit   = \App\Models\SystemSetting::get('host_alert_mem_critical',  95);
              $gDiskCrit  = \App\Models\SystemSetting::get('host_alert_disk_critical', 90);
            @endphp
            <div class="mb-3">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="fw-semibold small text-secondary">
                  <i class="bi bi-bell me-1"></i>告警閾值
                </span>
                <small class="text-muted">留空則沿用全域設定</small>
                <a href="{{ route('hosts.monitor-settings.edit') }}" class="ms-auto btn btn-outline-secondary btn-sm" style="font-size:.75rem;">
                  <i class="bi bi-gear me-1"></i>修改全域設定
                </a>
              </div>
              <div class="table-responsive"><table class="table table-sm table-bordered align-middle mb-0" style="font-size:.82rem;">
                <thead class="table-light text-center">
                  <tr>
                    <th style="width:90px"></th>
                    <th>警告（中）<br><small class="text-muted fw-normal">超過→推播</small></th>
                    <th>嚴重（高）<br><small class="text-muted fw-normal">超過/多項/連3次→寄信</small></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><i class="bi bi-cpu text-primary me-1"></i>CPU</td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="cpu_alert_threshold" class="form-control"
                               value="{{ old('cpu_alert_threshold', $host->cpu_alert_threshold) }}"
                               placeholder="全域 {{ $gCpu }}%" min="1" max="99">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="cpu_alert_critical" class="form-control"
                               value="{{ old('cpu_alert_critical', $host->cpu_alert_critical) }}"
                               placeholder="全域 {{ $gCpuCrit }}%" min="1" max="100">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><i class="bi bi-memory text-success me-1"></i>記憶體</td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="mem_alert_threshold" class="form-control"
                               value="{{ old('mem_alert_threshold', $host->mem_alert_threshold) }}"
                               placeholder="全域 {{ $gMem }}%" min="1" max="99">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="mem_alert_critical" class="form-control"
                               value="{{ old('mem_alert_critical', $host->mem_alert_critical) }}"
                               placeholder="全域 {{ $gMemCrit }}%" min="1" max="100">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><i class="bi bi-hdd text-warning me-1"></i>磁碟</td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="disk_alert_threshold" class="form-control"
                               value="{{ old('disk_alert_threshold', $host->disk_alert_threshold) }}"
                               placeholder="全域 {{ $gDisk }}%" min="1" max="99">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                    <td>
                      <div class="input-group input-group-sm">
                        <input type="number" name="disk_alert_critical" class="form-control"
                               value="{{ old('disk_alert_critical', $host->disk_alert_critical) }}"
                               placeholder="全域 {{ $gDiskCrit }}%" min="1" max="100">
                        <span class="input-group-text">%</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table></div>
            </div>

            {{-- 告警通知信箱 --}}
            <div class="mb-3 mt-3">
              <label class="form-label small fw-semibold">
                <i class="bi bi-envelope me-1 text-info"></i>告警通知信箱
                <span class="text-muted fw-normal ms-1">（選填，多個以逗號分隔）</span>
              </label>
              <input type="text" name="alert_email" class="form-control form-control-sm"
                     value="{{ old('alert_email', $host->alert_email) }}"
                     placeholder="留空則依全域設定，最終預設寄給管理員帳號">
              <div class="form-text text-muted small">例：ops@example.com, manager@example.com</div>
            </div>

            {{-- 按鈕 --}}
            <div class="d-flex justify-content-end gap-2 pt-2">
              <a href="{{ route('hosts.index') }}" class="btn btn-outline-secondary px-4">
                <i class="bi bi-x-lg me-1"></i>取消
              </a>
              <button type="submit" class="btn btn-primary px-5">
                <i class="bi bi-save me-1"></i>更新主機
              </button>
            </div>

          </form>
        </div>
      </div>

      {{-- Agent Token --}}
      <div class="card shadow-lg border-0 rounded-4 overflow-hidden mt-4">
        <div class="card-header border-0 py-3 px-5 bg-dark bg-opacity-75 text-white">
          <i class="bi bi-cpu me-2"></i>監控 Agent 設定
        </div>
        <div class="card-body px-5 py-4">
          <p class="text-muted small mb-3">
            在目標主機安裝 Agent 後，Agent 會每 5 分鐘自動推送系統報告到本平台。<br>
            適用於無法對外開放 API 的主機（DB、檔案伺服器、內部 IP 等）。
          </p>

          @if ($host->agent_token)
            <div class="mb-3">
              <label class="form-label small fw-semibold text-secondary">目前 Token</label>
              <div class="input-group">
                <input type="password" id="agentToken" class="form-control font-monospace"
                       value="{{ $host->agent_token }}" readonly>
                <button class="btn btn-outline-secondary" type="button" onclick="toggleToken()">
                  <i class="bi bi-eye" id="tokenEyeIcon"></i>
                </button>
                <button class="btn btn-outline-secondary" type="button" onclick="copyToken()">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
              @if ($host->agent_last_report_at)
                <small class="text-success">
                  <i class="bi bi-check-circle me-1"></i>最後回報：{{ $host->agent_last_report_at->diffForHumans() }}
                </small>
              @else
                <small class="text-warning"><i class="bi bi-clock me-1"></i>尚未收到任何回報</small>
              @endif
            </div>

            <div class="mb-4">
              <label class="form-label small fw-semibold text-secondary">一鍵安裝指令</label>
              @php
                $installerUrl = url("/api/agent/installer/{$host->agent_token}");
                $isWin = ($host->os_type ?? 'linux') === 'windows';
                $installCmdVal = $isWin
                  ? 'iex (New-Object Net.WebClient).DownloadString("' . $installerUrl . '")'
                  : 'bash <(curl -fsSL "' . $installerUrl . '")';
                $installNote = $isWin
                  ? '以系統管理員開啟 PowerShell 執行（需 PowerShell 5.1+）'
                  : '在目標主機以 root 執行此指令即可安裝並啟動 Agent';
              @endphp
              <div class="input-group">
                <span class="input-group-text text-muted small px-2">
                  {!! $isWin ? '🪟 PS' : '🐧 SH' !!}
                </span>
                <input type="text" id="installCmd" class="form-control font-monospace small" readonly
                       value="{{ $installCmdVal }}">
                <button class="btn btn-outline-secondary" type="button" onclick="copyInstall()">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
              <small class="text-muted">{{ $installNote }}</small>
              @if($isWin)
              <div class="mt-1 small text-warning">
                <i class="bi bi-exclamation-triangle me-1"></i>若出現執行原則限制，請先執行：
                <code>Set-ExecutionPolicy RemoteSigned -Scope CurrentUser</code>
              </div>
              @endif
            </div>
          @endif

          @if ($host->agent_token)
          <div class="mb-3">
            <label class="form-label small fw-semibold text-secondary" for="_av_paths_only">
              <i class="bi bi-shield-fill-check me-1"></i>掃毒掃描路徑
            </label>
            <form method="POST" action="{{ route('hosts.update', $host) }}" id="avPathsForm">
              @csrf @method('PUT')
              <input type="hidden" name="_av_paths_only" value="1" id="_av_paths_only">
              <textarea name="av_scan_paths_text" class="form-control font-monospace small" rows="4"
                placeholder="/var/www&#10;/home&#10;/tmp&#10;/etc">{{ implode("\n", $host->av_scan_paths ?? ['/var/www', '/home', '/tmp']) }}</textarea>
              <div class="d-flex align-items-center gap-2 mt-2">
                <button type="submit" class="btn btn-outline-primary btn-sm">
                  <i class="bi bi-floppy me-1"></i>儲存路徑
                </button>
                <small class="text-muted">每行一個路徑，儲存後重新安裝 Agent 即生效</small>
              </div>
            </form>
          </div>
          @endif

          <form method="POST" action="{{ route('hosts.generate-token', $host) }}" id="genTokenForm">
            @csrf
            <button type="submit" class="btn btn-outline-primary btn-sm">
              <i class="bi bi-arrow-repeat me-1"></i>
              {{ $host->agent_token ? '重新產生 Token' : '產生 Agent Token' }}
            </button>
            @if ($host->agent_token)
              <small class="text-danger ms-2">重新產生後舊 Token 立即失效，需重新安裝 Agent</small>
            @endif
          </form>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const pwd = document.getElementById('password');
  const btn = document.getElementById('togglePassword');
  const ico = document.getElementById('eyeIcon');
  btn.addEventListener('click', function () {
    pwd.type = pwd.type === 'password' ? 'text' : 'password';
    ico.classList.toggle('bi-eye');
    ico.classList.toggle('bi-eye-slash');
  });

  // 產生 token 用 AJAX，頁面不刷新
  const genForm = document.getElementById('genTokenForm');
  if (genForm) {
    genForm.addEventListener('submit', function (e) {
      e.preventDefault();
      if (!confirm('確定要產生新 Token？')) return;
      fetch(genForm.action, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
      })
      .then(r => r.json())
      .then(d => {
        if (d.token) location.reload();
      });
    });
  }
});

function toggleToken() {
  const inp = document.getElementById('agentToken');
  const ico = document.getElementById('tokenEyeIcon');
  inp.type = inp.type === 'password' ? 'text' : 'password';
  ico.classList.toggle('bi-eye');
  ico.classList.toggle('bi-eye-slash');
}
function copyToken() {
  const val = document.getElementById('agentToken').value;
  navigator.clipboard.writeText(val);
}
function copyInstall() {
  const val = document.getElementById('installCmd').value;
  navigator.clipboard.writeText(val);
}
</script>
@endsection

@push('scripts')
<script src="/vendor/select2/js/select2.min.js"></script>
<script>
@php $projectTypes = $projects->pluck('project_type', 'id'); @endphp
const PROJECT_TYPES = @json($projectTypes);

// project_type → host_status 對應
const TYPE_TO_STATUS = { '開發': '進行中', '保固': '保固', '維護': '維護', '結束': '結束' };

$(function () {
  $('#project_id').select2({
    theme: 'bootstrap-5',
    placeholder: '— 請選擇或輸入關鍵字 —',
    allowClear: true,
    width: '100%',
  });

  $('#project_id').on('change', function () {
    const id     = $(this).val();
    const pType  = PROJECT_TYPES[id] || '';
    const mapped = TYPE_TO_STATUS[pType];
    const sel    = document.getElementById('host_status');
    const hint   = document.getElementById('statusHint');
    if (mapped) {
      sel.value = mapped;
      hint.textContent = '已依專案類型「' + pType + '」自動帶入';
    } else {
      hint.textContent = '';
    }
  });
});
</script>
@endpush