module Web.View.WidgetOwnerships.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()
import Web.View.WidgetOwnerships.Index (typeBadge)

data ShowView = ShowView
    { ownership  :: !WidgetOwnership
    , widget     :: !Widget
    , ownerHub   :: !Hub
    , mStewardHub :: !(Maybe Hub)
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="max-w-2xl">
            <div class="flex items-center gap-3 mb-6">
                <a href={WidgetOwnershipsAction} class="text-sm text-gray-500 hover:underline">Ownerships</a>
                <span class="text-gray-300">/</span>
                <h1 class="text-2xl font-semibold">Ownership Record</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={typeBadge ownership.ownershipType <> " text-sm px-3 py-1 rounded-full font-medium"}>
                        {ownership.ownershipType}
                    </span>
                </div>

                <dl class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <dt class="text-gray-500">Widget</dt>
                        <dd class="font-medium">
                            <a href={ShowWidgetAction (widget.id)}
                               class="text-blue-600 hover:underline">{widget.name}</a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Owner Hub</dt>
                        <dd class="font-medium">{ownerHub.name}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Steward Hub</dt>
                        <dd class="font-medium">{maybe "Same as owner" (.name) mStewardHub}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Effective From</dt>
                        <dd>{show ownership.effectiveFrom}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Effective Until</dt>
                        <dd>{maybe "–" show ownership.effectiveUntil}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Created</dt>
                        <dd>{show ownership.createdAt}</dd>
                    </div>
                    {maybe mempty renderOwnershipNotesDt ownership.notes}
                </dl>
            </div>

            <div class="mt-4">
                <a href={EditWidgetOwnershipAction (ownership.id)}
                   class="text-sm text-blue-600 hover:underline">Edit</a>
            </div>
        </div>
    |]

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