inter-hub/Web/View/AgentProposals/Index.hs

module Web.View.AgentProposals.Index where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()

data IndexView = IndexView
    { proposals     :: ![AgentProposal]
    , widgets       :: ![Widget]
    , mTypeFilter   :: !(Maybe Text)
    , mStatusFilter :: !(Maybe Text)
    }

allProposalTypes :: [Text]
allProposalTypes = ["summary", "requirement_draft", "duplicate_flag", "policy_flag", "impl_proposal"]

allStatuses :: [Text]
allStatuses = ["pending", "accepted", "rejected", "superseded"]

instance View IndexView where
    html IndexView { .. } = [hsx|
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-semibold">Agent Proposals</h1>
        </div>

        <!-- Filters -->
        <div class="flex gap-4 mb-5 flex-wrap">
            <div class="flex gap-1 text-sm flex-wrap">
                <span class="text-gray-400 text-xs self-center mr-1">Type:</span>
                <a href={agentProposalsUrl Nothing mStatusFilter}
                   class={typeTabClass Nothing mTypeFilter}>All</a>
                {forEach allProposalTypes (renderTypeTab mStatusFilter mTypeFilter)}
            </div>
            <div class="flex gap-1 text-sm flex-wrap">
                <span class="text-gray-400 text-xs self-center mr-1">Status:</span>
                <a href={agentProposalsUrl mTypeFilter Nothing}
                   class={typeTabClass Nothing mStatusFilter}>All</a>
                {forEach allStatuses (renderStatusTab mTypeFilter mStatusFilter)}
            </div>
        </div>

        {if null proposals then noProposalsMsg else renderTable proposals widgets}
    |]

noProposalsMsg :: Html
noProposalsMsg = [hsx|<p class="text-sm text-gray-400">No proposals found.</p>|]

renderTypeTab :: Maybe Text -> Maybe Text -> Text -> Html
renderTypeTab mStatusFilter mTypeFilter t = [hsx|
    <a href={agentProposalsUrl (Just t) mStatusFilter}
       class={typeTabClass (Just t) mTypeFilter}>{t}</a>
|]

renderStatusTab :: Maybe Text -> Maybe Text -> Text -> Html
renderStatusTab mTypeFilter mStatusFilter s = [hsx|
    <a href={agentProposalsUrl mTypeFilter (Just s)}
       class={typeTabClass (Just s) mStatusFilter}>{s}</a>
|]

agentProposalsUrl :: Maybe Text -> Maybe Text -> Text
agentProposalsUrl mt ms =
    let parts = catMaybes
            [ fmap ("proposal_type=" <>) mt
            , fmap ("status=" <>) ms
            ]
    in "/AgentProposals" <> if null parts then "" else "?" <> intercalate "&" parts

renderTable :: [AgentProposal] -> [Widget] -> Html
renderTable proposals widgets = [hsx|
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Type</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Source Widget</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Confidence</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Status</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Created</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {forEach proposals (renderRow widgets)}
            </tbody>
        </table>
    </div>
|]

renderRow :: [Widget] -> AgentProposal -> Html
renderRow widgets p = [hsx|
    <tr class="hover:bg-gray-50">
        <td class="px-4 py-3">
            <a href={ShowAgentProposalAction (p.id)}
               class={proposalTypeBadge p.proposalType <> " text-xs px-2 py-0.5 rounded font-medium"}>
                {p.proposalType}
            </a>
        </td>
        <td class="px-4 py-3 text-gray-600">{widgetName widgets p.sourceWidgetId}</td>
        <td class="px-4 py-3">{renderConfidenceBar (fmap realToFrac p.confidence)}</td>
        <td class="px-4 py-3">
            <span class={statusBadge p.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
                {p.status}
            </span>
        </td>
        <td class="px-4 py-3 text-gray-400 text-xs">{show p.createdAt}</td>
    </tr>
|]

widgetName :: [Widget] -> Maybe (Id Widget) -> Text
widgetName _       Nothing    = "—"
widgetName widgets (Just wid) = maybe "(unknown)" (.name) (find (\w -> w.id == wid) widgets)

renderConfidenceBar :: Maybe Double -> Html
renderConfidenceBar Nothing  = [hsx|<span class="text-gray-300 text-xs">—</span>|]
renderConfidenceBar (Just c) =
    let pct = show (round (c * 100) :: Int) <> "%"
        barWidth = "width: " <> pct
    in [hsx|
        <div class="flex items-center gap-2">
            <div class="w-16 bg-gray-100 rounded h-1.5">
                <div class="bg-indigo-400 rounded h-1.5" style={barWidth}></div>
            </div>
            <span class="text-xs text-gray-500">{pct}</span>
        </div>
    |]

proposalTypeBadge :: Text -> Text
proposalTypeBadge "summary"            = "bg-blue-100 text-blue-800"
proposalTypeBadge "requirement_draft"  = "bg-indigo-100 text-indigo-800"
proposalTypeBadge "duplicate_flag"     = "bg-orange-100 text-orange-800"
proposalTypeBadge "policy_flag"        = "bg-red-100 text-red-800"
proposalTypeBadge "impl_proposal"      = "bg-green-100 text-green-800"
proposalTypeBadge _                    = "bg-gray-100 text-gray-600"

statusBadge :: Text -> Text
statusBadge "pending"    = "bg-yellow-100 text-yellow-800"
statusBadge "accepted"   = "bg-green-100 text-green-800"
statusBadge "rejected"   = "bg-red-100 text-red-800"
statusBadge "superseded" = "bg-gray-100 text-gray-500"
statusBadge _            = "bg-gray-100 text-gray-600"

typeTabClass :: Maybe Text -> Maybe Text -> Text
typeTabClass a b
    | a == b    = "px-3 py-1 rounded bg-indigo-100 text-indigo-700 font-medium text-xs"
    | otherwise = "px-3 py-1 rounded text-gray-600 hover:bg-gray-100 text-xs"