(ns todo.views.main
  (:require [reagent.core :as r]
            ["react-native" :as rn]
            [re-frame.core :as rf]
            [todo.theme :as theme]
            [todo.views.todo-item :as todo-item]))

(defn filter-bar []
  (let [current-filter @(rf/subscribe [:filter])
        counts @(rf/subscribe [:todo-counts])]
    [:> rn/View {:style {:flex-direction "row" :padding-horizontal 16
                         :padding-vertical 8 :gap 8}}
     (for [[filter-key label] [[:all "All"] [:active "Active"] [:completed "Done"]]]
       ^{:key filter-key}
       [:> rn/TouchableOpacity
        {:on-press #(rf/dispatch [:set-filter filter-key])
         :style {:padding-horizontal 16 :padding-vertical 8
                 :border-radius 20
                 :background-color (if (= current-filter filter-key)
                                     (:primary theme/colors)
                                     (:border theme/colors))}}
        [:> rn/Text {:style {:color (if (= current-filter filter-key)
                                      (:on-primary theme/colors)
                                      (:text-secondary theme/colors))
                             :font-weight "600"}}
         (str label " (" (get counts filter-key 0) ")")]])]))

(defn empty-state []
  [:> rn/View {:style {:flex 1 :justify-content "center" :align-items "center" :padding 48}}
   [:> rn/Text {:style {:font-size 48 :margin-bottom 16}} "\uD83D\uDCDD"]
   [:> rn/Text {:style {:font-size 18 :color (:text-secondary theme/colors)
                         :text-align "center"}}
    "No todos yet!\nTap + to add one"]])

(defn todo-list []
  (let [todos @(rf/subscribe [:filtered-todos])]
    (if (empty? todos)
      [empty-state]
      [:> rn/FlatList
       {:data (clj->js (map #(assoc % :key (str (:id %))) todos))
        :render-item (fn [^js item]
                       (let [data (js->clj (.-item item) :keywordize-keys true)
                             data (update data :priority keyword)]
                         (r/as-element [todo-item/todo-item data])))
        :key-extractor (fn [^js item] (str (.-id item)))
        :content-container-style {:padding-bottom 100}}])))

(defn fab []
  [:> rn/TouchableOpacity
   {:on-press #(rf/dispatch [:show-add-form])
    :style {:position "absolute"
            :right 24 :bottom 32
            :width 56 :height 56 :border-radius 28
            :background-color (:primary theme/colors)
            :justify-content "center" :align-items "center"
            :elevation 6
            :shadow-color "#000"
            :shadow-offset {:width 0 :height 3}
            :shadow-opacity 0.3
            :shadow-radius 4}}
   [:> rn/Text {:style {:color "#FFFFFF" :font-size 28 :line-height 30}} "+"]])

(defn main-screen []
  [:> rn/View {:style {:flex 1 :background-color (:background theme/colors)}}
   ;; Header
   [:> rn/View {:style {:background-color (:primary theme/colors)
                         :padding-top 48 :padding-bottom 16 :padding-horizontal 24}}
    [:> rn/Text {:style {:font-size 28 :font-weight "bold" :color (:on-primary theme/colors)}}
     "Todos – CLJS Expo"]]
   [filter-bar]
   [todo-list]
   [fab]])
