// ---------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits fabriqués au Québec
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PriceCard.tsx : « Prix et déclinaisons » — KPI (prix, prix barré ou
//   fourchette, disponibilité), options (tailles, couleurs, formats) en puces,
//   liste des déclinaisons avec prix et rupture (8 + « Voir les N »), note
//   moyenne, méthodologie. Toutes les données viennent de la boutique.
// ---------------------------------------------------------------------------
import { useState } from 'react'
import { ProductDetail, ProductOption, formatPrice } from '../api'
import { Ico } from '../components/KaIcons'
import { rabais, variantsOf } from './synthese'
import { Accordion, MoreButton, SectionCard, StatTile, NBSP } from './ui'

const optName = (o: ProductOption) => o.name || o.title || ''
const optValues = (o: ProductOption) => (o.values || o.selections || []).filter(Boolean)

export default function PriceCard({ p }: { p: ProductDetail }) {
  const [all, setAll] = useState(false)
  const det = p.details ?? {}
  const r = rabais(p)
  const options = (det.options ?? []).filter((o) => optName(o) && optValues(o).length > 0)
  const variants = variantsOf(p)
  const LIMIT = 8
  const dispo = !p.available ? 'Non disponible' : det.low_stock_remaining ? `Plus que ${det.low_stock_remaining}` : det.is_on_backorder ? 'Précommande' : det.inventory_quantity != null && det.inventory_quantity > 0 ? `${det.inventory_quantity} en stock` : det.availability_text || 'Disponible'
  const rating = det.average_rating
  return (
    <SectionCard id="prix" title="Prix et déclinaisons" icon={<Ico name="scale" size={18} />}>
      <div className="fb-kpis cols-3">
        <StatTile accent value={p.price != null ? formatPrice(p.price, p.currency) : (p.price_on_request ? 'Sur devis' : '—')} label={p.price != null ? (r ? 'Prix en solde' : 'Prix en boutique') : 'Prix non publié en ligne'} />
        {r ? <StatTile value={formatPrice(r.avant, p.currency)} label={`Prix régulier · −${r.pct}${NBSP}%`} />
          : p.price_max != null && p.price != null && p.price_max > p.price ? <StatTile value={`${formatPrice(p.price, p.currency)} – ${formatPrice(p.price_max, p.currency)}`} label="Fourchette selon la déclinaison" />
          : <StatTile value={variants.length > 1 ? variants.length : 1} label={variants.length > 1 ? 'Déclinaisons' : 'Déclinaison unique'} />}
        <StatTile value={dispo} label="Disponibilité (boutique)" />
      </div>
      {rating != null && rating > 0 && (
        <p className="fb-note good" style={{ marginTop: 12 }}>
          <b>Note {rating.toFixed(1).replace('.', ',')} / 5</b>{det.review_count ? ` — ${det.review_count} avis publiés sur la boutique` : ' — note publiée par la boutique'}
        </p>
      )}
      {options.length > 0 && (
        <>
          <h3 className="fb-card-sub fb-subtitle">Options</h3>
          {options.map((o) => (
            <div key={optName(o)} style={{ marginBottom: 10 }}>
              <div className="fb-fine" style={{ margin: '0 0 6px', fontWeight: 600, color: 'var(--fb-text-2)' }}>{optName(o)}</div>
              <div className="fb-tags">
                {optValues(o).slice(0, 18).map((v) => <span className="fb-tag n" key={v}>{v}</span>)}
                {optValues(o).length > 18 && <span className="fb-tag n">+{optValues(o).length - 18}</span>}
              </div>
            </div>
          ))}
        </>
      )}
      {variants.length > 1 && (
        <>
          <h3 className="fb-card-sub fb-subtitle">Déclinaisons <small>· {variants.length}{det.variations && det.variations > variants.length ? ` sur ${det.variations}` : ''}</small></h3>
          <ul className="fb-list">
            {(all ? variants : variants.slice(0, LIMIT)).map((v, i) => {
              const vr = v.compare_at_price != null && v.price != null && v.compare_at_price > v.price && v.compare_at_price <= v.price * 10
              return (
                <li className="fb-item" key={`${v.title || v.sku}-${i}`}>
                  <div className="fb-item-main">
                    <div className="fb-item-t">{v.title || v.sku}</div>
                    <div className="fb-item-s">{[v.sku && v.sku !== v.title ? `SKU ${v.sku}` : null, v.grams ? `${v.grams} g` : null, v.available === false ? 'épuisé' : null].filter(Boolean).join(' · ')}</div>
                  </div>
                  <div className="fb-item-r">
                    <div className="fb-item-v">{v.price != null ? formatPrice(v.price, p.currency) : '—'}</div>
                    {vr && <div className="fb-item-m" style={{ textDecoration: 'line-through' }}>{formatPrice(v.compare_at_price!, p.currency)}</div>}
                  </div>
                </li>
              )
            })}
          </ul>
          {variants.length > LIMIT && <MoreButton onClick={() => setAll(!all)} expanded={all}>{all ? 'Réduire' : `Voir les ${variants.length} déclinaisons`}</MoreButton>}
        </>
      )}
      <Accordion title="Méthodologie" small>
        <p>
          Prix, prix barré, options, déclinaisons et disponibilité sont ceux publiés par la boutique (Shopify, WooCommerce,
          Wix, Squarespace…) lors de la dernière synchronisation Fabri-Ka. Un prix barré supérieur à dix fois le prix est
          ignoré (saisie en cents chez certains marchands). Le prix final, les taxes et la livraison se confirment sur la
          boutique.
        </p>
      </Accordion>
    </SectionCard>
  )
}