package ui


const targetsTabHTML = `{{ define "targetsTab" }}
<div class="space-y-5">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-base font-bold text-white">Crawler Targets</h2>
            <p class="text-xs text-slate-400 mt-0.5">Configure job board URLs to crawl for new postings</p>
        </div>
    </div>

    <!-- Add Target Form -->
    <div class="p-5 rounded-xl bg-slate-900/60 border border-slate-800">
        <h3 class="text-sm font-bold text-white mb-3">Add New Target</h3>
        <form hx-post="/targets" hx-target="#targets-container" hx-swap="innerHTML"
              class="grid grid-cols-1 md:grid-cols-4 gap-3">
            <input type="text" name="name" placeholder="Target name (e.g. Go Backend SF)" required
                   class="px-3 py-2 text-xs rounded-lg bg-slate-800 border border-slate-700 text-white focus:outline-none focus:border-indigo-500 placeholder:text-slate-500">
            <input type="url" name="target_url" placeholder="Target URL" required
                   class="px-3 py-2 text-xs rounded-lg bg-slate-800 border border-slate-700 text-white focus:outline-none focus:border-indigo-500 placeholder:text-slate-500">
            <select name="platform"
                    class="px-3 py-2 text-xs rounded-lg bg-slate-800 border border-slate-700 text-white focus:outline-none focus:border-indigo-500">
                <option value="google_jobs">🔍 Google Jobs</option>
                <option value="apple">🍏 Apple</option>
                <option value="meta">♾️ Meta</option>
            </select>
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-xs font-semibold text-white rounded-lg shadow-md transition-all">
                + Add Target
            </button>
        </form>
    </div>

    <!-- Targets Table -->
    <div id="targets-container">
        {{ template "targets" .Targets }}
    </div>
</div>
{{ end }}`

const targetListHTML = `{{ define "targets" }}
<div class="overflow-x-auto rounded-xl border border-slate-800">
    <table class="w-full text-left text-xs text-slate-300">
        <thead class="bg-slate-900/80 text-slate-400 uppercase font-semibold text-[10px]">
            <tr>
                <th class="px-4 py-3">Platform</th>
                <th class="px-4 py-3">Name</th>
                <th class="px-4 py-3">Target URL</th>
                <th class="px-4 py-3">Last Crawled</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3 text-right">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-800 bg-slate-900/40">
            {{ range . }}
            <tr class="hover:bg-slate-800/40 transition-colors">
                <td class="px-4 py-3 font-medium text-indigo-300">{{ platformIcon .Platform }}</td>
                <td class="px-4 py-3 font-semibold text-white">{{ .Name }}</td>
                <td class="px-4 py-3 max-w-xs truncate text-slate-400">
                    <a href="{{ .TargetURL }}" target="_blank" class="hover:underline text-indigo-400">{{ .TargetURL }}</a>
                </td>
                <td class="px-4 py-3 text-slate-400">{{ formatTime .LastCrawledAt }}</td>
                <td class="px-4 py-3">
                    {{ if .IsActive }}
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">Active</span>
                    {{ else }}
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-slate-700/50 text-slate-400 border border-slate-600/30">Paused</span>
                    {{ end }}
                </td>
                <td class="px-4 py-3 text-right">
                    <div class="flex items-center justify-end gap-1.5">
                        <button hx-post="/targets/{{ .ID }}/toggle"
                                hx-target="#targets-container"
                                hx-swap="innerHTML"
                                class="px-2.5 py-1 text-[11px] rounded bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition-colors">
                            {{ if .IsActive }}Pause{{ else }}Activate{{ end }}
                        </button>
                        <button type="button"
                                data-target-id="{{ .ID }}"
                                data-target-name="{{ .Name }}"
                                onclick="openDeleteTargetModal(this)"
                                class="px-2.5 py-1 text-[11px] rounded bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/30 hover:border-rose-500/50 transition-colors flex items-center gap-1">
                            <span>🗑️</span> Delete
                        </button>
                    </div>
                </td>
            </tr>
            {{ else }}
            <tr>
                <td colspan="6" class="px-4 py-10 text-center text-slate-500">
                    <p class="text-lg mb-2">🎯</p>
                    <p>No search targets configured yet. Add one above.</p>
                </td>
            </tr>
            {{ end }}
        </tbody>
    </table>
</div>
{{ end }}`