{% import 'components/buttons.html' as buttons %}
{% import 'components/alerts.html' as alerts %}
{% import 'components/cards.html' as cards %}
{% import 'components/forms.html' as forms %}
{% import 'components/tables.html' as tables %}
{% import 'components/navigation.html' as navigation %}
{% import 'components/dialogs.html' as dialogs %}
{% import 'components/dashboard.html' as dashboard %}
{% import 'components/layout.html' as layout %}

{% macro button(label, href=None, kind='primary', size='md', icon=None, attrs='', disabled=False, busy=False, title='', button_type='button') -%}
{{ buttons.button(label=label, href=href, kind=kind, size=size, icon=icon, attrs=attrs, disabled=disabled, busy=busy, title=title, button_type=button_type) }}
{%- endmacro %}

{% macro icon_button(icon, label, href=None, kind='ghost', size='md', attrs='') -%}
{{ buttons.icon_button(icon=icon, label=label, href=href, kind=kind, size=size, attrs=attrs) }}
{%- endmacro %}

{% macro action_group(items, class_name='') -%}
{{ buttons.action_group(items=items, class_name=class_name) }}
{%- endmacro %}

{% macro badge(label, tone='neutral') -%}
<span class="hil-badge hil-badge-{{ tone }}">{{ label }}</span>
{%- endmacro %}

{% macro alert(message, tone='info', title='', dismissible=False, attrs='') -%}
{{ alerts.alert(message=message, tone=tone, title=title, dismissible=dismissible, attrs=attrs) }}
{%- endmacro %}

{% macro notification(message, tone='info', title='', attrs='') -%}
{{ alerts.notification(message=message, tone=tone, title=title, attrs=attrs) }}
{%- endmacro %}

{% macro status_pill(label, tone='neutral', attrs='') -%}
{{ alerts.status_pill(label=label, tone=tone, attrs=attrs) }}
{%- endmacro %}

{% macro flash_stack(messages) -%}
{{ alerts.flash_stack(messages) }}
{%- endmacro %}

{% macro card(title='', subtitle='', body_class='') -%}
<section class="hil-card {{ body_class }}">
  {% if title %}
  <header class="hil-card-head">
    <h3>{{ title }}</h3>
    {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
  </header>
  {% endif %}
  <div class="hil-card-body">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro metric_tile(label, value, delta='', tone='neutral') -%}
{{ cards.metric_tile(label=label, value=value, delta=delta, tone=tone) }}
{%- endmacro %}

{% macro kpi_card(label, value, subtitle='', tone='neutral') -%}
{{ cards.kpi_card(label=label, value=value, subtitle=subtitle, tone=tone) }}
{%- endmacro %}

{% macro stat_block(label, value, detail='', tone='neutral') -%}
{{ cards.stat_block(label=label, value=value, detail=detail, tone=tone) }}
{%- endmacro %}

{% macro empty_state(title, message, action_text='', action_href='', tone='neutral') -%}
{{ cards.empty_state(title=title, message=message, action_text=action_text, action_href=action_href, tone=tone) }}
{%- endmacro %}

{% macro loading_state(lines=3) -%}
{{ cards.loading_state(lines=lines) }}
{%- endmacro %}

{% macro skeleton(lines=3) -%}
{{ cards.loading_state(lines=lines) }}
{%- endmacro %}

{% macro breadcrumbs(items, home_href='/', home_label='Home') -%}
{{ navigation.breadcrumbs(items=items, home_href=home_href, home_label=home_label) }}
{%- endmacro %}

{% macro page_header(title, subtitle='', eyebrow='', actions='') -%}
{{ navigation.page_header(title=title, subtitle=subtitle, eyebrow=eyebrow, actions=actions) }}
{%- endmacro %}

{% macro section_header(title, subtitle='', actions='') -%}
{{ navigation.section_header(title=title, subtitle=subtitle, actions=actions) }}
{%- endmacro %}

{% macro tabs(items, active='') -%}
{{ navigation.tabs(items=items, active=active) }}
{%- endmacro %}

{% macro quick_actions(items, title='Quick Actions') -%}
{{ navigation.quick_actions(items=items, title=title) }}
{%- endmacro %}

{% macro accordion(items) -%}
{{ navigation.accordion(items=items) }}
{%- endmacro %}

{% macro context_menu(items) -%}
{{ navigation.context_menu(items=items) }}
{%- endmacro %}

{% macro form_field(id, label, value='', input_type='text', placeholder='', help_text='', error='', required=False, disabled=False, readonly=False, autofocus=False, attrs='') -%}
{{ forms.form_field(id=id, label=label, value=value, input_type=input_type, placeholder=placeholder, help_text=help_text, error=error, required=required, disabled=disabled, readonly=readonly, autofocus=autofocus, attrs=attrs) }}
{%- endmacro %}

{% macro text_area(id, label, value='', placeholder='', help_text='', error='', required=False, rows=4, attrs='') -%}
{{ forms.text_area(id=id, label=label, value=value, placeholder=placeholder, help_text=help_text, error=error, required=required, rows=rows, attrs=attrs) }}
{%- endmacro %}

{% macro input_group(label, id, prefix='', suffix='', value='', placeholder='', help_text='', error='', required=False, attrs='') -%}
{{ forms.input_group(label=label, id=id, prefix=prefix, suffix=suffix, value=value, placeholder=placeholder, help_text=help_text, error=error, required=required, attrs=attrs) }}
{%- endmacro %}

{% macro select_control(id, label, options, selected='', help_text='', error='', required=False, attrs='') -%}
{{ forms.select_control(id=id, label=label, options=options, selected=selected, help_text=help_text, error=error, required=required, attrs=attrs) }}
{%- endmacro %}

{% macro checkbox(id, label, checked=False, help_text='', attrs='') -%}
{{ forms.checkbox(id=id, label=label, checked=checked, help_text=help_text, attrs=attrs) }}
{%- endmacro %}

{% macro radio_group(name, label, options, selected='', help_text='') -%}
{{ forms.radio_group(name=name, label=label, options=options, selected=selected, help_text=help_text) }}
{%- endmacro %}

{% macro form_section(title, subtitle='') -%}
<section class="hil-form-section">
  <header class="hil-section-header">
    <div>
      <h3>{{ title }}</h3>
      {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
    </div>
  </header>
  <div class="hil-form-section-body">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro form_actions(alignment='end') -%}
<div class="hil-form-actions hil-form-actions-{{ alignment }}">
  {{ caller() if caller else '' }}
</div>
{%- endmacro %}

{% macro search_bar(id='hil-search', placeholder='Search', attrs='') -%}
{{ forms.search_bar(id=id, placeholder=placeholder, attrs=attrs) }}
{%- endmacro %}

{% macro table_shell(title='', subtitle='', actions='') -%}
<section class="hil-table-shell">
  {% if title or subtitle or actions %}
  <header class="hil-section-header">
    <div>
      {% if title %}<h3>{{ title }}</h3>{% endif %}
      {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
    </div>
    {% if actions %}<div class="hil-table-actions">{{ actions|safe }}</div>{% endif %}
  </header>
  {% endif %}
  <div class="hil-table-wrap">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro table_empty_state(message='No records found.') -%}
{{ tables.table_empty_state(message=message) }}
{%- endmacro %}

{% macro table_loading_state(rows=4, cols=4) -%}
{{ tables.table_loading_state(rows=rows, cols=cols) }}
{%- endmacro %}

{% macro pagination(current_page, total_pages, base_href, query_name='page') -%}
{{ tables.pagination(current_page=current_page, total_pages=total_pages, base_href=base_href, query_name=query_name) }}
{%- endmacro %}

{% macro data_table(id='', attrs='') -%}
<div class="hil-table-component" {% if id %}id="{{ id }}"{% endif %} {{ attrs|safe }}>
  {{ caller() if caller else '' }}
</div>
{%- endmacro %}

{% macro kpi_grid(items) -%}
{{ dashboard.kpi_grid(items=items) }}
{%- endmacro %}

{% macro chart_container(id, title='', caption='') -%}
<section class="hil-chart-container">
  {% if title or caption %}
  <header class="hil-section-header">
    <div>
      {% if title %}<h3>{{ title }}</h3>{% endif %}
      {% if caption %}<p>{{ caption }}</p>{% endif %}
    </div>
  </header>
  {% endif %}
  <div class="hil-chart-shell">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro recent_activity(items, title='Recent Activity') -%}
{{ dashboard.recent_activity(items=items, title=title) }}
{%- endmacro %}

{% macro task_list(items, title='Tasks') -%}
{{ dashboard.task_list(items=items, title=title) }}
{%- endmacro %}

{% macro notification_panel(items, title='Notifications') -%}
{{ dashboard.notification_panel(items=items, title=title) }}
{%- endmacro %}

{% macro dashboard_quick_actions(items, title='Quick Actions') -%}
{{ dashboard.quick_actions(items=items, title=title) }}
{%- endmacro %}

{% macro modal(id, title='', subtitle='') -%}
{{ dialogs.modal(id=id, title=title, subtitle=subtitle) }}
{%- endmacro %}

{% macro drawer(id, title='', subtitle='') -%}
<aside id="{{ id }}" class="hil-drawer" hidden aria-hidden="true">
  <div class="hil-drawer-panel">
    <header>
      <div>
        <h4>{{ title }}</h4>
        {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
      </div>
      <button type="button" class="hil-ghost-btn" data-hil-drawer-close="{{ id }}">Close</button>
    </header>
    <div class="hil-drawer-body">{{ caller() if caller else '' }}</div>
  </div>
</aside>
{%- endmacro %}

{% macro panel(title='') -%}
<section class="hil-panel">
  {% if title %}<header><h4>{{ title }}</h4></header>{% endif %}
  <div class="hil-panel-body">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro timeline(items) -%}
<ol class="hil-timeline">
  {% for item in items %}
  <li>
    <span class="hil-time">{{ item.time }}</span>
    <div class="hil-time-content">
      <strong>{{ item.title }}</strong>
      {% if item.detail %}<p>{{ item.detail }}</p>{% endif %}
    </div>
  </li>
  {% endfor %}
</ol>
{%- endmacro %}

{% macro toast_host() -%}
<div id="hil-toast-host" class="hil-toast-host" aria-live="polite" aria-atomic="false"></div>
{%- endmacro %}

{% macro page_shell(title, subtitle='', actions='') -%}
{{ layout.page_shell(title=title, subtitle=subtitle, actions=actions) }}
{%- endmacro %}