module Web.View.OutcomeCorrelations.Index where

import Web.View.Prelude

data IndexView = IndexView
    { correlations :: ![OutcomeCorrelation]
    , hubs         :: ![Hub]
    , mHubFilter   :: !(Maybe (Id Hub))
    }

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">Outcome Correlations</h1>
            </div>

            <form method="GET" class="mb-6 flex gap-4 items-end">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Hub</label>
                    <select name="hubId" class="border border-gray-300 rounded-md px-3 py-2 text-sm">
                        <option value="">All hubs</option>
                        {forEach hubs (renderHubFilterOption mHubFilter)}
                    </select>
                </div>
                <button type="submit" class="px-4 py-2 bg-gray-600 text-white rounded-md text-sm hover:bg-gray-700">
                    Filter
                </button>
            </form>

            <div class="bg-white shadow rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Category</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Score</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Samples</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Computed</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {forM_ correlations renderRow}
                    </tbody>
                </table>
            </div>
        </div>
    |]
      where
        renderRow c = [hsx|
            <tr>
                <td class="px-6 py-4 text-sm font-medium text-gray-900">{c.annotationCategory}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{c.correlationType}</td>
                <td class="px-6 py-4 text-sm">
                    <span class={scoreClass c.correlationScore}>
                        {show (round (c.correlationScore * 100) :: Int)}%
                    </span>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">{show c.sampleCount}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{show c.computedAt}</td>
            </tr>
        |]
        scoreClass s
            | s >= 0.7  = "inline-block px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded" :: Text
            | s >= 0.4  = "inline-block px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded"
            | otherwise = "inline-block px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded"

renderHubFilterOption :: Maybe (Id Hub) -> Hub -> Html
renderHubFilterOption mFilter h = [hsx|
    <option value={show h.id} selected={mFilter == Just h.id}>{h.name}</option>
|]