/* Federica Gori — card condivise (Diario + Home). */

/* Immagine card: coverImage dal CMS → foto del tema (assets/diario/<id>.jpg)
   → segnaposto Photo. Lazy + aspect-ratio fisso: zero CLS. alt vuoto:
   decorativa, il titolo adiacente è già il testo del link. */
function PostImage({ post = {}, tone = "sand", ratio = "16 / 10", style = {} }) {
  const [broken, setBroken] = React.useState(false);
  const src = post.image || (post.theme ? `assets/diario/${post.theme}.jpg` : null);
  if (!src || broken) {
    return <Photo label="Immagine articolo" icon="circleDot" ratio={ratio} tone={post.tone || tone} rounded="0" style={style} />;
  }
  return (
    <img src={src} alt="" loading="lazy" decoding="async" className="fg-cardimg"
      onError={() => setBroken(true)}
      style={{ display: "block", width: "100%", height: ratio ? "auto" : "100%", aspectRatio: ratio || "auto",
               objectFit: "cover", background: "#F1E9DA", ...style }} />
  );
}

/* Titolo del post: <a> vero quando l'articolo ha la sua pagina (CMS),
   testo semplice per gli esempi fallback. Link reali = SEO/GEO e accessibilità. */
function TitoloPost({ post, children }) {
  if (!post.url) return children;
  return <a href={post.url} style={{ color: "inherit", textDecoration: "none" }}>{children}</a>;
}

/* Link visibile «Leggi l'articolo →» — <a> vero, solo per gli articoli dal CMS. */
function LeggiArticolo({ post, size = 14 }) {
  if (!post.url) return null;
  return (
    <a href={post.url} className="fg-readmore" style={{ color: "var(--terra-600, #A8553A)", fontWeight: 600, fontSize: size, display: "inline-flex", alignItems: "center", gap: 6, marginTop: 4, textDecoration: "none" }}>
      Leggi l'articolo <span aria-hidden="true" className="fg-arrow" style={{ fontSize: size + 2, lineHeight: 1 }}>→</span>
    </a>
  );
}

/* Card articolo — anteprima editoriale (il tema fa da categoria). */
function PostCard({ post }) {
  const { Card, Badge } = window.FedericaGoriDesignSystem_549960;
  // Tutta la card è cliccabile (onClick + manina); dentro restano i link VERI
  // (titolo + «Leggi l'articolo») per SEO, accessibilità e middle-click.
  const cliccabile = post.url
    ? { onClick: (e) => { if (!e.target.closest("a")) window.location.href = post.url; }, style: { cursor: "pointer" } }
    : {};
  return (
    <Card padding="0" interactive={!!post.url} className="fg-card" {...cliccabile} style={{ overflow: "hidden", display: "flex", flexDirection: "column", height: "100%", ...(cliccabile.style || {}) }}>
      <PostImage post={post} ratio="16 / 10" />
      <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: 11, flex: 1 }}>
        <Badge tone="neutral">{window.fgThemeLabel(post.theme)}</Badge>
        <h3 style={{ fontSize: 22, margin: 0, lineHeight: 1.2 }}><TitoloPost post={post}>{post.title}</TitoloPost></h3>
        <p style={{ margin: 0, color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.55, flex: 1 }}>{post.excerpt}</p>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: "var(--text-tertiary)", marginTop: 2 }}>
          <span>{post.date}</span><span aria-hidden="true">·</span><span>{post.read} di lettura</span>
        </div>
        <LeggiArticolo post={post} />
      </div>
    </Card>
  );
}

/* Riga-intestazione di un tema del Diario. */
function ThemeHeader({ theme, count }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
      <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name={theme.icon} size={26} color="var(--terra-600)" />
      </div>
      <div>
        <h2 id={theme.id} style={{ fontSize: "var(--text-display-sm)", margin: 0, scrollMarginTop: 90 }}>{theme.label}</h2>
        <p style={{ margin: "4px 0 0", color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.5 }}>{theme.blurb}</p>
      </div>
    </div>
  );
}

Object.assign(window, { PostImage, PostCard, TitoloPost, LeggiArticolo, ThemeHeader });