module Web.View.HubRoutingRules.Show where

import Web.View.Prelude
import Web.Routes ()
import Web.View.HubRoutingRules.Index (statusBadge)

data ShowView = ShowView
    { rule      :: !HubRoutingRule
    , sourceHub :: !Hub
    , targetHub :: !Hub
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="max-w-2xl">
            <div class="flex items-center gap-3 mb-6">
                <a href={HubRoutingRulesAction} class="text-sm text-gray-500 hover:underline">Routing Rules</a>
                <span class="text-gray-300">/</span>
                <h1 class="text-2xl font-semibold">Routing Rule</h1>
            </div>

            <div class="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
                <div class="flex items-center gap-3">
                    <span class="text-lg font-medium text-gray-800">
                        {sourceHub.name} → {targetHub.name}
                    </span>
                    <span class={statusBadge rule.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
                        {rule.status}
                    </span>
                </div>

                <dl class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <dt class="text-gray-500">Match Category</dt>
                        <dd class="font-medium">{fromMaybe "any" rule.matchCategory}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Match Widget Type</dt>
                        <dd class="font-medium">{fromMaybe "any" rule.matchWidgetType}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Priority</dt>
                        <dd>{show rule.priority}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Created</dt>
                        <dd>{show rule.createdAt}</dd>
                    </div>
                    {maybe mempty renderRuleNotesDt rule.notes}
                </dl>
            </div>

            <div class="mt-4 flex gap-4">
                <a href={EditHubRoutingRuleAction (rule.id)}
                   class="text-sm text-blue-600 hover:underline">Edit</a>
                {renderRuleToggleAction rule.id (rule.status == "inactive")}
                <a href={RoutedCandidatesAction (targetHub.id)}
                   class="text-sm text-indigo-600 hover:underline">Routed Candidates →</a>
            </div>
        </div>
    |]

renderRuleNotesDt :: Text -> Html
renderRuleNotesDt n = [hsx|
    <div class="col-span-2">
        <dt class="text-gray-500">Notes</dt>
        <dd class="text-gray-700">{n}</dd>
    </div>
|]

renderRuleToggleAction :: Id HubRoutingRule -> Bool -> Html
renderRuleToggleAction rid True  = [hsx|<a href={ActivateRoutingRuleAction (rid)} class="text-sm text-green-600 hover:underline">Activate</a>|]
renderRuleToggleAction rid False = [hsx|<a href={DeactivateRoutingRuleAction (rid)} class="text-sm text-gray-500 hover:underline">Deactivate</a>|]