{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-5xl space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <h2 class="text-2xl font-semibold text-slate-900">Engagement Letter</h2>
      <p class="mt-1 text-sm text-slate-500">Accept digitally with OTP/session evidence or upload a manually signed copy.</p>
    </div>
    <a href="/client/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Dashboard</a>
  </div>

  {% if not engagement_letter %}
  <section class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-800">
    Engagement letter is not yet sent by the firm.
  </section>
  {% else %}
  <section class="rounded-2xl bg-white p-6 shadow-soft">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h3 class="text-lg font-semibold text-slate-900">{{ engagement_letter.title }}</h3>
        <p class="mt-1 text-sm text-slate-500">Version {{ engagement_letter.version_no }} · {{ engagement_letter.status.replace('_',' ').title() }}</p>
      </div>
      <a href="/clients/{{ client_row.id if client_row.id is defined else client_row['id'] }}/acceptance/engagement-letter/{{ engagement_letter.id }}/download" target="_blank" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">View / Download / Print</a>
    </div>

    <div class="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700 whitespace-pre-wrap max-h-96 overflow-auto">{{ engagement_letter.body_text }}</div>

    {% if engagement_letter.status in ['sent_to_client', 'manual_uploaded', 'rejected'] %}
    <div class="mt-6 grid gap-4 lg:grid-cols-2">
      <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 space-y-3">
        <h4 class="text-sm font-semibold text-emerald-900">Accept Digitally with OTP</h4>
        <p class="text-xs text-emerald-800">Use this option when you accept the engagement letter electronically. The ERP stores OTP verification, user, time, IP/device and declaration evidence.</p>
        <form method="post" action="/client/engagement-letter/{{ engagement_letter.id }}/send-otp">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="w-full rounded-xl border border-emerald-300 bg-white px-4 py-2 text-sm font-semibold text-emerald-700 hover:bg-emerald-100">Send OTP</button>
        </form>
        <form method="post" action="/client/engagement-letter/{{ engagement_letter.id }}/accept-digital" class="space-y-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input name="otp" inputmode="numeric" required placeholder="Enter OTP" class="w-full rounded-xl border border-emerald-200 px-3 py-2 text-sm">
          <textarea name="declaration_text" rows="3" class="w-full rounded-xl border border-emerald-200 px-3 py-2 text-sm">I have read and accept this engagement letter for and on behalf of the client.</textarea>
          <button class="w-full rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700">Verify OTP & Accept Digitally</button>
        </form>
      </div>

      <form method="post" enctype="multipart/form-data" action="/client/engagement-letter/{{ engagement_letter.id }}/upload-signed" class="rounded-xl border border-indigo-200 bg-indigo-50 p-4 space-y-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <h4 class="text-sm font-semibold text-indigo-900">Upload Manually Signed Copy</h4>
        <p class="text-xs text-indigo-800">Download/print the engagement letter, sign it manually and upload the signed PDF/image. The firm will verify it before marking it accepted.</p>
        <input type="file" name="signed_file" accept=".pdf,.jpg,.jpeg,.png" required class="w-full rounded-xl border border-indigo-200 bg-white px-3 py-2 text-sm">
        <button class="w-full rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Upload Signed Copy</button>
      </form>
    </div>
    {% else %}
    <div class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
      Current status: {{ engagement_letter.status.replace('_',' ').title() }}.
      {% if engagement_letter.accepted_at_utc %}Accepted at: {{ engagement_letter.accepted_at_utc }}{% endif %}
    </div>
    {% endif %}
  </section>
  {% endif %}
</div>
{% endblock %}