// ---------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits fabriqués au Québec
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ContextCards.tsx : « La boutique » (logo, lieu, origine, liens),
//   « Aussi chez la boutique » (cartes produit), « Dossier de la fiche »,
//   « Sources et méthodologie ».
// ---------------------------------------------------------------------------
import { Link } from 'react-router-dom'
import { CATEGORY_LABELS, ProductDetail, categorySlug, formatRelativeDate, hostnameOf } from '../api'
import { Ico } from '../components/KaIcons'
import OriginBadge from '../components/OriginBadge'
import ProductCard from '../components/ProductCard'
import StoreLogo from '../components/StoreLogo'
import { Accordion, SectionCard } from './ui'
import { origineLabel } from './synthese'

export function StoreCard({ p }: { p: ProductDetail }) {
  return (
    <SectionCard id="boutique" title="La boutique" icon={<Ico name="store" size={18} />}>
      <div className="fb-store">
        <StoreLogo storeId={p.store_id} name={p.store_name} size="lg" />
        <div style={{ minWidth: 0 }}>
          <Link to={`/boutiques/${encodeURIComponent(p.store_id)}`} className="fb-store-name">{p.store_name}</Link>
          <div className="fb-store-loc">{[p.store_city, p.store_region].filter(Boolean).join(', ') || 'Québec'}</div>
          <div className="fb-price-row" style={{ marginTop: 8 }}>
            <span className="fb-capsule fb-capsule-origin"><OriginBadge origin={p.origin_class} withLabel /></span>
          </div>
        </div>
      </div>
      <div className="fb-actions" style={{ marginTop: 12 }}>
        <Link className="fb-btn fb-btn-ghost" style={{ flex: 1 }} to={`/boutiques/${encodeURIComponent(p.store_id)}`}>Tous ses produits</Link>
        {p.store_url && <a className="fb-btn fb-btn-ghost" style={{ flex: 1 }} href={p.store_url} target="_blank" rel="noopener noreferrer">{hostnameOf(p.store_url)} <Ico name="external" size={15} /></a>}
      </div>
      <p className="fb-fine">{origineLabel(p)} — classe d'origine attribuée par Fabri-Ka à la boutique d'après ses pages « à propos », ses certifications et ses mentions de fabrication ; elle s'applique à l'ensemble de la boutique, pas à ce produit en particulier.</p>
    </SectionCard>
  )
}

export function RelatedCard({ p }: { p: ProductDetail }) {
  if (!p.related || p.related.length === 0) return null
  return (
    <SectionCard id="aussi" title={`Aussi chez ${p.store_name}`} icon={<Ico name="layers" size={18} />}>
      <div className="fb-related">{p.related.slice(0, 6).map((x) => <ProductCard key={x.uid} product={x} />)}</div>
      {p.category && (
        <p className="fb-fine" style={{ marginTop: 12 }}>
          <Link to={`/categorie/${categorySlug(p.category)}`}>Voir toute la catégorie {CATEGORY_LABELS[p.category] ?? p.category} →</Link>
        </p>
      )}
    </SectionCard>
  )
}

export function Dossier({ p }: { p: ProductDetail }) {
  const det = p.details ?? {}
  return (
    <SectionCard id="dossier" title="Dossier de la fiche" icon={<Ico name="folder" size={18} />} sub="Ce que Fabri-Ka observe réellement : boutique, suivi, identifiants">
      <Accordion title={<><Ico name="history" size={15} className="fb-acc-ico" />Suivi Fabri-Ka</>} meta={p.listing_status === 'published' ? 'publié' : p.listing_status || undefined}>
        <div className="fb-facts-rows" style={{ marginTop: 0 }}>
          {det.created_at && <div className="fb-kv"><span className="k">Créé par la boutique</span><span className="v">{new Date(det.created_at).toLocaleDateString('fr-CA')}</span></div>}
          {det.updated_at && <div className="fb-kv"><span className="k">Modifié par la boutique</span><span className="v">{formatRelativeDate(det.updated_at) ?? det.updated_at}</span></div>}
          <div className="fb-kv"><span className="k">Statut</span><span className="v">{p.available ? 'Disponible' : 'Non disponible'}{p.listing_status && p.listing_status !== 'published' ? ` · ${p.listing_status}` : ''}</span></div>
        </div>
        <p className="fb-fine">Synchronisé plusieurs fois par jour depuis la boutique ; les dates ci-dessus sont celles publiées par la plateforme marchande.</p>
      </Accordion>
      <Accordion title={<><Ico name="tag" size={15} className="fb-acc-ico" />Identifiants</>} meta={det.sku || p.uid.slice(0, 8)}>
        <div className="fb-facts-rows" style={{ marginTop: 0 }}>
          {det.sku && <div className="fb-kv"><span className="k">SKU</span><span className="v">{det.sku}</span></div>}
          {det.gtin && <div className="fb-kv"><span className="k">GTIN / MPN</span><span className="v">{det.gtin}</span></div>}
          <div className="fb-kv"><span className="k">Identifiant Fabri-Ka</span><span className="v">{p.uid}</span></div>
          <div className="fb-kv"><span className="k">Fiche originale</span><span className="v"><a href={p.url} target="_blank" rel="noopener noreferrer">{hostnameOf(p.url)} ↗</a></span></div>
        </div>
      </Accordion>
    </SectionCard>
  )
}

export function Sources({ p, onShare }: { p: ProductDetail; onShare: () => void }) {
  const srcs = [
    { n: p.store_name, r: 'Titre, prix, images, options, description et disponibilité (source originale)', href: p.url },
    { n: 'Fabri-Ka', r: 'Classe d\'origine de la boutique, catégorie canonique, déduplication — calculs maison, indicatifs' },
  ]
  return (
    <SectionCard id="sources" title="Sources et méthodologie" icon={<Ico name="folder" size={18} />} sub="Chaque donnée de cette fiche renvoie à sa source ; les calculs Fabri-Ka sont indicatifs et documentés">
      <ul className="fb-sources">
        {srcs.map((s) => (
          <li key={s.n}>
            <span className="n">{s.href ? <a href={s.href} target="_blank" rel="noopener noreferrer">{s.n}</a> : s.n}</span>
            <span className="r">{s.r}</span>
          </li>
        ))}
      </ul>
      <div className="fb-end" style={{ marginTop: 14 }}>
        <a href="/boutiques"><Ico name="store" size={18} />Boutiques d'ici<small>Toutes les boutiques Fabri-Ka</small></a>
        <a href="/contact"><Ico name="alert" size={18} />Signaler une erreur<small>Prix, image, origine…</small></a>
        <button type="button" onClick={onShare}><Ico name="share" size={18} />Partager ce produit<small>Lien de la fiche</small></button>
        <a href="/a-propos"><Ico name="info" size={18} />Classes d'origine<small>A · B · C · D · E expliquées</small></a>
      </div>
      <p className="fb-fine" style={{ marginTop: 12 }}>Les prix et disponibilités sont ceux affichés par la boutique — chaque fiche renvoie à la page produit originale. Fabri-Ka est un agrégateur indépendant.</p>
    </SectionCard>
  )
}