{{template "base" .}}

{{define "content"}}
{{$d := .}}
<style>
.ai-form { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:560px; margin-bottom:32px; }
.ai-form h2 { margin:0 0 16px; font-size:1.05rem; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:0.82rem; color:var(--muted); margin-bottom:5px; }
.field input, .field select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; box-sizing:border-box; }
.field-row { display:flex; gap:12px; }
.field-row .field { flex:1; }
.btn { padding:8px 20px; border:none; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger  { background:#f44336; color:#fff; font-size:0.8rem; padding:5px 12px; }
.sched-list { display:flex; flex-direction:column; gap:12px; }
.sched-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px; display:flex; gap:16px; align-items:center; }
.sched-info { flex:1; }
.sched-label { font-weight:600; margin-bottom:4px; }
.sched-meta  { font-size:0.8rem; color:var(--muted); }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:0.72rem; font-weight:600; margin-left:6px; }
.badge-active   { background:rgba(76,175,80,0.15); color:#4caf50; }
.badge-inactive { background:rgba(158,158,158,0.15); color:#9e9e9e; }
.empty { padding:32px; text-align:center; color:var(--muted); background:var(--card); border:1px solid var(--border); border-radius:12px; }
</style>

<h1 style="margin:0 0 24px;">Auto Import</h1>

<div class="ai-form">
  <h2>New Schedule</h2>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 18px;">
    Configure a recurring CSV import source. The app will fetch and import it automatically on a daily schedule.
  </p>
  <form method="post" action="/auto-import">
    <div class="field">
      <label for="ai-label">Schedule label</label>
      <input type="text" id="ai-label" name="label" placeholder="e.g. CGD Checking Monthly" required>
    </div>
    <div class="field-row">
      <div class="field">
        <label for="ai-account">Account</label>
        <select id="ai-account" name="account_id" required>
          <option value="">-- select --</option>
          {{range $d.Accounts}}
          <option value="{{.ID}}">{{.Name}} ({{.Type}})</option>
          {{end}}
        </select>
      </div>
      <div class="field">
        <label for="ai-format">CSV format</label>
        <select id="ai-format" name="format">
          <option value="generic">Generic</option>
          <option value="cgd">CGD</option>
          <option value="traderepublic">Trade Republic</option>
        </select>
      </div>
    </div>
    <div class="field">
      <label for="ai-url">Source URL <span style="color:var(--muted); font-weight:400;">(optional — or use manual webhook)</span></label>
      <input type="url" id="ai-url" name="url" placeholder="https://…/export.csv">
    </div>
    <div class="field" style="display:flex; align-items:center; gap:8px; margin-bottom:18px;">
      <input type="checkbox" id="ai-active" name="active" checked style="width:auto; margin:0;">
      <label for="ai-active" style="margin:0; color:var(--text); font-size:0.9rem;">Enable immediately</label>
    </div>
    <button type="submit" class="btn btn-primary" style="width:100%;">Create Schedule</button>
  </form>
</div>

<div style="font-size:1rem; font-weight:700; margin-bottom:12px;">Active Schedules</div>

{{if $d.Schedules}}
<div class="sched-list">
  {{range $d.Schedules}}
  <div class="sched-card">
    <div class="sched-info">
      <div class="sched-label">
        {{.Label}}
        {{if .Active}}<span class="badge badge-active">active</span>{{else}}<span class="badge badge-inactive">paused</span>{{end}}
      </div>
      <div class="sched-meta">
        Format: {{.Format}} &bull; Account: {{.AccountID}}
        {{if .URL}}&bull; <span style="font-family:monospace;">{{.URL}}</span>{{end}}
        {{if not .LastRunAt.IsZero}}&bull; Last run: {{dateShort .LastRunAt}}{{end}}
      </div>
    </div>
    <button class="btn btn-danger" onclick="deleteSchedule('{{.ID}}')">Delete</button>
  </div>
  {{end}}
</div>
{{else}}
<div class="empty">No import schedules yet. Create one above.</div>
{{end}}

<div style="margin-top:32px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px;">
  <div style="font-weight:600; margin-bottom:8px;">Webhook endpoint</div>
  <p style="font-size:0.83rem; color:var(--muted); margin:0 0 12px;">
    You can also push a CSV file directly without scheduling. Use this endpoint from any automation tool (n8n, cron, etc.):
  </p>
  <div style="font-family:monospace; font-size:0.82rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 14px; word-break:break-all;">
    POST /import/confirm &mdash; multipart/form-data with fields: <code>account_id</code>, <code>format</code>, <code>rows</code> (JSON array)
  </div>
</div>

<script>
function deleteSchedule(id) {
  if (!confirm('Delete this schedule?')) return;
  fetch('/auto-import/' + id, { method: 'DELETE' })
    .then(r => { if (r.ok) location.reload(); });
}
</script>
{{end}}