<%- include('../partials/app-start') %>
<header class="topbar modern-topbar">
  <div><div class="welcome-line"><span class="online-dot"></span> Personal workspace</div><h1>Good <span data-greeting>day</span>, <%= user.name.split(' ')[0] %> 👋</h1><p class="muted" id="todayDate"></p></div>
  <div class="live-clock"><div class="clock-icon">◷</div><div><span>Local time</span><strong id="liveClock">--:--:--</strong></div></div>
</header>
<% if (error) { %><div class="alert danger"><%= error %></div><% } %>
<% if (success) { %><div class="alert success"><%= success %></div><% } %>

<section class="work-hero <%= active ? 'hero-paused' : attendance && !attendance.clock_out ? 'hero-working' : attendance && attendance.clock_out ? 'hero-complete' : 'hero-offline' %>">
  <div class="hero-copy-area">
    <div class="hero-status"><span class="hero-status-dot"></span><%= !attendance ? 'Not clocked in' : attendance.clock_out ? 'Day completed' : active ? (active.type === 'LUNCH' ? 'Lunch in progress' : 'Break in progress') : 'You are working' %></div>
    <h2><%= !attendance ? 'Ready to start your day?' : attendance.clock_out ? 'Great work today.' : active ? (active.type === 'LUNCH' ? 'Enjoy your lunch.' : 'Take a moment to recharge.') : 'Stay in your flow.' %></h2>
    <p><%= !attendance ? 'Clock in when you are ready. Your time will be recorded securely by the server.' : attendance.clock_out ? `You clocked out at ${fmtTime(attendance.clock_out)}.` : active ? 'Your work timer is paused until you return.' : `Clocked in at ${fmtTime(attendance.clock_in)} · Server time protected` %></p>
    <div class="hero-actions">
      <% if (!attendance) { %>
        <form method="post" action="/app/clock-in"><button class="btn hero-primary">Clock in <span>→</span></button></form>
      <% } else if (!attendance.clock_out && active) { %>
        <form method="post" action="/app/end-active"><button class="btn hero-primary">End <%= active.type === 'LUNCH' ? 'lunch' : 'break' %> <span>→</span></button></form>
        <form method="post" action="/app/clock-out"><button class="btn hero-secondary">Clock out</button></form>
      <% } else if (!attendance.clock_out) { %>
        <form method="post" action="/app/start/break"><button class="btn hero-secondary"><span class="btn-symbol">☕</span> Start break</button></form>
        <% if (!breaks.some(b=>b.type==='LUNCH')) { %><form method="post" action="/app/start/lunch"><button class="btn hero-secondary"><span class="btn-symbol">◴</span> Start lunch</button></form><% } %>
        <form method="post" action="/app/clock-out"><button class="btn hero-danger">Clock out</button></form>
      <% } else { %>
        <a class="btn hero-secondary" href="/history">View history →</a>
      <% } %>
    </div>
  </div>
  <div class="hero-visual">
    <div class="time-orbit <%= active ? 'orbit-paused' : '' %>">
      <div class="orbit-dot"></div>
      <div class="orbit-inner session-timer" data-clock-in="<%= attendance?.clock_in || '' %>" data-clock-out="<%= attendance?.clock_out || '' %>" data-break-seconds="<%= totals.break + totals.lunch %>" data-paused="<%= active ? '1' : '0' %>" data-work-seconds="<%= totals.work %>">
        <span>Effective work</span>
        <strong id="workTimer"><%= fmtDuration(totals.work) %></strong>
        <small><%= !attendance ? 'Not started' : attendance.clock_out ? 'Completed' : active ? 'Timer paused' : 'Live now' %></small>
      </div>
    </div>
  </div>
</section>

<section class="metric-grid four visual-metrics">
  <article class="metric accent-blue"><div class="metric-icon">◷</div><div><span>Session time</span><strong><%= fmtDuration(totals.session) %></strong><small>Clock-in to now/out</small></div></article>
  <article class="metric accent-amber"><div class="metric-icon">◴</div><div><span>Lunch</span><strong><%= fmtDuration(totals.lunch) %></strong><small><%= breaks.some(b=>b.type==='LUNCH') ? 'Recorded today' : 'Not taken yet' %></small></div></article>
  <article class="metric accent-violet"><div class="metric-icon">☕</div><div><span>Breaks</span><strong><%= fmtDuration(totals.break) %></strong><small><%= totals.breakCount %> break<%= totals.breakCount===1?'':'s' %> today</small></div></article>
  <article class="metric accent-green"><div class="metric-icon">✓</div><div><span>Current status</span><strong class="status-text"><%= !attendance ? 'Offline' : attendance.clock_out ? 'Completed' : active ? (active.type==='LUNCH'?'Lunch':'Break') : 'Working' %></strong><small>Synced with server</small></div></article>
</section>

<section class="content-grid">
  <section class="panel activity-panel">
    <div class="panel-head"><div><p class="kicker">Activity stream</p><h3>Today's timeline</h3></div><a class="mini-link" href="/history">History →</a></div>
    <div class="timeline modern-timeline">
      <% if (!attendance) { %><div class="empty-state"><div class="empty-icon">◷</div><strong>No activity yet</strong><span>Your timeline will appear after clock-in.</span></div><% } else { %>
        <div class="timeline-item"><span class="timeline-node green">↗</span><div><strong>Clocked in</strong><small>Workday started</small></div><time><%= fmtTime(attendance.clock_in) %></time></div>
        <% breaks.forEach(b => { %><div class="timeline-item"><span class="timeline-node <%= b.type==='LUNCH'?'amber':'blue' %>"><%= b.type==='LUNCH'?'◴':'☕' %></span><div><strong><%= b.type==='LUNCH'?'Lunch':'Break' %></strong><small><%= b.end_time ? 'Completed' : 'Active now' %></small></div><time><%= fmtTime(b.start_time) %> · <%= fmtDuration((new Date(b.end_time || Date.now()) - new Date(b.start_time))/1000) %></time></div><% }) %>
        <% if (attendance.clock_out) { %><div class="timeline-item"><span class="timeline-node slate">✓</span><div><strong>Clocked out</strong><small>Workday completed</small></div><time><%= fmtTime(attendance.clock_out) %></time></div><% } %>
      <% } %>
    </div>
  </section>
  <aside class="panel daily-card">
    <div class="panel-head"><div><p class="kicker">Daily snapshot</p><h3>At a glance</h3></div></div>
    <div class="snapshot-graphic">
      <div class="snapshot-center"><span>Break count</span><strong><%= totals.breakCount %></strong><small>today</small></div>
      <span class="spark spark-a"></span><span class="spark spark-b"></span><span class="spark spark-c"></span>
    </div>
    <div class="snapshot-list">
      <div><span>Effective work</span><strong><%= fmtDuration(totals.work) %></strong></div>
      <div><span>Total pause</span><strong><%= fmtDuration(totals.break + totals.lunch) %></strong></div>
      <div><span>Lunch used</span><strong><%= breaks.some(b=>b.type==='LUNCH') ? 'Yes' : 'No' %></strong></div>
    </div>
  </aside>
</section>
<%- include('../partials/app-end') %>
