// frontend/src/pages/ShoppingPage.tsx
import { useState, useEffect, useCallback } from 'react'
import { matchesSearch } from '../utils/search'
import type { ShoppingListDetail, ShoppingList, Store, Product } from '../api/shopping'
import {
  fetchLists, createList, fetchListDetail, deleteList,
  addItem, updateItem, deleteItem, finishShopping, fetchStores, generateMagicList,
  searchProducts, createProduct,
} from '../api/shopping'
import Modal from '../components/Modal'
import ItemRow from '../components/shopping/ItemRow'
import CatalogueModal from '../components/shopping/CatalogueModal'
import BoutiquesModal from '../components/shopping/BoutiquesModal'
import { useWakeLock } from '../hooks/useWakeLock'

const inputStyle: React.CSSProperties = {
  width: '100%',
  background: 'var(--bg-4)',
  border: '1px solid var(--bg-5)',
  borderRadius: 8,
  padding: '10px 12px',
  color: 'var(--ink-1)',
  fontFamily: 'var(--font-ui)',
  fontSize: 14,
  boxSizing: 'border-box',
}

const noSelect: React.CSSProperties = { userSelect: 'none' }

export default function ShoppingPage() {
  const [currentList, setCurrentList] = useState<ShoppingListDetail | null>(null)
  const [allLists, setAllLists] = useState<ShoppingList[]>([])
  const [stores, setStores] = useState<Store[]>([])
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [generating, setGenerating] = useState(false)

  const [showAddItemModal, setShowAddItemModal] = useState(false)
  const [showHistoryModal, setShowHistoryModal] = useState(false)
  const [showCatalogueModal, setShowCatalogueModal] = useState(false)
  const [showBoutiquesModal, setShowBoutiquesModal] = useState(false)

  const [itemSearch, setItemSearch] = useState('')
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
  const [newItemQty, setNewItemQty] = useState('')
  const [newItemUnit, setNewItemUnit] = useState('')
  const [addToCatalogue, setAddToCatalogue] = useState(true)

  useWakeLock(currentList !== null)

  const loadData = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const [listsData, storesData, productsData] = await Promise.all([fetchLists(), fetchStores(), searchProducts()])
      setAllLists(listsData)
      setStores(storesData)
      setProducts([...productsData].sort((a, b) => a.name.localeCompare(b.name, 'fr')))

      const current = listsData.find(l => l.status === 'draft' || l.status === 'active')
      if (current) {
        setCurrentList(await fetchListDetail(current.id))
      } else {
        setCurrentList(null)
      }
    } catch {
      setError('Erreur lors du chargement')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { void loadData() }, [loadData])

  async function refreshCurrentList() {
    if (!currentList) return
    try {
      setCurrentList(await fetchListDetail(currentList.id))
    } catch {
      setError('Erreur de rafraîchissement')
    }
  }

  async function handleCreateManualList() {
    try {
      const detail = await createList({})
      setCurrentList(detail)
      void loadData()
    } catch {
      setError('Erreur lors de la création')
    }
  }

  async function handleGenerateMagicList() {
    setGenerating(true)
    setError(null)
    try {
      const detail = await generateMagicList()
      setCurrentList(detail)
      void loadData()
    } catch {
      setError('Erreur lors de la génération')
    } finally {
      setGenerating(false)
    }
  }

  function closeAddItemModal() {
    setItemSearch('')
    setSelectedProduct(null)
    setNewItemQty('')
    setNewItemUnit('')
    setAddToCatalogue(true)
    setShowAddItemModal(false)
  }

  function selectProduct(p: Product) {
    setSelectedProduct(p)
    setItemSearch(p.name)
    setNewItemUnit(p.default_unit ?? '')
  }

  async function handleAddItem() {
    if (!currentList) return
    const customName = itemSearch.trim()
    if (!selectedProduct && !customName) return
    try {
      let productId = selectedProduct?.id

      // Article libre + case "Ajouter au catalogue" cochée → créer le produit d'abord
      if (!selectedProduct && customName && addToCatalogue) {
        const newProduct = await createProduct({
          name: customName,
          default_unit: newItemUnit || undefined,
        })
        productId = newProduct.id
        // Met à jour la liste locale des produits pour les prochains ajouts
        setProducts(prev => [...prev, newProduct].sort((a, b) => a.name.localeCompare(b.name, 'fr')))
      }

      await addItem(currentList.id, {
        product_id: productId,
        custom_name: !productId ? customName : undefined,
        quantity: newItemQty || undefined,
        unit: newItemUnit || undefined,
      })
      closeAddItemModal()
      void refreshCurrentList()
    } catch {
      setError("Erreur lors de l'ajout")
    }
  }

  async function handleCheckItem(itemId: string, checked: boolean) {
    if (!currentList) return
    try {
      await updateItem(currentList.id, itemId, { is_checked: checked })
      void refreshCurrentList()
    } catch {
      setError('Erreur lors du cochage')
    }
  }

  async function handleDeleteItem(itemId: string) {
    if (!currentList) return
    try {
      await deleteItem(currentList.id, itemId)
      void refreshCurrentList()
    } catch {
      setError('Erreur lors de la suppression')
    }
  }

  async function handleFinish() {
    if (!currentList) return
    try {
      await finishShopping(currentList.id)
      void loadData()
    } catch {
      setError('Erreur lors de la finalisation')
    }
  }

  async function handleDeleteCurrentList() {
    if (!currentList) return
    if (!confirm('Supprimer la liste en cours ?')) return
    try {
      await deleteList(currentList.id)
      void loadData()
    } catch {
      setError('Erreur lors de la suppression')
    }
  }

  async function handleOpenHistoryList(list: ShoppingList) {
    try {
      const detail = await fetchListDetail(list.id)
      setCurrentList(detail)
      setShowHistoryModal(false)
    } catch {
      setError('Erreur lors du chargement')
    }
  }

  // Tri : non cochés alpha, cochés alpha (en bas)
  const sortedItems = [...(currentList?.items ?? [])].sort((a, b) => {
    if (a.is_checked !== b.is_checked) return a.is_checked ? 1 : -1
    return a.display_name.localeCompare(b.display_name, 'fr')
  })

  const uncheckedItems = sortedItems.filter(i => !i.is_checked)
  const checkedItems = sortedItems.filter(i => i.is_checked)
  const hasCurrentList = currentList !== null
  const pastLists = allLists.filter(l => l.status === 'done')

  const filteredProducts = products.filter(p => {
    const term = itemSearch.trim()
    return !term || matchesSearch(p.name, term) || matchesSearch(p.brand ?? '', term)
  })

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      {/* ── En-tête ── */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '12px 16px',
        background: 'var(--bg-2)',
        borderBottom: '1px solid var(--bg-4)',
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <h1 style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', margin: 0, flex: 1, fontSize: 18, ...noSelect }}>
          {hasCurrentList ? (currentList.name ?? 'Courses') : 'Courses'}
        </h1>
        <button
          onClick={() => setShowCatalogueModal(true)}
          style={{
            background: 'var(--bg-3)', border: '1px solid var(--bg-5)',
            borderRadius: 8, color: 'var(--ink-2)', cursor: 'pointer',
            padding: '6px 12px', fontFamily: 'var(--font-ui)', fontSize: 12, minHeight: 36,
            ...noSelect,
          }}
        >Articles</button>
        <button
          onClick={() => setShowBoutiquesModal(true)}
          style={{
            background: 'var(--bg-3)', border: '1px solid var(--bg-5)',
            borderRadius: 8, color: 'var(--ink-2)', cursor: 'pointer',
            padding: '6px 12px', fontFamily: 'var(--font-ui)', fontSize: 12, minHeight: 36,
            ...noSelect,
          }}
        >Boutiques</button>
      </div>

      {/* ── Erreur ── */}
      {error && (
        <div style={{ padding: '8px 16px' }}>
          <p style={{ color: 'var(--err)', background: 'var(--bg-3)', borderRadius: 8, padding: '8px 12px', margin: 0, fontSize: 13, fontFamily: 'var(--font-ui)' }}>
            {error}
          </p>
        </div>
      )}

      {loading && (
        <p style={{ color: 'var(--ink-3)', textAlign: 'center', padding: 40, fontFamily: 'var(--font-ui)', ...noSelect }}>Chargement…</p>
      )}

      {/* ── Vue : pas de liste en cours ── */}
      {!loading && !hasCurrentList && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, padding: 32 }}>
          <p style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 15, margin: 0, textAlign: 'center', ...noSelect }}>
            Aucune liste de courses en cours
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <button
              onClick={() => void handleCreateManualList()}
              style={{
                padding: '14px 24px', borderRadius: 12,
                background: 'var(--ok)', color: '#1d2021', border: 'none',
                cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 700,
                fontSize: 15, minHeight: 56, minWidth: 140,
                boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
                ...noSelect,
              }}
            >+ Nouvelle liste</button>

            <button
              onClick={() => void handleGenerateMagicList()}
              disabled={generating}
              style={{
                padding: '14px 24px', borderRadius: 12,
                background: generating ? 'var(--bg-4)' : 'var(--bg-3)',
                color: generating ? 'var(--ink-4)' : 'var(--accent)',
                border: '1px solid var(--bg-5)',
                cursor: generating ? 'not-allowed' : 'pointer',
                fontFamily: 'var(--font-ui)', fontWeight: 600,
                fontSize: 15, minHeight: 56, minWidth: 140,
                ...noSelect,
              }}
            >
              <i className="fa-solid fa-wand-magic-sparkles" style={{ marginRight: 8 }} />
              {generating ? 'Génération…' : 'Liste magique'}
            </button>
          </div>

          {pastLists.length > 0 && (
            <button
              onClick={() => setShowHistoryModal(true)}
              style={{
                background: 'transparent', border: 'none',
                color: 'var(--ink-3)', cursor: 'pointer',
                fontFamily: 'var(--font-ui)', fontSize: 13,
                textDecoration: 'underline', padding: '4px 8px',
                ...noSelect,
              }}
            >Voir l'historique ({pastLists.length})</button>
          )}
        </div>
      )}

      {/* ── Vue : liste en cours ── */}
      {!loading && hasCurrentList && (
        <>
          {/* Barre d'info + actions */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 16px',
            background: 'var(--bg-3)',
            borderBottom: '1px solid var(--bg-4)',
          }}>
            <span style={{ flex: 1, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 12, ...noSelect }}>
              {checkedItems.length}/{currentList.item_count} cochés
            </span>
            {pastLists.length > 0 && (
              <button
                onClick={() => setShowHistoryModal(true)}
                style={{ background: 'transparent', border: 'none', color: 'var(--ink-3)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 12, padding: '4px 8px', ...noSelect }}
              >Historique</button>
            )}
            <button
              onClick={() => void handleDeleteCurrentList()}
              style={{ background: 'transparent', border: 'none', color: 'var(--err)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 12, padding: '4px 8px', ...noSelect }}
            >Supprimer</button>
            <button
              onClick={() => void handleFinish()}
              style={{
                background: 'var(--ok)', color: '#1d2021', border: 'none',
                borderRadius: 8, padding: '6px 14px',
                fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 13,
                cursor: 'pointer', minHeight: 36, ...noSelect,
              }}
            >Terminer ✓</button>
          </div>

          {/* Articles non cochés */}
          {uncheckedItems.length === 0 && checkedItems.length === 0 && (
            <p style={{ color: 'var(--ink-3)', textAlign: 'center', margin: '40px 0', fontFamily: 'var(--font-ui)', fontSize: 14, ...noSelect }}>
              Liste vide — ajoutez des articles avec le bouton +
            </p>
          )}

          <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 80 }}>
            {uncheckedItems.map(item => (
              <ItemRow
                key={item.id}
                item={item}
                onCheck={() => void handleCheckItem(item.id, true)}
                onDelete={() => void handleDeleteItem(item.id)}
                storeMode
              />
            ))}

            {checkedItems.length > 0 && (
              <>
                <div style={{
                  padding: '6px 16px',
                  color: 'var(--ink-4)', fontSize: 11,
                  fontFamily: 'var(--font-ui)', textTransform: 'uppercase',
                  letterSpacing: 1, background: 'var(--bg-2)',
                  borderTop: '1px solid var(--bg-4)',
                  borderBottom: '1px solid var(--bg-4)',
                  ...noSelect,
                }}>
                  Cochés ({checkedItems.length})
                </div>
                {checkedItems.map(item => (
                  <ItemRow
                    key={item.id}
                    item={item}
                    onCheck={() => void handleCheckItem(item.id, false)}
                    onDelete={() => void handleDeleteItem(item.id)}
                    storeMode
                  />
                ))}
              </>
            )}
          </div>

          {/* FAB + */}
          <button
            onClick={() => setShowAddItemModal(true)}
            aria-label="Ajouter un article"
            style={{
              position: 'fixed', bottom: 72, right: 20,
              width: 56, height: 56, borderRadius: '50%',
              background: 'var(--accent)', color: '#1d2021', border: 'none',
              fontSize: 28, cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >+</button>
        </>
      )}

      {/* ── Modals ── */}

      {showAddItemModal && (
        <Modal title="Ajouter un article" onClose={closeAddItemModal} width={420}>
          {/* Barre de recherche / nom personnalisé */}
          <input
            style={{
              ...inputStyle,
              borderColor: selectedProduct ? 'var(--ok)' : 'var(--bg-5)',
              borderWidth: selectedProduct ? 2 : 1,
            }}
            placeholder="Rechercher ou saisir un article…"
            value={itemSearch}
            onChange={e => { setItemSearch(e.target.value); setSelectedProduct(null) }}
            autoFocus
            onKeyDown={e => e.key === 'Enter' && void handleAddItem()}
          />

          {/* Liste scrollable alphabétique du catalogue */}
          <div style={{
            maxHeight: 240, overflowY: 'auto',
            border: '1px solid var(--bg-5)', borderRadius: 8,
            background: 'var(--bg-3)',
          }}>
            {filteredProducts.length === 0 && (
              <p style={{
                color: 'var(--ink-4)', fontFamily: 'var(--font-ui)', fontSize: 13,
                textAlign: 'center', padding: '12px 16px', margin: 0, ...noSelect,
              }}>
                {itemSearch.trim() ? `"${itemSearch}" — article libre` : 'Catalogue vide'}
              </p>
            )}
            {filteredProducts.map((p, idx) => {
              const isSelected = selectedProduct?.id === p.id
              return (
                <div
                  key={p.id}
                  onClick={() => isSelected ? (setSelectedProduct(null), setItemSearch('')) : selectProduct(p)}
                  style={{
                    padding: '10px 14px',
                    cursor: 'pointer',
                    background: isSelected ? 'var(--ok)' : 'transparent',
                    color: isSelected ? '#1d2021' : 'var(--ink-1)',
                    borderBottom: idx < filteredProducts.length - 1 ? '1px solid var(--bg-4)' : 'none',
                    display: 'flex', alignItems: 'center', gap: 10,
                    userSelect: 'none',
                  }}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {p.name}
                    </div>
                    {(p.default_unit || p.brand) && (
                      <div style={{ fontSize: 11, color: isSelected ? '#1d2021' : 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 1 }}>
                        {[p.brand, p.default_unit].filter(Boolean).join(' · ')}
                      </div>
                    )}
                  </div>
                  {isSelected && <span style={{ fontSize: 16, fontWeight: 700 }}>✓</span>}
                </div>
              )
            })}
          </div>

          {/* Case "Ajouter au catalogue" — uniquement si article libre sans correspondance */}
          {!selectedProduct && itemSearch.trim() && filteredProducts.length === 0 && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none', padding: '6px 2px' }}>
              <input
                type="checkbox"
                checked={addToCatalogue}
                onChange={e => setAddToCatalogue(e.target.checked)}
                style={{ width: 18, height: 18, accentColor: 'var(--ok)', cursor: 'pointer', flexShrink: 0 }}
              />
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-2)' }}>
                Ajouter <strong style={{ color: 'var(--ink-1)' }}>{itemSearch.trim()}</strong> au catalogue
              </span>
            </label>
          )}

          {/* Quantité + Unité */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <input
              style={inputStyle} placeholder="Quantité"
              value={newItemQty}
              onChange={e => setNewItemQty(e.target.value)}
            />
            <input
              style={inputStyle} placeholder="Unité (kg, L…)"
              value={newItemUnit}
              onChange={e => setNewItemUnit(e.target.value)}
            />
          </div>

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <button
              onClick={closeAddItemModal}
              style={{ padding: '10px 16px', borderRadius: 8, border: '1px solid var(--bg-5)', background: 'transparent', color: 'var(--ink-2)', cursor: 'pointer', fontFamily: 'var(--font-ui)', minHeight: 48 }}
            >Annuler</button>
            <button
              onClick={() => void handleAddItem()}
              disabled={!selectedProduct && !itemSearch.trim()}
              style={{
                padding: '10px 20px', borderRadius: 8, border: 'none',
                background: (!selectedProduct && !itemSearch.trim()) ? 'var(--bg-5)' : 'var(--accent)',
                color: '#1d2021', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 600, minHeight: 48,
              }}
            >Ajouter</button>
          </div>
        </Modal>
      )}

      {showHistoryModal && (
        <Modal title="Historique des courses" onClose={() => setShowHistoryModal(false)}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {allLists.filter(l => l.status === 'done').map(list => (
              <div
                key={list.id}
                onClick={() => void handleOpenHistoryList(list)}
                className="glass interactive"
                style={{ borderRadius: 8, padding: '10px 14px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 14, ...noSelect }}>
                    {list.name ?? 'Liste terminée'}
                  </div>
                  <div style={{ color: 'var(--ink-3)', fontSize: 11, fontFamily: 'var(--font-mono)', ...noSelect }}>
                    {new Date(list.created_at).toLocaleDateString('fr-FR')} · {list.checked_count}/{list.item_count} articles
                  </div>
                </div>
                <span style={{ color: 'var(--ink-3)', fontSize: 16 }}>→</span>
              </div>
            ))}
            {allLists.filter(l => l.status === 'done').length === 0 && (
              <p style={{ color: 'var(--ink-3)', textAlign: 'center', padding: 16, fontFamily: 'var(--font-ui)', fontSize: 13, ...noSelect }}>
                Aucune liste terminée
              </p>
            )}
          </div>
        </Modal>
      )}

      {showCatalogueModal && (
        <CatalogueModal stores={stores} onClose={() => setShowCatalogueModal(false)} />
      )}

      {showBoutiquesModal && (
        <BoutiquesModal
          stores={stores}
          onClose={() => setShowBoutiquesModal(false)}
          onStoresChanged={() => void loadData()}
        />
      )}
    </div>
  )
}