groupe-meditation/frontend/src/pages/ModePapier.jsx

import React from 'react';
import PageHeader from '../components/PageHeader';
import { useStore } from '../stores/store';

const formulaires = [
  {
    titre: 'Rencontre hebdomadaire',
    description: 'Présences informelles, collecte, ventes, jetons et notes de réunion.',
    fichier: 'rencontre',
  },
  {
    titre: "Assemblée d'affaires",
    description: 'Ordre du jour, présences, propositions, décisions, postes et rapport du trésorier.',
    fichier: 'assemblee',
  },
  {
    titre: 'Trésorerie',
    description: 'Collectes, dépôts, dépenses, réserves et rapprochement mensuel.',
    fichier: 'tresorerie',
  },
];

const lignes = (n) => Array.from({ length: n }, (_, i) => `<div class="line">${i + 1}.</div>`).join('');

function htmlFormulaire(type, groupe) {
  const nomGroupe = groupe?.nom || 'Groupe';
  const commun = `
    <div class="head">
      <h1>${nomGroupe}</h1>
      <p>Formulaire papier de reprise en main</p>
    </div>
    <div class="meta">
      <div>Date: ____________________</div>
      <div>Responsable: ____________________</div>
    </div>`;
  const sections = {
    rencontre: `
      <h2>Rencontre hebdomadaire</h2>
      <label>Sujet / thème</label><div class="box"></div>
      <label>Collecte</label><div class="grid"><div>Montant: __________</div><div>Détenteur: __________</div></div>
      <label>Ventes littérature / jetons / gâteau</label>${lignes(6)}
      <label>Remises de jetons / anniversaires</label>${lignes(6)}
      <label>Notes</label><div class="big"></div>`,
    assemblee: `
      <h2>Assemblée d'affaires</h2>
      <label>Présences</label>${lignes(12)}
      <label>Rapport du trésorier</label><div class="big"></div>
      <label>Propositions / décisions</label>${lignes(10)}
      <label>Postes à pourvoir</label>${lignes(6)}
      <label>Suites à donner</label><div class="big"></div>`,
    tresorerie: `
      <h2>Trésorerie</h2>
      <label>Encaisse / banque / réserves</label>${lignes(8)}
      <label>Collectes et ventes reçues</label>${lignes(8)}
      <label>Dépenses et contributions</label>${lignes(8)}
      <label>Rapprochement / notes</label><div class="big"></div>`,
  };
  return `<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>${nomGroupe} - ${type}</title>
  <style>
    @page{size:letter;margin:0.6in} body{font-family:Arial,sans-serif;color:#111;line-height:1.35}
    .head{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px}.head h1{margin:0;font-size:22px}.head p{margin:4px 0 0;color:#555}
    h2{font-size:18px;margin:14px 0 10px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
    label{display:block;font-weight:bold;margin-top:14px}.box{height:42px;border:1px solid #999;margin-top:6px}.big{height:120px;border:1px solid #999;margin-top:6px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid #999;padding:10px;margin-top:6px}
    .line{height:28px;border-bottom:1px solid #bbb;padding-top:6px}
  </style></head><body>${commun}${sections[type]}<script>window.print()</script></body></html>`;
}

export default function ModePapier() {
  const { groupe } = useStore();

  const imprimer = (type) => {
    const win = window.open('', '_blank');
    if (!win) return;
    win.document.write(htmlFormulaire(type, groupe));
    win.document.close();
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Mode papier" sousTitre="Continuer même si l'informatique tombe" />
      <div className="p-4 space-y-4">
        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <p className="text-sm text-gray-700 leading-relaxed">
            Ces formulaires vierges servent de plan de secours. Ils permettent de poursuivre une rencontre,
            une assemblée ou une opération de trésorerie, puis de ressaisir les données plus tard.
          </p>
        </div>
        {formulaires.map((formulaire) => (
          <button
            key={formulaire.fichier}
            type="button"
            onClick={() => imprimer(formulaire.fichier)}
            className="w-full bg-white rounded-2xl p-4 shadow-sm text-left active:scale-[0.98] transition"
          >
            <div className="flex items-center gap-3">
              <span className="text-2xl">🖨️</span>
              <div className="flex-1">
                <p className="font-bold text-gray-800">{formulaire.titre}</p>
                <p className="text-sm text-gray-500 mt-1">{formulaire.description}</p>
              </div>
              <span className="text-gray-300">›</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}