{{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;">{{$d.T.Get "people.title"}}</h1>

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

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

<div class="people-card">
  <h3>{{$d.T.Get "people.sharing.grant_title"}}</h3>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 14px;">{{$d.T.Get "people.sharing.grant_desc"}}</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="{{$d.T.Get "people.sharing.placeholder_viewer"}}" required>
      <button type="submit" class="btn btn-primary">{{$d.T.Get "people.sharing.btn_add"}}</button>
    </div>
  </form>
</div>

{{if $d.Viewers}}
<div class="people-card">
  <h3>{{$d.T.Get "people.sharing.viewers_title"}}</h3>
  {{range $d.Viewers}}
  <div class="viewer-row">
    <span>{{.Email}}</span>
    <button class="btn btn-danger" onclick="revokeShare('{{.ID}}')">{{$d.T.Get "people.sharing.btn_revoke"}}</button>
  </div>
  {{end}}
</div>
{{end}}

{{if $d.Granted}}
<div class="people-card">
  <h3>{{$d.T.Get "people.sharing.granted_title"}}</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);">{{$d.T.Get "people.sharing.view_link"}}</a>
  </div>
  {{end}}
</div>
{{end}}

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

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

{{if not $d.HasHousehold}}
<div class="people-card" style="max-width:480px;">
  <h3>{{$d.T.Get "people.household.link_title"}}</h3>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 16px;">{{$d.T.Get "people.household.link_desc"}}</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="{{$d.T.Get "people.household.placeholder_email"}}" required>
      <button type="submit" class="btn btn-primary">{{$d.T.Get "people.household.btn_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;">{{$d.T.Get "people.household.linked_partner"}}</div>
    <div style="font-weight:600;">{{$d.PartnerEmail}}</div>
  </div>
  <button class="btn btn-danger" onclick="unlinkHousehold()">{{$d.T.Get "people.household.btn_unlink"}}</button>
</div>

<div class="stat-row">
  <div class="stat">
    <label>{{$d.T.Get "people.household.stat_combined_income"}}</label>
    <div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>{{$d.T.Get "people.household.stat_my_income"}}</label>
    <div class="val">€{{cents $d.MyIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>{{$d.T.Get "people.household.stat_partner_income"}}</label>
    <div class="val">€{{cents $d.PartnerIncomeCents}}</div>
  </div>
  <div class="stat">
    <label>{{$d.T.Get "people.household.stat_combined_expenses"}}</label>
    <div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
  </div>
  <div class="stat">
    <label>{{$d.T.Get "people.household.stat_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>{{$d.T.Get "people.household.your_goals"}}</h3>
    {{range $d.MyGoals}}
    <div class="goal-item">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge-committed">{{$d.T.Get "people.household.committed_badge"}}</span>{{end}}
    </div>
    {{else}}<div style="color:var(--muted); font-size:0.83rem;">{{$d.T.Get "people.household.no_goals"}}</div>{{end}}
  </div>
  <div class="people-card" style="margin-bottom:0;">
    <h3>{{$d.T.Get "people.household.partner_goals"}}</h3>
    {{range $d.PartnerGoals}}
    <div class="goal-item">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge-committed">{{$d.T.Get "people.household.committed_badge"}}</span>{{end}}
    </div>
    {{else}}<div style="color:var(--muted); font-size:0.83rem;">{{$d.T.Get "people.household.no_goals"}}</div>{{end}}
  </div>
</div>
{{end}}

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

<script>
const CONFIRM_REVOKE  = {{$d.T.Get "people.sharing.confirm_revoke" | printf "%q"}};
const CONFIRM_UNLINK  = {{$d.T.Get "people.household.confirm_unlink" | printf "%q"}};

function revokeShare(id) {
  if (!confirm(CONFIRM_REVOKE)) return;
  fetch('/people/' + id + '?kind=share', { method: 'DELETE' })
    .then(r => { if (r.ok) location.reload(); });
}
function unlinkHousehold() {
  if (!confirm(CONFIRM_UNLINK)) return;
  fetch('/people/_?kind=household', { method: 'DELETE' })
    .then(r => { if (r.ok) location.href = '/people?tab=household'; });
}
</script>
{{end}}