import { useState } from 'react';
import { api } from '../../api.js';

function IconBroom() {
  return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 21l9-9"/><path d="M12.22 6.22L17 1.5l5.5 5.5-4.72 4.78"/><path d="M5 17c.5-2 2-3.5 4-4.5l3.5 3.5c-1 2-2.5 3.5-4.5 4"/></svg>;
}

export default function DataCleanupSection() {
  const [showModal,        setShowModal]        = useState(false);
  const [loading,          setLoading]          = useState(false);
  const [showReprocessModal, setShowReprocessModal] = useState(false);
  const [loadingReprocess, setLoadingReprocess] = useState(false);
  const [showDiffereModal, setShowDiffereModal] = useState(false);
  const [loadingDiffere,   setLoadingDiffere]   = useState(false);
  const [showBackfillModal, setShowBackfillModal] = useState(false);
  const [loadingBackfill,   setLoadingBackfill]   = useState(false);
  const [successMsg, setSuccessMsg] = useState(null);
  const [errorMsg,   setErrorMsg]   = useState(null);

  const handleReprocess = async () => {
    setLoadingReprocess(true);
    setErrorMsg(null);
    setSuccessMsg(null);
    try {
      const { updated } = await api.post('/remboursements/reprocess', {});
      setSuccessMsg(`${updated} remboursement${updated > 1 ? 's' : ''} recalculé${updated > 1 ? 's' : ''} avec succès.`);
      setShowReprocessModal(false);
    } catch (err) {
      setErrorMsg(err.message || 'Une erreur est survenue.');
      setShowReprocessModal(false);
    } finally {
      setLoadingReprocess(false);
    }
  };

  const handleReassign = async () => {
    setLoading(true);
    setErrorMsg(null);
    setSuccessMsg(null);
    try {
      await api.post('/investisseurs/reassign-to-principal', {});
      setSuccessMsg('Toutes les données ont été réaffectées au compte principal.');
      setShowModal(false);
    } catch (err) {
      setErrorMsg(err.message || 'Une erreur est survenue.');
      setShowModal(false);
    } finally {
      setLoading(false);
    }
  };

  const handleFixDiffereDates = async () => {
    setLoadingDiffere(true);
    setErrorMsg(null);
    setSuccessMsg(null);
    try {
      const { updated, detail } = await api.post('/investissements/fix-differe-dates', {});
      if (updated === 0) {
        setSuccessMsg('Aucune date incohérente détectée sur les prêts différés.');
      } else {
        setSuccessMsg(
          `${updated} prêt${updated > 1 ? 's' : ''} différé${updated > 1 ? 's' : ''} corrigé${updated > 1 ? 's' : ''} : ` +
          detail.map(d => d.nom_projet).join(', ') + '.'
        );
      }
      setShowDiffereModal(false);
    } catch (err) {
      setErrorMsg(err.message || 'Une erreur est survenue.');
      setShowDiffereModal(false);
    } finally {
      setLoadingDiffere(false);
    }
  };

  const handleBackfillComptes = async () => {
    setLoadingBackfill(true);
    setErrorMsg(null);
    setSuccessMsg(null);
    try {
      const { updated, total } = await api.post('/remboursements/backfill-comptes', {});
      if (updated === 0) {
        setSuccessMsg(`Aucun remboursement à corriger (${total} vérifié${total > 1 ? 's' : ''}).`);
      } else {
        setSuccessMsg(`${updated} remboursement${updated > 1 ? 's' : ''} mis à jour sur ${total} vérifié${total > 1 ? 's' : ''}.`);
      }
      setShowBackfillModal(false);
    } catch (err) {
      setErrorMsg(err.message || 'Une erreur est survenue.');
      setShowBackfillModal(false);
    } finally {
      setLoadingBackfill(false);
    }
  };

  return (
    <div className="card">
      <h3 style={{ margin: '0 0 4px' }}>Nettoyage de données</h3>
      <p className="text-muted" style={{ margin: '0 0 20px', fontSize: 'var(--fs-sm)' }}>
        Opérations de maintenance sur les données du compte.
      </p>

      {errorMsg   && <div className="error"       style={{ marginBottom: 12 }}>{errorMsg}</div>}
      {successMsg && <div className="success-msg" style={{ marginBottom: 12 }}>{successMsg}</div>}

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 16px', borderRadius: 8,
                    border: '1px solid var(--border)', background: 'var(--bg-secondary, var(--bg))',
                    marginBottom: 10 }}>
        <div>
          <div style={{ fontWeight: 500, fontSize: 'var(--fs-sm)', marginBottom: 2 }}>
            Recalculer les champs fiscaux des remboursements
          </div>
          <div className="text-muted" style={{ fontSize: 12 }}>
            Recalcule prélèvements sociaux, impôt sur le revenu, intérêts nets et net reçu de tous
            vos remboursements selon la fiscalité de chaque plateforme et les taux PFU de l'année.
            Met également à jour les retraits automatiques associés.
          </div>
        </div>
        <button
          style={{ marginLeft: 16, whiteSpace: 'nowrap', flexShrink: 0 }}
          onClick={() => setShowReprocessModal(true)}
          disabled={loadingReprocess}
        >
          Recalculer
        </button>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 16px', borderRadius: 8,
                    border: '1px solid var(--border)', background: 'var(--bg-secondary, var(--bg))',
                    marginBottom: 10 }}>
        <div>
          <div style={{ fontWeight: 500, fontSize: 'var(--fs-sm)', marginBottom: 2 }}>
            Corriger les dates des prêts différés
          </div>
          <div className="text-muted" style={{ fontSize: 12 }}>
            Recalcule la date de 1ère échéance et la date cible à partir de la date de souscription
            et de la durée prévue. Seuls les prêts dont les dates s'écartent de plus de 2 ans
            de la valeur calculée sont corrigés.
          </div>
        </div>
        <button
          style={{ marginLeft: 16, whiteSpace: 'nowrap', flexShrink: 0 }}
          onClick={() => setShowDiffereModal(true)}
          disabled={loadingDiffere}
        >
          Corriger
        </button>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 16px', borderRadius: 8,
                    border: '1px solid var(--border)', background: 'var(--bg-secondary, var(--bg))',
                    marginBottom: 10 }}>
        <div>
          <div style={{ fontWeight: 500, fontSize: 'var(--fs-sm)', marginBottom: 2 }}>
            Lier les remboursements aux comptes courants
          </div>
          <div className="text-muted" style={{ fontSize: 12 }}>
            Pour chaque remboursement en mode "Compte courant" sans compte lié, associe automatiquement
            le compte de l'investissement ou le premier compte courant du détenteur.
            Les remboursements déjà liés ou redirigés vers le porte-monnaie ne sont pas touchés.
          </div>
        </div>
        <button
          style={{ marginLeft: 16, whiteSpace: 'nowrap', flexShrink: 0 }}
          onClick={() => setShowBackfillModal(true)}
          disabled={loadingBackfill}
        >
          Lier
        </button>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 16px', borderRadius: 8,
                    border: '1px solid var(--border)', background: 'var(--bg-secondary, var(--bg))' }}>
        <div>
          <div style={{ fontWeight: 500, fontSize: 'var(--fs-sm)', marginBottom: 2 }}>
            Réaffecter l'ensemble des données au compte principal
          </div>
          <div className="text-muted" style={{ fontSize: 12 }}>
            Investissements, dépôts/retraits — tous les enregistrements seront attribués au titulaire principal.
          </div>
        </div>
        <button
          className="danger"
          style={{ marginLeft: 16, whiteSpace: 'nowrap', flexShrink: 0 }}
          onClick={() => setShowModal(true)}
          disabled={loading}
        >
          Réaffecter
        </button>
      </div>

      {showDiffereModal && (
        <div className="modal-overlay" onClick={() => setShowDiffereModal(false)}>
          <div className="modal" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
            <div className="modal-header" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ margin: 0 }}>Corriger les dates des prêts différés</h3>
            </div>
            <p style={{ margin: '0 0 12px', lineHeight: 1.6 }}>
              Pour chaque prêt de type <strong>différé</strong>, la date cible et la date de 1ère échéance
              seront recalculées comme suit :
            </p>
            <p style={{ margin: '0 0 12px', lineHeight: 1.6, fontFamily: 'monospace', fontSize: 13,
                        background: 'var(--surface-2, var(--bg))', padding: '8px 12px', borderRadius: 6,
                        border: '1px solid var(--border)' }}>
              date souscription + durée (mois)
            </p>
            <p style={{ margin: '0 0 20px', lineHeight: 1.6 }} className="text-muted">
              La correction ne s'applique que si l'écart entre la date existante et la date calculée
              dépasse <strong>2 ans</strong>. Les simulations de remboursement associées ne sont pas
              recalculées automatiquement.
            </p>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button onClick={() => setShowDiffereModal(false)} disabled={loadingDiffere}>Annuler</button>
              <button className="primary" onClick={() => handleFixDiffereDates()} disabled={loadingDiffere}>
                {loadingDiffere ? 'Correction en cours…' : 'Confirmer la correction'}
              </button>
            </div>
          </div>
        </div>
      )}

      {showBackfillModal && (
        <div className="modal-overlay" onClick={() => setShowBackfillModal(false)}>
          <div className="modal" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
            <div className="modal-header" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ margin: 0 }}>Lier les remboursements aux comptes courants</h3>
            </div>
            <p style={{ margin: '0 0 12px', lineHeight: 1.6 }}>
              Pour chaque remboursement en mode <strong>"Compte courant de l'investisseur"</strong> sans compte lié, cette opération va :
            </p>
            <ul style={{ margin: '0 0 12px', paddingLeft: 20, lineHeight: 1.8, fontSize: 'var(--fs-sm)' }}>
              <li>Utiliser le compte défini sur l'investissement lié, si disponible</li>
              <li>Sinon, prendre le premier compte courant du détenteur</li>
            </ul>
            <p style={{ margin: '0 0 20px', lineHeight: 1.6 }} className="text-muted">
              Les remboursements déjà liés à un compte ou redirigés vers le porte-monnaie ne sont pas modifiés.
            </p>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button onClick={() => setShowBackfillModal(false)} disabled={loadingBackfill}>Annuler</button>
              <button className="primary" onClick={handleBackfillComptes} disabled={loadingBackfill}>
                {loadingBackfill ? 'Traitement en cours…' : 'Confirmer'}
              </button>
            </div>
          </div>
        </div>
      )}

      {showReprocessModal && (
        <div className="modal-overlay" onClick={() => setShowReprocessModal(false)}>
          <div className="modal" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
            <div className="modal-header" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ margin: 0 }}>Recalculer les remboursements</h3>
            </div>
            <p style={{ margin: '0 0 12px', lineHeight: 1.6 }}>
              Cette opération va recalculer pour <strong>tous vos remboursements</strong> les champs suivants :
            </p>
            <ul style={{ margin: '0 0 12px', paddingLeft: 20, lineHeight: 1.8, fontSize: 'var(--fs-sm)' }}>
              <li>Prélèvements sociaux et impôt sur le revenu (taux PFU de l'année)</li>
              <li>Taxe locale (pour les plateformes avec fiscalité locale)</li>
              <li>Intérêts nets et montant net reçu</li>
              <li>Montant des retraits automatiques associés</li>
            </ul>
            <p style={{ margin: '0 0 20px', lineHeight: 1.6 }} className="text-muted">
              Les valeurs saisies manuellement seront écrasées. Cette opération ne peut pas être annulée.
            </p>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button onClick={() => setShowReprocessModal(false)} disabled={loadingReprocess}>Annuler</button>
              <button className="primary" onClick={handleReprocess} disabled={loadingReprocess}>
                {loadingReprocess ? 'Recalcul en cours…' : 'Confirmer le recalcul'}
              </button>
            </div>
          </div>
        </div>
      )}

      
      {showModal && (
        <div className="modal-overlay" onClick={() => setShowModal(false)}>
          <div className="modal" style={{ maxWidth: 440 }} onClick={e => e.stopPropagation()}>
            <div className="modal-header" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ margin: 0, color: 'var(--danger, #ef4444)' }}>⚠ Action irréversible</h3>
            </div>
            <p style={{ margin: '0 0 12px', lineHeight: 1.6 }}>
              Cette action va réaffecter <strong>l'ensemble de vos investissements et mouvements financiers</strong> au compte principal.
            </p>
            <p style={{ margin: '0 0 20px', lineHeight: 1.6 }} className="text-muted">
              Les données actuellement rattachées à d'autres membres ou entreprises seront transférées au titulaire principal. Cette opération ne peut pas être annulée.
            </p>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button onClick={() => setShowModal(false)} disabled={loading}>Annuler</button>
              <button className="danger" onClick={handleReassign} disabled={loading}>
                {loading ? 'Réaffectation…' : 'Confirmer la réaffectation'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

