import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

/* ── Accordéon FAQ ───────────────────────────────────────────── */
function FaqItem({ question, children }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{
      borderBottom: '1px solid var(--border)',
      padding: '0',
    }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', textAlign: 'left', background: 'none', border: 'none',
          padding: '14px 0', cursor: 'pointer', display: 'flex',
          alignItems: 'center', justifyContent: 'space-between', gap: 12,
          color: 'var(--text)', fontSize: 'var(--fs-base)', fontWeight: 500,
        }}
      >
        <span>{question}</span>
        <svg
          width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
          style={{ flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}
        >
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </button>
      {open && (
        <div style={{
          paddingBottom: 16, color: 'var(--text-muted)',
          fontSize: 'var(--fs-sm)', lineHeight: 1.7,
        }}>
          {children}
        </div>
      )}
    </div>
  );
}

/* ── Navigation ─────────────────────────────────────────────── */
const NAV = [
  {
    id: 'faq',
    label: 'FAQ',
    icon: (
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" />
        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
        <line x1="12" y1="17" x2="12.01" y2="17" />
      </svg>
    ),
  },
];

/* ── Page principale ─────────────────────────────────────────── */
export default function Aide() {
  const { search } = useLocation();
  const navigate   = useNavigate();

  const section    = new URLSearchParams(search).get('section') || 'faq';
  const setSection = (s) => navigate(`/aide?section=${s}`, { replace: true });

  return (
    <div className="account-layout">

      {/* ── Nav gauche ───────────────────────────────────────── */}
      <aside className="account-sidebar">
        <h1 className="account-title">Centre d'aide</h1>
        {NAV.map(item => (
          <button
            key={item.id}
            className={`account-nav-item${section === item.id ? ' active' : ''}`}
            onClick={() => setSection(item.id)}
          >
            {item.icon}
            {item.label}
          </button>
        ))}
      </aside>

      {/* ── Contenu ──────────────────────────────────────────── */}
      <div className="account-content">

        {section === 'faq' && (
          <div>
            <h2 style={{ marginTop: 0, marginBottom: 24 }}>Questions fréquentes</h2>

            <FaqItem question="Comment est calculé le solde du porte-monnaie d'une plateforme ?">
              <p style={{ marginTop: 0 }}>
                Le solde du porte-monnaie représente les liquidités disponibles sur une plateforme,
                c'est-à-dire l'argent que vous pouvez retirer ou réinvestir. Il est calculé comme suit :
              </p>

              <div style={{ margin: '12px 0', padding: '12px 16px', background: 'var(--surface-2)', borderRadius: 8, fontFamily: 'monospace', fontSize: 'var(--fs-sm)', color: 'var(--text)', lineHeight: 2 }}>
                Solde = Dépôts<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;− Retraits manuels<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ Remboursements crédités au porte-monnaie<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ Bonus (parrainage / plateforme)<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;− Capital investi (en cours ou remboursé)<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ Corrections de solde
              </div>

              <p><strong style={{ color: 'var(--text)' }}>Retraits manuels</strong> — seuls les retraits que vous avez saisis manuellement sont déduits.
              Les retraits générés automatiquement lors d'un remboursement en mode "compte courant" sont exclus,
              car ils ne représentent pas un vrai mouvement de porte-monnaie.</p>

              <p><strong style={{ color: 'var(--text)' }}>Remboursements crédités au porte-monnaie</strong> — uniquement les remboursements
              dont le mode est "Portefeuille" (et non "Compte courant"). Le montant crédité dépend de la fiscalité
              de la plateforme :</p>
              <ul style={{ margin: '8px 0 8px 16px', paddingLeft: 0 }}>
                <li style={{ marginBottom: 6 }}>
                  <strong style={{ color: 'var(--text)' }}>Plateforme française (Flat Tax)</strong> — le porte-monnaie
                  reçoit le <em>net reçu</em>, c'est-à-dire le montant après déduction du PFU français (17,2 % de prélèvements
                  sociaux + 12,8 % d'impôt sur le revenu), prélevé directement à la source par la plateforme.
                </li>
                <li style={{ marginBottom: 6 }}>
                  <strong style={{ color: 'var(--text)' }}>Plateforme hors France (sans fiscalité locale)</strong> — le porte-monnaie
                  reçoit le capital remboursé + cashback + intérêts bruts. Le PFU français n'est pas prélevé à la
                  source : vous devez le déclarer séparément dans votre déclaration fiscale annuelle.
                </li>
                <li>
                  <strong style={{ color: 'var(--text)' }}>Plateforme hors France (avec retenue à la source locale)</strong> — même
                  principe que ci-dessus, mais la plateforme a déjà prélevé une taxe locale sur les intérêts. Le
                  porte-monnaie reçoit le capital + cashback + intérêts bruts <em>après</em> cette retenue locale.
                  Le PFU français reste à déclarer séparément.
                </li>
              </ul>

              <p><strong style={{ color: 'var(--text)' }}>Capital investi</strong> — le montant que vous avez placé dans des prêts actifs
              (y compris les réinvestissements complémentaires) est soustrait du porte-monnaie, car ces fonds ne sont
              plus disponibles. Ils reviennent progressivement via les remboursements.</p>

              <p style={{ marginBottom: 0 }}><strong style={{ color: 'var(--text)' }}>Corrections de solde</strong> — ajustements manuels
              permettant de réconcilier de micro-écarts de calcul (par exemple un arrondi de centimes sur la fiscalité).</p>
            </FaqItem>

            <FaqItem question="Comment mettre en place un réinvestissement automatique des intérêts ?">
              <p style={{ marginTop: 0 }}>
                Le réinvestissement automatique permet de capitaliser les intérêts perçus après chaque remboursement,
                sans aucune saisie manuelle. Les intérêts sont automatiquement réinjectés dans le capital du prêt,
                ce qui augmente progressivement le montant investi et les intérêts futurs.
              </p>

              <h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Activation</h4>
              <ol style={{ margin: '0 0 12px 16px', paddingLeft: 0, lineHeight: 1.8 }}>
                <li>Ouvrez la fiche d'un investissement.</li>
                <li>Cliquez sur le bouton <strong style={{ color: 'var(--text)' }}>⋮</strong> en haut à droite du bloc <em>Informations du projet</em>, puis choisissez <strong style={{ color: 'var(--text)' }}>Réinvestir</strong>.</li>
                <li>Dans la modale, sélectionnez l'onglet <strong style={{ color: 'var(--text)' }}>Automatique</strong>.</li>
                <li>Cliquez sur <strong style={{ color: 'var(--text)' }}>Activer</strong>.</li>
              </ol>
              <p>
                Une fois activé, le bloc <em>Réinvestissements complémentaires</em> apparaît sur la fiche avec
                un badge <strong style={{ color: 'var(--primary)' }}>auto</strong>, même si aucun remboursement
                n'a encore eu lieu.
              </p>

              <h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Quel montant est réinvesti ?</h4>
              <p>Le montant réinvesti après chaque remboursement dépend de la fiscalité de la plateforme :</p>
              <ul style={{ margin: '8px 0 12px 16px', paddingLeft: 0, lineHeight: 1.8 }}>
                <li>
                  <strong style={{ color: 'var(--text)' }}>Plateforme française (Flat Tax)</strong> — les <em>intérêts nets</em> sont réinvestis
                  (après déduction du PFU prélevé à la source). C'est le montant réellement reçu sur votre porte-monnaie.
                </li>
                <li>
                  <strong style={{ color: 'var(--text)' }}>Plateforme hors France</strong> — les <em>intérêts bruts</em> sont réinvestis,
                  car aucune retenue n'est effectuée à la source. Pensez à provisionner la fiscalité due lors de votre déclaration annuelle.
                </li>
              </ul>
              <p>Si les intérêts d'un remboursement sont nuls (remboursement de capital seul), aucun réinvestissement n'est créé.</p>

              <h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Désactivation</h4>
              <p style={{ marginBottom: 0 }}>
                Pour désactiver le réinvestissement automatique, cliquez sur <strong style={{ color: 'var(--text)' }}>⋮</strong> dans le bloc
                <em> Informations du projet</em> et choisissez <strong style={{ color: 'var(--text)' }}>Désactiver le réinvestissement auto</strong>.
                Les réinvestissements déjà créés sont conservés ; les prochains remboursements n'en génèreront plus.
              </p>
            </FaqItem>

          </div>
        )}

      </div>
    </div>
  );
}