module Web
    ( root
    , index
    , characters
    , register
    , registerHTMX
    , login
    , Context(..)
    , newStory
    , stories
    , story
    , waitForStory
    , account
    , pricing
    , success
    , failure
    , loginWithError
    ) where

import qualified Data.Text as T
import Control.Monad.Reader
import Models
import Lucid hiding (form_)
import Lucid.Base (makeAttribute)
import qualified Lucid (form_)
import qualified Svg
import Control.Monad (when)

data Context = Context
    { user :: Maybe User
    , csrf :: T.Text
    , lastStories :: [Story]
    }

type OSRHtml = HtmlT (Reader Context) ()

hxSwap, hxPost, hxGet, hxTarget, hxTrigger :: T.Text -> Attribute
hxSwap = makeAttribute "hx-swap"
hxPost = makeAttribute "hx-post"
hxGet = makeAttribute "hx-get"
hxTarget = makeAttribute "hx-target"
hxTrigger = makeAttribute "hx-trigger"

maxLength = "25"
minLength = "4"

formInputClass :: T.Text
formInputClass = " focus:ring-1 border-gray-300 focus:border-orange focus:ring-orange block w-full rounded-md border px-3 py-2 outline-none "

root :: OSRHtml -> OSRHtml
root content = doctypehtml_ $ html_ $ do
    meta
    body_ [class_ "font-sans flex h-screen"] $ do
        --desktop sidebar
        div_ [class_ "hidden md:block w-64 flex-none border-r border-gray-200"] navbar

        -- main
        div_ [class_ "w-full h-full overflow-y-auto"] $ do
            -- navbar
            div_ [class_ "px-3 flex justify-between items-center border-b border-gray-200"] $ do
                div_ [class_ "py-3 text-lg flex items-center"] $ do
                    img_ [src_ "/logo.svg", class_ "mr-2 md:hidden", style_ "width: 50px; height: 50px;"]
                    span_ "stories"
                div_ [class_ "flex items-center space-x-1"] $ do
                    a_ [href_ "/new", class_ "bg-orange text-white fill-white transition-all py-1.5 px-3 rounded-xl inline-flex items-center justify-center"] $ do
                        div_ [class_ "wh24 mr-1.5"] Svg.pencil
                        span_ [class_ "pb-0.5 font-bold"] "new"
                        span_ [class_ "pb-0.5 font-bold hidden sm:inline whitespace-pre"] " story"
                    label_ [for_ "sidebar-check", class_ "md:hidden pl-3 py-3"] $ div_ [class_ "wh24"] Svg.menu
            -- content
            div_ [class_ "px-3 py-3", id_ "content"] content

        -- mobile sidebar
        div_ [class_ "md:hidden absolute left-0 w-full"] $ do
            input_ [type_ "checkbox", class_ "peer hidden", id_ "sidebar-check"]
            div_ [class_ "hidden w-full h-screen peer-checked:block"] navbar

navbar :: OSRHtml
navbar = aside_ [class_ "h-full"] $ do
    user <- asks (.user)
    latestStories <- asks (.lastStories)

    let navItemClass = "block py-2 px-4 hover:bg-gray-100 rounded-lg"
    nav_ [class_ "px-2 py-2 bg-white flex h-full flex-col overflow-y-auto"] $ do
        div_ [class_ "flex mb-4 justify-between items-center"] $ do
            a_ [class_ "px-4 py-2 font-semibold flex items-center", href_ "/"] $ do
                img_ [src_ "/logo.svg", class_ "mr-2", style_ "width: 50px; height: 50px;"]
                span_ [class_ "pb-2 text-lg"] "shortstories"
            label_ [for_ "sidebar-check", class_ "md:hidden px-4 py-2"] $ span_ [class_ "wh24 shrink-0 block"] $ Svg.close
        -- sidebar menu items
        ul_ [class_ "space-y-1"] $ case user of
            Nothing -> do
                li_ $ a_ [class_ navItemClass, href_ "/explore"] "pricing"
                li_ $ a_ [class_ navItemClass, href_ "/explore"] "explore"
                li_ $ a_ [class_ navItemClass, href_ "/login"] "login"
                li_ $ a_ [class_ navItemClass, href_ "/register"] "register"
            Just u -> do
                li_ $ a_ [class_ navItemClass, href_ "/stories"] "all stories"
                li_ $ details_ [class_ "group [&_summary::-webkit-details-marker]:hidden"] $ do
                    summary_ [class_ $ navItemClass <> " flex justify-between items-center"] $ do
                        span_ "latest stories"
                        span_ [class_ "wh24 shrink-0 transition duration-100 group-open:-rotate-180"] $ Svg.detailsArrow
                    ul_ [class_ "mt-1 space-y-1 pl-4"] $ do
                        if null latestStories
                            then li_ [class_ navItemClass] "no stories created yet"
                            else mapM_ (li_ . navbarStoryItem navItemClass) latestStories
                li_ $ a_ [class_ navItemClass, href_ "/new"] "create new story"
                li_ $ a_ [class_ navItemClass, href_ "/characters"] "characters"
                li_ $ a_ [class_ navItemClass, href_ "/account"] "account"

navbarStoryItem :: T.Text -> Story -> OSRHtml
navbarStoryItem klas s = li_ $ do
    a_ [class_ klas, href_ $ "/stories/" <> s.id] $ toHtml s.title

    -- let logo = div_ [class_ "space-x-1"] $ do
    --         a_ [id_ "logo", class_ "flex items-center", href_ "/"] $ do
    --             img_ [src_ "/logo.svg", class_ "inline mr-1", style_ "width: 64px; height: 64px;"]
    --             span_ $ toHtml title
    -- let unregistered = do
    --         a_ [href_ "/register"] "register"
    --         a_ [href_ "/login"] "login"

    -- let menuCls = "transition-all py-1 px-2 rounded-xl inline-flex items-center justify-center"
    -- let menu = do
    --         a_ [href_ "/stories", class_ $ "hover:bg-orange/25 " <> menuCls] $ do
    --             div_ [class_ "svg-icon mr-1"] Svg.book
    --             span_ [class_ "pb-0.5"] "stories"
    --         a_ [href_ "/new", class_ $ "hover:bg-greend/25 " <> menuCls] $ do
    --             div_ [class_ "svg-icon mr-1"] Svg.pencil
    --             span_ [class_ "pb-0.5"] "new"
    --         a_ [href_ "/characters", class_ $ "hover:bg-blue/25 " <> menuCls] $ do
    --             div_ [class_ "svg-icon mr-1"] Svg.characters
    --             span_ [class_ "pb-0.5"] "characters"
    -- let acc = \(u :: User) -> a_ [href_ "/account", class_ "pl-2"] $ toHtml $ "hello, " <> u.username
    --         <> " " <> if u.paid then "(PACC)" else "(FACC)"


title :: T.Text
title = "shortstories"

meta :: OSRHtml
meta = head_ $ do
    title_ $ toHtml title

    link_ [rel_ "stylesheet", type_ "text/css", href_ "/tailwind.css"]
    link_ [rel_ "stylesheet", type_ "text/css", href_ "/style.css"]

    link_ [rel_ "preconnect", href_ "https://rsms.me/"]
    link_ [rel_ "stylesheet", href_ "https://rsms.me/inter/inter.css"]

    meta_ [charset_ "utf-8"]
    meta_ [name_ "author", content_ "mcksp.com"]
    meta_ [name_ "viewport", content_ "width=device-width, initial-scale=1.0"]
    script_ [ src_ "https://unpkg.com/htmx.org@1.9.12"
            , integrity_ "sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
            , defer_ mempty
            , crossorigin_ "anonymous"
            ] (mempty :: Html ())
    link_ [rel_ "icon", href_ "/favicon.svg"]

form_ :: [Attribute] -> OSRHtml -> OSRHtml
form_ attrs innerHtml = do
    csrf <- asks (.csrf)
    Lucid.form_ (method_ "post":attrs) $ do
        innerHtml
        input_ [name_ "csrf_token", type_ "hidden", value_ csrf]

btnLink :: T.Text -> [Attribute] -> T.Text -> OSRHtml
btnLink action attrs value =
    form_ [action_ action, class_ "form-link"] $ do
        button_ (type_ "submit":class_ " btn-link ":attrs) $ toHtml value




index :: OSRHtml
index = div_ $ do
    h1_ "short stories for your kids"

account :: OSRHtml
account = div_ $ do
    div_ [class_ "flex"] $ do
        a_ [href_ "/pricing", class_ $ "inline-flex items-center justify-center"] $ do
            div_ [class_ "svg-icon mr-1"] Svg.wallet
            span_ [class_ "pb-0.5"] "pricing"
    div_ $ btnLink "/logout" [] "logout"

pricing :: Bool -> OSRHtml
pricing failed = div_ $ do
    when failed $ div_ "Payment didn't go trough."
    div_ "its crazy, 7.90 u s d"
    div_ $ btnLink "/checkout" [] "checkout"

success :: OSRHtml
success = div_ $ do
    span_ "success"

failure :: OSRHtml
failure = div_ $ do
    span_ "failure"

characters :: [Character] -> OSRHtml
characters chars = div_ $ do
    div_ [id_ "characters", class_ "grid grid-cols-1 sm:grid-cols-2 gap-4"] $ do
        mapM_ character chars

    div_ $ do
        form_ [action_ "/characters", class_ "full-form"] $ do
            h1_ [class_ "text-4xl underline decoration-4 text-center decoration-orange font-bold mb-8"] "create new character"

            div_ [class_ "space-y-1"] $ do
                label_ [class_ "text-xl font-semibold"] "name"
                input_ [type_ "text", name_ "name", class_ formInputClass, required_ "true"]
            label_ [class_ "text-xl font-semibold"] "description"
            textarea_ [class_ formInputClass, name_ "description", required_ "true", rows_ "2"] mempty
            div_ [class_ "mt-4 flex justify-end gap-x-6"] $ do
                button_ [class_ "rounded-md bg-orange px-3 py-2 text-white font-bold shadow-sm hover:bg-orangel", type_ "submit"] "create"

character :: Character -> OSRHtml
character char = div_ [class_ "p-2"] $ do
    div_ [class_ "font-medium underline decoration-2 decoration-green"] $ toHtml char.name
    div_ [class_ "text-black/80"] $ toHtml char.description

newStory :: [Character] -> OSRHtml
newStory chars = div_ $ do
    form_ [action_ "/stories", class_ "full-form"] $ do
        h1_ [class_ "text-4xl underline decoration-4 text-center decoration-orange font-bold mb-8"] "create new story"
        if null chars
            then div_ "do you want to create some characters?"
            else div_ $ do
                h2_ [class_ "text-xl font-semibold"] "pick story characters"
                ul_ [class_ "flex gap-2 flex-wrap py-4"] $ mapM_ characterCheck chars

        div_ $ do
            label_ [class_ "text-xl font-semibold"] "description"
            textarea_ [class_ formInputClass, name_ "description", required_ "true", rows_ "3"] mempty
        div_ [class_ "mt-4 flex justify-end gap-x-6"]$ do
            button_ [class_ "rounded-md bg-orange px-3 py-2 text-white font-bold shadow-sm hover:bg-orangel", type_ "submit"] "create"

stories :: [Story] -> OSRHtml
stories s = div_ [class_ "space-y-2"] $ do
    mapM_ storyItem s

storyItem :: Story -> OSRHtml
storyItem s = div_ [class_ "rounded-lg bg-white p-3"] $ do
    a_ [href_ $ "/stories/" <> s.id] $ do
        div_ [class_ "mb-3 text-xl text-center underline decoration-orange"] $ toHtml s.title
        span_ $ toHtml s.summary
        div_ [class_ "sm:flex sm:flex-row-reverse pt-3"] $ do
            button_ [class_ "inline-flex w-full justify-center rounded-md px-5 py-2 text-sm font-semibold text-white shadow-sm sm:w-auto", style_ "background: #098654"] "read"
            button_ [class_ "inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold shadow-sm sm:w-auto ring-1 ring-inset ring-gray-300 mr-2", style_ "text-color: #098654"] "gen sequel"

waitForStory :: T.Text -> OSRHtml
waitForStory sId = div_ [hxGet $ "/stories/" <> sId,
    hxTrigger "load delay:2s", hxSwap "outerHTML"] "story not ready yet"

story :: Story -> OSRHtml
story s = div_ [id_ "story"] $ do
    div_ $ h1_ [class_ "text-2xl font-bold leading-6 mb-6 my-3 text-center"] $ toHtml s.title
    mapM_ (p_ [class_ "my-4 text-justify indent-5 leading-relaxed"] . toHtml) (T.splitOn "\n" s.story)

characterCheck :: Character -> OSRHtml
characterCheck char = li_ $ do
    let cId = "check_" <> char.name
    input_ [type_ "checkbox", class_ "hidden peer", id_ cId, name_ "characters", value_ char.id]
    label_ [for_ cId, class_ $ "select-none inline-flex px-3 py-1.5 rounded-md border-2 transition-all duration-200 font-medium " <> characterCheckColorClass] $ toHtml char.name

characterCheckColorClass :: T.Text
characterCheckColorClass = "peer-checked:bg-green border-green/45 hover:border-green peer-checked:text-white"

register :: OSRHtml
register = registerHTMX Nothing

registerHTMX :: Maybe T.Text -> OSRHtml
registerHTMX err = div_ [id_ "register"] $ do
    form_ [action_ "/register", hxPost "/register",
           hxSwap "outerHTML", hxTarget "#register",
           class_ "full-form space-y-4"] $ do
        h3_ [class_ "text-2xl font-extrabold"] "Create a new account"
        maybe mempty (div_ [class_ "text-red-600 text-sm"] . toHtml) err

        -- username
        div_ [class_ "space-y-1"] $ do
            label_ [class_ "block text-sm"] "username"
            input_ [class_ formInputClass, type_ "text", name_ "username",
                    required_ "true", minlength_ minLength, maxlength_ maxLength, autofocus_]

        -- password
        div_ [class_ "space-y-1"] $ do
            label_ [class_ "block text-sm"] "password"
            input_ [class_ formInputClass, type_ "password", name_ "password",
                    required_ "true", minlength_ minLength, maxlength_ maxLength]

        input_ [type_ "submit", value_ "register", class_ "bg-orange text-white font-bold py-2 px-3 rounded-xl w-full"]
        div_ [class_ "text-sm text-gray-700 flex items-center justify-center space-x-1"] $ do
            span_ "Already have an account?"
            a_ [href_ "/login", class_ "text-orange font-bold"] "sign in"

loginWithError :: T.Text -> T.Text -> OSRHtml
loginWithError username password = loginForm True username password

login :: OSRHtml
login = loginForm False "" ""

loginForm :: Bool -> T.Text -> T.Text -> OSRHtml
loginForm isError username password = div_ [id_ "login"] $ do
    form_ [action_ "/login", class_ "full-form space-y-4",
           hxPost "/login", hxSwap "outerHTML", hxTarget "#login"] $ do
        h3_ [class_ "text-2xl font-extrabold"] "Sign in to your account"
        when isError $ div_ [class_ "text-red-600 text-sm"] "Wrong username or password."

        -- username
        div_ [class_ "space-y-1"] $ do
            label_ [class_ "block text-sm text-gray-700"] "username"
            input_ [class_ formInputClass, type_ "text", name_ "username",
                    required_ "true", minlength_ minLength, maxlength_ maxLength, value_ username, autofocus_]

        --password
        div_ [class_ "space-y-1 mb-4"] $ do
            label_ [class_ "block text-sm text-gray-700"] "password"
            input_ [class_ formInputClass, type_ "password", name_ "password", value_ password,
                    required_ "true", minlength_ minLength, maxlength_ maxLength]

        input_ [type_ "submit", value_ "login", class_ "bg-orange text-white font-bold py-2 px-3 rounded-xl w-full"]
        div_ [class_ "text-sm text-gray-700 flex items-center justify-center space-x-1"] $ do
            span_ "Don't have an account?"
            a_ [href_ "/register", class_ "text-orange font-bold"] "sign up"