"use client";

import type { Content } from "@/lib/mock-data";

function getArticleContent(content: Content): { toc: string[]; html: string } {
  const kw = content.keyword;

  const isBaskets = kw.includes("baskets");
  const isMatieres = kw.includes("matières");
  const isCirculaire = kw.includes("circulaire");

  if (isBaskets) {
    return {
      toc: [
        "Qu'est-ce qu'une basket éthique ?",
        "Les matières à privilégier en hiver",
        "Confort et durabilité : les critères à évaluer",
        "Notre sélection de marques engagées",
      ],
      html: `
        <p>Trouver des <strong>baskets éthiques pour l'hiver</strong> n'est plus une quête de niche. De plus en plus de marques proposent des modèles pensés pour le froid, fabriqués dans le respect des humains et de l'environnement. Encore faut-il savoir quoi chercher.</p>

        <h2>Qu'est-ce qu'une basket éthique ?</h2>
        <p>Une basket éthique répond à plusieurs critères cumulables : fabrication en Europe ou dans des ateliers certifiés, matières naturelles ou recyclées, absence de colle toxique, traçabilité complète de la chaîne d'approvisionnement. Ce n'est pas un label unique mais une combinaison de pratiques.</p>
        <p>En hiver, la contrainte s'ajoute : la chaussure doit être imperméable ou doublée, ce qui complique le recours aux seules matières végétales. Certaines marques ont trouvé des compromis intéressants.</p>

        <h2>Les matières à privilégier en hiver</h2>
        <p>Le <strong>cuir vegan issu du liège</strong> ou de la fibre d'ananas (Piñatex) résiste mieux à l'humidité que le coton bio seul. Les semelles en caoutchouc naturel certifié FSC offrent une accroche correcte sur les surfaces mouillées. Pour l'imperméabilisation, des traitements à base de cire d'abeille ou de cire végane existent maintenant chez plusieurs fabricants.</p>
        <p>Évitez les doublures en micropolaire synthétique non recyclé : elles rejettent des microfibres plastiques à chaque lavage. Préférez le Tencel, le chanvre ou la laine mérinos issue de fermes certifiées ZQ.</p>

        <h2>Confort et durabilité : les critères à évaluer</h2>
        <p>Une chaussure éthique qui dure 10 ans est bien plus vertueuse qu'un modèle "vert" remplacé tous les 18 mois. Vérifiez donc la robustesse des coutures, la qualité de la semelle intermédiaire (EVA recyclé ou liège), et la possibilité de faire ressemeler le modèle chez un cordonnier.</p>
        <p>Le confort hivernal passe aussi par l'isolation : une doublure en laine naturelle d'au moins 200 g/m² est un bon indicateur. Comparez les fiches techniques avant d'acheter.</p>

        <h2>Notre sélection de marques engagées</h2>
        <p>Parmi les acteurs fiables sur le segment : <strong>Atelier Verdun</strong> pour ses modèles montants en cuir vegan certifié, <strong>Veja</strong> pour ses baskets en coton bio équitable, et <strong>Nat-2</strong> pour ses semelles en caoutchouc naturel. Des alternatives européennes existent aussi pour limiter l'empreinte carbone du transport.</p>
        <p>Dans tous les cas, vérifiez les certifications (OEKO-TEX, B Corp, label Entreprise du Patrimoine Vivant) avant tout achat. Les affirmations sans preuve sont légion dans ce secteur.</p>
      `,
    };
  }

  if (isMatieres) {
    return {
      toc: [
        "Panorama des matières recyclées en 2026",
        "Innovations récentes dans le textile",
        "Certifications et labels à connaître",
        "Limites et critiques du recyclage textile",
      ],
      html: `
        <p>Le marché des <strong>matières recyclées</strong> connaît une accélération notable en 2026. Recyclage chimique, fibres issues de bouteilles PET, coton régénéré : les innovations se multiplient, mais leur impact réel mérite d'être évalué avec rigueur.</p>

        <h2>Panorama des matières recyclées en 2026</h2>
        <p>On distingue deux grandes familles : le recyclage mécanique (broyage des fibres existantes, perte de qualité à chaque cycle) et le recyclage chimique (dépolymérisation moléculaire, qualité proche du vierge). Ce dernier est encore coûteux mais se démocratise grâce à des acteurs comme Eastman ou Carbios.</p>
        <p>Le polyester recyclé (rPET) représente aujourd'hui 12 % de la production mondiale de polyester. Le nylon recyclé (Econyl) progresse dans la chaussure et la maille. Le coton recyclé reste marginal en volume mais en forte croissance.</p>

        <h2>Innovations récentes dans le textile</h2>
        <p>L'<strong>acrylique biosourcé</strong> issu de résidus agricoles et le Circulose (coton régénéré à 100 % depuis des vêtements usagés) sont deux des innovations les plus suivies. Des marques comme Levi's et H&M Group testent ces matières à grande échelle, avec des résultats encore mitigés en termes de passage à l'échelle industrielle.</p>

        <h2>Certifications et labels à connaître</h2>
        <p>La norme GRS (Global Recycled Standard) est la référence pour valider le contenu recyclé d'un produit. Elle couvre la chaîne d'approvisionnement complète. OEKO-TEX Recycled certifie l'absence de substances nocives dans les fibres recyclées. Ces deux certifications sont cumulables et distinctes.</p>

        <h2>Limites et critiques du recyclage textile</h2>
        <p>Recycler ne résout pas la surproduction. Une fibre recyclée 3 fois finit en déchet non recyclable. Le vrai enjeu reste la durabilité et la réparation des vêtements existants avant leur fin de vie. Le recyclage doit être un dernier recours, pas une permission de consommer davantage.</p>
      `,
    };
  }

  if (isCirculaire) {
    return {
      toc: [
        "Définition et principes de la mode circulaire",
        "Les modèles économiques de la circularité",
        "Acteurs et initiatives en 2026",
        "Comment adopter la mode circulaire en tant que consommateur ?",
      ],
      html: `
        <p>La <strong>mode circulaire</strong> repose sur un principe simple : concevoir des vêtements et chaussures pour qu'ils restent en circulation le plus longtemps possible, sans générer de déchets en fin de vie. En pratique, cela implique de repenser toute la chaîne de valeur.</p>

        <h2>Définition et principes de la mode circulaire</h2>
        <p>Contrairement à l'économie linéaire (fabriquer, utiliser, jeter), l'économie circulaire appliquée à la mode vise à maintenir les matières et produits dans un cycle vertueux. Cela passe par le design pour la durabilité, la réparabilité, la collecte et le recyclage en boucle fermée.</p>

        <h2>Les modèles économiques de la circularité</h2>
        <p>La location de vêtements (Rent the Runway, La Boucle), la seconde main (Vinted, Vestiaire Collective), la réparation subventionnée (bonus réparabilité en France depuis 2024) et le rachat-revente en magasin sont les quatre piliers actuels. Certaines marques combinent ces modèles avec la vente de produits neufs.</p>

        <h2>Acteurs et initiatives en 2026</h2>
        <p>Patagonia reste la référence avec son programme Worn Wear. En Europe, MUD Jeans (location de jeans) et Pangaia (matières biosourcées traçables) sont des exemples souvent cités. En France, l'initiative Fashion Pact regroupe une quarantaine de marques engagées dans des objectifs mesurables.</p>

        <h2>Comment adopter la mode circulaire en tant que consommateur ?</h2>
        <p>Acheter moins et mieux, réparer avant de remplacer, vendre ou donner ce qui ne sert plus, et choisir des marques transparentes sur leurs pratiques. Les labels B Corp, Fair Wear et GOTS permettent d'identifier des acteurs sérieux sans avoir à décrypter chaque fiche technique.</p>
      `,
    };
  }

  // Default fallback
  return {
    toc: [
      `Introduction à ${kw}`,
      "Critères de sélection",
      "Comparaison des options disponibles",
      "Recommandations finales",
    ],
    html: `
      <p>Ce contenu traite de <strong>${kw}</strong> avec un angle ${content.intent === "commercial" ? "commercial" : content.intent === "transactional" ? "transactionnel" : "informatif"}. Il s'inscrit dans la stratégie éditoriale d'Atelier Verdun sur le segment de la mode éthique et durable.</p>

      <h2>Introduction à ${kw}</h2>
      <p>Comprendre ${kw} nécessite d'abord de poser les bases. Ce segment de marché évolue rapidement, porté par une demande croissante pour des produits responsables et des pratiques transparentes. En 2026, les consommateurs sont mieux informés que jamais.</p>

      <h2>Critères de sélection</h2>
      <p>Pour évaluer les options sur ce marché, plusieurs critères entrent en jeu : la qualité des matières, la traçabilité de la fabrication, la durabilité du produit et le rapport qualité-prix sur le long terme. Ces dimensions sont rarement toutes réunies dans un seul produit, ce qui justifie une approche comparative.</p>

      <h2>Comparaison des options disponibles</h2>
      <p>L'offre sur ${kw} s'est considérablement élargie ces deux dernières années. Des acteurs historiques côtoient désormais des pure players du digital, des marques artisanales européennes et des alternatives de seconde main. Chaque positionnement répond à des besoins et des budgets différents.</p>

      <h2>Recommandations finales</h2>
      <p>Au vu des données disponibles, le choix optimal dépend de votre contexte spécifique. Les critères de durabilité et de traçabilité restent les meilleurs indicateurs d'un achat qui tient ses promesses sur le long terme. N'hésitez pas à consulter les fiches détaillées de chaque produit avant de décider.</p>
    `,
  };
}

export function ArticleBody({
  content,
  editing,
}: {
  content: Content;
  editing: boolean;
}) {
  const { toc, html } = getArticleContent(content);

  return (
    <div className="space-y-6">
      {/* Sommaire */}
      <nav className="bg-bg-card border border-border rounded-xl p-4">
        <div className="text-[11px] font-semibold text-text-dim uppercase tracking-wider mb-2.5">
          Sommaire
        </div>
        <ol className="space-y-1.5">
          {toc.map((heading, i) => (
            <li key={heading}>
              <a
                href={`#heading-${i}`}
                className="flex items-center gap-2 text-[13px] text-text-dim hover:text-text transition-colors"
              >
                <span className="w-5 h-5 rounded bg-bg flex items-center justify-center text-[10px] font-mono text-text-dimmer shrink-0">
                  {i + 1}
                </span>
                {heading}
              </a>
            </li>
          ))}
        </ol>
      </nav>

      {/* Corps de l'article */}
      {editing ? (
        <textarea
          className="w-full min-h-[480px] bg-bg-card border border-border-bright rounded-xl p-5 text-[13.5px] text-text leading-relaxed resize-y font-sans focus:outline-none focus:border-border-bright"
          defaultValue={html.replace(/<[^>]+>/g, "")}
        />
      ) : (
        <div
          className="prose-article"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: enrichWithIds(html) }}
        />
      )}
    </div>
  );
}

function enrichWithIds(html: string): string {
  let i = 0;
  return html.replace(/<h2>/g, () => `<h2 id="heading-${i++}">`);
}