<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Wolkabout GDrive Visual Inspector</title>
  <style>
    :root {
      --bg: #ebf1f5;
      --panel: #ffffff;
      --ink: #0f172a;
      --muted: #4b5563;
      --line: #d5dde6;
      --accent: #0f766e;
      --accent-2: #1d4ed8;
      --danger: #b91c1c;
      --shadow: 0 8px 24px rgba(15,23,42,.08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1200px 500px at 5% -20%, #dce8ef 0%, transparent 60%),
        radial-gradient(1100px 500px at 105% 0%, #d9efe9 0%, transparent 58%),
        var(--bg);
    }
    .wrap { width: 100%; max-width: none; margin: 0; padding: 14px; }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .header {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 12px;
      align-items: stretch;
    }
    .title { font-size: 1.65rem; font-weight: 800; margin: 0 0 5px; }
    .subtitle { color: var(--muted); margin: 0; }
    .upload-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
    input[type="file"] { border: 1px dashed #bcc8d6; background: #f8fafc; border-radius: 9px; padding: 10px; min-width: 280px; }
    button, .btn {
      border: 0;
      border-radius: 9px;
      padding: 10px 14px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    button { background: var(--accent); color: #fff; }
    .btn.secondary { background: var(--accent-2); color: #fff; }

    .stats {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
      gap: 8px;
    }
    .stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #f8fbfe; }
    .k { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
    .v { font-size: 1.23rem; font-weight: 800; margin-top: 3px; }

    .error {
      margin-top: 10px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: var(--danger);
      border-radius: 10px;
      padding: 10px 12px;
      font-weight: 600;
    }

    .diagram-wrap { margin-top: 12px; }
    iframe {
      width: 100%;
      height: 860px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .small { color: var(--muted); font-size: .9rem; margin-top: 6px; }
    .info-panel {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fbfe;
      padding: 10px;
    }
    .info-panel .row {
      font-size: .9rem;
      margin: 5px 0;
      color: #1f2937;
    }
    .status-title { font-weight: 800; margin-bottom: 8px; }
    .status-grid {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 8px;
    }
    .status-box {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fbfe;
      padding: 8px 10px;
      font-size: .85rem;
      color: #1f2937;
    }
    .status-box b { display:block; color:#334155; margin-bottom: 2px; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }

    @media (max-width: 1100px) {
      .header { grid-template-columns: 1fr; }
      iframe { height: 72vh; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <section class="panel">
        <h1 class="title">Wolkabout GDrive Visual Inspector</h1>
        <p class="subtitle">Upload GAM CSV -> auto-parse -> interactive org-chart diagram + CSV exports</p>

        <form class="upload-form" action="/upload" method="post" enctype="multipart/form-data">
          <input type="file" name="csv_file" accept=".csv" required />
          <button type="submit">Upload And Generate</button>
          {% if has_data %}
          <a class="btn secondary" href="{{ cleaned_path }}">Download Cleaned CSV</a>
          <a class="btn secondary" href="{{ summary_path }}">Download Summary CSV</a>
          <a class="btn secondary" href="{{ sharing_matrix_path }}">Download Sharing Matrix CSV</a>
          {% endif %}
        </form>

        <div class="small">Use tree + sunburst for structure, and share network for access flow.</div>

        {% if error %}
        <div class="error">{{ error }}</div>
        {% endif %}

        {% if has_data %}
        <div class="stats">
          <div class="stat"><div class="k">Total items</div><div class="v">{{ stats.total_items }}</div></div>
          <div class="stat"><div class="k">Folders</div><div class="v">{{ stats.total_folders }}</div></div>
          <div class="stat"><div class="k">Public</div><div class="v">{{ stats.public_items }}</div></div>
          <div class="stat"><div class="k">Domain</div><div class="v">{{ stats.domain_items }}</div></div>
          <div class="stat"><div class="k">Shared users</div><div class="v">{{ stats.shared_user_items }}</div></div>
        </div>
        <div class="small">Tip: click a folder/file to sync tree, sunburst and network on the same item.</div>
        {% endif %}
      </section>

      <section class="panel">
        <div class="status-title">Live Status</div>
        <div class="status-grid">
          <div class="status-box"><b>Build ID</b>{{ build_id or "-" }}</div>
          <div class="status-box"><b>Rows Parsed</b>{{ curated_count or "-" }}</div>
          <div class="status-box"><b>Last Upload</b>{{ last_upload_time or "-" }}</div>
          <div class="status-box"><b>Processing Time</b>{{ process_ms or "-" }} ms</div>
        </div>
        <div class="small" style="margin-top:10px;">This panel is informational and updates after each CSV upload.</div>
        {% if build_id %}
        <div class="small" style="margin-top:8px;"><b>Status ID:</b> {{ build_id }}</div>
        {% endif %}
      </section>
    </div>

    {% if has_data %}
    <div class="diagram-wrap">
      <iframe src="{{ explorer_url or explorer_path }}"></iframe>
    </div>
    {% endif %}
  </div>
</body>
</html>
