import { useState } from 'react';
import { useUi } from '../../context/UiContext.jsx';

export default function MaFiscaliteSection() {
  const { pfoAssujetti, setPfoAssujetti } = useUi();
  const [showPfoDetail, setShowPfoDetail] = useState(false);

  return (
    <div>
      <h2 style={{ margin: '0 0 6px', fontSize: 18 }}>Ma fiscalité</h2>
      <p style={{ margin: '0 0 24px', color: 'var(--text-muted)', fontSize: 13 }}>
        Paramètres fiscaux personnels applicables à vos revenus de placements.
      </p>

      <div style={{ fontWeight: 700, fontSize: 'var(--fs-md)', marginBottom: 10 }}>
        Fiscalité des plateformes étrangères
      </div>

      <div className="card" style={{ marginBottom: 16, borderLeft: `4px solid ${pfoAssujetti ? 'var(--primary)' : 'var(--border)'}`, transition: 'border-color .2s' }}>

        {/* Ligne titre + chevron + toggle */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button
            type="button"
            onClick={() => setShowPfoDetail(v => !v)}
            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', color: 'var(--text)' }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
              style={{ transform: showPfoDetail ? 'rotate(180deg)' : 'none', transition: 'transform .2s', marginRight: 6, flexShrink: 0 }}>
              <polyline points="6 9 12 15 18 9"/>
            </svg>
            <span style={{ fontWeight: 700, fontSize: 'var(--fs-base)' }}>
              CERFA 2778-SD — Prélèvement Forfaitaire Obligatoire (PFO) pour des revenus de source étrangère
            </span>
          </button>
          <div style={{ marginLeft: 'auto', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 'var(--fs-xs)', fontWeight: 600, color: pfoAssujetti ? 'var(--primary)' : 'var(--text-muted)' }}>
              {pfoAssujetti ? 'Activé' : 'Désactivé'}
            </span>
            <button
              type="button"
              onClick={() => setPfoAssujetti(!pfoAssujetti)}
              style={{
                width: 48, height: 26, borderRadius: 13, border: 'none',
                background: pfoAssujetti ? 'var(--primary)' : 'var(--border)',
                cursor: 'pointer', position: 'relative', transition: 'background .2s',
              }}
            >
              <span style={{
                position: 'absolute', top: 3,
                left: pfoAssujetti ? 25 : 3,
                width: 20, height: 20, borderRadius: '50%',
                background: '#fff', transition: 'left .2s',
                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
              }} />
            </button>
          </div>
        </div>

        {showPfoDetail && (
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
            <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.6 }}>
              Les intérêts perçus via des plateformes <strong>étrangères</strong> sont soumis à un prélèvement
              forfaitaire obligatoire non libératoire de <strong>12,8 %</strong> (+ prélèvements sociaux),
              à déclarer mensuellement via le formulaire <strong>2778-SD</strong> dans les 15 premiers jours
              du mois suivant l'encaissement.
            </div>
            <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.6, marginTop: 8 }}>
              Ce prélèvement s'applique aux personnes physiques fiscalement domiciliées en France dont
              le <strong>revenu fiscal de référence</strong> de l'avant-dernière année est égal ou supérieur à :
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
              <div style={{
                padding: '6px 14px', borderRadius: 20,
                background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)',
                fontSize: 'var(--fs-sm)', fontWeight: 600,
              }}>25 000 € — célibataire, divorcé ou veuf</div>
              <div style={{
                padding: '6px 14px', borderRadius: 20,
                background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)',
                fontSize: 'var(--fs-sm)', fontWeight: 600,
              }}>50 000 € — couple marié ou pacsé</div>
            </div>
            <div style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginTop: 8 }}>
              En dessous de ces seuils, vous êtes dispensé du PFO — mais les prélèvements sociaux restent dus.
              Le PFO versé via la 2778-SD constitue un simple acompte d'impôt sur le revenu,
              imputable sur l'impôt définitif calculé lors de la déclaration 2042.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}