import { createContext, useContext, useEffect, useState, useCallback } from 'react';
import { api } from '../api.js';
import { useAuth } from './AuthContext.jsx';

const InvCtx = createContext(null);

const KEY_ID   = 'cl_investisseur_id';
const KEY_VIEW = 'cl_active_view';   // 'all' | '<id>'

export function InvestisseurProvider({ children }) {
  const { token } = useAuth();
  const [investisseurs, setInvestisseurs] = useState([]);
  const [activeId,   setActiveIdState]   = useState(() => Number(localStorage.getItem(KEY_ID))   || null);
  const [activeView, setActiveViewState] = useState(() => localStorage.getItem(KEY_VIEW) || 'all');
  const [loading, setLoading] = useState(false);

  const reload = useCallback(async () => {
    if (!token) return;
    setLoading(true);
    try {
      const list = await api.get('/investisseurs');
      setInvestisseurs(list);
      // S'assurer que activeId pointe sur un membre valide
      if (list.length && (!activeId || !list.find(i => i.id === activeId))) {
        const first = list[0].id;
        setActiveIdState(first);
        localStorage.setItem(KEY_ID, String(first));
      }
    } finally {
      setLoading(false);
    }
  }, [token, activeId]);

  useEffect(() => {
    if (token) reload();
    else setInvestisseurs([]);
  }, [token, reload]);

  /** Changer le membre actif pour les requêtes (topbar) */
  const setActive = (id) => {
    setActiveIdState(id);
    localStorage.setItem(KEY_ID, String(id));
  };

  /** Changer la vue du profil : 'all' ou id numérique d'un investisseur */
  const setActiveView = (v) => {
    setActiveViewState(v);
    localStorage.setItem(KEY_VIEW, String(v));
    // Si on sélectionne un membre précis → l'activer aussi pour les requêtes
    if (v !== 'all') {
      setActiveIdState(Number(v));
      localStorage.setItem(KEY_ID, String(v));
    }
  };

  const active     = investisseurs.find(i => i.id === activeId) || null;
  const activeViewMember = activeView !== 'all'
    ? investisseurs.find(i => i.id === Number(activeView)) || null
    : null;

  return (
    <InvCtx.Provider value={{
      investisseurs, active, activeId, setActive,
      activeView, activeViewMember, setActiveView,
      reload, loading,
    }}>
      {children}
    </InvCtx.Provider>
  );
}

export const useInvestisseur = () => useContext(InvCtx);
