{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}

  <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
    <div class="bg-gradient-to-r from-brand-700 via-brand-600 to-slate-900 px-6 py-6 text-white">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-brand-100">My Workspace</p>
          <h2 class="mt-2 text-2xl font-semibold">Today’s work, attendance and personal profile</h2>
          <p class="mt-2 max-w-3xl text-sm text-brand-100">Use this dashboard for your own assignments, attendance, leave, documents, payslips and alerts.</p>
        </div>
        <div class="flex flex-wrap gap-2">
          {% if employee %}
          <a href="/employee/work" class="rounded-xl bg-white px-4 py-2 text-sm font-semibold text-brand-700 hover:bg-brand-50">Open My Work Board</a>
          <a href="/employee/attendance" class="rounded-xl border border-white/40 px-4 py-2 text-sm font-semibold text-white hover:bg-white/10">Punch / Attendance</a>
          {% else %}
          <a href="/employee/register" class="rounded-xl bg-white px-4 py-2 text-sm font-semibold text-brand-700 hover:bg-brand-50">Request Employee Linkage</a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  {% if employee %}
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
    <a href="/employee/work" class="af-metric-card hover:border-brand-200">
      <div class="text-xs font-semibold uppercase text-slate-500">Open Work</div>
      <div class="mt-2 text-3xl font-semibold text-slate-900">{{ work_payload.summary.open if work_payload else 0 }}</div>
      <div class="mt-1 text-xs text-slate-500">Assigned to me</div>
    </a>
    <a href="/employee/work?status=in_progress" class="af-metric-card hover:border-brand-200">
      <div class="text-xs font-semibold uppercase text-slate-500">In Progress</div>
      <div class="mt-2 text-3xl font-semibold text-brand-700">{{ work_payload.summary.in_progress if work_payload else 0 }}</div>
      <div class="mt-1 text-xs text-slate-500">Currently active</div>
    </a>
    <a href="/employee/work?status=blocked" class="af-metric-card border-amber-200 bg-amber-50 hover:border-amber-300">
      <div class="text-xs font-semibold uppercase text-amber-700">Blocked</div>
      <div class="mt-2 text-3xl font-semibold text-amber-700">{{ work_payload.summary.blocked if work_payload else 0 }}</div>
      <div class="mt-1 text-xs text-amber-700">Need clarification</div>
    </a>
    <a href="/employee/work?date_bucket=overdue" class="af-metric-card border-red-200 bg-red-50 hover:border-red-300">
      <div class="text-xs font-semibold uppercase text-red-700">Overdue</div>
      <div class="mt-2 text-3xl font-semibold text-red-700">{{ work_payload.summary.overdue if work_payload else 0 }}</div>
      <div class="mt-1 text-xs text-red-700">Immediate action</div>
    </a>
    <a href="/employee/attendance" class="af-metric-card hover:border-brand-200">
      <div class="text-xs font-semibold uppercase text-slate-500">Attendance</div>
      <div class="mt-2 text-lg font-semibold text-slate-900">{% if today_attendance %}Marked{% else %}Not Marked{% endif %}</div>
      <div class="mt-1 text-xs text-slate-500">Today</div>
    </a>
    <a href="/employee/payslips" class="af-metric-card hover:border-brand-200">
      <div class="text-xs font-semibold uppercase text-slate-500">Payslips</div>
      <div class="mt-2 text-3xl font-semibold text-slate-900">{{ payslips|length }}</div>
      <div class="mt-1 text-xs text-slate-500">Available slips</div>
    </a>
  </section>

  <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px]">
    <div class="space-y-6">
      <div class="af-card">
        <div class="flex flex-wrap items-center justify-between gap-3">
          <div>
            <h3 class="text-lg font-semibold text-slate-900">My Assignment Board Snapshot</h3>
            <p class="mt-1 text-sm text-slate-600">Your work is grouped by practical status so you can start from urgent items first.</p>
          </div>
          <a href="/employee/work" class="af-btn af-btn-primary">Open My Work Board</a>
        </div>
        <div class="mt-5 grid gap-3 md:grid-cols-4">
          {% if work_payload %}
          {% for column in work_payload.columns %}
          <a href="/employee/work?status={{ column.code }}" class="rounded-2xl border border-slate-200 bg-slate-50 p-4 transition hover:border-brand-300 hover:bg-brand-50/50">
            <div class="text-sm font-semibold text-slate-900">{{ column.label }}</div>
            <div class="mt-2 text-2xl font-semibold text-slate-900">{{ column.cards|length }}</div>
            <div class="mt-1 text-xs text-slate-500">assignment card(s)</div>
          </a>
          {% endfor %}
          {% else %}
          <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500 md:col-span-4">No work board data available yet.</div>
          {% endif %}
        </div>
      </div>

      <div class="af-card">
        <div class="flex flex-wrap items-center justify-between gap-3">
          <div>
            <h3 class="text-lg font-semibold text-slate-900">Leave & Availability</h3>
            <p class="mt-1 text-sm text-slate-600">Balances and recent leave requests for your profile.</p>
          </div>
          <a href="/employee/leave" class="af-btn af-btn-secondary">Open Leave</a>
        </div>
        <div class="mt-5 grid gap-3 md:grid-cols-3">
          {% for bal in leave_balances %}
          <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
            <div class="text-xs font-semibold uppercase text-slate-500">{{ bal.leave_type.name if bal.leave_type else bal.leave_type_id }}</div>
            <div class="mt-2 text-2xl font-semibold text-slate-900">{{ bal.balance_days }}</div>
            <div class="text-xs text-slate-500">days balance</div>
          </div>
          {% else %}
          <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500 md:col-span-3">No leave balance available yet.</div>
          {% endfor %}
        </div>
      </div>
    </div>

    <aside class="space-y-6">
      <div class="af-card">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="font-semibold text-slate-900">Today’s Attendance</h3>
            <p class="mt-1 text-sm text-slate-600">{% if today_attendance %}Punch In: {{ today_attendance.punch_in_utc.strftime('%H:%M') if today_attendance.punch_in_utc else '-' }} · Punch Out: {{ today_attendance.punch_out_utc.strftime('%H:%M') if today_attendance.punch_out_utc else '-' }}{% else %}Attendance not marked for today.{% endif %}</p>
          </div>
          <a href="/employee/attendance" class="af-btn af-btn-secondary">Open</a>
        </div>
      </div>

      <div class="af-card">
        <h3 class="font-semibold text-slate-900">Profile Summary</h3>
        <dl class="mt-4 grid gap-4 text-sm">
          <div><dt class="text-slate-500">Name</dt><dd class="font-medium text-slate-900">{{ employee.full_name }}</dd></div>
          <div><dt class="text-slate-500">Code / Status</dt><dd class="font-medium text-slate-900">{{ employee.employee_code }} · {{ employee.status.replace('_',' ').title() }}</dd></div>
          <div><dt class="text-slate-500">Designation</dt><dd class="font-medium text-slate-900">{{ employee.designation or '-' }}</dd></div>
          <div><dt class="text-slate-500">Email</dt><dd class="font-medium text-slate-900">{{ employee.email or current_user.email }}</dd></div>
          <div><dt class="text-slate-500">Mobile</dt><dd class="font-medium text-slate-900">{{ employee.mobile or current_user.mobile or '-' }}</dd></div>
        </dl>
        <a href="/employee/profile" class="mt-5 inline-flex af-btn af-btn-secondary">Update My Profile</a>
      </div>

      <div class="af-card">
        <div class="flex items-center justify-between gap-3">
          <h3 class="font-semibold text-slate-900">Quick Links</h3>
        </div>
        <div class="mt-4 grid gap-2 text-sm">
          <a href="/employee/documents" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">My Documents</a>
          <a href="/employee/payslips" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">My Payslips</a>
          <a href="/alerts" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">My Alert</a>
        </div>
      </div>
    </aside>
  </section>
  {% elif pending_request %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900 shadow-soft"><h3 class="font-semibold">Employee profile request is pending</h3><p class="mt-1">Your request #{{ pending_request.id }} is waiting for approval.</p></div>
  {% else %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 shadow-soft"><h3 class="font-semibold text-amber-900">Your login is not linked to an employee master</h3><p class="mt-1 text-sm text-amber-900">Submit an employee link request or ask Firm Admin/Partner/Branch Manager to link your user account from Employee Master.</p><a href="/employee/register" class="mt-4 inline-flex rounded-xl bg-amber-700 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-800">Request Employee Link</a></div>
  {% endif %}
</div>
{% endblock %}