{{template "base" .}}

{{define "content"}}
{{$d := .}}
<style>
.tab-bar { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.tab-bar a { padding:8px 18px; font-size:0.9rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.tab-bar a.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-bar a:hover:not(.active) { color:var(--text); }

.people-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px 24px; margin-bottom:16px; }
.people-card h3 { margin:0 0 14px; font-size:0.95rem; font-weight:700; }
.form-row { display:flex; gap:10px; }
.form-row input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; }
.btn { padding:8px 18px; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger  { background:#f44336; color:#fff; font-size:0.8rem; padding:5px 12px; }
.viewer-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.875rem; }
.viewer-row:last-child { border-bottom:none; }
.empty-state { padding:32px; text-align:center; color:var(--muted); font-size:0.875rem; }
.stat-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 18px; flex:1; min-width:130px; }
.stat label { display:block; font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.stat .val { font-size:1.3rem; font-weight:700; }
.goals-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.goal-item { padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.875rem; display:flex; justify-content:space-between; }
.goal-item:last-child { border-bottom:none; }
.badge-committed { display:inline-block; padding:2px 7px; border-radius:20px; font-size:0.7rem; font-weight:600; background:rgba(76,175,80,0.15); color:#4caf50; }
</style>

<h1 style="margin:0 0 20px;">People</h1>

<div class="tab-bar">
  <a href="/people?tab=sharing"   class="{{if eq $d.Tab "sharing"}}active{{end}}">Sharing</a>
  <a href="/people?tab=household" class="{{if eq $d.Tab "household"}}active{{end}}">Household</a>
</div>

{{if eq $d.Tab "sharing"}}

<div class="people-card">
  <h3>Grant read access</h3>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 14px;">Enter another user's ID to let them view your finances in read-only mode.</p>
  <form method="post" action="/people?tab=sharing">
    <input type="hidden" name="_action" value="share">
    <div class="form-row">
      <input type="text" name="viewer_id" placeholder="User ID or email" required>
      <button type="submit" class="btn btn-primary">Add</button>
    </div>
  </form>
</div>

{{if $d.Viewers}}
<div class="people-card">
  <h3>People with access to your data</h3>
  {{range $d.Viewers}}
  <div class="viewer-row">
    <span>{{.Email}}</span>
    <button class="btn btn-danger" onclick="revokeShare('{{.ID}}')">Revoke</button>
  </div>
  {{end}}
</div>
{{end}}

{{if $d.Granted}}
<div class="people-card">
  <h3>Accounts you can view</h3>
  {{range $d.Granted}}
  <div class="viewer-row">
    <span style="color:var(--muted);">{{.OwnerID}}</span>
    <a href="/?as={{.OwnerID}}" style="font-size:0.8rem; color:var(--accent);">View →</a>
  </div>
  {{end}}
</div>
{{end}}

{{if and (not $d.Viewers) (not $d.Granted)}}
<div class="people-card"><div class="empty-state">No sharing configured yet.</div></div>
{{end}}

{{else}}{{/* household tab */}}

{{if not $d.HasHousehold}}
<div class="people-card" style="max-width:480px;">
  <h3>Link a partner account</h3>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 16px;">Combine finances with a partner to see a shared monthly overview and goals.</p>
  <form method="post" action="/people?tab=household">
    <input type="hidden" name="_action" value="household">
    <div class="form-row">
      <input type="email" name="partner_email" placeholder="Partner's email" required>
      <button type="submit" class="btn btn-primary">Link</button>
    </div>
  </form>
</div>
{{else}}

<div class="people-card" style="display:flex; align-items:center; gap:14px;">
  <div style="flex:1;">
    <div style="font-size:0.78rem; color:var(--muted); margin-bottom:2px;">Linked partner</div>
    <div style="font-weight:600;">{{$d.PartnerEmail}}</div>
  </div>
  <button class="btn btn-danger" onclick="unlinkHousehold()">Unlink</button>
</div>

<div class="stat-row">
  <div class="stat">
    <label>Combined Income</label>
    <div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>My Income</label>
    <div class="val">€{{cents $d.MyIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>Partner Income</label>
    <div class="val">€{{cents $d.PartnerIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>Combined Expenses</label>
    <div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
  </div>
  <div class="stat">
    <label>Disposable</label>
    <div class="val" style="{{if ge $d.CombinedDisposable 0}}color:#4caf50{{else}}color:#f44336{{end}};">
      {{if lt $d.CombinedDisposable 0}}-{{end}}€{{cents (centsAbs $d.CombinedDisposable)}}
    </div>
  </div>
</div>

{{if or $d.MyGoals $d.PartnerGoals}}
<div class="goals-grid">
  <div class="people-card" style="margin-bottom:0;">
    <h3>Your Goals</h3>
    {{range $d.MyGoals}}
    <div class="goal-item">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge-committed">committed</span>{{end}}
    </div>
    {{else}}<div style="color:var(--muted); font-size:0.83rem;">No goals</div>{{end}}
  </div>
  <div class="people-card" style="margin-bottom:0;">
    <h3>Partner Goals</h3>
    {{range $d.PartnerGoals}}
    <div class="goal-item">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge-committed">committed</span>{{end}}
    </div>
    {{else}}<div style="color:var(--muted); font-size:0.83rem;">No goals</div>{{end}}
  </div>
</div>
{{end}}

{{end}}{{/* HasHousehold */}}
{{end}}{{/* tab */}}

<script>
function revokeShare(id) {
  if (!confirm('Revoke access for this user?')) return;
  fetch('/people/' + id + '?kind=share', { method: 'DELETE' })
    .then(r => { if (r.ok) location.reload(); });
}
function unlinkHousehold() {
  if (!confirm('Unlink household? This only removes the link, not any data.')) return;
  fetch('/people/_?kind=household', { method: 'DELETE' })
    .then(r => { if (r.ok) location.href = '/people?tab=household'; });
}
</script>
{{end}}