{% extends 'base.html' %}
{% block content %}
<h1 class="h3 mb-3">{{ t('new_automation') if not automation else t('edit') + ' #' + automation.id|string }}</h1>
<form method="post"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="card mb-3"><div class="card-body"><div class="row g-3">
<div class="col-md-6"><label class="form-label">{{ t('automation_name') }}</label><input class="form-control" name="name" value="{{ automation.name if automation else '' }}" required></div>
<div class="col-md-3"><label class="form-label">{{ t('trigger_type') }}</label><select class="form-select" name="trigger_type">{% for v in ['comment','dm','both'] %}<option value="{{ v }}" {% if automation and automation.trigger_type==v %}selected{% endif %}>{{ v }}</option>{% endfor %}</select></div>
<div class="col-md-3"><label class="form-label">{{ t('reply_mode') }}</label><select class="form-select" name="reply_mode"><option value="random" {% if not automation or automation.reply_mode=='random' %}selected{% endif %}>{{ t('random') }}</option><option value="sequential" {% if automation and automation.reply_mode=='sequential' %}selected{% endif %}>{{ t('sequential') }}</option></select></div>
<div class="col-md-6"><label class="form-label">{{ t('media_scope') }}</label><select class="form-select" name="media_scope"><option value="all" {% if not automation or automation.media_scope=='all' %}selected{% endif %}>{{ t('all_posts') }}</option><option value="selected" {% if automation and automation.media_scope=='selected' %}selected{% endif %}>{{ t('selected_posts') }}</option></select></div>
<div class="col-md-6 d-flex align-items-end"><div class="form-check"><input class="form-check-input" type="checkbox" name="enabled" id="enabled" {% if not automation or automation.enabled %}checked{% endif %}><label class="form-check-label" for="enabled">{{ t('enabled') }}</label></div></div>
<div class="col-md-6"><label class="form-label">{{ t('keywords') }}</label><textarea class="form-control" rows="6" name="keywords_text" placeholder="5|exact&#10;price|contains">{{ keywords_text }}</textarea><div class="form-text">{{ t('keywords_help') }}</div></div>
<div class="col-md-6"><label class="form-label">{{ t('comment_replies') }}</label><textarea class="form-control" rows="6" name="comment_replies_text" placeholder="Reply 1&#10;Reply 2">{{ replies_text }}</textarea></div>
</div></div></div>

{% if recent_media %}<div class="card mb-3"><div class="card-header">{{ t('recent_posts') }}</div><div class="card-body"><div class="row g-2">{% for m in recent_media %}<div class="col-md-6 col-xl-3"><label class="border rounded p-2 d-block h-100"><div class="form-check"><input class="form-check-input" type="checkbox" name="media_ids" value="{{ m.id }}" {% if m.id in selected_media %}checked{% endif %}><span class="small text-break">{{ m.caption or m.id }}</span>{% if m.thumbnail_url %}<img src="{{ m.thumbnail_url }}" class="img-fluid rounded mt-2" style="max-height:120px" alt="">{% endif %}<div class="small text-muted text-break">{{ m.id }}</div><div class="small text-muted">{{ m.taken_at }}</div></div></label></div>{% endfor %}</div></div></div>{% endif %}

<div class="card mb-3"><div class="card-header d-flex justify-content-between align-items-center"><span>{{ t('flow_builder') }}</span><button type="button" class="btn btn-sm btn-outline-primary" id="addStep">{{ t('add_step') }}</button></div><div class="card-body"><div id="steps">
{% for step in steps %}
<div class="step-row border rounded p-3 mb-3"><div class="d-flex justify-content-between"><strong>Step {{ loop.index }}</strong><button type="button" class="btn btn-sm btn-outline-danger remove-step">{{ t('delete') }}</button></div><div class="row g-2 mt-1">
<div class="col-md-4"><label class="form-label">{{ t('step_type') }}</label><select class="form-select step-type" name="step_type">{% for v in ['send_comment_reply','send_text_dm','send_image_dm','send_video_dm','send_link','wait_for_user_message','check_follow','delay','stop_flow'] %}<option value="{{ v }}" {% if step.step_type==v %}selected{% endif %}>{{ v }}</option>{% endfor %}</select></div>
<div class="col-md-8 field-text"><label class="form-label">{{ t('text') }}</label><textarea class="form-control" name="step_text" rows="2">{{ step.config.get('text','') }}</textarea></div>
<div class="col-md-6 field-keywords"><label class="form-label">{{ t('step_keywords') }}</label><textarea class="form-control" name="step_keywords" rows="2">{{ step.config.get('keywords', step.config.get('retry_keywords', []))|join('\n') if step.config.get('keywords', step.config.get('retry_keywords', [])) is not string else step.config.get('keywords', step.config.get('retry_keywords','')) }}</textarea></div>
<div class="col-md-6 field-media"><label class="form-label">{{ t('media_file') }}</label><select class="form-select" name="step_media_file_id"><option value="0">-</option>{% for f in media_files %}<option value="{{ f.id }}" {% if step.config.get('media_file_id')|int==f.id %}selected{% endif %}>#{{ f.id }} {{ f.original_name }}</option>{% endfor %}</select></div>
<div class="col-md-3 field-delay"><label class="form-label">{{ t('delay_min') }}</label><input class="form-control" type="number" min="0" max="10" step="0.5" name="step_min_seconds" value="{{ step.config.get('min_seconds',1) }}"></div>
<div class="col-md-3 field-delay"><label class="form-label">{{ t('delay_max') }}</label><input class="form-control" type="number" min="0" max="10" step="0.5" name="step_max_seconds" value="{{ step.config.get('max_seconds',3) }}"></div>
<div class="col-md-6 field-follow"><label class="form-label">{{ t('not_followed_text') }}</label><textarea class="form-control" name="step_not_followed_text">{{ step.config.get('not_followed_text','') }}</textarea></div>
<div class="col-md-6 field-follow"><label class="form-label">{{ t('unknown_text') }}</label><textarea class="form-control" name="step_unknown_text">{{ step.config.get('unknown_text','') }}</textarea></div>
</div></div>
{% endfor %}
</div></div></div>
<button class="btn btn-success">{{ t('save_automation') }}</button>
</form>

<template id="stepTemplate"><div class="step-row border rounded p-3 mb-3"><div class="d-flex justify-content-between"><strong>Step</strong><button type="button" class="btn btn-sm btn-outline-danger remove-step">{{ t('delete') }}</button></div><div class="row g-2 mt-1">
<div class="col-md-4"><label class="form-label">{{ t('step_type') }}</label><select class="form-select step-type" name="step_type">{% for v in ['send_comment_reply','send_text_dm','send_image_dm','send_video_dm','send_link','wait_for_user_message','check_follow','delay','stop_flow'] %}<option value="{{ v }}">{{ v }}</option>{% endfor %}</select></div>
<div class="col-md-8 field-text"><label class="form-label">{{ t('text') }}</label><textarea class="form-control" name="step_text" rows="2"></textarea></div>
<div class="col-md-6 field-keywords"><label class="form-label">{{ t('step_keywords') }}</label><textarea class="form-control" name="step_keywords" rows="2"></textarea></div>
<div class="col-md-6 field-media"><label class="form-label">{{ t('media_file') }}</label><select class="form-select" name="step_media_file_id"><option value="0">-</option>{% for f in media_files %}<option value="{{ f.id }}">#{{ f.id }} {{ f.original_name }}</option>{% endfor %}</select></div>
<div class="col-md-3 field-delay"><label class="form-label">{{ t('delay_min') }}</label><input class="form-control" type="number" min="0" max="10" step="0.5" name="step_min_seconds" value="1"></div><div class="col-md-3 field-delay"><label class="form-label">{{ t('delay_max') }}</label><input class="form-control" type="number" min="0" max="10" step="0.5" name="step_max_seconds" value="3"></div>
<div class="col-md-6 field-follow"><label class="form-label">{{ t('not_followed_text') }}</label><textarea class="form-control" name="step_not_followed_text"></textarea></div><div class="col-md-6 field-follow"><label class="form-label">{{ t('unknown_text') }}</label><textarea class="form-control" name="step_unknown_text"></textarea></div>
</div></div></template>
{% endblock %}
{% block scripts %}
<script>
function refreshStep(row){const type=row.querySelector('.step-type').value;const show=(sel,yes)=>row.querySelectorAll(sel).forEach(x=>x.style.display=yes?'':'none');show('.field-text',['send_comment_reply','send_text_dm','send_link'].includes(type));show('.field-keywords',['wait_for_user_message','check_follow'].includes(type));show('.field-media',['send_image_dm','send_video_dm'].includes(type));show('.field-delay',type==='delay');show('.field-follow',type==='check_follow');}
function wire(row){row.querySelector('.step-type').addEventListener('change',()=>refreshStep(row));row.querySelector('.remove-step').addEventListener('click',()=>row.remove());refreshStep(row);}
document.querySelectorAll('.step-row').forEach(wire);document.getElementById('addStep').addEventListener('click',()=>{const frag=document.getElementById('stepTemplate').content.cloneNode(true);const row=frag.querySelector('.step-row');document.getElementById('steps').appendChild(frag);wire(row);});
</script>
{% endblock %}