{# 경로/파일: templates/disk.html #}
{% extends "base.html" %}
{% block title %}디스크 관리 - 리얼컴 NAS UI{% endblock %}
{% block head %}
<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: center;
  }
  th {
    background: #f3f6f9;
    font-weight: bold;
  }
  .warning {
    color: red;
    font-weight: bold;
  }
  .btn {
    padding: 4px 8px;
    font-size: 12px;
    margin: 0 2px;
    cursor: pointer;
  }
  .badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    margin-left: 6px;
  }
  .muted {
    color: #6b7280;
    font-size: 12px;
  }
  .row-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
  }
</style>
{% endblock %}

{% block content %}
<h2>디스크 관리</h2>
<p style="color: red; font-weight: bold;">
  ⚠️ 포맷 전에 반드시 해당 파티션을 언마운트하세요.<br/>
  시스템이 사용 중인 파티션은 포맷이 실패할 수 있습니다.
</p>

<div style="margin: 10px 0; padding: 10px; border: 1px solid #eee; background: #fafafa; border-radius: 8px;">
  <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
    <strong>현재 elFinder 루트</strong>
    <span id="elfinder-current" class="muted">불러오는 중...</span>
    <button class="btn" onclick="fetchElfinderConfig()">새로고침</button>
  </div>
  <div class="muted" style="margin-top:6px;">
    여기서 설정하면 <b>connector.minimal.php</b> 수정 없이 elFinder가 이 경로로 붙도록 만들 수 있음.
  </div>
</div>

<table>
  <thead>
    <tr>
      <th>장치</th>
      <th>마운트</th>
      <th>FS</th>
      <th>전체용량</th>
      <th>사용량</th>
      <th>남은용량</th>
      <th>사용률(%)</th>
      <th>SMART 상태</th>
      <th>온도(℃)</th>
      <th>관리</th>
    </tr>
  </thead>
  <tbody id="disk-table-body">
    <tr><td colspan="10">로딩 중...</td></tr>
  </tbody>
</table>

<script>
  let ELFINDER_CONFIG = null; // { roots: [...] }

  function getTempClass(temp) {
    if (typeof temp !== 'number') return '';
    if (temp < 40) return '';
    if (temp < 55) return 'warning';
    return 'warning';
  }

  async function postDiskAction(data) {
    try {
      const res = await fetch('/disk', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(data)
      });
      if (!res.ok) throw new Error('서버 오류');
      alert('작업이 완료되었습니다.');
      fetchDisks();
    } catch (e) {
      alert(`오류 발생: ${e.message}`);
    }
  }

  // ---- elFinder 설정 읽기/표시 ----
  function elfinderText(conf) {
    if (!conf || !conf.roots || !conf.roots.length) return "설정 없음";
    const r = conf.roots[0];
    const alias = r.alias ? `[${r.alias}]` : '';
    const p = r.path || '-';
    const u = r.url || '-';
    return `${alias} path=${p} / url=${u}`;
  }

  async function fetchElfinderConfig() {
    const el = document.getElementById("elfinder-current");
    try {
      const res = await fetch("/api/elfinder/config");
      if (!res.ok) throw new Error("설정 조회 실패");
      const conf = await res.json();
      ELFINDER_CONFIG = conf;
      el.textContent = elfinderText(conf);
    } catch (e) {
      el.textContent = `오류: ${e.message}`;
      ELFINDER_CONFIG = null;
    }
  }

  function isCurrentElfinderRoot(mountpoint) {
    if (!mountpoint || !ELFINDER_CONFIG || !ELFINDER_CONFIG.roots || !ELFINDER_CONFIG.roots.length) return false;
    const cur = (ELFINDER_CONFIG.roots[0].path || '').replace(/\/+$/, '');
    const mp  = (mountpoint || '').replace(/\/+$/, '');
    return cur && mp && cur === mp;
  }

// elFinder 루트 설정 (깔끔 버전)
// - mountpoint 필수
// - alias는 label 기본값
// - url은 선택(없으면 payload에서 제외)
async function setElfinderRoot(mountpoint, label) {
  if (!mountpoint) {
    alert("마운트된 디스크만 elFinder 루트로 지정할 수 있습니다.");
    return;
  }

  // 기본값: label이 있으면 그걸 쓰고, 없으면 mountpoint 마지막 디렉토리명 사용
  const defaultAlias = (label && String(label).trim())
    ? String(label).trim()
    : String(mountpoint).split("/").filter(Boolean).pop() || "DATA";

  // 현재 설정에서 alias/url 가져오기 (있으면 기본값으로)
  const curRoot = (ELFINDER_CONFIG?.roots?.[0]) || {};
  const curAlias = (curRoot.alias && String(curRoot.alias).trim()) ? String(curRoot.alias).trim() : defaultAlias;
  const curUrl = (curRoot.url && String(curRoot.url).trim()) ? String(curRoot.url).trim() : "";

  // alias는 필수(취소면 null)
  const alias = prompt("elFinder에 표시될 이름(alias)", curAlias);
  if (alias === null) return;
  const aliasTrim = String(alias).trim();
  if (!aliasTrim) {
    alert("alias는 비워둘 수 없습니다.");
    return;
  }

  // url은 선택(취소면 null)
  // - 빈 문자열이면 url을 payload에서 빼서 로컬 경로만 쓰게 함
  const url = prompt("웹 URL(선택) - 비워두면 로컬 경로만 사용", curUrl);
  if (url === null) return;
  const urlTrim = String(url).trim();

  // payload 구성: url은 있을 때만 포함
  const root = { alias: aliasTrim, path: mountpoint };
  if (urlTrim) root.url = urlTrim;

  try {
    const res = await fetch("/api/elfinder/config", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ roots: [root] })
    });

    const out = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(out.error || "저장 실패");

    alert("elFinder 루트 저장 완료. elFinder 새로고침하면 반영됨.");

    // 필요한 것만 갱신
    await fetchElfinderConfig();

    // 디스크 목록 갱신은 UI 정책에 따라 켜고/끄면 됨
    // await fetchDisks();
  } catch (e) {
    alert("오류: " + (e?.message || e));
  }
}

  function renderDisks(disks) {
    const tbody = document.getElementById('disk-table-body');
    tbody.innerHTML = '';

    if (!disks || disks.length === 0) {
      tbody.innerHTML = '<tr><td colspan="10">디스크 정보가 없습니다.</td></tr>';
      return;
    }

    disks.forEach(disk => {
      const trDisk = document.createElement('tr');

      trDisk.innerHTML = `
        <td><strong>${disk.name}</strong></td>
        <td>${disk.mountpoint || '-'}</td>
        <td>${disk.fstype || '-'}</td>
        <td>${disk.size || '-'}</td>
        <td>${disk.used || '-'}</td>
        <td>${disk.avail || '-'}</td>
        <td>${disk.percent || '-'}</td>
        <td>${disk.smart_status || '-'}</td>
        <td class="${getTempClass(parseInt(disk.temperature))}">${disk.temperature || '-'}</td>
        <td>
          <div class="row-actions">
            <button class="btn" onclick="smartCheck('${disk.name}')">SMART</button>
            <button class="btn" onclick="formatDisk('${disk.name}')">포맷</button>
          </div>
        </td>
      `;
      tbody.appendChild(trDisk);

      if (disk.parts && disk.parts.length > 0) {
        disk.parts.forEach(part => {
          const trPart = document.createElement('tr');

          const isCurrent = isCurrentElfinderRoot(part.mountpoint || '');
          const badge = isCurrent ? `<span class="badge">elFinder 루트</span>` : '';

          trPart.innerHTML = `
            <td style="padding-left: 20px;">↳ ${part.name} ${badge}</td>
            <td>${part.mountpoint || '-'}</td>
            <td>${part.fstype || '-'}</td>
            <td>${part.size || '-'}</td>
            <td>${part.used || '-'}</td>
            <td>${part.avail || '-'}</td>
            <td>${part.percent || '-'}</td>
            <td>-</td>
            <td>-</td>
            <td>
              <div class="row-actions">
                <button class="btn" onclick="mountPartition('${part.name}')">마운트</button>
                <button class="btn" onclick="unmountPartition('${part.name}')">언마운트</button>
                <button class="btn" onclick="setElfinderRoot('${(part.mountpoint || '').replace(/'/g, "\\'")}', '${part.name}')">elFinder 루트로</button>
              </div>
              <div class="row-actions" style="margin-top:6px;">
                <select id="format-${part.name}">
                  <option value="ext4" selected>ext4</option>
                  <option value="vfat">vfat</option>
                  <option value="ntfs">ntfs</option>
                </select>
                <button class="btn" onclick="formatPartition('${part.name}')">포맷</button>
              </div>
            </td>
          `;
          tbody.appendChild(trPart);
        });
      }
    });
  }

  async function fetchDisks() {
    try {
      const res = await fetch('/api/disks');
      if (!res.ok) throw new Error('서버 응답 오류');
      const data = await res.json();
      renderDisks(data);
    } catch (e) {
      const tbody = document.getElementById('disk-table-body');
      tbody.innerHTML = `<tr><td colspan="10">디스크 정보를 불러오는 중 오류가 발생했습니다.<br>${e.message}</td></tr>`;
    }
  }

  function smartCheck(deviceName) {
    alert(`SMART 상태 확인: ${deviceName} (구현 필요)`);
  }

  function formatDisk(deviceName) {
    if (confirm(`${deviceName} 디스크 전체를 포맷하시겠습니까? 데이터가 모두 삭제됩니다.`)) {
      postDiskAction({ action: 'mkfs', name: deviceName, fstype: 'ext4' });
    }
  }

  function mountPartition(partName) {
    const mountPoint = prompt(`${partName} 파티션을 마운트할 경로를 입력하세요.`, `/mnt/${partName}`);
    if (mountPoint) {
      postDiskAction({ action: 'mount', name: partName, mountpoint: mountPoint });
    }
  }

  function unmountPartition(partName) {
    if (confirm(`${partName} 파티션을 언마운트 하시겠습니까?`)) {
      postDiskAction({ action: 'umount', name: partName });
    }
  }

  function formatPartition(partName) {
    const select = document.getElementById(`format-${partName}`);
    const fsType = select ? select.value : 'ext4';

    // ★ 경로만 수정: 기본 자동 마운트 경로
    //    기존: /home/realcom/DATA
    //    변경: /opt/realcom-nas/DATA
    const defaultMount = "/opt/realcom-nas/DATA";

    const mountPoint = prompt(`${partName} 포맷 후 자동 마운트 경로`, defaultMount);
    if (!mountPoint) return;

    const alias = prompt("elFinder alias (예: DATA)", "DATA");
    if (alias === null) return;

    const webPath = prompt("elFinder web_path (예: data)  ※영문추천", "data");
    if (webPath === null) return;

    if (!confirm(`${partName} 파티션을 ${fsType}로 포맷하고\n${mountPoint}에 마운트한 뒤\nelFinder 루트로 지정할까요?\n(데이터 전부 삭제됨)`)) {
      return;
    }

    postDiskAction({
      action: 'mkfs_mount_elfinder',
      name: partName,
      fstype: fsType,
      mountpoint: mountPoint,
      alias: alias,
      web_path: webPath
    });
  }

  // 초기 로드
  (async () => {
    await fetchElfinderConfig();
    await fetchDisks();
    setInterval(fetchDisks, 10000);
  })();
</script>
{% endblock %}