import { useLocation, useNavigate } from 'react-router-dom';
import FamilleEntreprises from './FamilleEntreprises.jsx';
import AppearanceSection  from './settings/AppearanceSection.jsx';
import PlateformesSection from './settings/PlateformesSection.jsx';
import CategoriesInvSection from './settings/CategoriesInvSection.jsx';
import SecteursInvSection from './settings/SecteursInvSection.jsx';
import ComptesSection     from './settings/ComptesSection.jsx';
import MaFiscaliteSection from './settings/MaFiscaliteSection.jsx';
import DataCleanupSection from './settings/DataCleanupSection.jsx';
import ImportsSection     from './settings/ImportsSection.jsx';

/* ── Icônes nav ───────────────────────────────────────────────── */
function IconFamily()   { 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>; }
function IconMonitor()  { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>; }
function IconServer()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>; }
function IconWallet()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M16 12h.01M2 10h20"/></svg>; }
function IconTag()      { 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="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>; }
function IconLayers()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>; }
function IconGrid()     { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>; }
function IconMyFiscal() { 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="M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="M16 3H8l-2 4h12l-2-4z"/><line x1="12" y1="12" x2="12" y2="12.01"/></svg>; }
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>; }
function IconUpload()   { 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>; }

const NAV = [
  {
    group: 'Interface',
    items: [
      { id: 'apparence',   label: 'Apparence',               icon: <IconMonitor /> },
    ],
  },
  {
    group: 'Mon paramétrage',
    items: [
      { id: 'membres',      label: 'Mes membres & entreprises', icon: <IconFamily /> },
      { id: 'plateformes',  label: 'Mes plateformes',           icon: <IconServer /> },
      { id: 'comptes',      label: 'Mes comptes courants',    icon: <IconWallet /> },
      { id: 'ma-fiscalite', label: 'Ma fiscalité',            icon: <IconMyFiscal /> },
    ],
  },
  {
    group: 'Mes tags',
    items: [
      { id: 'categories-inv', label: "Mes catégories d'investissement", icon: <IconLayers /> },
      { id: 'secteurs-inv',   label: "Mes secteurs d'investissement",   icon: <IconGrid /> },
    ],
  },
  {
    group: 'Mes données',
    items: [
      { id: 'nettoyage', label: 'Nettoyage de données',  icon: <IconBroom /> },
      { id: 'imports',   label: 'Importation de données', icon: <IconUpload /> },
    ],
  },
];

export default function Settings() {
  const { search } = useLocation();
  const navigate   = useNavigate();

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

  return (
    <div className="account-layout">
      <aside className="account-sidebar">
        <h1 className="account-title">Gérer les paramètres</h1>
        {NAV.map(group => (
          <div key={group.group} className="account-nav-group">
            <span className="account-nav-label">{group.group}</span>
            {group.items.map(item => (
              <button
                key={item.id}
                className={`account-nav-item${section === item.id ? ' active' : ''}`}
                onClick={() => setSection(item.id)}
              >
                {item.icon}
                {item.label}
              </button>
            ))}
          </div>
        ))}
      </aside>

      <div className="account-content">
        {section === 'apparence'      && <AppearanceSection />}
        {section === 'membres'        && <FamilleEntreprises />}
        {section === 'plateformes'    && <PlateformesSection />}
        {section === 'comptes'        && <ComptesSection />}
        {section === 'ma-fiscalite'   && <MaFiscaliteSection />}
        {section === 'categories-inv' && <CategoriesInvSection />}
        {section === 'secteurs-inv'   && <SecteursInvSection />}
        {section === 'nettoyage'      && <DataCleanupSection />}
        {section === 'imports'        && <ImportsSection />}
      </div>
    </div>
  );
}
