{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">{{ catalogue.service_name }}</h2>
      <p class="text-sm text-slate-500">{{ catalogue.service_code }} · {{ catalogue.service_category.name if catalogue.service_category else (catalogue.category or 'Uncategorised') }}</p>
    </div>
    <div class="flex gap-2">
      {% if can_edit %}<a href="/services/catalogue/{{ catalogue.id }}/edit" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Edit</a>{% endif %}
      <a href="/services" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Back to Services</a>
    </div>
  </div>

  <div class="grid gap-6 lg:grid-cols-3">
    <div class="rounded-2xl bg-white p-5 shadow-soft lg:col-span-2">
      <h3 class="text-sm font-semibold text-slate-900">Catalogue Details</h3>
      <dl class="mt-4 grid gap-3 md:grid-cols-2 text-sm text-slate-700">
        <div><dt class="font-medium text-slate-500">Recurrence</dt><dd>{{ catalogue.recurrence_type or '-' }}</dd></div>
        <div><dt class="font-medium text-slate-500">Engagement Type</dt><dd>{{ 'Assurance' if catalogue.engagement_type == 'assurance' else 'Non-Assurance' }}</dd></div>
        <div><dt class="font-medium text-slate-500">Sort order</dt><dd>{{ catalogue.sort_order }}</dd></div>
        <div class="md:col-span-2"><dt class="font-medium text-slate-500">Description</dt><dd>{{ catalogue.description or 'No description added.' }}</dd></div>
        <div class="md:col-span-2"><dt class="font-medium text-slate-500">Applicability</dt><dd>
          {% set labels = [] %}
          {% if catalogue.applicable_individual %}{% set _ = labels.append('Individual') %}{% endif %}
          {% if catalogue.applicable_proprietorship %}{% set _ = labels.append('Proprietorship') %}{% endif %}
          {% if catalogue.applicable_partnership %}{% set _ = labels.append('Partnership') %}{% endif %}
          {% if catalogue.applicable_llp %}{% set _ = labels.append('LLP') %}{% endif %}
          {% if catalogue.applicable_company %}{% set _ = labels.append('Company') %}{% endif %}
          {% if catalogue.applicable_trust %}{% set _ = labels.append('Trust') %}{% endif %}
          {% if catalogue.applicable_society %}{% set _ = labels.append('Society') %}{% endif %}
          {{ labels|join(', ') if labels else '-' }}
        </dd></div>
      </dl>
    </div>
    <div class="rounded-2xl bg-white p-5 shadow-soft">
      <h3 class="text-sm font-semibold text-slate-900">Firm Service Selection</h3>
      <div class="mt-4 text-sm text-slate-700">
        {% if current_selection and current_selection.is_enabled %}
          <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Selected for Firm</span>
          <p class="mt-3">Firm task templates configured: {{ current_templates|length }}</p>
          {% if current_selection.default_branch_id %}<p class="mt-1 text-xs text-slate-500">Default Branch ID: {{ current_selection.default_branch_id }}</p>{% endif %}
        {% else %}
          <span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Not Selected</span>
          <p class="mt-3 text-xs text-slate-500">Select this service for the active firm to customise firm task templates.</p>
        {% endif %}
      </div>

      {% if can_manage_firm_services %}
      <form method="post" action="/services/catalogue/{{ catalogue.id }}/toggle" class="mt-5 space-y-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Default Branch</label>
          {% if branches %}
          <select name="default_branch_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="">No default branch</option>
            {% for branch in branches %}
            <option value="{{ branch.id }}" {% if current_selection and current_selection.default_branch_id == branch.id %}selected{% endif %}>{{ branch.name }}</option>
            {% endfor %}
          </select>
          {% else %}
          <input type="hidden" name="default_branch_id" value="">
          <p class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">No active branch found for this firm.</p>
          {% endif %}
        </div>
        <button class="w-full rounded-xl {% if current_selection and current_selection.is_enabled %}border border-amber-300 text-amber-700 hover:bg-amber-50{% else %}bg-emerald-600 text-white hover:bg-emerald-700{% endif %} px-4 py-2 text-sm font-semibold">
          {{ 'Disable Service for Firm' if current_selection and current_selection.is_enabled else 'Select Service for Firm' }}
        </button>
      </form>
      {% endif %}

      {% if current_selection and current_selection.is_enabled %}
      <div class="mt-4 flex flex-wrap gap-2">
        <a href="/services/templates/{{ catalogue.id }}" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Customise Firm Tasks</a>
        <a href="/services" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">View Firm Services</a>
      </div>
      {% endif %}
    </div>
  </div>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">Due Date Rules</h3>
        <p class="mt-1 text-xs text-slate-500">Rules define statutory due dates copied into engagements. Extensions are stored separately as history.</p>
      </div>
      {% if can_edit %}<a href="/services/catalogue/{{ catalogue.id }}/due-rules/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Add Rule</a>{% endif %}
    </div>
    <div class="mt-4 overflow-hidden rounded-xl border border-slate-200">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Rule</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Type</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Due Logic</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th><th></th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for rule in due_rules %}
          <tr>
            <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ rule.rule_name }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ rule.period_type|replace('_',' ')|title }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">
              {% if rule.period_type in ['yearly', 'one_time'] %}
                {{ '%02d'|format(rule.due_day or 0) }}-{{ '%02d'|format(rule.due_month or 0) }} based on {{ rule.due_year_basis|replace('_',' ') }}
              {% elif rule.period_type in ['monthly', 'quarterly'] %}
                Day {{ rule.due_day or '-' }} with month offset {{ rule.due_month_offset }}
              {% elif rule.period_type == 'renewal_based' %}
                Expiry date minus {{ rule.renewal_days_before_expiry or 0 }} day(s)
              {% else %}
                Manual / event based
              {% endif %}
            </td>
            <td class="px-4 py-3 text-sm"><span class="rounded-full px-2 py-1 text-xs font-medium {% if rule.is_active %}bg-emerald-100 text-emerald-700{% else %}bg-slate-200 text-slate-700{% endif %}">{{ 'Active' if rule.is_active else 'Inactive' }}</span></td>
            <td class="px-4 py-3 text-right">{% if can_edit %}<a href="/services/catalogue/{{ catalogue.id }}/due-rules/{{ rule.id }}/edit" class="text-sm font-medium text-brand-700 hover:underline">Edit</a>{% endif %}</td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No due date rules configured yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">Due Date Extensions</h3>
        <p class="mt-1 text-xs text-slate-500">Each extension is preserved. New extensions update current due dates for matching unlocked engagements.</p>
      </div>
      {% if can_edit %}<a href="/services/catalogue/{{ catalogue.id }}/due-extensions/new" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Add Extension</a>{% endif %}
    </div>
    <div class="mt-4 overflow-hidden rounded-xl border border-slate-200">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">FY / AY / Period</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Sequence</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Previous</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Extended To</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Reference</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for ext in due_extensions %}
          <tr>
            <td class="px-4 py-3 text-sm text-slate-700">FY {{ ext.financial_year }}{% if ext.assessment_year %} / AY {{ ext.assessment_year }}{% endif %}{% if ext.period_label %} / {{ ext.period_label }}{% endif %}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ ext.extension_sequence }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ ext.previous_due_date or '-' }}</td>
            <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ ext.extended_due_date }}</td>
            <td class="px-4 py-3 text-sm text-slate-700"><div>{{ ext.notification_reference or '-' }}</div>{% if ext.notification_date %}<div class="text-xs text-slate-500">{{ ext.notification_date }}</div>{% endif %}</td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No due date extensions recorded yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">System Default Tasks</h3>
        <p class="mt-1 text-xs text-slate-500">System Admin controls the standard task template used as the base for firms.</p>
      </div>
      {% if is_system_admin and can_edit %}
      <a href="/services/catalogue/{{ catalogue.id }}/defaults" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Manage Defaults</a>
      {% endif %}
    </div>

    <div class="mt-4 space-y-3">
      {% for task in default_templates %}
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="text-sm font-semibold text-slate-900">{{ task.sequence_no }}. {{ task.task_name }}</div>
            <div class="mt-1 text-xs text-slate-500">
              Role: {{ task.default_role_name or '-' }} ·
              Mandatory: {{ 'Yes' if task.is_mandatory else 'No' }} ·
              Review: {{ 'Yes' if task.requires_review else 'No' }} ·
              {{ 'Active' if task.is_active else 'Inactive' }}
            </div>
            {% if task.description %}<p class="mt-2 text-sm text-slate-700">{{ task.description }}</p>{% endif %}
          </div>
          {% if is_system_admin and can_edit %}
          <a href="/services/catalogue/{{ catalogue.id }}/defaults/{{ task.id }}/edit"
             class="shrink-0 rounded-lg border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700 hover:bg-brand-100">
            Edit
          </a>
          {% endif %}
        </div>
      </div>
      {% else %}
      <div class="rounded-xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No system default tasks configured yet.</div>
      {% endfor %}
    </div>
  </section>

  {% if current_selection and current_selection.is_enabled %}
  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">Firm Task Configuration</h3>
        <p class="mt-1 text-xs text-slate-500">
          Firm Admin can edit, disable or enable tasks for this firm and add extra firm-only tasks.
          System defaults are not changed.
        </p>
      </div>
      {% if can_manage_firm_tasks %}
      <div class="flex flex-wrap gap-2">
        <a href="/services/templates/{{ catalogue.id }}"
           class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">
          Add / Manage Firm Tasks
        </a>
      </div>
      {% endif %}
    </div>

    <div class="mt-4 space-y-3">
      {% for task in current_templates %}
      <div class="rounded-xl border p-4 {% if task.is_active %}border-slate-200{% else %}border-slate-200 bg-slate-50 opacity-80{% endif %}">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
              <div class="text-sm font-semibold text-slate-900">{{ task.sequence_no }}. {{ task.task_name }}</div>
              <span class="rounded-full px-2 py-1 text-[11px] font-semibold {% if task.is_active %}bg-emerald-100 text-emerald-700{% else %}bg-slate-200 text-slate-600{% endif %}">
                {{ 'Enabled for Firm' if task.is_active else 'Disabled for Firm' }}
              </span>
            </div>
            <div class="mt-1 text-xs text-slate-500">
              Role: {{ task.default_role_name or '-' }} ·
              Mandatory: {{ 'Yes' if task.is_mandatory else 'No' }} ·
              Review: {{ 'Yes' if task.requires_review else 'No' }}
            </div>
            {% if task.description %}<p class="mt-2 text-sm text-slate-700">{{ task.description }}</p>{% endif %}
          </div>

          {% if can_manage_firm_tasks %}
          <div class="flex shrink-0 flex-wrap items-center gap-2">
            <a href="/services/templates/{{ catalogue.id }}/tasks/{{ task.id }}/edit"
               class="rounded-lg border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700 hover:bg-brand-100">
              Edit
            </a>
            <form method="post" action="/services/templates/{{ catalogue.id }}/tasks/{{ task.id }}/toggle-active">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <button type="submit"
                      class="rounded-lg border px-3 py-1.5 text-xs font-semibold {% if task.is_active %}border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100{% else %}border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100{% endif %}">
                {{ 'Disable for Firm' if task.is_active else 'Enable for Firm' }}
              </button>
            </form>
          </div>
          {% endif %}
        </div>
      </div>
      {% else %}
      <div class="rounded-xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">
        No firm task templates are configured yet. Use <strong>Add / Manage Firm Tasks</strong> to copy defaults or add firm-specific tasks.
      </div>
      {% endfor %}
    </div>

    <div class="mt-4 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-800">
      Editing or disabling a firm task affects future task generation only. Existing engagement task instances remain unchanged.
    </div>
  </section>
  {% endif %}
</div>
{% endblock %}