module Web.View.InstitutionalKnowledge.Index where

import Web.View.Prelude

data IndexView = IndexView
    { entries  :: ![InstitutionalKnowledgeEntry]
    , hubs     :: ![Hub]
    , mQuery   :: !(Maybe Text)
    }

instance View IndexView where
    html IndexView { .. } = [hsx|
        <div class="p-6">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold text-gray-900">Institutional Knowledge Base</h1>
            </div>

            <form method="GET" action={QueryKnowledgeBaseAction} class="mb-6 flex gap-3 items-end">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
                    <input type="text" name="q"
                        value={fromMaybe "" mQuery}
                        placeholder="Search knowledge entries…"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Hub</label>
                    <select name="hubId" class="border border-gray-300 rounded-md px-3 py-2 text-sm">
                        <option value="">All hubs</option>
                        {forM_ hubs \h -> [hsx|<option value={show h.id}>{h.name}</option>|]}
                    </select>
                </div>
                <button type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700">
                    Search
                </button>
            </form>

            {if null entries
                then [hsx|<p class="text-gray-500 text-sm">No entries found.</p>|]
                else [hsx|
                    <div class="space-y-4">
                        {forM_ entries renderEntry}
                    </div>
                |]}
        </div>
    |]
      where
        renderEntry e = [hsx|
            <div class="bg-white shadow rounded-lg p-5">
                <div class="flex justify-between items-start">
                    <p class="text-sm text-gray-800 leading-relaxed flex-1 mr-4">{e.summary}</p>
                    <a href={ShowInstitutionalKnowledgeAction { knowledgeEntryId = e.id }}
                       class="text-sm text-blue-600 hover:underline whitespace-nowrap">View</a>
                </div>
                <p class="text-xs text-gray-400 mt-2">{show e.createdAt}</p>
            </div>
        |]