#!/usr/bin/env python3
"""Claude Code + GitHub Copilot usage stats web app."""

import csv
import json
import os

# Load .env if present (does not override existing env vars)
_env_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), ".env")
if os.path.exists(_env_path):
    with open(_env_path) as _f:
        for _line in _f:
            _line = _line.strip()
            if _line and not _line.startswith("#") and "=" in _line:
                _k, _, _v = _line.partition("=")
                os.environ.setdefault(_k.strip(), _v.strip().strip('"').strip("'"))
import re
import ssl
import unicodedata
from collections import defaultdict
from datetime import date, timedelta
from http.server import BaseHTTPRequestHandler, HTTPServer
from urllib.error import HTTPError
from urllib.request import Request, urlopen

_HERE        = os.path.dirname(os.path.abspath(__file__))
MAPPING_FILE = os.path.join(_HERE, "user_mapping.csv")
ANTHROPIC_API = "https://api.anthropic.com/v1/organizations/usage_report/claude_code"
PORT         = 8765
TODAY        = date.today()
WINDOW_DAYS  = 28
ORG          = "theorchard"

_ssl_ctx = ssl.create_default_context()
if os.path.exists("/etc/ssl/cert.pem"):
    _ssl_ctx.load_verify_locations(cafile="/etc/ssl/cert.pem")


# ── helpers ───────────────────────────────────────────────────────────────────

def days_since(date_str):
    if not date_str:
        return None
    try:
        return (TODAY - date.fromisoformat(date_str[:10])).days
    except ValueError:
        return None


def ascii_lower(s):
    for k, v in {"Ø":"o","ø":"o","Å":"a","å":"a","Æ":"ae","æ":"ae","Ð":"d","ð":"d","Þ":"th","þ":"th","Ł":"l","ł":"l"}.items():
        s = s.replace(k, v)
    return unicodedata.normalize("NFKD", s).encode("ascii", "ignore").decode().lower().strip()


def name_candidates(name):
    parts = ascii_lower(name).split()
    if not parts: return set()
    if len(parts[0]) <= 2 and parts[0].endswith("."): parts = parts[1:]
    if not parts: return set()
    first, *rest = parts
    last = rest[-1] if rest else ""
    compound = "".join(rest) if rest else ""
    cands = set()
    if last:
        cands.add(first[0] + last)
        cands.add(first + last)
        cands.add(first + "." + last)
        cands.add(first[0] + "." + last)
    if compound and compound != last:
        cands.add(first[0] + compound)
    if len(rest) >= 2:
        cands.add(first[0] + "".join(rest))
    cands.add(first)
    return cands


def clean_token(s):
    return re.sub(r"[-_.\d]", "", s.lower())


def load_manual_mapping():
    if not os.path.exists(MAPPING_FILE):
        return {}
    with open(MAPPING_FILE, newline="") as f:
        return {r["gh_login"].lower(): r["claude_email"] for r in csv.DictReader(f)}


def match_users(copilot_rows, claude_emails):
    prefix_map = {e.split("@")[0].lower(): e for e in claude_emails if "@" in e}
    clean_map  = {clean_token(p): e for p, e in prefix_map.items()}
    manual     = load_manual_mapping()
    result     = {}
    for r in copilot_rows:
        login    = r["login"]
        gh_email = (r.get("email") or "").lower().strip()
        gh_name  = r.get("name") or ""
        matched  = manual.get(login.lower())
        if not matched and gh_email and gh_email in {e.lower() for e in claude_emails}:
            matched = gh_email
        if not matched and "@" in gh_email:
            matched = prefix_map.get(gh_email.split("@")[0].lower())
        if not matched and gh_name:
            for c in name_candidates(gh_name):
                if c in prefix_map: matched = prefix_map[c]; break
        if not matched and gh_name:
            for c in name_candidates(gh_name):
                for pfx, email in prefix_map.items():
                    if pfx.startswith(c) and len(pfx) - len(c) <= 2:
                        matched = email; break
                if matched: break
        if not matched:
            matched = clean_map.get(clean_token(login))
        if not matched:
            cl = clean_token(login)
            for pfx, email in prefix_map.items():
                cp = clean_token(pfx)
                if len(cp) >= 6 and cp in cl: matched = email; break
        result[login] = matched
    return result


# ── data loading ──────────────────────────────────────────────────────────────

def _fetch_claude_day(api_key, day_str):
    rows, cursor = [], None
    while True:
        params = f"starting_at={day_str}&limit=1000"
        if cursor:
            params += f"&page={cursor}"
        req = Request(f"{ANTHROPIC_API}?{params}", headers={
            "x-api-key": api_key,
            "anthropic-version": "2023-06-01",
        })
        with urlopen(req, context=_ssl_ctx) as resp:
            data = json.loads(resp.read())
        for record in data.get("data", []):
            rows.extend(_flatten_claude(record))
        if data.get("has_more") and data.get("next_page"):
            cursor = data["next_page"]
        else:
            break
    return rows


def fetch_claude(api_key):
    from concurrent.futures import ThreadPoolExecutor
    end   = date.today() - timedelta(days=1)
    start = end - timedelta(days=WINDOW_DAYS - 1)
    days  = [(start + timedelta(days=i)).isoformat() for i in range(WINDOW_DAYS)]
    with ThreadPoolExecutor(max_workers=10) as ex:
        results = ex.map(lambda d: _fetch_claude_day(api_key, d), days)
    return [row for day_rows in results for row in day_rows]


def _flatten_claude(record):
    actor = record.get("actor", {})
    if actor.get("type") == "user_actor":
        actor_id, actor_type = actor.get("email_address", ""), "user"
    else:
        actor_id, actor_type = actor.get("api_key_name", ""), "api_key"
    core  = record.get("core_metrics", {})
    loc   = core.get("lines_of_code", {})
    tools = record.get("tool_actions", {})
    base  = {
        "date":              record.get("date", "")[:10],
        "email_or_key":      actor_id,
        "actor_type":        actor_type,
        "terminal_type":     record.get("terminal_type", ""),
        "customer_type":     record.get("customer_type", ""),
        "num_sessions":      core.get("num_sessions", 0),
        "lines_added":       loc.get("added", 0),
        "lines_removed":     loc.get("removed", 0),
        "commits":           core.get("commits_by_claude_code", 0),
        "pull_requests":     core.get("pull_requests_by_claude_code", 0),
        "edit_accepted":     tools.get("edit_tool", {}).get("accepted", 0),
        "edit_rejected":     tools.get("edit_tool", {}).get("rejected", 0),
        "multi_edit_accepted": tools.get("multi_edit_tool", {}).get("accepted", 0),
        "multi_edit_rejected": tools.get("multi_edit_tool", {}).get("rejected", 0),
        "write_accepted":    tools.get("write_tool", {}).get("accepted", 0),
        "write_rejected":    tools.get("write_tool", {}).get("rejected", 0),
    }
    model_breakdown = record.get("model_breakdown", [])
    if not model_breakdown:
        return [{**base, "model": "", "input_tokens": 0, "output_tokens": 0,
                 "cache_read_tokens": 0, "cache_creation_tokens": 0,
                 "estimated_cost_usd_cents": 0}]
    result = []
    for m in model_breakdown:
        tokens = m.get("tokens", {})
        cost   = m.get("estimated_cost", {})
        result.append({**base,
            "model":                    m.get("model", ""),
            "input_tokens":             tokens.get("input", 0),
            "output_tokens":            tokens.get("output", 0),
            "cache_read_tokens":        tokens.get("cache_read", 0),
            "cache_creation_tokens":    tokens.get("cache_creation", 0),
            "estimated_cost_usd_cents": cost.get("amount", 0),
        })
    return result


# ── GitHub Copilot fetch ──────────────────────────────────────────────────────

def gh_get(token, path):
    url = f"https://api.github.com{path}"
    req = Request(url, headers={
        "Authorization": f"Bearer {token}",
        "Accept": "application/vnd.github+json",
        "X-GitHub-Api-Version": "2022-11-28",
    })
    with urlopen(req, context=_ssl_ctx) as resp:
        return json.loads(resp.read()), resp.headers.get("Link", "")


def fetch_copilot_seats(token):
    seats, path = [], f"/orgs/{ORG}/copilot/billing/seats?per_page=100"
    while path:
        data, link = gh_get(token, path)
        seats.extend(data.get("seats", []))
        path = None
        for part in link.split(","):
            if 'rel="next"' in part:
                path = part.split(";")[0].strip().strip("<>").replace("https://api.github.com", "")
    return seats


def fetch_copilot_usage(token):
    try:
        data, _ = gh_get(token, f"/orgs/{ORG}/copilot/usage?per_page=28")
        return data
    except HTTPError:
        return []


def fetch_user_details(token, logins):
    """Fetch name + email for multiple logins in a single GraphQL request."""
    aliases = "\n".join(
        f'u{i}: user(login: {json.dumps(login)}) {{ name email }}'
        for i, login in enumerate(logins)
    )
    query = json.dumps({"query": f"{{ {aliases} }}"}).encode()
    req = Request("https://api.github.com/graphql", data=query, headers={
        "Authorization": f"Bearer {token}",
        "Content-Type": "application/json",
    })
    with urlopen(req, context=_ssl_ctx) as resp:
        result = json.loads(resp.read())
    data = result.get("data") or {}
    return {
        login: (data.get(f"u{i}") or {})
        for i, login in enumerate(logins)
    }


def fetch_copilot_live(token):
    """Fetch seats + usage from GitHub without writing to disk."""
    seats  = fetch_copilot_seats(token)
    logins = [(s.get("assignee") or {}).get("login", "") for s in seats]
    user_details = fetch_user_details(token, logins)

    rows = []
    for s in seats:
        assignee = s.get("assignee") or {}
        login    = assignee.get("login", "")
        team     = s.get("assigning_team") or {}
        details  = user_details.get(login) or {}
        rows.append({
            "login": login,
            "name":  details.get("name") or "",
            "email": details.get("email") or "",
            "seat_created_at":           (s.get("created_at") or "")[:10],
            "seat_updated_at":           (s.get("updated_at") or "")[:10],
            "last_activity_at":          (s.get("last_activity_at") or "")[:10],
            "last_activity_editor":      s.get("last_activity_editor") or "",
            "pending_cancellation_date": s.get("pending_cancellation_date") or "",
            "plan_type":                 s.get("plan_type") or "",
            "assigning_team":            team.get("name") or team.get("slug") or "",
        })

    usage = fetch_copilot_usage(token)
    return rows, usage


# ── aggregation ───────────────────────────────────────────────────────────────

def aggregate_claude(rows, since_days=None):
    cutoff = (TODAY - timedelta(days=since_days)).isoformat() if since_days else None
    users = defaultdict(lambda: defaultdict(int))
    for r in rows:
        if cutoff and r["date"] < cutoff: continue
        u = users[r["email_or_key"]]
        u["email_or_key"] = r["email_or_key"]
        u["cost_cents"]   += r["estimated_cost_usd_cents"]
        u["sessions"]     += r["num_sessions"]
        u["lines_added"]  += r["lines_added"]
        u["lines_removed"]+= r["lines_removed"]
        u["commits"]      += r["commits"]
        u["pull_requests"]+= r["pull_requests"]
        u["edit_accepted"]+= r["edit_accepted"]
        u["edit_rejected"]+= r["edit_rejected"]
        u["input_tokens"] += r["input_tokens"]
        u["output_tokens"]+= r["output_tokens"]
    user_list = [dict(v) for v in users.values()]
    user_list.sort(key=lambda x: x["cost_cents"], reverse=True)
    for u in user_list:
        tot = u["edit_accepted"] + u["edit_rejected"]
        u["acceptance_rate"] = round(u["edit_accepted"] / tot * 100, 1) if tot else 0
        u["cost_dollars"]    = round(u["cost_cents"] / 100, 2)
        lbl = u["email_or_key"]
        u["label"] = lbl.split("@")[0] if "@" in lbl else lbl[:24]
    return user_list


def _cp_ds(row):
    ds = days_since(row.get("last_activity_at"))
    return ds if ds is not None else 999


def build_data(claude_rows, copilot_rows, usage_rows=None):
    """Return all dashboard data as a plain Python dict (JSON-serialisable)."""
    claude_28d = aggregate_claude(claude_rows, since_days=WINDOW_DAYS)
    active_28d = [u for u in claude_28d if u["cost_cents"] > 0]
    all_emails  = {r["email_or_key"] for r in claude_rows}
    l2e         = match_users(copilot_rows, all_emails)

    cutoff = (TODAY - timedelta(days=WINDOW_DAYS)).isoformat()
    active_cc_emails = {u["email_or_key"] for u in active_28d}
    cp_active_28d_set = {r["login"] for r in copilot_rows
                         if (_cp_ds(r)) <= WINDOW_DAYS}
    claude_by_email = {u["email_or_key"]: u for u in claude_28d}

    # Build matrix
    both, cp_only, neither, unmatched_list = [], [], [], []
    for r in copilot_rows:
        login        = r["login"]
        claude_email = l2e.get(login)
        cp_active    = login in cp_active_28d_set
        cc_active    = bool(claude_email and claude_email in active_cc_emails)
        cu           = claude_by_email.get(claude_email or "")
        entry = {
            "login":               login,
            "label":               (claude_email.split("@")[0] if claude_email and "@" in claude_email else login),
            "claude_email":        claude_email or "",
            "copilot_last_active": (r.get("last_activity_at") or "")[:10],
            "copilot_days_since":  days_since(r.get("last_activity_at")),
            "copilot_editor":      (r.get("last_activity_editor") or "").split("/")[0],
            "cc_cost":             cu["cost_dollars"]    if cu else 0,
            "cc_sessions":         cu["sessions"]        if cu else 0,
            "cc_lines_added":      cu["lines_added"]     if cu else 0,
            "cc_commits":          cu["commits"]         if cu else 0,
            "cc_acceptance_rate":  cu["acceptance_rate"] if cu else 0,
        }
        if not claude_email:
            entry["quadrant"] = "unmatched"; unmatched_list.append(entry)
        elif cc_active:
            entry["quadrant"] = "both";         both.append(entry)
        elif cp_active:
            entry["quadrant"] = "copilot_only"; cp_only.append(entry)
        else:
            entry["quadrant"] = "neither";      neither.append(entry)

    matched_emails = set(l2e.values()) - {None}
    cc_no_seat = [{
        "quadrant":            "claude_only",
        "label":               u["label"],
        "claude_email":        u["email_or_key"],
        "login":               "",
        "copilot_last_active": "",
        "copilot_days_since":  None,
        "copilot_editor":      "",
        "cc_cost":             u["cost_dollars"],
        "cc_sessions":         u["sessions"],
        "cc_lines_added":      u["lines_added"],
        "cc_commits":          u["commits"],
        "cc_acceptance_rate":  u["acceptance_rate"],
    } for u in active_28d if u["email_or_key"] not in matched_emails]

    # Copilot usage: lines accepted by language
    lines_by_lang = defaultdict(int)
    for day in (usage_rows or []):
        for b in day.get("breakdown", []):
            lang = (b.get("language") or "unknown").lower()
            lines_by_lang[lang] += b.get("lines_accepted", 0)
    top_langs = sorted(lines_by_lang.items(), key=lambda x: x[1], reverse=True)[:12]

    # Breakdowns
    models, terminals, cp_editors = defaultdict(int), defaultdict(int), defaultdict(int)
    for r in claude_rows:
        if r["date"] < cutoff: continue
        if r["model"]:        models[r["model"]]       += r["estimated_cost_usd_cents"]
        if r["terminal_type"]: terminals[r["terminal_type"]] += r["num_sessions"]
    for r in copilot_rows:
        if (_cp_ds(r)) > WINDOW_DAYS: continue
        ed = (r.get("last_activity_editor") or "").lower()
        if   "vscode"   in ed: key = "VS Code"
        elif any(x in ed for x in ("jetbrains","idea","pycharm","webstorm","rider")): key = "JetBrains"
        elif "neovim"   in ed or "nvim" in ed: key = "Neovim"
        elif "vim"      in ed: key = "Vim"
        elif "xcode"    in ed: key = "Xcode"
        elif "cli"      in ed: key = "CLI"
        elif ed: key = ed.split("/")[0][:15]
        else:    key = "Unknown"
        cp_editors[key] += 1

    return {
        "window_days": WINDOW_DAYS,
        "generated_at": TODAY.isoformat(),
        "claude": {
            "cost":         round(sum(u["cost_cents"] for u in active_28d) / 100, 2),
            "active_users": len(active_28d),
            "sessions":     sum(u["sessions"]    for u in active_28d),
            "lines_added":  sum(u["lines_added"]  for u in active_28d),
            "commits":      sum(u["commits"]      for u in active_28d),
        },
        "copilot": {
            "total_seats": len(copilot_rows),
            "active_28d":  len(cp_active_28d_set),
            "both":        len(both),
            "cp_only":     len(cp_only),
            "cc_no_seat":  len(cc_no_seat),
            "neither":     len(neither),
        },
        "charts": {
            "venn":      {"labels": ["Both tools","Claude only (no seat)","Copilot only","Neither active"],
                          "values": [len(both), len(cc_no_seat), len(cp_only), len(neither)]},
            "cp_editors":{"labels": list(cp_editors.keys()), "values": list(cp_editors.values())},
            "top10_cost":{"labels": [u["label"] for u in active_28d[:10]],
                          "values": [u["cost_dollars"] for u in active_28d[:10]]},
            "top10_sess":{"labels": [u["label"] for u in sorted(active_28d, key=lambda x: x["sessions"], reverse=True)[:10]],
                          "values": [u["sessions"] for u in sorted(active_28d, key=lambda x: x["sessions"], reverse=True)[:10]]},
            "cp_top":    {"labels": [r.get("name") or r["login"] for r in
                                     sorted([r for r in copilot_rows if (_cp_ds(r)) <= WINDOW_DAYS],
                                            key=lambda x: x.get("last_activity_at",""), reverse=True)[:10]],
                          "values": [days_since(r.get("last_activity_at")) or 0 for r in
                                     sorted([r for r in copilot_rows if (_cp_ds(r)) <= WINDOW_DAYS],
                                            key=lambda x: x.get("last_activity_at",""), reverse=True)[:10]]},
            "models":    {"labels": list(models.keys()),
                          "values": [round(v/100,2) for v in models.values()]},
            "terminals": {"labels": list(terminals.keys()), "values": list(terminals.values())},
            "cp_lines_by_lang": {"labels": [x[0] for x in top_langs],
                                  "values": [x[1] for x in top_langs]},
        },
        "matrix": both + cc_no_seat + cp_only + neither + unmatched_list,
        "match_stats": {
            "matched":   sum(1 for v in l2e.values() if v),
            "total":     len(copilot_rows),
            "unmatched_logins": [k for k, v in l2e.items() if not v],
        },
    }


# ── HTML shell (static) ───────────────────────────────────────────────────────

HTML = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>API Dev Tools Usage</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
  /* ── Orchard Suite design tokens ── */
  :root {
    /* midnight scale (Orchard theme) */
    --midnight-50:#F2F8FC;--midnight-100:#DEEDF7;--midnight-150:#CEE3F3;
    --midnight-200:#BAD8EE;--midnight-250:#A5CDE9;--midnight-300:#91C1E3;
    --midnight-350:#7CB5DE;--midnight-400:#68AAD9;--midnight-450:#549FD4;
    --midnight-500:#3F93CF;--midnight-550:#3187C4;--midnight-600:#2C79AF;
    --midnight-650:#276B9B;--midnight-700:#225D87;--midnight-750:#1D4F72;
    --midnight-800:#17415E;--midnight-850:#123249;--midnight-900:#0D2435;
    --midnight-950:#081621;--midnight-1000:#03080C;
    /* gray scale */
    --gray-0:#ffffff;--gray-50:#f7f7f8;--gray-100:#f1f3f4;--gray-150:#e3e5e8;
    --gray-200:#d5d9dd;--gray-250:#c7ccd1;--gray-300:#b9bfc6;--gray-350:#abb3ba;
    --gray-400:#9da6af;--gray-450:#8f99a3;--gray-500:#818d98;--gray-550:#73808c;
    --gray-600:#67737e;--gray-650:#5c6670;--gray-700:#505962;--gray-750:#454d54;
    --gray-800:#394046;--gray-850:#2e3338;--gray-900:#22262a;--gray-950:#171a1c;--gray-1000:#0a0c0d;
    /* semantic */
    --success-500:#5cc73d;--success-600:#49a22f;--success-650:#418e29;--success-150:#cff1c6;--success-800:#245615;
    --error-500:#ee3b2b;--error-600:#cf2617;--error-200:#fbbcb6;
    --warning-500:#ff9a1f;--warning-600:#eb8100;--warning-200:#ffdcb2;--warning-850:#6b3b00;
    --info-500:#1a8af9;--info-600:#0670db;--info-200:#add6ff;
    /* sizing */
    --sizing-sizing-4:4px;--sizing-sizing-8:8px;--sizing-sizing-12:12px;--sizing-sizing-16:16px;
    /* layout tokens */
    --bg:var(--gray-50);
    --surface:var(--gray-0);
    --surface2:var(--gray-50);
    --border:var(--gray-200);
    --border-light:var(--gray-150);
    --text:var(--gray-900);
    --muted:var(--gray-600);
    --accent:var(--midnight-650);
    --accent-light:var(--midnight-100);
    --green:var(--success-650);
    --green-bg:var(--success-150);
    --red:var(--error-600);
    --red-bg:var(--error-200);
    --yellow:var(--warning-600);
    --yellow-bg:var(--warning-200);
    --blue:var(--midnight-600);
    --blue-bg:var(--midnight-100);
    --orange:#ff893e;
    --radius-sm:var(--sizing-sizing-4);
    --radius-md:var(--sizing-sizing-8);
    --radius-lg:var(--sizing-sizing-12);
    --radius-xl:var(--sizing-sizing-16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;display:flex;min-height:100vh}
  /* ── left nav ── */
  .sidenav{width:220px;min-width:220px;background:var(--midnight-900);color:#fff;display:flex;flex-direction:column;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}
  .sidenav-header{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
  .sidenav-header .app-name{font-size:0.95rem;font-weight:700;color:#fff;line-height:1.3}
  .sidenav-header .app-sub{font-size:0.68rem;color:var(--midnight-300);margin-top:3px}
  .sidenav nav{padding:12px 0}
  .sidenav nav a{display:flex;align-items:center;gap:9px;padding:8px 18px;color:var(--midnight-200);font-size:0.78rem;font-weight:500;text-decoration:none;transition:background .12s,color .12s;border-left:3px solid transparent}
  .sidenav nav a:hover{background:rgba(255,255,255,.06);color:#fff}
  .sidenav nav a.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--midnight-400)}
  .sidenav nav .nav-icon{font-size:0.85rem;opacity:.8}
  .sidenav nav .nav-section{padding:14px 18px 4px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--midnight-500)}
  /* ── main content ── */
  .main-content{flex:1;padding:28px 28px 40px;overflow:auto;min-width:0}
  h1{font-size:1.4rem;font-weight:600;margin-bottom:4px;color:var(--text)}
  .subtitle{color:var(--muted);font-size:0.85rem;margin-bottom:28px;display:flex;align-items:center;gap:12px}
  @media(max-width:768px){.sidenav{display:none}.main-content{padding:16px}}
  .pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:0.72rem;font-weight:600;margin-left:6px;vertical-align:middle}
  .pill.cc{background:var(--midnight-100);color:var(--midnight-750)}
  .pill.cp{background:var(--green-bg);color:var(--green)}
  .cache-tag{font-size:0.72rem;padding:2px 8px;border-radius:var(--radius-sm);background:var(--gray-100);color:var(--muted)}
  .cache-tag.live{color:var(--green);background:var(--green-bg)}
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin-bottom:24px}
  .stat-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:0 1px 3px rgba(13,36,53,.06)}
  .stat-card .lbl{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-weight:500}
  .stat-card .val{font-size:1.5rem;font-weight:600}
  .green{color:var(--green)}.accent{color:var(--accent)}.yellow{color:var(--yellow)}
  .blue{color:var(--blue)}.teal{color:var(--midnight-500)}.orange{color:var(--orange)}
  .grid{display:grid;gap:16px}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}
  @media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 3px rgba(13,36,53,.06)}
  .card h2{font-size:0.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
  .cw{position:relative;height:260px}.cw-tall{position:relative;height:320px}
  section{margin-bottom:22px}
  .sec-title{font-size:0.82rem;font-weight:600;margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  table{width:100%;border-collapse:collapse;font-size:0.78rem}
  th{text-align:left;padding:8px 10px;color:var(--muted);font-weight:600;text-transform:uppercase;font-size:0.65rem;letter-spacing:.06em;background:var(--gray-50);border-bottom:1px solid var(--border-light);white-space:nowrap}
  td{padding:8px 10px;border-bottom:1px solid var(--border-light);white-space:nowrap;color:var(--text)}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:var(--gray-50)}
  .badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:0.68rem;font-weight:600}
  .b-both{background:var(--midnight-100);color:var(--midnight-750)}
  .b-cc{background:#ede7f9;color:#492c82}
  .b-cp{background:var(--green-bg);color:var(--green)}
  .b-none{background:var(--red-bg);color:var(--red)}
  .num{text-align:right;font-variant-numeric:tabular-nums}
  .filter-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .filter-btn{background:var(--surface);border:1px solid var(--border-light);color:var(--muted);padding:5px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.78rem;font-weight:500;transition:border-color .15s,color .15s}
  .filter-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}
  .filter-btn:hover:not(.active){border-color:var(--gray-300);color:var(--text)}
  .note{font-size:0.72rem;color:var(--muted);margin-top:10px}
  #spinner{display:none;color:var(--muted);font-size:0.85rem;padding:40px 0;text-align:center}
  button.refresh-btn{background:none;border:1px solid var(--border-light);color:var(--muted);padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.72rem;transition:border-color .15s,color .15s}
  button.refresh-btn:hover{border-color:var(--accent);color:var(--accent)}
</style>
</head>
<body>

<aside class="sidenav">
  <div class="sidenav-header">
    <div class="app-name">API Dev Tools<br>Usage</div>
    <div class="app-sub"><span class="pill cc" style="margin-left:0">Claude Code</span> <span class="pill cp">Copilot</span></div>
  </div>
  <nav>
    <span class="nav-section">Overview</span>
    <a href="#claude-code" class="active"><span class="nav-icon">⚡</span>Claude Code</a>
    <a href="#copilot"><span class="nav-icon">🤖</span>Copilot Seats</a>
    <span class="nav-section">Analytics</span>
    <a href="#adoption"><span class="nav-icon">📊</span>Tool Adoption</a>
    <a href="#top-users"><span class="nav-icon">🏆</span>Top Users</a>
    <span class="nav-section">Data</span>
    <a href="#user-matrix"><span class="nav-icon">⊞</span>User Matrix</a>
  </nav>
</aside>

<div class="main-content">
<h1>API Dev Tools Usage</h1>
<div class="subtitle">
  <span id="subtitleText">Loading…</span>
  <span id="cacheTag" class="cache-tag" style="display:none"></span>
  <button class="refresh-btn" id="refreshBtn" style="display:none" onclick="refreshData()">↺ Refresh</button>
</div>
<div id="spinner">Loading data…</div>
<div id="app" style="display:none">

<section id="claude-code">
  <div class="sec-title" style="font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em" id="ccLabel"></div>
  <div class="stats-grid" id="ccStats"></div>
</section>

<section id="copilot">
  <div class="sec-title" style="font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">Copilot Seats</div>
  <div class="stats-grid" id="cpStats"></div>
</section>

<section id="adoption">
  <div class="sec-title" id="adoptionTitle"></div>
  <div class="grid grid-2">
    <div class="card"><h2>User Segments</h2><div class="cw"><canvas id="venn"></canvas></div></div>
    <div class="card"><h2>Copilot Active Editors</h2><div class="cw"><canvas id="cpEditors"></canvas></div></div>
  </div>
</section>

<section id="top-users">
  <div class="sec-title" id="topTitle"></div>
  <div class="grid grid-2">
    <div class="card"><h2>Top 10 Claude Code by Cost</h2><div class="cw-tall"><canvas id="top10cost"></canvas></div></div>
    <div class="card"><h2>Top 10 Claude Code by Sessions</h2><div class="cw-tall"><canvas id="top10sess"></canvas></div></div>
    <div class="card">
      <h2 id="cpTopLabel"></h2>
      <div class="cw-tall"><canvas id="cpTop"></canvas></div>
      <p class="note">Bar = days since last activity. Shorter = more recent.</p>
    </div>
    <div class="card"><h2>Cost by Model</h2><div class="cw-tall"><canvas id="models"></canvas></div></div>
  </div>
</section>

<section id="user-matrix">
  <div class="sec-title">User Matrix</div>
  <div class="filter-row" id="filterRow"></div>
  <p class="note" style="margin-bottom:10px" id="matchNote"></p>
  <div class="card" style="overflow-x:auto">
    <table id="matrixTable">
      <thead><tr id="matrixHead"></tr></thead>
      <tbody id="matrixBody"></tbody>
    </table>
  </div>
</section>

</div><!-- #app -->
</div><!-- .main-content -->

<script>
// ── IndexedDB cache ──────────────────────────────────────────────────────────
const DB_NAME = 'ai-stats', STORE = 'cache', TTL_MS = 60 * 60 * 1000; // 1 hour

function openDB() {
  return new Promise((res, rej) => {
    const r = indexedDB.open(DB_NAME, 1);
    r.onupgradeneeded = e => e.target.result.createObjectStore(STORE);
    r.onsuccess = e => res(e.target.result);
    r.onerror   = e => rej(e.target.error);
  });
}
function getCached(db, key) {
  return new Promise(res => {
    const r = db.transaction(STORE,'readonly').objectStore(STORE).get(key);
    r.onsuccess = e => {
      const v = e.target.result;
      res(v && Date.now() - v.ts < TTL_MS ? v : null);
    };
    r.onerror = () => res(null);
  });
}
function setCached(db, key, data) {
  return new Promise(res => {
    const tx = db.transaction(STORE,'readwrite');
    tx.objectStore(STORE).put({data, ts: Date.now()}, key);
    tx.oncomplete = res;
  });
}

// ── rendering ────────────────────────────────────────────────────────────────
const COLORS = ['#276B9B','#418e29','#eb8100','#3187C4','#3F93CF','#d54236','#ff893e','#553295','#78a22f','#026ead'];
const GC = 'rgba(0,0,0,0.06)', TC = '#67737e';
const charts = {};

function hbar(id, labels, values, color) {
  charts[id]?.destroy();
  charts[id] = new Chart(document.getElementById(id), {
    type:'bar', data:{labels,datasets:[{data:values,backgroundColor:color,borderRadius:4}]},
    options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,
      plugins:{legend:{display:false}},
      scales:{x:{grid:{color:GC},ticks:{color:TC}},y:{grid:{color:'transparent'},ticks:{color:TC}}}}
  });
}
function doughnut(id, labels, values, colors) {
  charts[id]?.destroy();
  charts[id] = new Chart(document.getElementById(id), {
    type:'doughnut',
    data:{labels,datasets:[{data:values,backgroundColor:colors||COLORS,borderWidth:0}]},
    options:{responsive:true,maintainAspectRatio:false,
      plugins:{legend:{position:'bottom',labels:{color:TC,boxWidth:12,padding:8}}}}
  });
}

const BADGE = {
  both:         '<span class="badge b-both">Both</span>',
  claude_only:  '<span class="badge b-cc">Claude only</span>',
  copilot_only: '<span class="badge b-cp">Copilot only</span>',
  neither:      '<span class="badge b-none">Neither</span>',
  unmatched:    '<span class="badge" style="background:var(--gray-100);color:var(--gray-600)">Unmatched</span>',
};

let MATRIX = [], COUNTS = {};
let sortCol = null, sortAsc = true, activeFilter = 'all';

const COLS = [
  {label:'#',           key:null,                  cls:''},
  {label:'User',        key:'label',               cls:''},
  {label:'Status',      key:'quadrant',            cls:''},
  {label:'CC Cost',     key:'cc_cost',             cls:'num'},
  {label:'CC Sessions', key:'cc_sessions',         cls:'num'},
  {label:'CC Lines+',   key:'cc_lines_added',      cls:'num'},
  {label:'CC Commits',  key:'cc_commits',          cls:'num'},
  {label:'CC Accept%',  key:'cc_acceptance_rate',  cls:'num'},
  {label:'CP Last Active', key:'copilot_last_active', cls:'num'},
  {label:'CP Days Since',  key:'copilot_days_since',  cls:'num'},
  {label:'CP Editor',      key:'copilot_editor',      cls:''},
];

function buildMatrixHead() {
  const tr = document.getElementById('matrixHead');
  tr.innerHTML = '';
  COLS.forEach(col => {
    const th = document.createElement('th');
    th.className = col.cls;
    if (col.key) {
      th.style.cursor = 'pointer';
      th.style.userSelect = 'none';
      const arrow = sortCol === col.key ? (sortAsc ? ' ▲' : ' ▼') : ' ↕';
      th.innerHTML = col.label + `<span style="opacity:${sortCol===col.key?1:0.3};font-size:0.6rem">${arrow}</span>`;
      th.addEventListener('click', () => {
        if (sortCol === col.key) sortAsc = !sortAsc;
        else { sortCol = col.key; sortAsc = col.cls === 'num' ? false : true; }
        buildMatrixHead();
        renderMatrix(activeFilter);
      });
    } else {
      th.textContent = col.label;
    }
    tr.appendChild(th);
  });
}

function renderMatrix(filter) {
  activeFilter = filter;
  const tbody = document.getElementById('matrixBody');
  tbody.innerHTML = '';
  let rows = filter === 'all' ? MATRIX.slice() : MATRIX.filter(r => r.quadrant === filter);
  if (sortCol) {
    rows.sort((a, b) => {
      const av = a[sortCol] ?? (typeof b[sortCol] === 'number' ? -Infinity : '');
      const bv = b[sortCol] ?? (typeof a[sortCol] === 'number' ? -Infinity : '');
      return (av < bv ? -1 : av > bv ? 1 : 0) * (sortAsc ? 1 : -1);
    });
  }
  rows.forEach((u, i) => {
    const ds = u.copilot_days_since;
    const dsColor = ds == null ? 'var(--muted)' : ds <= 7 ? 'var(--green)' : ds <= 28 ? 'var(--yellow)' : 'var(--red)';
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="color:var(--muted)">${i+1}</td>
      <td><span title="${u.claude_email||u.login}">${u.label}</span></td>
      <td>${BADGE[u.quadrant]||''}</td>
      <td class="num" style="color:var(--green)">${u.cc_cost>0?'$'+u.cc_cost.toFixed(2):'—'}</td>
      <td class="num">${u.cc_sessions>0?u.cc_sessions.toLocaleString():'—'}</td>
      <td class="num" style="color:var(--blue)">${u.cc_lines_added>0?u.cc_lines_added.toLocaleString():'—'}</td>
      <td class="num">${u.cc_commits>0?u.cc_commits:'—'}</td>
      <td class="num">${u.cc_acceptance_rate>0?u.cc_acceptance_rate+'%':'—'}</td>
      <td class="num">${u.copilot_last_active||'—'}</td>
      <td class="num" style="color:${dsColor}">${ds!=null?ds+'d':'—'}</td>
      <td style="color:var(--muted);font-size:0.72rem">${u.copilot_editor||'—'}</td>`;
    tbody.appendChild(tr);
  });
}

function renderApp(d, fromCache, cacheAge) {
  const W = d.window_days;
  document.getElementById('subtitleText').textContent =
    `Last ${W} days · Copilot: seat snapshot with last-active date`;
  const tag = document.getElementById('cacheTag');
  tag.style.display = '';
  if (fromCache) {
    const mins = Math.round(cacheAge / 60000);
    tag.textContent = `cached ${mins < 2 ? 'just now' : mins + ' min ago'}`;
    tag.className = 'cache-tag';
  } else {
    tag.textContent = 'live';
    tag.className = 'cache-tag live';
  }
  document.getElementById('refreshBtn').style.display = '';

  document.getElementById('ccLabel').textContent = `Claude Code — ${W}d`;
  const cc = d.claude;
  document.getElementById('ccStats').innerHTML = `
    <div class="stat-card"><div class="lbl">Cost</div><div class="val green">$${cc.cost.toLocaleString('en',{minimumFractionDigits:2,maximumFractionDigits:2})}</div></div>
    <div class="stat-card"><div class="lbl">Active Users</div><div class="val accent">${cc.active_users}</div></div>
    <div class="stat-card"><div class="lbl">Sessions</div><div class="val yellow">${cc.sessions.toLocaleString()}</div></div>
    <div class="stat-card"><div class="lbl">Lines Added</div><div class="val blue">${cc.lines_added.toLocaleString()}</div></div>
    <div class="stat-card"><div class="lbl">Commits</div><div class="val">${cc.commits.toLocaleString()}</div></div>`;

  const cp = d.copilot;
  document.getElementById('cpStats').innerHTML = `
    <div class="stat-card"><div class="lbl">Total Seats</div><div class="val accent">${cp.total_seats}</div></div>
    <div class="stat-card"><div class="lbl">Active ≤${W}d</div><div class="val teal">${cp.active_28d}</div></div>
    <div class="stat-card"><div class="lbl">Using Both</div><div class="val blue">${cp.both}</div></div>
    <div class="stat-card"><div class="lbl">Copilot Only</div><div class="val green">${cp.cp_only}</div></div>
    <div class="stat-card"><div class="lbl">Claude Only</div><div class="val" style="color:var(--accent)">${cp.cc_no_seat}</div></div>
    <div class="stat-card"><div class="lbl">Neither Active</div><div class="val orange">${cp.neither}</div></div>`;

  document.getElementById('adoptionTitle').textContent = `Tool Adoption — ${W}-Day Window`;
  document.getElementById('topTitle').textContent      = `Top Users — Last ${W} Days`;
  document.getElementById('cpTopLabel').textContent    = `Most Recent Copilot Users (≤${W}d)`;

  const C = d.charts;
  doughnut('venn',      C.venn.labels,      C.venn.values,      ['#276B9B','#553295','#418e29','#9da6af']);
  doughnut('cpEditors', C.cp_editors.labels,C.cp_editors.values);
  hbar('top10cost', C.top10_cost.labels, C.top10_cost.values, '#418e29');
  hbar('top10sess', C.top10_sess.labels, C.top10_sess.values, '#276B9B');
  hbar('cpTop',     C.cp_top.labels,     C.cp_top.values,     '#3F93CF');
  doughnut('models',    C.models.labels,    C.models.values);

  MATRIX = d.matrix; COUNTS = cp;
  const ms = d.match_stats;
  const filterRow = document.getElementById('filterRow');
  filterRow.innerHTML = `
    <button class="filter-btn active" data-q="all">All</button>
    <button class="filter-btn" data-q="both">Both tools (${cp.both})</button>
    <button class="filter-btn" data-q="claude_only">Claude only · no seat (${cp.cc_no_seat})</button>
    <button class="filter-btn" data-q="copilot_only">Copilot only (${cp.cp_only})</button>
    <button class="filter-btn" data-q="neither">Neither active (${cp.neither})</button>
    <button class="filter-btn" data-q="unmatched">Unmatched (${ms.total - ms.matched})</button>`;
  filterRow.querySelectorAll('.filter-btn').forEach(btn => btn.addEventListener('click', () => {
    filterRow.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    renderMatrix(btn.dataset.q);
  }));

  document.getElementById('matchNote').textContent =
    `Matched ${ms.matched}/${ms.total} Copilot seats to Claude users by name/email.` +
    (ms.unmatched_logins.length ? ` Unmatched: ${ms.unmatched_logins.join(', ')}` : '');

  buildMatrixHead();
  renderMatrix('all');
  document.getElementById('spinner').style.display = 'none';
  document.getElementById('app').style.display = '';
}

// ── bootstrap ────────────────────────────────────────────────────────────────
let db;

async function loadData(forceRefresh) {
  document.getElementById('spinner').style.display = '';
  document.getElementById('app').style.display = 'none';
  db = db || await openDB();

  if (!forceRefresh) {
    const cached = await getCached(db, 'data');
    if (cached) {
      renderApp(cached.data, true, Date.now() - cached.ts);
      return;
    }
  }

  const url = forceRefresh ? '/api/refresh' : '/api/data';
  try {
    const resp = await fetch(url);
    if (!resp.ok) {
      let msg;
      try { msg = (await resp.json()).error; } catch { msg = await resp.text(); }
      throw new Error(msg);
    }
    const data = await resp.json();
    await setCached(db, 'data', data);
    renderApp(data, false, 0);
  } catch(e) {
    const el = document.getElementById('spinner');
    el.innerHTML = `<span style="color:var(--red)">Error: ${e.message}</span>`;
  }
}

async function refreshData() {
  const btn = document.getElementById('refreshBtn');
  btn.disabled = true; btn.textContent = '↺ Refreshing…';
  // invalidate cache
  db = db || await openDB();
  const tx = db.transaction(STORE, 'readwrite');
  tx.objectStore(STORE).delete('data');
  await new Promise(r => tx.oncomplete = r);
  await loadData(true);
  btn.disabled = false; btn.textContent = '↺ Refresh';
}

loadData(false);

// ── nav scroll highlight ──────────────────────────────────────────────────────
function updateActiveNav() {
  const sections = ['claude-code','copilot','adoption','top-users','user-matrix'];
  const scrollY = document.querySelector('.main-content').scrollTop + 80;
  let current = sections[0];
  for (const id of sections) {
    const el = document.getElementById(id);
    if (el && el.offsetTop <= scrollY) current = id;
  }
  document.querySelectorAll('.sidenav nav a').forEach(a => {
    a.classList.toggle('active', a.getAttribute('href') === '#' + current);
  });
}
document.querySelector('.main-content').addEventListener('scroll', updateActiveNav);
document.querySelectorAll('.sidenav nav a').forEach(a => {
  a.addEventListener('click', e => {
    e.preventDefault();
    const id = a.getAttribute('href').slice(1);
    document.getElementById(id)?.scrollIntoView({behavior:'smooth'});
  });
});
</script>
</body>
</html>"""


# ── HTTP server ───────────────────────────────────────────────────────────────

class Handler(BaseHTTPRequestHandler):
    def log_message(self, fmt, *args):
        pass

    def send_json(self, data, status=200):
        body = json.dumps(data).encode()
        self.send_response(status)
        self.send_header("Content-Type", "application/json")
        self.send_header("Access-Control-Allow-Origin", "*")
        self.end_headers()
        self.wfile.write(body)

    def do_GET(self):
        if self.path == "/":
            self.send_response(200)
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.end_headers()
            self.wfile.write(HTML.encode())

        elif self.path == "/api/data":
            anthropic_key = os.environ.get("ANTHROPIC_API_KEY")
            github_token  = os.environ.get("GITHUB_TOKEN")
            if not anthropic_key:
                self.send_json({"error": "ANTHROPIC_API_KEY not set"}, 400)
                return
            if not github_token:
                self.send_json({"error": "GITHUB_TOKEN not set"}, 400)
                return
            try:
                copilot_rows, usage = fetch_copilot_live(github_token)
                data = build_data(fetch_claude(anthropic_key), copilot_rows, usage)
                self.send_json(data)
            except Exception as e:
                self.send_json({"error": str(e)}, 500)

        elif self.path == "/api/refresh":
            anthropic_key = os.environ.get("ANTHROPIC_API_KEY")
            github_token  = os.environ.get("GITHUB_TOKEN")
            if not anthropic_key:
                self.send_json({"error": "ANTHROPIC_API_KEY not set"}, 400)
                return
            if not github_token:
                self.send_json({"error": "GITHUB_TOKEN not set"}, 400)
                return
            try:
                copilot_rows, usage = fetch_copilot_live(github_token)
                data = build_data(fetch_claude(anthropic_key), copilot_rows, usage)
                self.send_json(data)
            except HTTPError as e:
                self.send_json({"error": f"GitHub API {e.code}: {e.read().decode()}"}, 502)
            except Exception as e:
                self.send_json({"error": str(e)}, 500)

        else:
            self.send_response(404)
            self.end_headers()


if __name__ == "__main__":
    server = HTTPServer(("", PORT), Handler)
    print(f"Open http://localhost:{PORT}")
    print(f"  /api/data    — serve aggregated JSON (reads CSV)")
    print(f"  /api/refresh — re-fetch Copilot from GitHub API (needs GITHUB_TOKEN)")
    server.serve_forever()