package ui


const kanbanBoardHTML = `{{ define "kanban" }}
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <!-- SAVED -->
    <div class="p-4 rounded-2xl bg-slate-900/50 border border-slate-800 flex flex-col min-h-[400px]">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <h3 class="text-xs font-bold text-slate-300 uppercase">💾 Saved</h3>
            <span class="text-[10px] text-slate-500">{{ range . }}{{ if eq .App.Status "SAVED" }}+1{{ end }}{{ end }}</span>
        </div>
        <div class="space-y-3 flex-1">
            {{ range . }}
            {{ if eq .App.Status "SAVED" }}{{ template "kanbanCard" . }}{{ end }}
            {{ end }}
        </div>
    </div>

    <!-- APPLIED -->
    <div class="p-4 rounded-2xl bg-slate-900/50 border border-slate-800 flex flex-col min-h-[400px]">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <h3 class="text-xs font-bold text-indigo-400 uppercase">🚀 Applied</h3>
        </div>
        <div class="space-y-3 flex-1">
            {{ range . }}
            {{ if eq .App.Status "APPLIED" }}{{ template "kanbanCard" . }}{{ end }}
            {{ end }}
        </div>
    </div>

    <!-- INTERVIEW -->
    <div class="p-4 rounded-2xl bg-slate-900/50 border border-slate-800 flex flex-col min-h-[400px]">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <h3 class="text-xs font-bold text-amber-400 uppercase">💬 Interview</h3>
        </div>
        <div class="space-y-3 flex-1">
            {{ range . }}
            {{ if eq .App.Status "INTERVIEW" }}{{ template "kanbanCard" . }}{{ end }}
            {{ end }}
        </div>
    </div>

    <!-- OFFER / REJECTED -->
    <div class="p-4 rounded-2xl bg-slate-900/50 border border-slate-800 flex flex-col min-h-[400px]">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <h3 class="text-xs font-bold text-emerald-400 uppercase">🎉 Offer / Closed</h3>
        </div>
        <div class="space-y-3 flex-1">
            {{ range . }}
            {{ if or (eq .App.Status "OFFER") (eq .App.Status "REJECTED") }}{{ template "kanbanCard" . }}{{ end }}
            {{ end }}
        </div>
    </div>
</div>
{{ end }}`

const kanbanCardHTML = `{{ define "kanbanCard" }}
<div class="p-4 rounded-xl bg-slate-800/80 border border-slate-700/60 shadow-md space-y-3">
    <div>
        <span class="text-[10px] font-bold text-indigo-300 uppercase">{{ .Company }}</span>
        <h4 class="text-xs font-bold text-white mt-0.5 leading-snug">{{ .Title }}</h4>
        <span class="text-[10px] text-slate-400 mt-1 block">📍 {{ .Location }}</span>
    </div>
    {{ if .Analysis }}
    <div class="text-[10px] text-slate-400">
        Score: <strong class="{{ scoreBadgeClass .Analysis.Score }}">{{ printf "%.0f" .Analysis.Score }}</strong>
    </div>
    {{ end }}
    <div class="flex items-center justify-between pt-2 border-t border-slate-700/50 text-[10px]">
        <span class="text-slate-400">Status: <strong class="text-white">{{ .App.Status }}</strong></span>
        <select hx-patch="/applications/{{ .App.ID }}/status"
                hx-target="#kanban-container"
                hx-swap="innerHTML"
                class="px-1.5 py-0.5 bg-slate-900 border border-slate-700 rounded text-slate-200 text-[10px]">
            <option value="SAVED"      {{ if eq .App.Status "SAVED"      }}selected{{ end }}>Saved</option>
            <option value="APPLIED"    {{ if eq .App.Status "APPLIED"    }}selected{{ end }}>Applied</option>
            <option value="INTERVIEW"  {{ if eq .App.Status "INTERVIEW"  }}selected{{ end }}>Interview</option>
            <option value="OFFER"      {{ if eq .App.Status "OFFER"      }}selected{{ end }}>Offer</option>
            <option value="REJECTED"   {{ if eq .App.Status "REJECTED"   }}selected{{ end }}>Rejected</option>
        </select>
    </div>
</div>
{{ end }}`