const { useState, useEffect, useCallback } = React;

// ─── STORAGE ────────────────────────────────────────────────────────────────
const STORAGE_KEY = "electra_crm_v5";
const API_BASE=(typeof window!=="undefined"&&window.location.pathname.startsWith("/crm")?"/crm":"")+"/api";
const STORAGE_KEYS_VECHI = ["electra_crm_v4", "electra_crm_v3", "electra_crm_v2", "electra_crm_v1", "vanzari_pro_crm"];

function genId() { return Math.random().toString(36).slice(2, 10); }

// Hook responsive
function useIsMobile() {
  const [mob, setMob] = useState(() => typeof window !== "undefined" && window.innerWidth < 768);
  useEffect(() => {
    const h = () => setMob(window.innerWidth < 768);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);
  return mob;
}

// Datele inițiale — doar utilizatori și etape pipeline
const DATE_INITIALE_FN = () => ({
  utilizatori: [
    { id: "u1", nume: "Andrei Martonca", email: "andrei.martonca@electra.ro", parola: "Parola123!", rol: "director" },
    { id: "u2", nume: "Florin Mata",     email: "florin.mata@electra.ro",     parola: "Parola123!", rol: "agent" },
    { id: "u3", nume: "Emanuel Budai",   email: "emanuel.budai@electra.ro",   parola: "Parola123!", rol: "agent" },
    { id: "u4", nume: "Daniel Calin",    email: "daniel.calin@electra.ro",    parola: "Parola123!", rol: "agent" },
    { id: "u5", nume: "Vanzari Iasi",    email: "vanzari.iasi@electra.ro",    parola: "Parola123!", rol: "agent" },
  ],
  clienti:    [],
  contacte:   [],
  proiecte:   [],
  taskuri:    [],
  activitati: [],
  etape_pipeline: [
    { id:"lead",       label:"Lead",      culoare:"#f0a500", tip:"normal"   },
    { id:"calificare", label:"Calificare",culoare:"#4fa8f0", tip:"normal"   },
    { id:"oferta",     label:"Ofertă",    culoare:"#8b85ff", tip:"normal"   },
    { id:"negociere",  label:"Negociere", culoare:"#22c98a", tip:"normal"   },
    { id:"castigat",   label:"Câștigat",  culoare:"#22c98a", tip:"castigat" },
    { id:"pierdut",    label:"Pierdut",   culoare:"#f04f4f", tip:"pierdut"  },
  ],
});

// API Client — MySQL centralizat
let _apiToken=(typeof localStorage!=="undefined"&&localStorage.getItem("electra_crm_token"))||null;
let _memoryDb=null;
function apiH(){return{"Content-Type":"application/json","Authorization":_apiToken?"Bearer "+_apiToken:""};}
async function apiFetch(method,path,body){
  const r=await fetch(API_BASE+path,{method,headers:apiH(),body:body?JSON.stringify(body):undefined});
  if(r.status===401){_apiToken=null;if(typeof localStorage!=="undefined")localStorage.removeItem("electra_crm_token");window.location.reload();return null;}
  if(!r.ok){const e=await r.json().catch(()=>({error:r.statusText}));throw new Error(e.error||r.statusText);}
  return r.json();
}
const apiGet=p=>apiFetch("GET",p);
const apiPost=(p,b)=>apiFetch("POST",p,b);
const apiPut=(p,b)=>apiFetch("PUT",p,b);
const apiDelete=p=>apiFetch("DELETE",p);

async function loadData(){
  if(!_apiToken)return DATE_INITIALE_FN();
  try{
    const[u,e,c,ct,p,t]=await Promise.all([apiGet("/utilizatori"),apiGet("/etape"),apiGet("/clienti"),apiGet("/contacte"),apiGet("/proiecte"),apiGet("/taskuri")]);
    const db={utilizatori:Array.isArray(u)?u:[],etape_pipeline:Array.isArray(e)?e:DATE_INITIALE_FN().etape_pipeline,clienti:Array.isArray(c)?c:[],contacte:Array.isArray(ct)?ct:[],proiecte:Array.isArray(p)?p:[],taskuri:Array.isArray(t)?t:[],activitati:[]};
    _memoryDb=db;return db;
  }catch(err){console.error("[loadData]",err.message);return _memoryDb||DATE_INITIALE_FN();}
}
async function saveData(data){_memoryDb=data;}


// ─── TOKENS ─────────────────────────────────────────────────────────────────
const C = {
  bg:      "#f4f6f9",   // fundal pagină — gri-albăstrui deschis
  surface: "#ffffff",   // suprafețe secundare — alb pur
  card:    "#ffffff",   // carduri — alb
  border:  "#d8dde6",   // borduri — gri-albăstrui
  accent:  "#2563b0",   // accent principal — albastru corporate
  accentL: "#3b7dd8",   // accent hover/light variant — albastru mai deschis
  text:    "#1a2233",   // text principal
  muted:   "#6b7a99",   // text secundar
  success: "#1a8c5b",   // verde
  warn:    "#c97b00",   // portocaliu
  danger:  "#c0392b",   // roșu
  info:    "#2472a4",   // albastru info
  etape: {
    lead:       ["#fef3e2","#c97b00"],
    calificare: ["#e8f4fd","#2472a4"],
    oferta:     ["#ede8ff","#5b4fcf"],
    negociere:  ["#e4f7ef","#1a8c5b"],
    castigat:   ["#d4edda","#1a8c5b"],
    pierdut:    ["#fde8e8","#c0392b"],
  },
};

// ─── HELPERS ─────────────────────────────────────────────────────────────────
// Etapele sunt acum dinamice — citite din db.etape_pipeline
// Aceste constante statice rămân doar ca fallback / pentru compatibilitate
const ETAPE_DEFAULT = ["lead","calificare","oferta","negociere","castigat","pierdut"];
const ETAPE_LABEL_DEFAULT = { lead:"Lead", calificare:"Calificare", oferta:"Ofertă", negociere:"Negociere", castigat:"Câștigat", pierdut:"Pierdut" };

function getEtape(db) { return db.etape_pipeline || []; }
function getEtapeNormale(db) {
  const toate = getEtape(db);
  const normale   = toate.filter(e => e.tip === "normal");
  const castigate = toate.filter(e => e.tip === "castigat");
  const pierdute  = toate.filter(e => e.tip === "pierdut");
  return [...normale, ...castigate, ...pierdute];
}
function getEtapaLabel(db, id) { return ((db.etape_pipeline||[]).find(e=>e.id===id)||{}).label || id; }
function getEtapaCuloare(db, id) { return ((db.etape_pipeline||[]).find(e=>e.id===id)||{}).culoare || C.muted; }
function isEtapaFinala(db, id) { return ((db.etape_pipeline||[]).find(e=>e.id===id)||{}).tip === "castigat"; }
function isEtapaPierduta(db, id) { return ((db.etape_pipeline||[]).find(e=>e.id===id)||{}).tip === "pierdut"; }
function isEtapaInchisa(db, id) { const e = (db.etape_pipeline||[]).find(x=>x.id===id); return (e&&e.tip)==="castigat"||(e&&e.tip)==="pierdut"; }

const ROL_LABEL = { director:"Director", agent:"Agent vânzări" };
const PRIORITATE_C = { urgenta: C.danger, ridicata: C.warn, medie: C.info, scazuta: C.muted };
const TIP_ACT = ["apel","email","intalnire","nota","oferta","instalare","service"];

function Avatar({ name, size=28, color=C.accent }) {
  const initials = name.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
  return (
    <div style={{ width:size, height:size, borderRadius:"50%", background:color+"22",
      border:`1px solid ${color}44`, display:"flex", alignItems:"center", justifyContent:"center",
      fontSize:size*0.35, fontWeight:600, color, flexShrink:0, fontFamily:"inherit" }}>
      {initials}
    </div>
  );
}

function Badge({ label, color=C.muted, bg }) {
  return (
    <span style={{ display:"inline-block", padding:"2px 8px", borderRadius:20,
      background: bg || color+"22", color, fontSize:11, fontWeight:600, letterSpacing:.3 }}>
      {label}
    </span>
  );
}

function Btn({ children, onClick, variant="ghost", small, style={}, disabled }) {
  const base = {
    border:"none", borderRadius:8, cursor:disabled?"not-allowed":"pointer", fontWeight:500,
    fontSize: small ? 12 : 13, padding: small ? "5px 10px" : "8px 16px",
    transition:"all .15s", fontFamily:"inherit", opacity: disabled ? .5 : 1,
    display:"inline-flex", alignItems:"center", gap:6,
  };
  const variants = {
    primary: { background:C.accent, color:"#fff" },
    ghost:   { background:"transparent", color:C.muted, border:`1px solid ${C.border}` },
    danger:  { background:C.danger+"22", color:C.danger, border:`1px solid ${C.danger}44` },
  };
  return <button onClick={disabled ? undefined : onClick} style={{...base, ...variants[variant], ...style}}>{children}</button>;
}

function Input({ value, onChange, placeholder, type="text", style={} }) {
  return (
    <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8, padding:"8px 12px",
        color:C.text, fontSize:13, fontFamily:"inherit", outline:"none", width:"100%", boxSizing:"border-box", ...style }} />
  );
}

function Select({ value, onChange, options, style={} }) {
  return (
    <select value={value} onChange={e=>onChange(e.target.value)}
      style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8, padding:"8px 12px",
        color:C.text, fontSize:13, fontFamily:"inherit", outline:"none", width:"100%", ...style }}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
}

function ConfirmModal({ titlu, mesaj, labelConfirm="Șterge", onConfirm, onCancel }) {
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(30,40,60,.4)", zIndex:2000,
      display:"flex", alignItems:"center", justifyContent:"center" }}
      onClick={onCancel}>
      <div style={{ background:C.card, borderRadius:14, padding:28, maxWidth:420, width:"90%",
        boxShadow:"0 8px 32px rgba(0,0,0,.15)", border:`1px solid ${C.border}` }}
        onClick={e=>e.stopPropagation()}>
        <div style={{ fontSize:20, marginBottom:12 }}>⚠️</div>
        <div style={{ fontSize:16, fontWeight:700, color:C.text, marginBottom:8 }}>{titlu}</div>
        <div style={{ fontSize:13, color:C.muted, lineHeight:1.6, marginBottom:24 }}>{mesaj}</div>
        <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
          <Btn onClick={onCancel}>Anulare</Btn>
          <Btn variant="danger" onClick={onConfirm}>{labelConfirm}</Btn>
        </div>
      </div>
    </div>
  );
}
function Modal({ title, onClose, children, wide }) {
  const isMobile = useIsMobile();
  const mobileStyle = isMobile ? {
    position:"fixed", inset:0, top:"auto", borderRadius:"18px 18px 0 0",
    maxHeight:"92vh", width:"100%", maxWidth:"100%"
  } : {
    width:"100%", maxWidth: wide ? 680 : 480, maxHeight:"85vh",
    borderRadius:16
  };
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(30,40,60,.4)", zIndex:1000,
      display:"flex",
      alignItems: isMobile ? "flex-end" : "center",
      justifyContent:"center", padding: isMobile ? 0 : 16 }}>
      <div style={{ background:C.card, border:`1px solid ${C.border}`,
        overflow:"auto", ...mobileStyle }}>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between",
          padding:"16px 20px", borderBottom:`1px solid ${C.border}`, position:"sticky", top:0,
          background:C.card, zIndex:1 }}>
          <span style={{ fontWeight:600, fontSize:15, color:C.text }}>{title}</span>
          <Btn onClick={onClose} small>✕</Btn>
        </div>
        <div style={{ padding: isMobile ? "16px" : "20px" }}>{children}</div>
      </div>
    </div>
  );
}

function FormRow({ label, children }) {
  return (
    <div style={{ marginBottom:14 }}>
      <div style={{ fontSize:12, color:C.muted, marginBottom:5, fontWeight:500 }}>{label}</div>
      {children}
    </div>
  );
}

// ─── MAIN APP ────────────────────────────────────────────────────────────────
function App() {
  const [db, setDb] = useState(null);
  const [user, setUser] = useState(null);
  const [pagina, setPagina] = useState("dashboard");
  const [taskModalGlobal, setTaskModalGlobal] = useState(null);
  const [proiectModalGlobal, setProiectModalGlobal] = useState(null);
  const [clientDetaliiGlobal, setClientDetaliiGlobal] = useState(null);
  const [confirmGlobal, setConfirmGlobal] = useState(null);
  const [mobileMenu, setMobileMenu] = useState(false);
  const isMobile = useIsMobile();

  // Încarcă datele la start (async — window.storage)
  useEffect(() => {
    loadData().then(data => setDb(data));
  }, []);

  const update=useCallback((fn)=>{
    setDb(prev=>{
      const next=fn(prev);
      _memoryDb=next;
      if(_apiToken&&prev)syncDiff(prev,next).catch(e=>console.error("[sync]",e.message));
      return next;
    });
  },[]);
  async function syncDiff(prev,next){
    if(!_apiToken)return;
    const dif=(a,b,path)=>({
      added:b.filter(n=>!a.find(p=>p.id===n.id)),
      del:a.filter(p=>!b.find(n=>n.id===p.id)),
      changed:b.filter(n=>{const o=a.find(p=>p.id===n.id);return o&&JSON.stringify(n)!==JSON.stringify(o);}),
      path
    });
    for(const{added,del,changed,path}of[
      dif(prev.utilizatori||[],next.utilizatori||[],"/utilizatori"),
      dif(prev.clienti||[],next.clienti||[],"/clienti"),
      dif(prev.contacte||[],next.contacte||[],"/contacte"),
      dif(prev.proiecte||[],next.proiecte||[],"/proiecte"),
      dif(prev.taskuri||[],next.taskuri||[],"/taskuri"),
    ]){
      for(const x of added)   await apiPost(path,x).catch(()=>{});
      for(const x of changed) await apiPut(path+"/"+x.id,x).catch(()=>{});
      for(const x of del)     await apiDelete(path+"/"+x.id).catch(()=>{});
    }
    if(JSON.stringify(prev.etape_pipeline||[])!==JSON.stringify(next.etape_pipeline||[]))
      await apiPut("/etape",next.etape_pipeline).catch(()=>{});
  }

  // Expune window._openTask, window._openProiect și window._openClient pentru orice componentă
  useEffect(() => {
    window._openTask    = (task)    => setTaskModalGlobal(task);
    window._openProiect = (proiect) => setProiectModalGlobal(proiect);
    window._openClient  = (client)  => {
      setPagina("clienti");
      setClientDetaliiGlobal(client);
    };
    return () => { delete window._openTask; delete window._openProiect; delete window._openClient; };
  }, []);

  function salveazaTaskGlobal(form) {
    update(d => ({ ...d, taskuri: d.taskuri.map(t => t.id === form.id ? { ...t, ...form } : t) }));
    setTaskModalGlobal(null);
  }
  function stergeTaskGlobal(id) {
    const t = db && db.taskuri.find(x=>x.id===id);
    setTaskModalGlobal(null);
    setConfirmGlobal({
      titlu: "Șterge activitate",
      mesaj: `Ești sigur că vrei să ștergi activitatea "${t&&t.titlu}"? Această acțiune este ireversibilă.`,
      onConfirm: () => {
        update(d => ({ ...d, taskuri: d.taskuri.filter(x => x.id !== id) }));
        setConfirmGlobal(null);
      }
    });
  }
  function salveazaProiectGlobal(form) {
    const eInchisaAcum = isEtapaInchisa(db, form.etapa);
    const eraInchisa   = isEtapaInchisa(db, (db.proiecte.find(p=>p.id===form.id)||{}).etapa);
    update(d => ({ ...d, proiecte: d.proiecte.map(p => p.id === form.id ? {
      ...p, ...form,
      data_inchidere: eInchisaAcum
        ? (eraInchisa ? p.data_inchidere : new Date().toISOString())
        : null,
    } : p)}));
    setProiectModalGlobal(null);
  }

  // Loading screen
  function onResetParola(userId, email) {
    // Generează parolă temporară de 8 caractere
    const chars = "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
    const parolaTemp = Array.from({length:8}, () => chars[Math.floor(Math.random()*chars.length)]).join("");
    update(d => ({
      ...d,
      utilizatori: d.utilizatori.map(u => u.id === userId
        ? { ...u, parola_temp: parolaTemp, reset_cerut: true, reset_email: email }
        : u
      )
    }));
  }

  if (!db) return (
    <div style={{ minHeight:"100vh", background:C.bg, display:"flex", alignItems:"center",
      justifyContent:"center", fontFamily:"'DM Sans','Segoe UI',sans-serif" }}>
      <div style={{ textAlign:"center" }}>
        <div style={{ fontSize:36, marginBottom:12 }}>⬡</div>
        <div style={{ fontSize:14, color:C.muted }}>Se încarcă ELECTRA CRM...</div>
      </div>
    </div>
  );

  if (!user) return <Login db={db} onLogin={setUser} onResetParola={onResetParola} />;

  const nav = [
    { id:"dashboard", label:"Dashboard",  icon:"⊞" },
    { id:"clienti",   label:"Clienți",    icon:"◉" },
    { id:"pipeline",  label:"Pipeline",   icon:"⋮⋮⋮" },
    { id:"taskuri",   label:"Task-uri",   icon:"✓" },
    ...(user.rol==="director" ? [
      { id:"rapoarte",  label:"Rapoarte",   icon:"▤" },
    ] : []),
    { id:"setari",    label:"Setări",     icon:"⚙" },
  ];

  const pages = { dashboard:<Dashboard db={db} user={user} update={update} />,
    clienti:<Clienti db={db} user={user} update={update} initialDetalii={clientDetaliiGlobal} onDetaliiClose={()=>setClientDetaliiGlobal(null)} />,
    pipeline:<Pipeline db={db} user={user} update={update} />,
    taskuri:<Taskuri db={db} user={user} update={update} />,
    rapoarte:<Rapoarte db={db} />,
    setari:<Setari db={db} user={user} update={update} />,
  };


  return (
    <div style={{ display:"flex", flexDirection: isMobile ? "column" : "row",
      height:"100vh", background:C.bg, color:C.text,
      fontFamily:"'DM Sans', 'Segoe UI', sans-serif", overflow:"hidden" }}>

      {/* ── SIDEBAR desktop ── */}
      {!isMobile && (
        <aside style={{ width:210, borderRight:`1px solid ${C.border}`, display:"flex",
          flexDirection:"column", background:C.surface, flexShrink:0, boxShadow:"2px 0 6px rgba(0,0,0,.06)" }}>
          <div style={{ padding:"20px 16px 14px", borderBottom:`1px solid ${C.border}` }}>
            <div style={{ fontSize:16, fontWeight:700, color:C.accent, letterSpacing:-.3 }}>ELECTRA CRM</div>
            <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>Portal vânzări</div>
          </div>
          <nav style={{ flex:1, padding:"8px 8px" }}>
            {nav.map(n => (
              <div key={n.id} onClick={()=>setPagina(n.id)}
                style={{ display:"flex", alignItems:"center", gap:10, padding:"9px 12px",
                  borderRadius:8, cursor:"pointer", marginBottom:2, fontSize:13,
                  color: pagina===n.id ? C.text : C.muted,
                  background: pagina===n.id ? C.accent+"22" : "transparent",
                  fontWeight: pagina===n.id ? 600 : 400,
                  borderLeft: pagina===n.id ? `3px solid ${C.accent}` : "3px solid transparent",
                  transition:"all .12s" }}>
                <span style={{ fontSize:14 }}>{n.icon}</span>
                {n.label}
              </div>
            ))}
          </nav>
          <div style={{ padding:"12px 16px", borderTop:`1px solid ${C.border}` }}>
            <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:10 }}>
              <Avatar name={user.nume} size={30} color={user.rol==="director"?C.warn:C.accent} />
              <div>
                <div style={{ fontSize:12, fontWeight:600, color:C.text }}>{user.nume.split(" ")[0]}</div>
                <div style={{ fontSize:11, color:C.muted }}>{ROL_LABEL[user.rol]}</div>
              </div>
            </div>
            <Btn onClick={async()=>{try{await apiPost("/auth/logout",{});}catch{};_apiToken=null;if(typeof localStorage!=="undefined")localStorage.removeItem("electra_crm_token");setUser(null);}} small style={{width:"100%",justifyContent:"center"}}>Deconectare</Btn>
          </div>
        </aside>
      )}

      {/* ── TOPBAR mobil ── */}
      {isMobile && (
        <div style={{ background:C.surface, borderBottom:`1px solid ${C.border}`,
          padding:"12px 16px", display:"flex", alignItems:"center", justifyContent:"space-between",
          flexShrink:0, boxShadow:"0 2px 6px rgba(0,0,0,.06)" }}>
          <div style={{ fontSize:15, fontWeight:700, color:C.accent }}>ELECTRA CRM</div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <Avatar name={user.nume} size={28} color={user.rol==="director"?C.warn:C.accent} />
            <div style={{ fontSize:12, fontWeight:600, color:C.text }}>{user.nume.split(" ")[0]}</div>
          </div>
        </div>
      )}

      {/* ── MAIN ── */}
      <main style={{ flex:1, overflow:"auto", display:"flex", flexDirection:"column",
        paddingBottom: isMobile ? 64 : 0 }}>
        {pages[pagina] || pages.dashboard}
      </main>

      {/* ── BOTTOM NAV mobil ── */}
      {isMobile && (
        <nav style={{ position:"fixed", bottom:0, left:0, right:0, height:58,
          background:C.surface, borderTop:`1px solid ${C.border}`,
          display:"flex", alignItems:"stretch", zIndex:900,
          boxShadow:"0 -2px 12px rgba(0,0,0,.08)" }}>
          {nav.map(n => {
            const activ = pagina === n.id;
            return (
              <div key={n.id} onClick={()=>setPagina(n.id)}
                style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center",
                  justifyContent:"center", gap:2, cursor:"pointer", transition:"all .12s",
                  borderTop: activ ? `2px solid ${C.accent}` : "2px solid transparent",
                  background: activ ? C.accent+"0a" : "transparent" }}>
                <span style={{ fontSize:18 }}>{n.icon}</span>
                <span style={{ fontSize:9, fontWeight: activ ? 700 : 400,
                  color: activ ? C.accent : C.muted, letterSpacing:.2 }}>
                  {n.label}
                </span>
              </div>
            );
          })}
          {/* Buton logout la final pe mobil */}
          <div onClick={()=>setUser(null)}
            style={{ width:48, display:"flex", flexDirection:"column", alignItems:"center",
              justifyContent:"center", gap:2, cursor:"pointer", borderLeft:`1px solid ${C.border}` }}>
            <span style={{ fontSize:16 }}>⏏</span>
            <span style={{ fontSize:9, color:C.muted }}>Ieșire</span>
          </div>
        </nav>
      )}

      {/* TASK MODAL GLOBAL — deschis din orice componentă via window._openTask */}
      {taskModalGlobal && db && user && (
        <TaskModal
          db={db}
          user={user}
          task={taskModalGlobal}
          onSave={salveazaTaskGlobal}
          onDelete={stergeTaskGlobal}
          onClose={() => setTaskModalGlobal(null)}
        />
      )}

      {/* PROIECT MODAL GLOBAL — deschis din orice componentă via window._openProiect */}
      {proiectModalGlobal && db && user && (
        <ProiectModal
          proiect={proiectModalGlobal}
          db={db}
          user={user}
          onSave={salveazaProiectGlobal}
          onClose={() => setProiectModalGlobal(null)}
        />
      )}

      {/* CONFIRM MODAL GLOBAL */}
      {confirmGlobal && (
        <ConfirmModal
          titlu={confirmGlobal.titlu}
          mesaj={confirmGlobal.mesaj}
          labelConfirm="🗑 Șterge definitiv"
          onConfirm={confirmGlobal.onConfirm}
          onCancel={()=>setConfirmGlobal(null)} />
      )}
    </div>
  );
}
function Login({ db, onLogin, onResetParola }) {
  const [email, setEmail] = useState("");
  const [parola, setParola] = useState("");
  const [err, setErr] = useState("");
  const [view, setView] = useState("login"); // "login" | "reset"
  const [resetEmail, setResetEmail] = useState("");
  const [resetMsg, setResetMsg] = useState("");
  const isMobile = useIsMobile();

  async function handleLogin(){
    setErr("");
    try{
      const data=await apiPost("/auth/login",{email,parola});
      if(data&&data.token){_apiToken=data.token;if(typeof localStorage!=="undefined")localStorage.setItem("electra_crm_token",data.token);onLogin(data.user);}
    }catch(e){setErr(e.message||"Email sau parola incorecta");}
  }

  function handleReset() {
    const u = db.utilizatori.find(u => u.email===resetEmail.trim().toLowerCase());
    if (!u) {
      setResetMsg("error:Nu există niciun cont cu această adresă de email.");
      return;
    }
    if (u.activ === false) {
      setResetMsg("error:Contul este dezactivat. Contactează directorul.");
      return;
    }
    // Generează cod temporar de 6 cifre și îl salvează în db
    onResetParola(u.id, resetEmail.trim());
    setResetMsg(`ok:Cererea a fost trimisă. Contactează directorul de vânzări (Andrei Martonca) pentru a primi parola nouă.`);
  }

  if (view === "reset") {
    return (
      <div style={{ minHeight:"100vh", background:C.bg, display:"flex",
        alignItems: isMobile ? "flex-start" : "center",
        justifyContent:"center", fontFamily:"'DM Sans','Segoe UI',sans-serif" }}>
        <div style={{ background:C.card, border: isMobile ? "none" : `1px solid ${C.border}`,
          borderRadius: isMobile ? 0 : 20,
          padding: isMobile ? "48px 24px" : "40px 36px",
          width: isMobile ? "100%" : 380,
          minHeight: isMobile ? "100vh" : "auto",
          boxSizing:"border-box" }}>
          <div style={{ textAlign:"center", marginBottom:28 }}>
            <div style={{ fontSize:36, marginBottom:10 }}>🔑</div>
            <div style={{ fontSize:20, fontWeight:700, color:C.text }}>Recuperare parolă</div>
            <div style={{ fontSize:13, color:C.muted, marginTop:4 }}>
              Introdu adresa de email asociată contului tău
            </div>
          </div>

          {!resetMsg && (
            <>
              <FormRow label="Email cont">
                <Input value={resetEmail} onChange={setResetEmail}
                  placeholder="email@electra.ro" type="email" />
              </FormRow>
              <Btn variant="primary" onClick={handleReset}
                style={{ width:"100%", justifyContent:"center", padding:"10px", marginTop:4 }}>
                Trimite cerere de reset
              </Btn>
            </>
          )}

          {resetMsg && (() => {
            const isErr = resetMsg.startsWith("error:");
            const msg   = resetMsg.replace(/^(ok|error):/, "");
            return (
              <div style={{ padding:"14px 16px", borderRadius:10, marginBottom:16, fontSize:13,
                background: isErr ? C.danger+"12" : C.success+"12",
                color: isErr ? C.danger : C.success,
                border:`1px solid ${isErr ? C.danger+"33" : C.success+"33"}`,
                lineHeight: 1.6 }}>
                {isErr ? "⚠ " : "✓ "}{msg}
              </div>
            );
          })()}

          <div style={{ textAlign:"center", marginTop:16 }}>
            <span onClick={()=>{ setView("login"); setResetMsg(""); setResetEmail(""); }}
              style={{ fontSize:13, color:C.accent, cursor:"pointer" }}>
              ← Înapoi la autentificare
            </span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ minHeight:"100vh", background:C.bg, display:"flex",
      alignItems: isMobile ? "flex-start" : "center",
      justifyContent:"center", fontFamily:"'DM Sans','Segoe UI',sans-serif" }}>
      <div style={{ background:C.card, border: isMobile ? "none" : `1px solid ${C.border}`,
        borderRadius: isMobile ? 0 : 20,
        padding: isMobile ? "48px 24px" : "40px 36px",
        width: isMobile ? "100%" : 380,
        minHeight: isMobile ? "100vh" : "auto",
        boxSizing:"border-box" }}>
        <div style={{ textAlign:"center", marginBottom:32 }}>
          <div style={{ fontSize:36, marginBottom:10 }}>⬡</div>
          <div style={{ fontSize:22, fontWeight:700, color:C.accentL }}>ELECTRA CRM</div>
          <div style={{ fontSize:13, color:C.muted, marginTop:4 }}>Autentifică-te în cont</div>
        </div>
        <FormRow label="Email">
          <Input value={email} onChange={setEmail} placeholder="email@firma.ro" type="email" />
        </FormRow>
        <FormRow label="Parolă">
          <Input value={parola} onChange={setParola} placeholder="••••••••" type="password" />
        </FormRow>
        {err && <div style={{ color:C.danger, fontSize:12, marginBottom:12, textAlign:"center" }}>{err}</div>}
        <Btn variant="primary" onClick={handleLogin}
          style={{ width:"100%", justifyContent:"center", padding:"10px" }}>
          Autentificare
        </Btn>

        {/* Link recuperare parolă */}
        <div style={{ textAlign:"center", marginTop:14 }}>
          <span onClick={()=>{ setView("reset"); setErr(""); }}
            style={{ fontSize:12, color:C.accent, cursor:"pointer" }}>
            Am uitat parola
          </span>
        </div>

        <div style={{ marginTop:16, padding:14, background:"#f4f6f9", border:"1px solid #d8dde6", borderRadius:10, fontSize:12, color:C.muted }}>
          <div style={{ fontWeight:600, color:C.text, marginBottom:6 }}>Conturi demo:</div>
          {[["andrei.martonca@electra.ro","Director — Andrei Martonca"],["florin.mata@electra.ro","Agent — Florin Mata"],["emanuel.budai@electra.ro","Agent — Emanuel Budai"]].map(([e,r])=>(
            <div key={e} style={{ cursor:"pointer", padding:"3px 0", color:C.accent }}
              onClick={()=>{ setEmail(e); setParola("Parola123!"); }}>
              {e} <span style={{ color:C.muted }}>— {r}</span>
            </div>
          ))}
          <div style={{ marginTop:4 }}>Parolă: <span style={{ color:C.text }}>Parola123!</span></div>
        </div>
      </div>
    </div>
  );
}

// ─── DASHBOARD ───────────────────────────────────────────────────────────────
function Dashboard({ db, user, update }) {
  const azi = toDateStr(new Date());
  const [filtruAgent, setFiltruAgent] = useState("toti"); // "toti" | agent_id

  const esteDirector = user.rol === "director";
  const agenti = db.utilizatori.filter(u => u.rol === "agent" && u.activ !== false);

  // Agentul activ selectat (sau null = toți)
  const agentSelectat = filtruAgent !== "toti" ? db.utilizatori.find(u=>u.id===filtruAgent) : null;

  // Filtrare date după agentul selectat
  const clientiFiltrati = db.clienti.filter(c =>
    user.rol === "agent" ? c.agent_id === user.id
    : filtruAgent !== "toti" ? c.agent_id === filtruAgent
    : true
  );
  const proiecteFiltrate = db.proiecte.filter(p =>
    user.rol === "agent" ? p.agent_id === user.id
    : filtruAgent !== "toti" ? p.agent_id === filtruAgent
    : true
  );
  const taskuriFiltrate = db.taskuri.filter(t =>
    user.rol === "agent" ? t.asignat === user.id
    : filtruAgent !== "toti" ? t.asignat === filtruAgent
    : true
  );
  const activitatiFiltrate = db.activitati.filter(a =>
    user.rol === "agent" ? a.utilizator_id === user.id
    : filtruAgent !== "toti" ? a.utilizator_id === filtruAgent
    : true
  );

  // Task-uri urgente (nefinalizate)
  const taskuriActive = taskuriFiltrate.filter(t => t.status !== "finalizat");
  const restante      = taskuriActive.filter(t => t.scadenta < azi);
  const pipeline      = proiecteFiltrate.filter(p => !isEtapaInchisa(db, p.etapa)).reduce((s,p)=>s+(p.val_est||0),0);
  const valCastigata  = proiecteFiltrate.filter(p => isEtapaFinala(db,p.etapa)).reduce((s,p)=>s+(p.val_fin||0),0);

  function getClient(id) { return db.clienti.find(c=>c.id===id); }

  const icons = { apel:"📞", email:"✉️", instalare:"🔧", nota:"📝", intalnire:"🤝", oferta:"📄", service:"⚙️" };

  return (
    <div style={{ padding:"16px 14px" }}>

      {/* HEADER + FILTRU AGENT */}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:24 }}>
        <div>
          <div style={{ fontSize:20, fontWeight:700, color:C.text }}>
            Dashboard
            {agentSelectat && (
              <span style={{ fontSize:14, fontWeight:400, color:C.muted, marginLeft:10 }}>
                — {agentSelectat.nume}
              </span>
            )}
          </div>
          {esteDirector && (
            <div style={{ fontSize:12, color:C.muted, marginTop:4 }}>
              {filtruAgent === "toti" ? "Vizualizare consolidată — toată echipa" : `Vizualizare individuală`}
            </div>
          )}
        </div>

        {/* Filtru vizibil doar pentru director */}
        {esteDirector && (
          <div style={{ display:"flex", alignItems:"center", gap:8 }}>
            <span style={{ fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>Agent:</span>
            <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`,
              borderRadius:10, overflow:"hidden" }}>

              {/* Toți */}
              <div onClick={() => setFiltruAgent("toti")}
                style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                  cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                  background: filtruAgent==="toti" ? C.accent : "transparent",
                  color: filtruAgent==="toti" ? "#fff" : C.muted,
                  borderRight:`1px solid ${C.border}` }}>
                <span style={{ fontSize:13 }}>⊞</span> Toți
              </div>

              {/* Câte un buton per agent */}
              {agenti.map(a => {
                const activ    = filtruAgent === a.id;
                const initials = a.nume.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
                const nrActive = db.proiecte.filter(p=>p.agent_id===a.id&&!isEtapaInchisa(db,p.etapa)).length;
                return (
                  <div key={a.id} onClick={() => setFiltruAgent(a.id)} title={a.nume}
                    style={{ display:"flex", alignItems:"center", gap:7, padding:"7px 14px",
                      cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                      background: activ ? C.accent+"22" : "transparent",
                      color: activ ? C.accentL : C.muted,
                      borderRight:`1px solid ${C.border}33`,
                      borderBottom: activ ? `2px solid ${C.accent}` : "2px solid transparent" }}>
                    <div style={{ width:22, height:22, borderRadius:"50%", flexShrink:0,
                      background: activ ? C.accent : C.accent+"33",
                      color: activ ? "#fff" : C.accent,
                      display:"flex", alignItems:"center", justifyContent:"center",
                      fontSize:9, fontWeight:700 }}>
                      {initials}
                    </div>
                    <span style={{ whiteSpace:"nowrap" }}>{a.nume.split(" ")[0]} {(a.nume.split(" ")[1] && a.nume.split(" ")[1][0])}.</span>
                    <span style={{ fontSize:10, background:C.surface, color:C.muted,
                      padding:"1px 6px", borderRadius:8, border:`1px solid ${C.border}` }}>
                      {nrActive}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      {/* METRICI */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:24 }}>
        {[
          { label:"Clienți",           val: clientiFiltrati.length },
          { label:"Proiecte active",    val: proiecteFiltrate.filter(p=>!isEtapaInchisa(db,p.etapa)).length },
          { label:"Pipeline activ",     val: `€ ${(pipeline/1000).toFixed(0)}k` },
          { label:"Valoare câștigată",  val: `€ ${(valCastigata/1000).toFixed(0)}k`, success:true },
        ].map(m=>(
          <div key={m.label} style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:"16px 18px" }}>
            <div style={{ fontSize:12, color:C.muted, marginBottom:6 }}>{m.label}</div>
            <div style={{ fontSize:24, fontWeight:700, color: m.danger ? C.danger : m.success ? C.success : C.text }}>
              {m.val}
            </div>
          </div>
        ))}
      </div>

      {/* Task-uri restante banner (dacă există) */}
      {restante.length > 0 && (
        <div style={{ background:C.danger+"11", border:`1px solid ${C.danger}33`, borderRadius:10,
          padding:"10px 16px", marginBottom:16, display:"flex", alignItems:"center", gap:10 }}>
          <span style={{ fontSize:16 }}>⚠️</span>
          <span style={{ fontSize:13, color:C.danger, fontWeight:500 }}>
            {restante.length} task{restante.length>1?"uri":""} restant{restante.length>1?"e":""}{agentSelectat ? ` pentru ${agentSelectat.nume.split(" ")[0]}` : ""}
          </span>
        </div>
      )}

      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16 }}>

        {/* TASK-URI URGENTE */}
        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14 }}>
            <div style={{ fontWeight:600, fontSize:14 }}>Task-uri urgente</div>
            {taskuriActive.length > 0 && (
              <span style={{ fontSize:11, color:C.muted }}>{taskuriActive.length} active</span>
            )}
          </div>
          {taskuriActive.length===0 && (
            <div style={{ color:C.muted, fontSize:13 }}>Niciun task activ 🎉</div>
          )}
          {taskuriActive.slice(0,6).map(t => {
            const asignat = esteDirector && filtruAgent==="toti"
              ? db.utilizatori.find(u=>u.id===t.asignat)
              : null;
            const sc = taskStatusColor(t, azi);
            return (
              <div key={t.id}
                onClick={() => window._openTask && window._openTask(t)}
                style={{ display:"flex", gap:10, alignItems:"flex-start",
                  padding:"10px 0", borderBottom:`1px solid ${C.border}22`,
                  borderLeft:`2px solid ${sc.culoare}`, paddingLeft:8,
                  cursor:"pointer" }}>
                <div style={{ width:8, height:8, borderRadius:"50%", marginTop:5, flexShrink:0,
                  background:sc.culoare }} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:13, color:C.text }}>
                    {(getTipInfo(t.tip_activitate)||{}).icon} {t.titlu}
                  </div>
                  <div style={{ display:"flex", gap:6, marginTop:3, alignItems:"center" }}>
                    {getClient(t.client_id) && (
                      <span style={{ fontSize:11, color:C.muted }}>{getClient(t.client_id).denumire}</span>
                    )}
                    {asignat && (
                      <div style={{ display:"flex", alignItems:"center", gap:3 }}>
                        <span style={{ fontSize:11, color:C.muted }}>·</span>
                        <Avatar name={asignat.nume} size={14} color={C.accent} />
                        <span style={{ fontSize:11, color:C.muted }}>{asignat.nume.split(" ")[0]}</span>
                      </div>
                    )}
                  </div>
                  {t.descriere && (
                    <div style={{ fontSize:11, color:C.muted, marginTop:3, fontStyle:"italic",
                      overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", maxWidth:260 }}>
                      {t.descriere}
                    </div>
                  )}
                </div>
                <div style={{ display:"flex", flexDirection:"column", alignItems:"flex-end", gap:3, flexShrink:0 }}>
                  <span style={{ fontSize:10, fontWeight:600, background:sc.bg,
                    color:sc.culoare, padding:"2px 6px", borderRadius:6 }}>
                    {sc.label}
                  </span>
                  <span style={{ fontSize:11, color:C.muted }}>{t.scadenta}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* ACTIVITATE RECENTĂ */}
        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
          <div style={{ fontWeight:600, marginBottom:14, fontSize:14 }}>Activitate recentă</div>
          {(() => {
            // Task-uri recente (inclusiv finalizate), sortate de la cele mai noi
            const taskuriRecente = [...taskuriFiltrate]
              .sort((a,b) => (b.scadenta||"").localeCompare(a.scadenta||""))
              .slice(0, 6);
            if (taskuriRecente.length === 0) {
              return <div style={{ color:C.muted, fontSize:13 }}>Nicio activitate înregistrată</div>;
            }
            return taskuriRecente.map(t => {
              const sc      = taskStatusColor(t, azi);
              const client  = db.clienti.find(c=>c.id===t.client_id);
              const asignat = filtruAgent==="toti" ? db.utilizatori.find(u=>u.id===t.asignat) : null;
              const tipInfo = getTipInfo(t.tip_activitate);
              return (
                <div key={t.id}
                  onClick={() => window._openTask && window._openTask(t)}
                  style={{ display:"flex", gap:10, padding:"9px 0",
                    borderBottom:`1px solid ${C.border}22`, cursor:"pointer",
                    borderLeft:`2px solid ${sc.culoare}`, paddingLeft:8,
                    transition:"background .1s" }}
                  onMouseEnter={e=>e.currentTarget.style.background=C.surface+"88"}
                  onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                  <span style={{ fontSize:16, flexShrink:0 }}>{(tipInfo && tipInfo.icon) || "•"}</span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13, color:C.text, lineHeight:1.4,
                      overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                      {t.titlu}
                    </div>
                    <div style={{ fontSize:11, color:C.muted, marginTop:2, display:"flex", gap:6, flexWrap:"wrap" }}>
                      {client && <span>{client.denumire}</span>}
                      {asignat && <span>· {asignat.nume.split(" ")[0]}</span>}
                      {t.scadenta && <span>· {t.scadenta}</span>}
                    </div>
                    {t.descriere && (
                      <div style={{ fontSize:11, color:C.muted, marginTop:2, fontStyle:"italic",
                        overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", maxWidth:260 }}>
                        {t.descriere}
                      </div>
                    )}
                  </div>
                  <span style={{ fontSize:10, fontWeight:600, flexShrink:0,
                    background:sc.bg, color:sc.culoare,
                    padding:"2px 6px", borderRadius:6, alignSelf:"flex-start", marginTop:2 }}>
                    {sc.label}
                  </span>
                </div>
              );
            });
          })()}
        </div>
      </div>

      {/* PERFORMANȚĂ AGENȚI — vizibilă directorului când vede toți */}
      {esteDirector && filtruAgent === "toti" && (
        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginTop:16 }}>
          <div style={{ fontWeight:600, fontSize:14, marginBottom:14 }}>Performanță agenți</div>
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
            <thead>
              <tr style={{ borderBottom:`1px solid ${C.border}` }}>
                {["Agent","Clienți","Proiecte active","Pipeline","Câștigat","Task-uri active"].map(h=>(
                  <th key={h} style={{ padding:"8px 12px", textAlign:"left", fontSize:11,
                    fontWeight:600, color:C.muted, textTransform:"uppercase", letterSpacing:.3 }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {agenti.map(a => {
                const clA  = db.clienti.filter(c=>c.agent_id===a.id).length;
                const prA  = db.proiecte.filter(p=>p.agent_id===a.id&&!isEtapaInchisa(db,p.etapa));
                const pipA = prA.reduce((s,p)=>s+(p.val_est||0),0);
                const casA = db.proiecte.filter(p=>p.agent_id===a.id&&isEtapaFinala(db,p.etapa)).reduce((s,p)=>s+(p.val_fin||0),0);
                const tkA  = db.taskuri.filter(t=>t.asignat===a.id&&t.status!=="finalizat").length;
                return (
                  <tr key={a.id}
                    onClick={() => setFiltruAgent(a.id)}
                    style={{ borderBottom:`1px solid ${C.border}22`, cursor:"pointer", transition:"background .1s" }}
                    onMouseEnter={e=>e.currentTarget.style.background=C.surface}
                    onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                    <td style={{ padding:"11px 12px" }}>
                      <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                        <Avatar name={a.nume} size={26} color={C.accent} />
                        <span style={{ fontWeight:500 }}>{a.nume}</span>
                      </div>
                    </td>
                    <td style={{ padding:"11px 12px", color:C.muted }}>{clA}</td>
                    <td style={{ padding:"11px 12px", color:C.muted }}>{prA.length}</td>
                    <td style={{ padding:"11px 12px", fontWeight:500, color:C.accent }}>
                      {pipA > 0 ? `€ ${(pipA/1000).toFixed(0)}k` : "—"}
                    </td>
                    <td style={{ padding:"11px 12px", fontWeight:500, color:C.success }}>
                      {casA > 0 ? `€ ${(casA/1000).toFixed(0)}k` : "—"}
                    </td>
                    <td style={{ padding:"11px 12px" }}>
                      <span style={{ fontSize:12, color: tkA>0 ? C.warn : C.muted }}>{tkA}</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          <div style={{ fontSize:11, color:C.muted, marginTop:10 }}>
            Click pe un agent pentru a vedea detaliile sale
          </div>
        </div>
      )}
    </div>
  );
}

// ─── SORTARE ─────────────────────────────────────────────────────────────────
function useSortare(defaultCol, defaultDir="asc") {
  const [col, setCol] = useState(defaultCol);
  const [dir, setDir] = useState(defaultDir);
  function toggle(c) {
    if (col === c) setDir(d => d==="asc" ? "desc" : "asc");
    else { setCol(c); setDir("asc"); }
  }
  return { col, dir, toggle };
}

function SortableHeader({ label, campId, sortare, style={} }) {
  const activ = sortare.col === campId;
  return (
    <th onClick={() => sortare.toggle(campId)}
      style={{ padding:"10px 16px", textAlign:"left", fontSize:11, fontWeight:600,
        color: activ ? C.accentL : C.muted, textTransform:"uppercase", letterSpacing:.4,
        cursor:"pointer", userSelect:"none", whiteSpace:"nowrap", transition:"color .15s",
        ...style }}>
      {label}
      <span style={{ marginLeft:4, opacity: activ ? 1 : 0.35, fontSize:10 }}>
        {activ ? (sortare.dir==="asc" ? "↑" : "↓") : "↕"}
      </span>
    </th>
  );
}

function sortArr(arr, col, dir, getVal) {
  return [...arr].sort((a, b) => {
    const va = getVal(a, col) || "";
    const vb = getVal(b, col) || "";
    let cmp = 0;
    if (typeof va === "number" && typeof vb === "number") cmp = va - vb;
    else cmp = String(va).localeCompare(String(vb), "ro", { sensitivity:"base" });
    return dir === "asc" ? cmp : -cmp;
  });
}

// ─── CLIENTI ─────────────────────────────────────────────────────────────────
function Clienti({ db, user, update, initialDetalii, onDetaliiClose }) {
  const [cautare, setCautare] = useState("");
  const [modal, setModal] = useState(null);
  const [detalii, setDetalii] = useState(initialDetalii || null);
  const [confirm, setConfirm] = useState(null); // { titlu, mesaj, onConfirm }
  const sortare = useSortare("denumire");

  // Când se schimbă initialDetalii din exterior (ex: click din ProiectModal), actualizează
  useEffect(() => {
    if (initialDetalii) {
      setDetalii(initialDetalii);
    }
  }, [initialDetalii]);

  const vizibiliFiltrati = db.clienti.filter(c => {
    if (user.rol==="agent" && c.agent_id!==user.id) return false;
    if (!cautare.trim()) return true;
    const q = cautare.toLowerCase();
    if (c.denumire.toLowerCase().includes(q)) return true;
    if ((c.oras||"").toLowerCase().includes(q)) return true;
    const contacteClient = (db.contacte||[]).filter(ct=>ct.client_id===c.id);
    return contacteClient.some(ct =>
      `${ct.prenume} ${ct.nume}`.toLowerCase().includes(q) ||
      (ct.email||"").toLowerCase().includes(q) ||
      (ct.telefon||"").includes(q)
    );
  });

  const vizibili = sortArr(vizibiliFiltrati, sortare.col, sortare.dir, (c, col) => {
    if (col==="denumire")  return c.denumire;
    if (col==="oras")      return c.oras || "";
    if (col==="agent")     return (db.utilizatori.find(u=>u.id===c.agent_id)||{}).nume || "";
    if (col==="proiecte")  return db.proiecte.filter(p=>p.client_id===c.id).length;
    if (col==="valoare")   return db.proiecte.filter(p=>p.client_id===c.id&&isEtapaFinala(db,p.etapa)).reduce((s,p)=>s+(p.val_fin||0),0);
    return "";
  });

  function getAgent(id) { return db.utilizatori.find(u=>u.id===id); }
  function nrProiecte(cid) { return db.proiecte.filter(p=>p.client_id===cid).length; }
  function valoare(cid) { return db.proiecte.filter(p=>p.client_id===cid&&isEtapaFinala(db,p.etapa)).reduce((s,p)=>s+(p.val_fin||0),0); }
  function contactPrincipal(cid) { return (db.contacte||[]).find(c=>c.client_id===cid&&c.principal) || (db.contacte||[]).find(c=>c.client_id===cid); }

  function salveaza(form, contacteNoi) {
    if (modal==="nou") {
      const newId = "c"+genId();
      update(d=>({
        ...d,
        clienti:[...d.clienti,{...form,id:newId,agent_id:user.rol==="agent"?user.id:(form.agent_id||user.id)}],
        contacte:[...(d.contacte||[]),...contacteNoi.map(c=>({...c,client_id:newId,id:"ct"+genId()}))]
      }));
    } else {
      update(d=>({
        ...d,
        clienti:d.clienti.map(c=>c.id===modal.id?{...c,...form}:c),
        contacte:[
          ...(d.contacte||[]).filter(c=>c.client_id!==modal.id),
          ...contacteNoi.map(c=>({...c,client_id:modal.id,id:c.id||"ct"+genId()}))
        ]
      }));
      if (detalii && detalii.id === modal.id) setDetalii({...detalii,...form});
    }
    setModal(null);
  }

  function stergeClient(cid) {
    const c = db.clienti.find(x=>x.id===cid);
    setModal(null);
    setConfirm({
      titlu: "Șterge client",
      mesaj: `Ești sigur că vrei să ștergi "${c&&c.denumire}"?\n\nVor fi șterse definitiv toate contactele, proiectele și activitățile asociate acestui client.`,
      onConfirm: () => {
        update(d=>({
          ...d,
          clienti:   d.clienti.filter(x=>x.id!==cid),
          contacte:  (d.contacte||[]).filter(x=>x.client_id!==cid),
          proiecte:  d.proiecte.filter(p=>p.client_id!==cid),
          taskuri:   d.taskuri.filter(t=>t.client_id!==cid),
          activitati:d.activitati.filter(a=>a.client_id!==cid),
        }));
        if (detalii && detalii.id === cid) setDetalii(null);
        setConfirm(null);
      }
    });
  }

  return (
    <div style={{ display:"flex", height:"100%", overflow:"hidden" }}>

      {/* LISTA */}
      <div style={{ flex:1, overflow:"auto", padding:"24px 28px",
        transition:"all .2s", minWidth:0 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
          <div style={{ fontSize:20, fontWeight:700 }}>Clienți</div>
          <Btn variant="primary" onClick={()=>setModal("nou")}>+ Client nou</Btn>
        </div>
        <div style={{ display:"flex", alignItems:"center", gap:8, background:C.surface,
          border:`1px solid ${cautare ? C.accent+"66" : C.border}`, borderRadius:8,
          padding:"5px 12px", minWidth:280, marginBottom:16, transition:"border-color .15s" }}>
          <span style={{ color:C.muted, fontSize:14 }}>🔍</span>
          <input
            value={cautare}
            onChange={e=>setCautare(e.target.value)}
            placeholder="Caută după denumire, contact, email, telefon..."
            style={{ background:"transparent", border:"none", outline:"none",
              color:C.text, fontSize:13, fontFamily:"inherit", flex:1 }} />
          {cautare && (
            <span onClick={()=>setCautare("")}
              style={{ color:C.muted, cursor:"pointer", fontSize:14, lineHeight:1 }}>✕</span>
          )}
        </div>

        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, overflow:"hidden" }}>
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
            <thead>
              <tr style={{ borderBottom:`1px solid ${C.border}` }}>
                <SortableHeader label="Denumire"          campId="denumire" sortare={sortare} />
                <th style={{ padding:"10px 16px", fontSize:11, fontWeight:600, color:C.muted, textTransform:"uppercase", letterSpacing:.4 }}>Contact principal</th>
                <SortableHeader label="Localitate"        campId="oras"     sortare={sortare} />
                <SortableHeader label="Agent"             campId="agent"    sortare={sortare} />
                <SortableHeader label="Proiecte"          campId="proiecte" sortare={sortare} style={{ textAlign:"left" }} />
                <SortableHeader label="Valoare câștigată" campId="valoare"  sortare={sortare} />
                <th style={{ padding:"10px 16px" }}></th>
              </tr>
            </thead>
            <tbody>
              {vizibili.map(c=>{
                const agent = getAgent(c.agent_id);
                const contact = contactPrincipal(c.id);
                const nrContacte = (db.contacte||[]).filter(ct=>ct.client_id===c.id).length;
                const eSelectat = detalii && detalii.id === c.id;
                return (
                  <tr key={c.id}
                    onClick={()=>setDetalii(eSelectat ? null : c)}
                    style={{ borderBottom:`1px solid ${C.border}33`, cursor:"pointer", transition:"background .1s",
                      background: eSelectat ? C.accent+"11" : "transparent",
                      borderLeft: eSelectat ? `3px solid ${C.accent}` : "3px solid transparent" }}
                    onMouseEnter={e=>{ if(!eSelectat) e.currentTarget.style.background=C.surface; }}
                    onMouseLeave={e=>{ if(!eSelectat) e.currentTarget.style.background="transparent"; }}>
                    <td style={{ padding:"12px 16px" }}>
                      <div style={{ fontWeight:600, color: eSelectat ? C.accentL : C.text }}>{c.denumire}</div>
                      <div style={{ fontSize:11, color:C.muted }}>{c.tip==="juridica"?"Persoană juridică":"Persoană fizică"}{c.cui?` · ${c.cui}`:""}</div>
                    </td>
                    <td style={{ padding:"12px 16px" }}>
                      {contact ? (
                        <div>
                          <div style={{ fontSize:13, color:C.text, fontWeight:500 }}>
                            {contact.prenume} {contact.nume}
                            {nrContacte > 1 && (
                              <span style={{ fontSize:10, color:C.muted, marginLeft:6,
                                background:C.surface, padding:"1px 6px", borderRadius:8, border:`1px solid ${C.border}` }}>
                                +{nrContacte-1}
                              </span>
                            )}
                          </div>
                          {contact.functie && <div style={{ fontSize:11, color:C.muted }}>{contact.functie}</div>}
                          {contact.telefon && <div style={{ fontSize:11, color:C.info }}>{contact.telefon}</div>}
                        </div>
                      ) : (
                        <span style={{ fontSize:12, color:C.muted, fontStyle:"italic" }}>Necompletat</span>
                      )}
                    </td>
                    <td style={{ padding:"12px 16px", color:C.muted }}>{c.oras}</td>
                    <td style={{ padding:"12px 16px" }}>
                      {agent && <div style={{ display:"flex", alignItems:"center", gap:6 }}>
                        <Avatar name={agent.nume} size={22} color={C.accent} />
                        <span style={{ fontSize:12, color:C.muted }}>{agent.nume.split(" ")[0]} {(agent.nume.split(" ")[1] && agent.nume.split(" ")[1][0])}.</span>
                      </div>}
                    </td>
                    <td style={{ padding:"12px 16px", color:C.muted }}>{nrProiecte(c.id)}</td>
                    <td style={{ padding:"12px 16px", fontWeight:600, color:C.success }}>
                      {valoare(c.id)>0 ? `€ ${valoare(c.id).toLocaleString("ro-RO")}` : "—"}
                    </td>
                    <td style={{ padding:"12px 16px" }} onClick={e=>e.stopPropagation()}>
                      <div style={{ display:"flex", gap:6 }}>
                        <Btn small onClick={()=>setModal(c)}>✎ Edit</Btn>
                        {user.rol==="director" && (
                          <Btn small variant="danger" onClick={()=>stergeClient(c.id)}>✕</Btn>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* PANEL DETALII */}
      {detalii && (
        <ClientDetalii
          client={detalii}
          db={db}
          onEdit={()=>setModal(detalii)}
          onClose={()=>{ setDetalii(null); onDetaliiClose && onDetaliiClose(); }}
        />
      )}

      {modal && <ClientModal
        client={modal==="nou"?null:modal}
        contacteInitiale={(db.contacte||[]).filter(c=>c.client_id===(modal==="nou"?null:modal && modal.id))}
        db={db} user={user}
        onSave={salveaza}
        onDelete={user.rol==="director" ? stergeClient : null}
        onClose={()=>setModal(null)} />}

      {confirm && (
        <ConfirmModal
          titlu={confirm.titlu}
          mesaj={confirm.mesaj}
          labelConfirm="🗑 Șterge definitiv"
          onConfirm={confirm.onConfirm}
          onCancel={()=>setConfirm(null)} />
      )}
    </div>
  );
}

// ─── PANEL DETALII CLIENT ────────────────────────────────────────────────────
function ClientDetalii({ client, db, onEdit, onClose }) {
  const [tabActiv, setTabActiv] = useState("info");

  const contacte    = (db.contacte||[]).filter(c=>c.client_id===client.id);
  const proiecte    = db.proiecte.filter(p=>p.client_id===client.id);
  const activitati  = db.activitati.filter(a=>a.client_id===client.id)
    .sort((a,b)=>new Date(b.data)-new Date(a.data));
  const taskuri     = db.taskuri.filter(t=>t.client_id===client.id && t.status!=="finalizat");
  const agent       = db.utilizatori.find(u=>u.id===client.agent_id);

  const valTotala   = proiecte.filter(p=>isEtapaFinala(db,p.etapa)).reduce((s,p)=>s+(p.val_fin||0),0);
  const valPipeline = proiecte.filter(p=>!isEtapaInchisa(db,p.etapa)).reduce((s,p)=>s+(p.val_est||0),0);

  const icons = { apel:"📞", email:"✉️", instalare:"🔧", nota:"📝", intalnire:"🤝", oferta:"📄", service:"⚙️" };

  const tabs = [
    { id:"info",       label:"Info"       },
    { id:"contacte",   label:`Contacte (${contacte.length})`},
    { id:"proiecte",   label:`Proiecte (${proiecte.length})`},
    { id:"activitati", label:`Istoric (${(db.taskuri||[]).filter(t=>t.client_id===client.id).length})`},
  ];

  return (
    <div style={{ width:400, borderLeft:`1px solid ${C.border}`, background:C.surface,
      display:"flex", flexDirection:"column", flexShrink:0, overflow:"hidden",
      animation:"slideIn .2s ease" }}>

      <style>{`@keyframes slideIn { from { transform:translateX(40px); opacity:0 } to { transform:translateX(0); opacity:1 } }`}</style>

      {/* Header */}
      <div style={{ padding:"18px 20px 14px", borderBottom:`1px solid ${C.border}`, flexShrink:0 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:10 }}>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:16, fontWeight:700, color:C.text, lineHeight:1.3 }}>{client.denumire}</div>
            <div style={{ fontSize:12, color:C.muted, marginTop:3 }}>
              {client.tip==="juridica" ? "Persoană juridică" : "Persoană fizică"}
              {client.cui && <span> · {client.cui}</span>}
            </div>
          </div>
          <div style={{ display:"flex", gap:6, flexShrink:0, marginLeft:8 }}>
            <Btn small onClick={onEdit}>✎ Edit</Btn>
            <Btn small onClick={onClose}>✕</Btn>
          </div>
        </div>

        {/* Metrici rapide */}
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:8 }}>
          {[
            { label:"Proiecte",    val:proiecte.length,     col:C.text    },
            { label:"Câștigat",   val:`€${(valTotala/1000).toFixed(0)}k`, col:C.success },
            { label:"Pipeline",   val:`€${(valPipeline/1000).toFixed(0)}k`,col:C.accent },
          ].map(m=>(
            <div key={m.label} style={{ background:C.card, borderRadius:8, padding:"8px 10px", textAlign:"center",
              border:`1px solid ${C.border}` }}>
              <div style={{ fontSize:15, fontWeight:700, color:m.col }}>{m.val}</div>
              <div style={{ fontSize:10, color:C.muted, marginTop:2 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display:"flex", borderBottom:`1px solid ${C.border}`, flexShrink:0 }}>
        {tabs.map(t=>(
          <div key={t.id} onClick={()=>setTabActiv(t.id)}
            style={{ flex:1, padding:"9px 4px", textAlign:"center", cursor:"pointer", fontSize:11,
              fontWeight:500, color: tabActiv===t.id ? C.accentL : C.muted,
              borderBottom: tabActiv===t.id ? `2px solid ${C.accent}` : "2px solid transparent",
              transition:"all .15s", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>
            {t.label}
          </div>
        ))}
      </div>

      {/* Conținut tabs */}
      <div style={{ flex:1, overflowY:"auto", padding:"16px 20px" }}>

        {/* ── INFO ── */}
        {tabActiv==="info" && (
          <div>
            <SectiuneDetalii titlu="Date generale">
              <RandDetaliu label="Localitate" val={[client.oras, client.judet].filter(Boolean).join(", ")} />
              <RandDetaliu label="Adresă"     val={client.adresa} />
              <RandDetaliu label="CUI / CNP"  val={client.cui}    />
              <RandDetaliu label="Website"    val={client.website} link />
              <RandDetaliu label="Agent"      val={(agent && agent.nume)}
                extra={agent ? <Avatar name={agent.nume} size={18} color={C.accent} /> : null} />
            </SectiuneDetalii>

            {taskuri.length > 0 && (
              <SectiuneDetalii titlu="Task-uri active">
                {taskuri.map(t=>{
                  const azi = toDateStr(new Date());
                  const sc  = taskStatusColor(t, azi);
                  return (
                    <div key={t.id}
                      onClick={() => window._openTask && window._openTask(t)}
                      style={{ display:"flex", gap:8, padding:"7px 0",
                        borderBottom:`1px solid ${C.border}22`, alignItems:"flex-start",
                        cursor:"pointer" }}>
                      <div style={{ width:8, height:8, borderRadius:"50%", flexShrink:0, marginTop:4,
                        background:sc.culoare }} />
                      <div style={{ flex:1 }}>
                        <div style={{ fontSize:12, color:C.text }}>{(getTipInfo(t.tip_activitate)||{}).icon} {t.titlu}</div>
                        {t.descriere && (
                          <div style={{ fontSize:11, color:C.muted, fontStyle:"italic", marginTop:1,
                            overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", maxWidth:260 }}>
                            {t.descriere}
                          </div>
                        )}
                        <div style={{ fontSize:11, color:C.muted }}>{t.scadenta}{t.ora_start?` · ${t.ora_start}`:""}</div>
                      </div>
                      <span style={{ fontSize:10, fontWeight:600, flexShrink:0,
                        background:sc.bg, color:sc.culoare, padding:"2px 6px", borderRadius:6 }}>
                        {sc.label}
                      </span>
                    </div>
                  );
                })}
              </SectiuneDetalii>
            )}
          </div>
        )}

        {/* ── CONTACTE ── */}
        {tabActiv==="contacte" && (
          <div>
            {contacte.length === 0 && (
              <div style={{ textAlign:"center", color:C.muted, fontSize:13, padding:"24px 0" }}>
                Nicio persoană de contact adăugată
              </div>
            )}
            {contacte.map((ct,i)=>(
              <div key={ct.id||i} style={{ background:C.card, border:`1px solid ${ct.principal?C.accent+"44":C.border}`,
                borderRadius:10, padding:"14px 16px", marginBottom:10 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:8 }}>
                  <div>
                    <div style={{ fontSize:14, fontWeight:600, color:C.text }}>
                      {ct.prenume} {ct.nume}
                    </div>
                    {ct.functie && <div style={{ fontSize:12, color:C.muted, marginTop:2 }}>{ct.functie}</div>}
                  </div>
                  {ct.principal && (
                    <span style={{ fontSize:10, background:C.accent+"22", color:C.accentL,
                      padding:"2px 8px", borderRadius:8, fontWeight:600, border:`1px solid ${C.accent}44` }}>
                      ★ Principal
                    </span>
                  )}
                </div>
                <div style={{ display:"flex", flexDirection:"column", gap:5 }}>
                  {ct.telefon && (
                    <div style={{ display:"flex", alignItems:"center", gap:8, fontSize:12 }}>
                      <span style={{ color:C.muted, fontSize:14 }}>📞</span>
                      <span style={{ color:C.info }}>{ct.telefon}</span>
                    </div>
                  )}
                  {ct.email && (
                    <div style={{ display:"flex", alignItems:"center", gap:8, fontSize:12 }}>
                      <span style={{ color:C.muted, fontSize:14 }}>✉️</span>
                      <span style={{ color:C.info }}>{ct.email}</span>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* ── PROIECTE ── */}
        {tabActiv==="proiecte" && (
          <div>
            {proiecte.length === 0 && (
              <div style={{ textAlign:"center", color:C.muted, fontSize:13, padding:"24px 0" }}>
                Niciun proiect asociat
              </div>
            )}
            {proiecte.map(p=>{
              const etapaObj = (db.etape_pipeline||[]).find(e=>e.id===p.etapa);
              const col = (etapaObj && etapaObj.culoare) || C.muted;
              const psc = proiectStatusColor(p.id, db.taskuri);
              return (
                <div key={p.id}
                  onClick={() => window._openProiect && window._openProiect(p)}
                  style={{ background:psc.bg, border:`1px solid ${C.border}`,
                    borderLeft:`3px solid ${psc.culoare}`,
                    borderRadius:10, padding:"12px 14px", marginBottom:8,
                    cursor:"pointer", transition:"all .15s" }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor=psc.culoare; e.currentTarget.style.borderLeftColor=psc.culoare; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor=C.border; e.currentTarget.style.borderLeftColor=psc.culoare; }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:4, gap:8 }}>
                    <div style={{ fontSize:13, fontWeight:600, color:C.text, lineHeight:1.3 }}>{p.titlu}</div>
                    <span style={{ fontSize:9, fontWeight:700, color:psc.culoare, background:psc.culoare+"22",
                      padding:"2px 6px", borderRadius:6, flexShrink:0, whiteSpace:"nowrap" }}>
                      {psc.label}
                    </span>
                  </div>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                    <span style={{ fontSize:11, background:col+"22", color:col,
                      padding:"2px 8px", borderRadius:8, fontWeight:600 }}>
                      {(etapaObj && etapaObj.label) || p.etapa}
                    </span>
                    <span style={{ fontSize:13, fontWeight:600, color:C.accent }}>
                      {p.val_est ? `€ ${Number(p.val_est).toLocaleString("ro-RO")}` : "—"}
                    </span>
                  </div>
                  {p.descriere && (
                    <div style={{ fontSize:11, color:C.muted, marginTop:6, lineHeight:1.5,
                      overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                      {p.descriere}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* ── ISTORIC ACTIVITĂȚI ── */}
        {tabActiv==="activitati" && (
          <div>
            {(() => {
              const azi = toDateStr(new Date());
              // Toate task-urile clientului, de la cel mai recent la cel mai vechi
              const taskuriClient = [...(db.taskuri||[]).filter(t=>t.client_id===client.id)]
                .sort((a,b)=>(b.scadenta||"").localeCompare(a.scadenta||""));

              if (taskuriClient.length === 0) {
                return (
                  <div style={{ textAlign:"center", color:C.muted, fontSize:13, padding:"24px 0" }}>
                    Nicio activitate înregistrată
                  </div>
                );
              }

              return taskuriClient.map(t => {
                const sc      = taskStatusColor(t, azi);
                const asignat = db.utilizatori.find(u=>u.id===t.asignat);
                const proiect = db.proiecte.find(p=>p.id===t.proiect_id);
                const tipInfo = getTipInfo(t.tip_activitate);
                return (
                  <div key={t.id}
                    onClick={() => window._openTask && window._openTask(t)}
                    style={{ display:"flex", gap:10, padding:"10px 0",
                      borderBottom:`1px solid ${C.border}22`, cursor:"pointer",
                      borderLeft:`2px solid ${sc.culoare}`, paddingLeft:8,
                      transition:"background .1s" }}
                    onMouseEnter={e=>e.currentTarget.style.background=C.surface+"88"}
                    onMouseLeave={e=>e.currentTarget.style.background="transparent"}>

                    <span style={{ fontSize:16, flexShrink:0, marginTop:1 }}>{(tipInfo && tipInfo.icon)||"•"}</span>

                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:13, color: t.status==="finalizat" ? C.muted : C.text,
                        lineHeight:1.4, textDecoration: t.status==="finalizat" ? "line-through" : "none",
                        overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                        {t.titlu}
                      </div>
                      {t.descriere && (
                        <div style={{ fontSize:11, color:C.muted, marginTop:2, fontStyle:"italic",
                          overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                          {t.descriere}
                        </div>
                      )}
                      <div style={{ display:"flex", gap:8, marginTop:3, flexWrap:"wrap", alignItems:"center" }}>
                        {asignat && (
                          <div style={{ display:"flex", alignItems:"center", gap:3 }}>
                            <Avatar name={asignat.nume} size={12} color={C.accent} />
                            <span style={{ fontSize:11, color:C.muted }}>{asignat.nume.split(" ")[0]}</span>
                          </div>
                        )}
                        {proiect && <span style={{ fontSize:11, color:C.muted }}>· {proiect.titlu}</span>}
                        {t.ora_start && <span style={{ fontSize:11, color:C.info }}>{t.ora_start}{t.ora_end?` → ${t.ora_end}`:""}</span>}
                      </div>
                    </div>

                    <div style={{ display:"flex", flexDirection:"column", alignItems:"flex-end",
                      gap:3, flexShrink:0 }}>
                      <span style={{ fontSize:10, fontWeight:600,
                        background:sc.bg, color:sc.culoare,
                        padding:"2px 6px", borderRadius:6 }}>
                        {sc.label}
                      </span>
                      <span style={{ fontSize:11, color:C.muted }}>{t.scadenta}</span>
                    </div>
                  </div>
                );
              });
            })()}
          </div>
        )}
      </div>
    </div>
  );
}

function SectiuneDetalii({ titlu, children }) {
  return (
    <div style={{ marginBottom:20 }}>
      <div style={{ fontSize:11, fontWeight:600, color:C.accent, textTransform:"uppercase",
        letterSpacing:.5, marginBottom:10 }}>{titlu}</div>
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:10, overflow:"hidden" }}>
        {children}
      </div>
    </div>
  );
}

function RandDetaliu({ label, val, link, extra }) {
  if (!val) return null;
  return (
    <div style={{ display:"flex", alignItems:"center", gap:10, padding:"9px 14px",
      borderBottom:`1px solid ${C.border}22`, fontSize:13 }}>
      <span style={{ color:C.muted, fontSize:12, minWidth:80, flexShrink:0 }}>{label}</span>
      {extra}
      {link
        ? <a href={val.startsWith("http")?val:`https://${val}`} target="_blank" rel="noreferrer"
            style={{ color:C.info, textDecoration:"none" }}>{val}</a>
        : <span style={{ color:C.text }}>{val}</span>
      }
    </div>
  );
}

const ROLURI_CONTACT = ["Director general","Administrator","CEO","Manager","Contabil","Director tehnic","Director comercial","Proprietar","Achizitor","Alt rol"];
const MAX_CONTACTE = 3;

function ClientModal({ client, contacteInitiale, db, user, onSave, onDelete, onClose }) {
  const [form, setForm] = useState(client || { denumire:"", tip:"juridica", cui:"", oras:"", judet:"", adresa:"", agent_id: user.rol==="agent"?user.id:"u2" });
  const [contacte, setContacte] = useState(
    (contacteInitiale && contacteInitiale.length) > 0
      ? contacteInitiale
      : [{ id:"", nume:"", prenume:"", functie:"", email:"", telefon:"", principal:true }]
  );
  const set = k => v => setForm(f=>({...f,[k]:v}));
  const agentiOptions = db.utilizatori.filter(u=>u.rol==="agent").map(u=>({value:u.id,label:u.nume}));

  function setContact(idx, camp, val) {
    setContacte(prev => prev.map((c,i) => i===idx ? {...c,[camp]:val} : c));
  }
  function setPrincipal(idx) {
    setContacte(prev => prev.map((c,i) => ({...c, principal: i===idx})));
  }
  function adaugaContact() {
    if (contacte.length >= MAX_CONTACTE) return;
    setContacte(prev => [...prev, { id:"", nume:"", prenume:"", functie:"", email:"", telefon:"", principal:false }]);
  }
  function stergeContact(idx) {
    const noi = contacte.filter((_,i)=>i!==idx);
    // dacă am șters principalul, primul devine principal
    if (contacte[idx].principal && noi.length > 0) noi[0].principal = true;
    setContacte(noi);
  }

  const contacteValide = contacte.filter(c => c.nume.trim() || c.prenume.trim());

  return (
    <Modal title={client?"Editare client":"Client nou"} onClose={onClose} wide>

      {/* ── DATE ORGANIZAȚIE ── */}
      <div style={{ fontSize:11, fontWeight:600, color:C.accent, textTransform:"uppercase",
        letterSpacing:.5, marginBottom:10 }}>Date organizație</div>

      <FormRow label="Denumire *">
        <Input value={form.denumire} onChange={set("denumire")} placeholder="SC Exemplu SRL" />
      </FormRow>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
        <FormRow label="Tip">
          <Select value={form.tip} onChange={set("tip")} options={[
            {value:"juridica",label:"Persoană juridică"},
            {value:"fizica",  label:"Persoană fizică"}
          ]} />
        </FormRow>
        <FormRow label="CUI / CNP">
          <Input value={form.cui} onChange={set("cui")} placeholder="RO12345678" />
        </FormRow>
        <FormRow label="Oraș">
          <Input value={form.oras} onChange={set("oras")} placeholder="Iași" />
        </FormRow>
        <FormRow label="Județ">
          <Input value={form.judet} onChange={set("judet")} placeholder="Iași" />
        </FormRow>
      </div>
      <FormRow label="Adresă">
        <Input value={form.adresa} onChange={set("adresa")} placeholder="Str. Exemplu nr. 1" />
      </FormRow>
      {user.rol==="director" && (
        <FormRow label="Agent responsabil">
          <Select value={form.agent_id} onChange={set("agent_id")} options={agentiOptions} />
        </FormRow>
      )}

      {/* ── PERSOANE DE CONTACT ── */}
      <div style={{ borderTop:`1px solid ${C.border}`, marginTop:16, paddingTop:16 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
          <div>
            <div style={{ fontSize:11, fontWeight:600, color:C.accent, textTransform:"uppercase", letterSpacing:.5 }}>
              Persoane de contact
            </div>
            <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>
              Maxim {MAX_CONTACTE} contacte · marcați contactul principal cu ★
            </div>
          </div>
          {contacte.length < MAX_CONTACTE && (
            <Btn small onClick={adaugaContact}>+ Adaugă contact</Btn>
          )}
        </div>

        {contacte.map((ct, idx) => (
          <div key={idx} style={{ background:C.surface, border:`1px solid ${ct.principal ? C.accent+"55" : C.border}`,
            borderRadius:10, padding:14, marginBottom:10, position:"relative" }}>

            {/* Header rând contact */}
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:10 }}>
              <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                <div onClick={()=>setPrincipal(idx)}
                  title="Setează ca principal"
                  style={{ cursor:"pointer", fontSize:16,
                    color: ct.principal ? C.warn : C.border,
                    transition:"color .15s" }}>
                  ★
                </div>
                <span style={{ fontSize:12, fontWeight:500,
                  color: ct.principal ? C.accentL : C.muted }}>
                  {ct.principal ? "Contact principal" : `Contact ${idx+1}`}
                </span>
              </div>
              {contacte.length > 1 && (
                <Btn small variant="danger" onClick={()=>stergeContact(idx)}>✕</Btn>
              )}
            </div>

            {/* Câmpuri contact */}
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <FormRow label="Prenume">
                <Input value={ct.prenume} onChange={v=>setContact(idx,"prenume",v)} placeholder="Ion" />
              </FormRow>
              <FormRow label="Nume">
                <Input value={ct.nume} onChange={v=>setContact(idx,"nume",v)} placeholder="Popescu" />
              </FormRow>
              <FormRow label="Funcție / Rol">
                <div style={{ position:"relative" }}>
                  <Input value={ct.functie} onChange={v=>setContact(idx,"functie",v)}
                    placeholder="ex: Director general" />
                  {/* Sugestii rapide funcție */}
                  <div style={{ display:"flex", flexWrap:"wrap", gap:4, marginTop:5 }}>
                    {ROLURI_CONTACT.slice(0,5).map(r=>(
                      <span key={r} onClick={()=>setContact(idx,"functie",r)}
                        style={{ fontSize:10, padding:"2px 7px", borderRadius:8, cursor:"pointer",
                          background: ct.functie===r ? C.accent+"33" : C.card,
                          color: ct.functie===r ? C.accentL : C.muted,
                          border:`1px solid ${ct.functie===r ? C.accent+"55" : C.border}` }}>
                        {r}
                      </span>
                    ))}
                  </div>
                </div>
              </FormRow>
              <FormRow label="Telefon">
                <Input value={ct.telefon} onChange={v=>setContact(idx,"telefon",v)} placeholder="07xx xxx xxx" />
              </FormRow>
              <FormRow label="Email" >
                <Input value={ct.email} onChange={v=>setContact(idx,"email",v)} placeholder="email@firma.ro" type="email" />
              </FormRow>
            </div>
          </div>
        ))}
      </div>

      <div style={{ display:"flex", justifyContent:"space-between", gap:8, marginTop:8 }}>
        <div>
          {client && onDelete && (
            <Btn variant="danger" small onClick={()=>onDelete(client.id)}>🗑 Șterge client</Btn>
          )}
        </div>
        <div style={{ display:"flex", gap:8 }}>
          <Btn onClick={onClose}>Anulare</Btn>
          <Btn variant="primary" onClick={()=>onSave(form, contacteValide)} disabled={!form.denumire}>
            Salvează
          </Btn>
        </div>
      </div>
    </Modal>
  );
}

// ─── PIPELINE ────────────────────────────────────────────────────────────────
const LUNI_ARHIVARE = 3;

function proiectEsteArhivat(p, db) {
  if (!isEtapaInchisa(db, p.etapa)) return false;
  if (!p.data_inchidere) return false;
  const dataInchidere = new Date(p.data_inchidere);
  const limita = new Date();
  limita.setMonth(limita.getMonth() - LUNI_ARHIVARE);
  return dataInchidere < limita;
}

function Pipeline({ db, user, update }) {
  const [modal, setModal]               = useState(null);
  const [filtruMembru, setFiltruMembru] = useState("toti");
  const [vizualizare, setVizualizare]   = useState("kanban");
  const [sortLista, setSortLista]       = useState("actualizat");
  const [cautareLista, setCautareLista] = useState("");
  const sortareLista = useSortare("titlu");

  const membriEchipa = db.utilizatori.filter(u => u.activ !== false && u.rol !== "director");

  const toateVizibile = db.proiecte.filter(p => {
    if (user.rol === "agent") return p.agent_id === user.id;
    if (filtruMembru !== "toti") {
      const m = db.utilizatori.find(u => u.id === filtruMembru);
      if ((m && m.rol) === "agent") return p.agent_id === filtruMembru;
    }
    return true;
  });

  // Kanban: exclude proiectele arhivate (inchise de > 3 luni)
  const vizibileKanban = toateVizibile.filter(p => !proiectEsteArhivat(p, db));

  // Lista: toate proiectele, sortabile + filtrare dupa cautare
  const vizibileLista = sortArr(
    [...toateVizibile].filter(p => {
      if (!cautareLista.trim()) return true;
      const q = cautareLista.toLowerCase();
      const titlu  = (p.titlu||"").toLowerCase();
      const client = ((db.clienti.find(c=>c.id===p.client_id)||{}).denumire||"").toLowerCase();
      return titlu.includes(q) || client.includes(q);
    }),
    sortareLista.col, sortareLista.dir,
    (p, col) => {
      if (col==="titlu")          return p.titlu || "";
      if (col==="client")         return (db.clienti.find(c=>c.id===p.client_id)||{}).denumire || "";
      if (col==="etapa")          return p.etapa || "";
      if (col==="agent")          return (db.utilizatori.find(u=>u.id===p.agent_id)||{}).nume || "";
      if (col==="val_est")        return p.val_est || 0;
      if (col==="val_fin")        return p.val_fin || 0;
      if (col==="data_inchidere") return p.data_inchidere || "";
      // default: active first
      if (isEtapaInchisa(db,p.etapa)) return "z";
      return "a";
    }
  );

  const perEtapa  = etapa => vizibileKanban.filter(p => p.etapa === etapa);
  const getClient = id => db.clienti.find(c => c.id === id);
  const getUser   = id => db.utilizatori.find(u => u.id === id);

  function schimbaEtapa(pid, etapaNoua) {
    update(d => ({
      ...d,
      proiecte: d.proiecte.map(p => {
        if (p.id !== pid) return p;
        const eInchisa = isEtapaInchisa(d, etapaNoua);
        return {
          ...p, etapa: etapaNoua,
          data_inchidere: eInchisa ? (p.data_inchidere || new Date().toISOString()) : null,
        };
      })
    }));
  }

  function salveaza(form) {
    if (!form.id) {
      const eInchisa = isEtapaInchisa(db, form.etapa);
      update(d => ({ ...d, proiecte: [...d.proiecte, {
        ...form, id:"p"+genId(),
        agent_id: user.rol==="agent" ? user.id : form.agent_id,
        data_inchidere: eInchisa ? new Date().toISOString() : null,
      }]}));
    } else {
      const eInchisaAcum = isEtapaInchisa(db, form.etapa);
      const eraInchisa   = isEtapaInchisa(db, (db.proiecte.find(p=>p.id===form.id)||{}).etapa);
      update(d => ({ ...d, proiecte: d.proiecte.map(p => p.id === form.id ? {
        ...p, ...form,
        data_inchidere: eInchisaAcum
          ? (eraInchisa ? p.data_inchidere : new Date().toISOString())
          : null,
      } : p)}));
    }
    setModal(null);
  }

  // Permite ProiectModal să adauge task-uri
  useEffect(() => {
    window._addTask = (taskForm) => {
      update(d => ({ ...d, taskuri: [...d.taskuri, {
        ...taskForm, id:"t"+genId(), status:"de_facut",
        asignat: taskForm.asignat || user.id,
        creat_de: user.id,
      }]}));
    };
    window._toggleTask = (taskId) => {
      update(d => ({ ...d, taskuri: d.taskuri.map(t =>
        t.id === taskId ? { ...t, status: t.status==="finalizat" ? "de_facut" : "finalizat" } : t
      )}));
    };
    return () => { delete window._addTask; delete window._toggleTask; };
  }, [update, user.id]);

  const totalPipeline  = vizibileKanban.filter(p => !isEtapaInchisa(db, p.etapa)).reduce((s,p) => s+(p.val_est||0), 0);
  const etapeAfisate   = getEtapeNormale(db);
  const nrColoane      = etapeAfisate.length;
  const nrArhivate     = toateVizibile.filter(p => proiectEsteArhivat(p, db)).length;
  const membruSelectat = filtruMembru !== "toti" ? db.utilizatori.find(u => u.id === filtruMembru) : null;

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100%", overflow:"hidden" }}>

      {/* HEADER — fix, nu scrollează */}
      <div style={{ padding:"16px 14px 12px", flexShrink:0,
        borderBottom:`1px solid ${C.border}`, background:C.bg }}>

        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:16, flexWrap:"wrap" }}>
          <div>
            <div style={{ fontSize:18, fontWeight:700 }}>
              Pipeline vânzari
              {membruSelectat && <span style={{ fontSize:13, fontWeight:400, color:C.muted, marginLeft:10 }}>— {membruSelectat.nume}</span>}
            </div>
            <div style={{ display:"flex", gap:10, marginTop:4, alignItems:"center", flexWrap:"wrap" }}>
              <span style={{ fontSize:12, color:C.muted }}>
                {vizibileKanban.filter(p=>!isEtapaInchisa(db,p.etapa)).length} active ·{" "}
                <span style={{ color:C.accent }}>€ {totalPipeline.toLocaleString("ro-RO")}</span>
              </span>
              {nrArhivate > 0 && (
                <span style={{ fontSize:11, color:C.muted, background:C.surface,
                  border:`1px solid ${C.border}`, borderRadius:8, padding:"2px 8px" }}>
                  {nrArhivate} arhivate
                </span>
              )}
            </div>
          </div>

          </div>

          <div style={{ display:"flex", alignItems:"center", gap:10, flexShrink:0, flexWrap:"wrap", justifyContent:"flex-end" }}>

          {/* FILTRU DIRECTOR */}
          {user.rol === "director" && (
            <div style={{ display:"flex", alignItems:"center", gap:6 }}>
              <span style={{ fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>Echipa:</span>
              <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`, borderRadius:10, overflow:"hidden" }}>
                <div onClick={() => setFiltruMembru("toti")}
                  style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 14px",
                    cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                    background: filtruMembru==="toti" ? C.accent : "transparent",
                    color: filtruMembru==="toti" ? "#fff" : C.muted,
                    borderRight:`1px solid ${C.border}` }}>
                  <span style={{ fontSize:14 }}>⊞</span> Toti
                </div>
                {membriEchipa.filter(m => m.rol==="agent").map(m => {
                  const activ    = filtruMembru === m.id;
                  const initials = m.nume.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
                  return (
                    <div key={m.id} onClick={() => setFiltruMembru(m.id)} title={m.nume}
                      style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 12px",
                        cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                        background: activ ? C.accent+"22" : "transparent",
                        color: activ ? C.accentL : C.muted,
                        borderRight:`1px solid ${C.border}33`,
                        borderBottom: activ ? `2px solid ${C.accent}` : "2px solid transparent" }}>
                      <div style={{ width:20, height:20, borderRadius:"50%", flexShrink:0,
                        background: activ ? C.accent : C.accent+"33",
                        color: activ ? "#fff" : C.accent,
                        display:"flex", alignItems:"center", justifyContent:"center",
                        fontSize:9, fontWeight:700 }}>
                        {initials}
                      </div>
                      <span style={{ whiteSpace:"nowrap" }}>{m.nume.split(" ")[0]}</span>
                      <span style={{ fontSize:10, background:C.surface, color:C.muted, padding:"1px 5px", borderRadius:8 }}>
                        {db.proiecte.filter(p=>p.agent_id===m.id&&!isEtapaInchisa(db,p.etapa)).length}
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* TOGGLE VIZUALIZARE */}
          <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`, borderRadius:8, overflow:"hidden" }}>
            {[["kanban","⊟ Kanban"],["lista","≡ Lista"]].map(([v,l])=>(
              <div key={v} onClick={()=>setVizualizare(v)}
                style={{ padding:"6px 14px", fontSize:12, cursor:"pointer", fontWeight:500,
                  background: vizualizare===v ? C.accent : "transparent",
                  color: vizualizare===v ? "#fff" : C.muted, transition:"all .15s" }}>
                {l}
              </div>
            ))}
          </div>

          <Btn variant="primary" onClick={() => setModal({})}>+ Proiect nou</Btn>
        </div>
      </div>

      {/* CONȚINUT SCROLLABIL */}
      <div style={{ flex:1, overflow:"auto", padding:"14px 14px" }}>

      {/* KANBAN */}
      {vizualizare === "kanban" && (
        <div style={{ display:"grid", gridTemplateColumns:`repeat(${nrColoane},minmax(180px,1fr))`, gap:10, minWidth: nrColoane > 4 ? nrColoane * 190 : "auto" }}>
          {etapeAfisate.map(etapaObj => {
            const etapa    = etapaObj.id;
            const eInchisa = etapaObj.tip === "castigat" || etapaObj.tip === "pierdut";
            const lista    = perEtapa(etapa);
            // Tuturor etapelor li se aplică aceeași culoare albastru pentru antet
            const colEtapa = C.info; // #4fa8f0 — albastru uniform
            return (
              <div key={etapa} style={{ background:"#eef0f5", border:`1px solid ${C.border}`,
                borderRadius:12, padding:12, minHeight:200, opacity: eInchisa ? .9 : 1 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:10 }}>
                  <span style={{ fontSize:11, fontWeight:700, textTransform:"uppercase", letterSpacing:.5, color:colEtapa }}>
                    {etapaObj.label}
                  </span>
                  <span style={{ background:colEtapa+"22", color:colEtapa, fontSize:11, padding:"1px 7px", borderRadius:10, fontWeight:600 }}>
                    {lista.length}
                  </span>
                </div>
                {lista.length > 0 && (
                  <div style={{ fontSize:11, color:C.muted, marginBottom:6 }}>
                    € {lista.reduce((s,p)=>s+(p.val_est||0),0).toLocaleString("ro-RO")}
                  </div>
                )}
                {eInchisa && (
                  <div style={{ fontSize:10, color:C.muted, marginBottom:8, fontStyle:"italic" }}>
                    Afisate max. {LUNI_ARHIVARE} luni · restul in Rapoarte
                  </div>
                )}
                {lista.map(p => {
                  const client = getClient(p.client_id);
                  const agent  = getUser(p.agent_id);
                  const psc    = proiectStatusColor(p.id, db.taskuri);
                  return (
                    <div key={p.id}
                      style={{ background:psc.bg,
                        border:`1px solid ${C.border}`,
                        borderLeft:`3px solid ${psc.culoare}`,
                        borderRadius:8, padding:"10px 12px", marginBottom:8, cursor:"pointer",
                        transition:"all .15s" }}
                      onMouseEnter={e=>{ e.currentTarget.style.borderColor=psc.culoare; e.currentTarget.style.borderLeftColor=psc.culoare; }}
                      onMouseLeave={e=>{ e.currentTarget.style.borderColor=C.border; e.currentTarget.style.borderLeftColor=psc.culoare; }}
                      onClick={() => setModal(p)}>

                      {/* Status indicator + titlu */}
                      <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between", gap:6, marginBottom:4 }}>
                        <div style={{ fontWeight:600, fontSize:13, color:C.text, lineHeight:1.35, flex:1 }}>{p.titlu}</div>
                        <span style={{ fontSize:9, fontWeight:700, color:psc.culoare, background:psc.culoare+"22",
                          padding:"2px 6px", borderRadius:6, flexShrink:0, whiteSpace:"nowrap", marginTop:1 }}>
                          {psc.label}
                        </span>
                      </div>

                      {client && <div style={{ fontSize:11, color:C.muted, marginBottom:6 }}>{client.denumire}</div>}
                      {p.val_est && (
                        <div style={{ fontSize:13, color:C.accent, fontWeight:600, marginBottom:6 }}>
                          € {Number(p.val_est).toLocaleString("ro-RO")}
                        </div>
                      )}
                      {agent && (
                        <div style={{ display:"flex", alignItems:"center", gap:5, marginTop:2 }}>
                          <Avatar name={agent.nume} size={18} color={C.accent} />
                          <span style={{ fontSize:11, color:C.muted }}>{agent.nume}</span>
                        </div>
                      )}
                      {p.data_inchidere && (
                        <div style={{ fontSize:10, color:C.muted, marginTop:5 }}>
                          Inchis: {new Date(p.data_inchidere).toLocaleDateString("ro-RO")}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      )}

      {/* LISTA */}
      {vizualizare === "lista" && (
        <div>
          {/* Căutare + Sortare */}
          <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:14, flexWrap:"wrap" }}>
            <div style={{ display:"flex", alignItems:"center", gap:8, background:C.surface,
              border:`1px solid ${cautareLista ? C.accent+"66" : C.border}`, borderRadius:8,
              padding:"5px 12px", minWidth:240, transition:"border-color .15s" }}>
              <span style={{ color:C.muted, fontSize:14 }}>🔍</span>
              <input
                value={cautareLista}
                onChange={e => setCautareLista(e.target.value)}
                placeholder="Caută proiect sau client..."
                style={{ background:"transparent", border:"none", outline:"none",
                  color:C.text, fontSize:13, fontFamily:"inherit", width:"100%" }} />
              {cautareLista && (
                <span onClick={()=>setCautareLista("")}
                  style={{ color:C.muted, cursor:"pointer", fontSize:14, lineHeight:1 }}>✕</span>
              )}
            </div>
            <div style={{ width:"1px", height:20, background:C.border }} />
            <span style={{ fontSize:12, color:C.muted }}>Sortare:</span>
            {[["actualizat","Status"],["valoare","Valoare"],["client","Client"],["etapa","Etapa"]].map(([v,l])=>(
              <div key={v} onClick={()=>setSortLista(v)}
                style={{ padding:"4px 12px", borderRadius:8, cursor:"pointer", fontSize:12, fontWeight:500,
                  background: sortLista===v ? C.accent+"22" : C.surface,
                  color: sortLista===v ? C.accentL : C.muted,
                  border:`1px solid ${sortLista===v ? C.accent+"44" : C.border}`,
                  transition:"all .15s" }}>
                {l}
              </div>
            ))}
            <span style={{ fontSize:12, color:C.muted, marginLeft:4 }}>
              {vizibileLista.length} proiecte
              {cautareLista && <span style={{ color:C.accent }}> · filtrate</span>}
              {nrArhivate > 0 && !cautareLista && <span> (incl. {nrArhivate} arhivate)</span>}
            </span>
          </div>

          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, overflow:"hidden" }}>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
              <thead>
                <tr style={{ borderBottom:`1px solid ${C.border}` }}>
                  <SortableHeader label="Proiect"        campId="titlu"          sortare={sortareLista} />
                  <SortableHeader label="Client"         campId="client"         sortare={sortareLista} />
                  <SortableHeader label="Etapă"          campId="etapa"          sortare={sortareLista} />
                  <SortableHeader label="Agent"          campId="agent"          sortare={sortareLista} />
                  <SortableHeader label="Val. estimată"  campId="val_est"        sortare={sortareLista} />
                  <SortableHeader label="Val. finală"    campId="val_fin"        sortare={sortareLista} />
                  <SortableHeader label="Dată închidere" campId="data_inchidere" sortare={sortareLista} />
                </tr>
              </thead>
              <tbody>
                {vizibileLista.map(p => {
                  const client   = getClient(p.client_id);
                  const agent    = getUser(p.agent_id);
                  const etapaObj = (db.etape_pipeline||[]).find(e=>e.id===p.etapa);
                  const col      = (etapaObj && etapaObj.culoare) || C.muted;
                  const arhivat  = proiectEsteArhivat(p, db);
                  return (
                    <tr key={p.id} onClick={() => setModal(p)}
                      style={{ borderBottom:`1px solid ${C.border}22`, cursor:"pointer",
                        opacity: arhivat ? .5 : 1, transition:"background .1s" }}
                      onMouseEnter={e=>e.currentTarget.style.background=C.surface}
                      onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                      <td style={{ padding:"11px 14px" }}>
                        <div style={{ fontWeight:600, color:C.text, lineHeight:1.3 }}>{p.titlu}</div>
                        {arhivat && <span style={{ fontSize:10, color:C.muted, fontStyle:"italic" }}>Arhivat</span>}
                        {p.descriere && <div style={{ fontSize:11, color:C.muted, marginTop:2,
                          maxWidth:240, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                          {p.descriere}
                        </div>}
                      </td>
                      <td style={{ padding:"11px 14px", color:C.muted }}>{(client && client.denumire) || "—"}</td>
                      <td style={{ padding:"11px 14px" }}>
                        <span style={{ background:col+"22", color:col, fontSize:11,
                          padding:"2px 8px", borderRadius:8, fontWeight:600, whiteSpace:"nowrap" }}>
                          {(etapaObj && etapaObj.label) || p.etapa}
                        </span>
                      </td>
                      <td style={{ padding:"11px 14px" }}>
                        {agent && <div style={{ display:"flex", alignItems:"center", gap:6 }}>
                          <Avatar name={agent.nume} size={20} color={C.accent} />
                          <span style={{ fontSize:12, color:C.muted }}>{agent.nume.split(" ")[0]}</span>
                        </div>}
                      </td>
                      <td style={{ padding:"11px 14px", fontWeight:600, color:C.accent, whiteSpace:"nowrap" }}>
                        {p.val_est ? `€ ${Number(p.val_est).toLocaleString("ro-RO")}` : "—"}
                      </td>
                      <td style={{ padding:"11px 14px", fontWeight:600, color:C.success, whiteSpace:"nowrap" }}>
                        {p.val_fin ? `€ ${Number(p.val_fin).toLocaleString("ro-RO")}` : "—"}
                      </td>
                      <td style={{ padding:"11px 14px", fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>
                        {p.data_inchidere ? new Date(p.data_inchidere).toLocaleDateString("ro-RO") : "—"}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      </div>

      {modal !== null && (
        <ProiectModal
          proiect={Object.keys(modal).length ? modal : null}
          db={db} user={user}
          onSave={salveaza}
          onClose={() => setModal(null)} />
      )}
    </div>
  );
}
function ProiectModal({ proiect, db, user, onSave, onClose }) {
  const [form, setForm] = useState(proiect || { titlu:"", client_id:"", agent_id:user.id, etapa:"lead", val_est:"", val_fin:"", descriere:"" });
  const [tab, setTab] = useState("info");
  const [fisiere, setFisiere] = useState((proiect && proiect.fisiere) || []);
  const [taskModal, setTaskModal] = useState(false);
  const [dragOver, setDragOver] = useState(false);
  const [uploadProgress, setUploadProgress] = useState("");
  const [confirmFisier, setConfirmFisier] = useState(null);
  const fileInputRef = React.useRef();

  const set = k => v => setForm(f=>({...f,[k]:v}));
  const clientiOpt = db.clienti.filter(c=>user.rol!=="agent"||c.agent_id===user.id).map(c=>({value:c.id,label:c.denumire}));
  const agentiOpt  = db.utilizatori.filter(u=>u.rol==="agent").map(u=>({value:u.id,label:u.nume}));

  const esteNou = !proiect || !proiect.id;

  // Task-uri asociate proiectului
  const taskuriProiect = proiect && proiect.id
    ? db.taskuri.filter(t => t.proiect_id === proiect.id)
    : [];
  const taskuriViitor   = taskuriProiect.filter(t => t.status !== "finalizat")
    .sort((a,b) => (a.scadenta||"").localeCompare(b.scadenta||""));
  const taskuriTrecute  = taskuriProiect.filter(t => t.status === "finalizat")
    .sort((a,b) => (b.scadenta||"").localeCompare(a.scadenta||""));

  const client    = db.clienti.find(c => c.id === (form.client_id || (proiect && proiect.client_id)));
  const agent     = db.utilizatori.find(u => u.id === (form.agent_id || (proiect && proiect.agent_id)));
  const etapaObj  = (db.etape_pipeline||[]).find(e => e.id === form.etapa);
  const etapaCol  = (etapaObj && etapaObj.culoare) || C.muted;

  // Conversie fișier → Base64 pentru stocare persistentă
  function fileToBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload  = () => resolve(reader.result); // data:mime;base64,...
      reader.onerror = () => reject(new Error("Eroare citire fișier"));
      reader.readAsDataURL(file);
    });
  }

  async function handleFisiere(files) {
    const MAX_SIZE = 10 * 1024 * 1024; // 10MB per fișier
    const ACCEPT   = ["pdf","doc","docx","xls","xlsx","jpg","jpeg","png","gif","webp","zip"];
    const lista    = Array.from(files);
    let adaugate   = 0;

    for (const f of lista) {
      const ext = f.name.split(".").pop().toLowerCase();
      if (!ACCEPT.includes(ext)) {
        setUploadProgress(`⚠ Fișierul "${f.name}" nu este acceptat (${ext})`);
        setTimeout(() => setUploadProgress(""), 3000);
        continue;
      }
      if (f.size > MAX_SIZE) {
        setUploadProgress(`⚠ "${f.name}" depășește limita de 10MB`);
        setTimeout(() => setUploadProgress(""), 3000);
        continue;
      }
      setUploadProgress(`Se procesează "${f.name}"...`);
      try {
        const base64 = await fileToBase64(f);
        setFisiere(prev => [...prev, {
          id:     "f" + genId(),
          nume:   f.name,
          marime: f.size,
          tip:    f.type,
          data:   new Date().toISOString(),
          base64, // stocat persistent
        }]);
        adaugate++;
      } catch {
        setUploadProgress(`⚠ Eroare la procesarea "${f.name}"`);
        setTimeout(() => setUploadProgress(""), 3000);
      }
    }
    if (adaugate > 0) {
      setUploadProgress(`✓ ${adaugate} fișier${adaugate>1?"e":""} adăugat${adaugate>1?"e":""}`);
      setTimeout(() => setUploadProgress(""), 2500);
    }
    if (fileInputRef.current) fileInputRef.current.value = "";
  }

  function handleInputChange(e) { handleFisiere(e.target.files); }

  function handleDrop(e) {
    e.preventDefault(); setDragOver(false);
    handleFisiere(e.dataTransfer.files);
  }

  function descarcaFisier(f) {
    const a = document.createElement("a");
    a.href     = f.base64 || f.url;
    a.download = f.nume;
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    setTimeout(() => document.body.removeChild(a), 150);
  }

  function stergeFisier(id) {
    const f = fisiere.find(x => x.id === id);
    setConfirmFisier({ id, nume: f && f.nume });
  }

  function formatBytes(b) {
    if (b < 1024)    return b + " B";
    if (b < 1048576) return (b/1024).toFixed(0) + " KB";
    return (b/1048576).toFixed(1) + " MB";
  }

  function getFileIcon(tip, nume) {
    const ext = (nume||"").split(".").pop().toLowerCase();
    if (ext==="pdf"||tip.includes("pdf"))                    return { icon:"📄", col:"#c0392b" };
    if (["doc","docx"].includes(ext)||tip.includes("word"))  return { icon:"📝", col:"#2563b0" };
    if (["xls","xlsx"].includes(ext)||tip.includes("sheet")) return { icon:"📊", col:"#1a8c5b" };
    if (["jpg","jpeg","png","gif","webp"].includes(ext)||tip.includes("image")) return { icon:"🖼️", col:"#c97b00" };
    if (ext==="zip"||tip.includes("zip"))                    return { icon:"🗜️", col:"#6b7a99" };
    return { icon:"📎", col:C.muted };
  }

  function salveaza() {
    onSave({ ...form, fisiere });
  }

  const tabs = [
    { id:"info",    label:"Detalii" },
    { id:"taskuri", label:`Task-uri (${taskuriProiect.length})` },
    { id:"fisiere", label:`Oferte/Fișiere (${fisiere.length})` },
  ];

  // Conținut modal complet
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(30,40,60,.35)", zIndex:1000,
      display:"flex", alignItems:"stretch", justifyContent:"flex-end" }}
      onClick={e => { if(e.target===e.currentTarget) onClose(); }}>

      <div style={{ width: "min(780px, 95vw)", background:C.card, display:"flex", flexDirection:"column",
        height:"100vh", overflowY:"hidden", animation:"slideIn .2s ease",
        borderLeft:`1px solid ${C.border}` }}>

        {/* HEADER */}
        <div style={{ padding:"18px 24px 14px", borderBottom:`1px solid ${C.border}`, flexShrink:0 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:12 }}>
            <div style={{ flex:1, minWidth:0 }}>
              {/* Titlu editabil inline */}
              {!form.titlu && (
                <div style={{ fontSize:11, color:C.danger, fontWeight:500, marginBottom:3 }}>
                  * Introdu denumirea proiectului
                </div>
              )}
              <input
                value={form.titlu}
                onChange={e => set("titlu")(e.target.value)}
                placeholder="Introdu denumirea proiectului..."
                style={{ background: form.titlu ? "transparent" : C.danger+"08",
                  border:"none", outline:"none", fontSize:18,
                  fontWeight:700, color:C.text, fontFamily:"inherit", width:"100%",
                  borderBottom:`2px solid ${form.titlu ? C.border : C.danger+"66"}`,
                  padding:"4px 0", transition:"border-color .15s", borderRadius:0,
                  boxSizing:"border-box" }}
                onFocus={e => e.target.style.borderBottomColor=C.accent}
                onBlur={e => e.target.style.borderBottomColor=form.titlu ? C.border : C.danger+"66"}
              />
              <div style={{ display:"flex", gap:8, marginTop:8, flexWrap:"wrap", alignItems:"center" }}>
                {/* Badge etapă */}
                <span style={{ background:etapaCol+"22", color:etapaCol, fontSize:11,
                  padding:"3px 10px", borderRadius:20, fontWeight:600 }}>
                  {(etapaObj && etapaObj.label) || form.etapa}
                </span>
                {client && (
                  <span
                    onClick={() => window._openClient && window._openClient(client)}
                    style={{ fontSize:12, color:C.info, cursor:"pointer", textDecoration:"underline",
                      textDecorationStyle:"dotted", textUnderlineOffset:2,
                      transition:"color .15s" }}
                    onMouseEnter={e=>e.currentTarget.style.color=C.accentL}
                    onMouseLeave={e=>e.currentTarget.style.color=C.info}
                    title="Deschide fișa clientului">
                    · {client.denumire} ↗
                  </span>
                )}
                {agent && (
                  <div style={{ display:"flex", alignItems:"center", gap:4 }}>
                    <span style={{ fontSize:12, color:C.muted }}>·</span>
                    <Avatar name={agent.nume} size={16} color={C.accent} />
                    <span style={{ fontSize:12, color:C.muted }}>{agent.nume.split(" ")[0]}</span>
                  </div>
                )}
              </div>
            </div>
            <div style={{ display:"flex", gap:8, flexShrink:0 }}>
              <Btn variant="primary" small onClick={salveaza} disabled={!form.titlu||!form.client_id}>
                💾 Salvează
              </Btn>
              <Btn small onClick={onClose}>✕</Btn>
            </div>
          </div>
        </div>

        {/* TABS */}
        {!esteNou && (
          <div style={{ display:"flex", borderBottom:`1px solid ${C.border}`, flexShrink:0 }}>
            {tabs.map(t => (
              <div key={t.id} onClick={() => setTab(t.id)}
                style={{ padding:"10px 20px", cursor:"pointer", fontSize:13, fontWeight:500,
                  color: tab===t.id ? C.accentL : C.muted, whiteSpace:"nowrap",
                  borderBottom: tab===t.id ? `2px solid ${C.accent}` : "2px solid transparent",
                  transition:"all .15s" }}>
                {t.label}
              </div>
            ))}
          </div>
        )}

        {/* CONȚINUT SCROLLABIL */}
        <div style={{ flex:1, overflowY:"auto", padding:"20px 24px" }}>

          {/* ── TAB DETALII ── */}
          {(tab==="info" || esteNou) && (
            <div>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, marginBottom:14 }}>
                <FormRow label="Client *">
                  <Select value={form.client_id} onChange={set("client_id")}
                    options={[{value:"",label:"Selectează client"},...clientiOpt]} />
                </FormRow>
                <FormRow label="Etapă">
                  <Select value={form.etapa} onChange={set("etapa")}
                    options={getEtape(db).map(e=>({value:e.id,label:e.label}))} />
                </FormRow>
                {user.rol==="director" && (
                  <FormRow label="Agent responsabil">
                    <Select value={form.agent_id} onChange={set("agent_id")} options={agentiOpt} />
                  </FormRow>
                )}
                <FormRow label="Valoare estimată (€)">
                  <Input value={form.val_est||""} onChange={set("val_est")} placeholder="ex: 45000" type="number" />
                </FormRow>
                <FormRow label="Valoare finală (€)">
                  <Input value={form.val_fin||""} onChange={set("val_fin")} placeholder="după semnare" type="number" />
                </FormRow>
              </div>

              {/* Valori sumar */}
              {(form.val_est || form.val_fin) && (
                <div style={{ display:"flex", gap:10, marginBottom:16 }}>
                  {form.val_est && (
                    <div style={{ background:C.accent+"11", border:`1px solid ${C.accent}33`,
                      borderRadius:8, padding:"8px 14px", flex:1, textAlign:"center" }}>
                      <div style={{ fontSize:11, color:C.muted }}>Estimat</div>
                      <div style={{ fontSize:18, fontWeight:700, color:C.accent }}>
                        € {Number(form.val_est).toLocaleString("ro-RO")}
                      </div>
                    </div>
                  )}
                  {form.val_fin && (
                    <div style={{ background:C.success+"11", border:`1px solid ${C.success}33`,
                      borderRadius:8, padding:"8px 14px", flex:1, textAlign:"center" }}>
                      <div style={{ fontSize:11, color:C.muted }}>Final</div>
                      <div style={{ fontSize:18, fontWeight:700, color:C.success }}>
                        € {Number(form.val_fin).toLocaleString("ro-RO")}
                      </div>
                    </div>
                  )}
                </div>
              )}

              <FormRow label="Descriere proiect">
                <textarea
                  value={form.descriere||""}
                  onChange={e => set("descriere")(e.target.value)}
                  placeholder="Adaugă detalii despre proiect, specificații, condiții..."
                  style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
                    padding:"10px 12px", color:C.text, fontSize:13, fontFamily:"inherit",
                    outline:"none", width:"100%", minHeight:120, boxSizing:"border-box",
                    resize:"vertical", lineHeight:1.6, transition:"border-color .15s" }}
                  onFocus={e => e.target.style.borderColor=C.accent}
                  onBlur={e => e.target.style.borderColor=C.border}
                />
              </FormRow>

              {esteNou && (
                <div style={{ display:"flex", justifyContent:"flex-end", marginTop:8 }}>
                  <div title={!form.titlu ? "⚠ Completează denumirea proiectului (câmpul de sus)" : !form.client_id ? "⚠ Selectează un client" : ""}>
                    <Btn variant="primary" onClick={salveaza} disabled={!form.titlu||!form.client_id}
                      style={{ opacity:(!form.titlu||!form.client_id)?0.5:1 }}>
                      Creează proiect
                    </Btn>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* ── TAB TASK-URI ── */}
          {tab==="taskuri" && !esteNou && (
            <div>
              {/* Task-uri viitoare */}
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
                <div style={{ fontSize:13, fontWeight:600, color:C.text }}>
                  De făcut ({taskuriViitor.length})
                </div>
                <Btn small variant="primary" onClick={() => setTaskModal(true)}>+ Task nou</Btn>
              </div>

              {taskuriViitor.length === 0 && (
                <div style={{ color:C.muted, fontSize:13, padding:"12px 0", marginBottom:16 }}>
                  Niciun task activ pentru acest proiect
                </div>
              )}
              {taskuriViitor.map(t => {
                const asignat = db.utilizatori.find(u=>u.id===t.asignat);
                const azi     = toDateStr(new Date());
                const sc      = taskStatusColor(t, azi);
                return (
                  <div key={t.id}
                    onClick={() => window._openTask && window._openTask(t)}
                    style={{ display:"flex", gap:10, alignItems:"flex-start",
                      background:C.surface, border:`1px solid ${sc.border}`,
                      borderLeft:`3px solid ${sc.culoare}`,
                      borderRadius:8, padding:"10px 12px", marginBottom:8,
                      cursor:"pointer", transition:"all .15s" }}>

                    <div style={{ width:8, height:8, borderRadius:"50%", marginTop:5, flexShrink:0,
                      background:sc.culoare }} />

                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:500, color:C.text,
                        display:"flex", alignItems:"center", gap:6 }}>
                        <span>{(getTipInfo(t.tip_activitate)||{}).icon}</span>
                        {t.titlu}
                      </div>
                      {t.descriere && (
                        <div style={{ fontSize:11, color:C.muted, marginTop:2, fontStyle:"italic",
                          overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", maxWidth:320 }}>
                          {t.descriere}
                        </div>
                      )}
                      <div style={{ display:"flex", gap:8, marginTop:4, flexWrap:"wrap", alignItems:"center" }}>
                        {asignat && <div style={{ display:"flex", alignItems:"center", gap:3 }}>
                          <Avatar name={asignat.nume} size={14} color={C.accent} />
                          <span style={{ fontSize:11, color:C.muted }}>{asignat.nume.split(" ")[0]}</span>
                        </div>}
                        {t.ora_start && <span style={{ fontSize:11, color:C.info }}>{t.ora_start}{t.ora_end?` → ${t.ora_end}`:""}</span>}
                      </div>
                    </div>

                    <div style={{ display:"flex", flexDirection:"column", alignItems:"flex-end", gap:4, flexShrink:0 }}>
                      <span style={{ fontSize:11, fontWeight:600,
                        background:sc.bg, color:sc.culoare,
                        padding:"2px 7px", borderRadius:8 }}>
                        {sc.label}
                      </span>
                      <span style={{ fontSize:11, color:C.muted }}>{t.scadenta}</span>
                    </div>
                  </div>
                );
              })}

              {/* Task-uri trecute */}
              {taskuriTrecute.length > 0 && (
                <div style={{ marginTop:24, borderTop:`1px solid ${C.border}`, paddingTop:16 }}>
                  <div style={{ fontSize:13, fontWeight:600, color:C.muted, marginBottom:12 }}>
                    Finalizate ({taskuriTrecute.length})
                  </div>
                  {taskuriTrecute.map(t => {
                    const asignat = db.utilizatori.find(u=>u.id===t.asignat);
                    const sc = taskStatusColor(t, toDateStr(new Date()));
                    return (
                      <div key={t.id}
                        onClick={() => window._openTask && window._openTask(t)}
                        style={{ display:"flex", gap:10, alignItems:"center",
                          padding:"8px 0", borderBottom:`1px solid ${C.border}15`,
                          cursor:"pointer" }}>
                        <span style={{ color:"#2472a4", fontSize:14, flexShrink:0 }}>✓</span>
                        <div style={{ flex:1, opacity:.65 }}>
                          <span style={{ fontSize:13, color:C.muted, textDecoration:"line-through" }}>
                            {(getTipInfo(t.tip_activitate)||{}).icon} {t.titlu}
                          </span>
                          {t.descriere && (
                            <div style={{ fontSize:11, color:C.muted, marginTop:2, fontStyle:"italic",
                              overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", maxWidth:300 }}>
                              {t.descriere}
                            </div>
                          )}
                        </div>
                        {asignat && <div style={{ display:"flex", alignItems:"center", gap:3 }}>
                          <Avatar name={asignat.nume} size={14} color={C.accent} />
                          <span style={{ fontSize:11, color:C.muted }}>{asignat.nume.split(" ")[0]}</span>
                        </div>}
                        <span style={{ fontSize:11, color:C.muted, flexShrink:0 }}>{t.scadenta}</span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {/* ── TAB FIȘIERE ── */}
          {tab==="fisiere" && !esteNou && (
            <div>
              {/* Header */}
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14 }}>
                <div>
                  <div style={{ fontSize:13, fontWeight:600, color:C.text }}>
                    Documente proiect ({fisiere.length})
                  </div>
                  <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>
                    PDF, Word, Excel, imagini · max 10 MB / fișier
                  </div>
                </div>
                <label style={{ display:"inline-flex", alignItems:"center", gap:6, cursor:"pointer",
                  background:C.accent, color:"#fff", borderRadius:8,
                  padding:"7px 14px", fontSize:12, fontWeight:600 }}>
                  📎 Adaugă
                  <input ref={fileInputRef} type="file" multiple
                    accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.zip"
                    onChange={handleInputChange} style={{ display:"none" }} />
                </label>
              </div>

              {/* Feedback upload */}
              {uploadProgress && (
                <div style={{ padding:"8px 12px", borderRadius:8, marginBottom:10, fontSize:12,
                  background: uploadProgress.startsWith("✓") ? C.success+"15" : C.warn+"15",
                  color: uploadProgress.startsWith("✓") ? C.success : C.warn,
                  border:`1px solid ${uploadProgress.startsWith("✓") ? C.success+"44" : C.warn+"44"}` }}>
                  {uploadProgress}
                </div>
              )}

              {/* Drop zone — când nu există fișiere */}
              {fisiere.length === 0 && (
                <div
                  onDragOver={e=>{ e.preventDefault(); setDragOver(true); }}
                  onDragLeave={()=>setDragOver(false)}
                  onDrop={handleDrop}
                  onClick={()=>fileInputRef.current && fileInputRef.current.click()}
                  style={{ border:`2px dashed ${dragOver ? C.accent : C.border}`,
                    borderRadius:12, padding:"40px 24px", textAlign:"center",
                    cursor:"pointer", transition:"all .2s",
                    background: dragOver ? C.accent+"08" : C.bg }}>
                  <div style={{ fontSize:36, marginBottom:10 }}>📂</div>
                  <div style={{ fontSize:14, fontWeight:500, color:C.text, marginBottom:4 }}>
                    Trage fișierele aici sau click pentru a selecta
                  </div>
                  <div style={{ fontSize:12, color:C.muted }}>
                    PDF · Word (.doc, .docx) · Excel (.xls, .xlsx) · Imagini (JPG, PNG) · ZIP
                  </div>
                </div>
              )}

              {/* Drop zone secundară — când există deja fișiere */}
              {fisiere.length > 0 && (
                <div
                  onDragOver={e=>{ e.preventDefault(); setDragOver(true); }}
                  onDragLeave={()=>setDragOver(false)}
                  onDrop={handleDrop}
                  style={{ border:`2px dashed ${dragOver ? C.accent : C.border+"88"}`,
                    borderRadius:10, padding:"10px", textAlign:"center",
                    marginBottom:12, cursor:"pointer", transition:"all .2s",
                    background: dragOver ? C.accent+"08" : "transparent", fontSize:12, color:C.muted }}
                  onClick={()=>fileInputRef.current && fileInputRef.current.click()}>
                  {dragOver ? "Dă drumul pentru a încărca..." : "+ Trage fișiere noi aici"}
                </div>
              )}

              {/* Lista fișiere */}
              {fisiere.map(f => {
                const { icon, col } = getFileIcon(f.tip, f.nume);
                return (
                  <div key={f.id} style={{ display:"flex", alignItems:"center", gap:12,
                    background:C.surface, border:`1px solid ${C.border}`, borderRadius:10,
                    padding:"10px 14px", marginBottom:8, transition:"border-color .15s" }}
                    onMouseEnter={e=>e.currentTarget.style.borderColor=col+"55"}
                    onMouseLeave={e=>e.currentTarget.style.borderColor=C.border}>

                    {/* Iconiță tip fișier */}
                    <div style={{ width:40, height:40, borderRadius:8, flexShrink:0,
                      background:col+"15", display:"flex", alignItems:"center",
                      justifyContent:"center", fontSize:20, border:`1px solid ${col}33` }}>
                      {icon}
                    </div>

                    {/* Detalii fișier */}
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:13, fontWeight:500, color:C.text,
                        overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}
                        title={f.nume}>
                        {f.nume}
                      </div>
                      <div style={{ fontSize:11, color:C.muted, marginTop:2, display:"flex", gap:8 }}>
                        <span>{formatBytes(f.marime)}</span>
                        <span>·</span>
                        <span>{new Date(f.data).toLocaleDateString("ro-RO")}</span>
                      </div>
                    </div>

                    {/* Acțiuni */}
                    <div style={{ display:"flex", gap:6, flexShrink:0 }}>
                      {(f.base64 || f.url) && (
                        <button onClick={()=>descarcaFisier(f)}
                          style={{ fontSize:11, padding:"5px 10px", borderRadius:6, cursor:"pointer",
                            background:C.accent+"18", color:C.accentL,
                            border:`1px solid ${C.accent}33`, fontFamily:"inherit" }}>
                          ⬇ Descarcă
                        </button>
                      )}
                      <button onClick={()=>stergeFisier(f.id)}
                        style={{ fontSize:11, padding:"5px 10px", borderRadius:6, cursor:"pointer",
                          background:C.danger+"11", color:C.danger,
                          border:`1px solid ${C.danger}33`, fontFamily:"inherit" }}>
                        ✕
                      </button>
                    </div>
                  </div>
                );
              })}

              {/* Total & nota */}
              {fisiere.length > 0 && (
                <div style={{ fontSize:11, color:C.muted, marginTop:10, textAlign:"center",
                  padding:"8px", background:C.bg, borderRadius:8 }}>
                  {fisiere.length} fișier{fisiere.length>1?"e":""} ·{" "}
                  {formatBytes(fisiere.reduce((s,f)=>s+f.marime,0))} total ·{" "}
                  <span style={{color:C.accent}}>Apasă Salvează pentru a păstra modificările</span>
                </div>
              )}

              {/* Confirmare ștergere fișier */}
              {confirmFisier && (
                <ConfirmModal
                  titlu="Șterge document"
                  mesaj={`Ești sigur că vrei să ștergi "${confirmFisier.nume}"? Documentul nu va mai putea fi recuperat.`}
                  labelConfirm="🗑 Șterge"
                  onConfirm={()=>{
                    setFisiere(prev=>prev.filter(f=>f.id!==confirmFisier.id));
                    setConfirmFisier(null);
                  }}
                  onCancel={()=>setConfirmFisier(null)} />
              )}
            </div>
          )}
        </div>
      </div>

      {/* Sub-modal task nou */}
      {taskModal && (
        <TaskModal
          db={db} user={user}
          task={{ proiect_id: proiect && proiect.id, client_id: (proiect && proiect.client_id),
            scadenta: toDateStr(new Date()),
            ora_start:"09:00", ora_end:"09:15" }}
          onSave={t => {
            // Salvăm task-ul în db prin onSave al proiectului nu e posibil direct,
            // deci delegăm prin window event (simplificat)
            if (window._addTask) window._addTask(t);
            setTaskModal(false);
          }}
          onDelete={() => {}}
          onClose={() => setTaskModal(false)} />
      )}
    </div>
  );
}

// ─── TASKURI ─────────────────────────────────────────────────────────────────
const ORE_START = 7;
const ORE_END   = 21;
const PX_PE_ORA = 64;

function getZileSaptamana(dataRef) {
  const d = new Date(dataRef);
  const zi = d.getDay(); // 0=Sun
  const luni = new Date(d);
  luni.setDate(d.getDate() - ((zi+6)%7)); // Monday
  return Array.from({length:7}, (_,i)=>{ const x=new Date(luni); x.setDate(luni.getDate()+i); return x; });
}
function toDateStr(d) {
  // Folosim data locală (nu UTC) pentru a evita décalajul de fus orar
  const y = d.getFullYear();
  const m = String(d.getMonth()+1).padStart(2,"0");
  const z = String(d.getDate()).padStart(2,"0");
  return `${y}-${m}-${z}`;
}
function formatZi(d) { return d.toLocaleDateString("ro-RO",{weekday:"short"}); }
function formatLuna(d) { return d.toLocaleDateString("ro-RO",{month:"long", year:"numeric"}); }
function oraToPixel(ora, min=0) { return (ora - ORE_START + min/60) * PX_PE_ORA; }
function pixelToOra(px) { return ORE_START + px / PX_PE_ORA; }

function Taskuri({ db, user, update }) {
  const azi = toDateStr(new Date());
  const [vizualizare, setVizualizare] = useState("calendar");
  const [saptamana, setSaptamana] = useState(new Date());
  const [modal, setModal] = useState(null);
  const [hover, setHover] = useState(null);
  const [filtruAgent, setFiltruAgent] = useState("toti");
  const sortareTaskuri = useSortare("scadenta");

  const zile = getZileSaptamana(saptamana);
  const agenti = db.utilizatori.filter(u => u.rol === "agent" && u.activ !== false);
  const agentSelectat = filtruAgent !== "toti" ? db.utilizatori.find(u => u.id === filtruAgent) : null;

  const vizibile = db.taskuri.filter(t => {
    if (user.rol === "agent") return t.asignat === user.id;
    if (filtruAgent !== "toti") return t.asignat === filtruAgent;
    return true;
  });

  function toggleStatus(t) {
    const s = t.status==="finalizat" ? "de_facut" : "finalizat";
    update(d=>({...d, taskuri:d.taskuri.map(x=>x.id===t.id?{...x,status:s}:x)}));
  }
  function salveaza(form) {
    if (form.id) {
      update(d=>({...d, taskuri:d.taskuri.map(x=>x.id===form.id?{...x,...form}:x)}));
    } else {
      update(d=>({...d, taskuri:[...d.taskuri,{...form,id:"t"+genId(),status:"de_facut"}]}));
    }
    setModal(null);
  }
  const [confirm, setConfirm] = useState(null);
  function sterge(id) {
    const t = db.taskuri.find(x=>x.id===id);
    setModal(null);
    setConfirm({
      titlu: "Șterge activitate",
      mesaj: `Ești sigur că vrei să ștergi activitatea "${t&&t.titlu}"? Această acțiune este ireversibilă.`,
      onConfirm: () => {
        update(d=>({...d, taskuri:d.taskuri.filter(x=>x.id!==id)}));
        setConfirm(null);
      }
    });
  }

  function handleSlotClick(data, oraFloat) {
    const ora = Math.floor(oraFloat);
    const min = oraFloat % 1 >= 0.5 ? 30 : 0;
    const oraFin = min===30 ? `${String(ora).padStart(2,"0")}:30` : `${String(ora).padStart(2,"0")}:00`;
    const oraFinEnd = min===30 ? `${String(ora+1).padStart(2,"0")}:00` : `${String(ora).padStart(2,"0")}:30`;
    setModal({ scadenta:data, ora_start:oraFin, ora_end:oraFinEnd });
  }

  const restante = vizibile.filter(t=>t.status!=="finalizat"&&t.scadenta<azi).length;

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100%", overflow:"hidden" }}>

      {/* HEADER */}
      <div style={{ padding:"16px 24px 12px", borderBottom:`1px solid ${C.border}`,
        display:"flex", alignItems:"center", justifyContent:"space-between", flexShrink:0, gap:12, flexWrap:"wrap" }}>
        <div>
          <div style={{ fontSize:18, fontWeight:700 }}>
            Task-uri
            {agentSelectat && (
              <span style={{ fontSize:13, fontWeight:400, color:C.muted, marginLeft:8 }}>
                — {agentSelectat.nume}
              </span>
            )}
          </div>
          <div style={{ display:"flex", gap:8, marginTop:5 }}>
            {restante>0 && <Badge label={`${restante} restante`} color={C.danger} />}
            <Badge label={`${vizibile.filter(t=>t.status!=="finalizat"&&t.scadenta===azi).length} azi`} color={C.warn} />
            <Badge label={`${vizibile.filter(t=>t.status==="finalizat").length} finalizate`} color={C.success} />
          </div>
        </div>

        <div style={{ display:"flex", gap:10, alignItems:"center", flexWrap:"wrap" }}>

          {/* FILTRU AGENT — doar pentru director */}
          {user.rol === "director" && (
            <div style={{ display:"flex", alignItems:"center", gap:6 }}>
              <span style={{ fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>Agent:</span>
              <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`,
                borderRadius:10, overflow:"hidden" }}>
                {/* Toți */}
                <div onClick={() => setFiltruAgent("toti")}
                  style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 14px",
                    cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                    background: filtruAgent==="toti" ? C.accent : "transparent",
                    color: filtruAgent==="toti" ? "#fff" : C.muted,
                    borderRight:`1px solid ${C.border}` }}>
                  <span style={{ fontSize:13 }}>⊞</span> Toți
                </div>
                {/* Butoane per agent */}
                {agenti.map(a => {
                  const activ    = filtruAgent === a.id;
                  const initials = a.nume.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
                  const nrAzi    = db.taskuri.filter(t=>t.asignat===a.id&&t.status!=="finalizat"&&t.scadenta===azi).length;
                  return (
                    <div key={a.id} onClick={() => setFiltruAgent(a.id)} title={a.nume}
                      style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 12px",
                        cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                        background: activ ? C.accent+"22" : "transparent",
                        color: activ ? C.accentL : C.muted,
                        borderRight:`1px solid ${C.border}33`,
                        borderBottom: activ ? `2px solid ${C.accent}` : "2px solid transparent" }}>
                      <div style={{ width:20, height:20, borderRadius:"50%", flexShrink:0,
                        background: activ ? C.accent : C.accent+"33",
                        color: activ ? "#fff" : C.accent,
                        display:"flex", alignItems:"center", justifyContent:"center",
                        fontSize:9, fontWeight:700 }}>
                        {initials}
                      </div>
                      <span style={{ whiteSpace:"nowrap" }}>{a.nume.split(" ")[0]}</span>
                      {nrAzi > 0 && (
                        <span style={{ fontSize:10, background:C.warn+"22", color:C.warn,
                          padding:"1px 5px", borderRadius:8, fontWeight:700 }}>
                          {nrAzi}
                        </span>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Toggle vizualizare */}
          <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`,
            borderRadius:8, overflow:"hidden" }}>
            {[["calendar","⊟ Calendar"],["lista","≡ Listă"]].map(([v,l])=>(
              <div key={v} onClick={()=>setVizualizare(v)}
                style={{ padding:"6px 14px", fontSize:12, cursor:"pointer", fontWeight:500,
                  background: vizualizare===v ? C.accent : "transparent",
                  color: vizualizare===v ? "#fff" : C.muted, transition:"all .15s" }}>
                {l}
              </div>
            ))}
          </div>
          <Btn variant="primary" onClick={()=>setModal({})}>+ Task nou</Btn>
        </div>
      </div>

      {/* CALENDAR */}
      {vizualizare==="calendar" && (
        <div style={{ flex:1, overflow:"hidden", display:"flex", flexDirection:"column" }}>

          {/* Navigare săptămână */}
          <div style={{ display:"flex", alignItems:"center", gap:12, padding:"10px 24px",
            borderBottom:`1px solid ${C.border}`, flexShrink:0 }}>
            <Btn small onClick={()=>{ const d=new Date(saptamana); d.setDate(d.getDate()-7); setSaptamana(d); }}>← Înapoi</Btn>
            <div style={{ flex:1, textAlign:"center", fontSize:13, fontWeight:600, color:C.text, textTransform:"capitalize" }}>
              {formatLuna(zile[0])} — {zile[0].getDate()}–{zile[6].getDate()}
            </div>
            <Btn small onClick={()=>setSaptamana(new Date())}>Azi</Btn>
            <Btn small onClick={()=>{ const d=new Date(saptamana); d.setDate(d.getDate()+7); setSaptamana(d); }}>Înainte →</Btn>
          </div>

          {/* Grid calendar */}
          <div style={{ flex:1, overflowY:"auto", overflowX:"hidden" }}>
            <div style={{ display:"flex", minWidth:0 }}>

              {/* Coloana ore */}
              <div style={{ width:52, flexShrink:0, borderRight:`1px solid ${C.border}` }}>
                <div style={{ height:40 }} /> {/* header spacer */}
                {Array.from({length: ORE_END - ORE_START}, (_,i)=>(
                  <div key={i} style={{ height:PX_PE_ORA, borderTop:`1px solid ${C.border}22`,
                    display:"flex", alignItems:"flex-start", paddingTop:3, justifyContent:"flex-end",
                    paddingRight:8 }}>
                    <span style={{ fontSize:11, color:C.muted }}>{String(ORE_START+i).padStart(2,"0")}:00</span>
                  </div>
                ))}
              </div>

              {/* Coloane zile */}
              {zile.map((zi, ziIdx)=>{
                const dataStr = toDateStr(zi);
                const eAzi = dataStr === azi;
                // Toate task-urile zilei
                const taskuriZiAll = vizibile.filter(t => t.scadenta === dataStr);
                // Cu oră — afișate în grid
                const taskuriZi = taskuriZiAll.filter(t => t.ora_start);
                // Fără oră — afișate ca bandă în top
                const taskuriFaraOra = taskuriZiAll.filter(t => !t.ora_start);

                return (
                  <div key={ziIdx} style={{ flex:1, minWidth:0, borderRight:`1px solid ${C.border}22`,
                    display:"flex", flexDirection:"column" }}>

                    {/* Header zi */}
                    <div style={{ borderBottom:`1px solid ${C.border}`, display:"flex",
                      flexDirection:"column", flexShrink:0,
                      background: eAzi ? C.accent+"08" : "transparent" }}>
                      {/* Zia + număr */}
                      <div style={{ height:36, display:"flex", alignItems:"center",
                        justifyContent:"center", gap:6 }}>
                        <span style={{ fontSize:11, color:C.muted, textTransform:"capitalize" }}>
                          {formatZi(zi)}
                        </span>
                        <div style={{ width:22, height:22, borderRadius:"50%", display:"flex",
                          alignItems:"center", justifyContent:"center", fontSize:12, fontWeight:700,
                          background: eAzi ? C.accent : "transparent",
                          color: eAzi ? "#fff" : C.text }}>
                          {zi.getDate()}
                        </div>
                      </div>
                      {/* Task-uri fără oră — sub numărul zilei */}
                      {taskuriFaraOra.length > 0 && (
                        <div style={{ padding:"2px 3px 4px" }}>
                          {taskuriFaraOra.slice(0, 2).map(t => {
                            const sc = taskStatusColor(t, azi);
                            return (
                              <div key={t.id}
                                onClick={e=>{ e.stopPropagation(); window._openTask && window._openTask(t); }}
                                style={{ height:18, marginBottom:2, borderRadius:3,
                                  background:sc.bg, border:`1px solid ${sc.border}`,
                                  padding:"1px 5px", cursor:"pointer", overflow:"hidden",
                                  display:"flex", alignItems:"center", gap:3 }}>
                                <div style={{ width:5, height:5, borderRadius:"50%",
                                  flexShrink:0, background:sc.culoare }} />
                                <span style={{ fontSize:9, color:sc.culoare, whiteSpace:"nowrap",
                                  overflow:"hidden", textOverflow:"ellipsis" }}>
                                  {t.titlu}
                                </span>
                              </div>
                            );
                          })}
                          {taskuriFaraOra.length > 2 && (
                            <div style={{ fontSize:9, color:C.muted, textAlign:"center",
                              padding:"1px 0" }}>
                              +{taskuriFaraOra.length - 2}
                            </div>
                          )}
                        </div>
                      )}
                    </div>

                    {/* Sloturi orare */}
                    <div style={{ position:"relative", height:(ORE_END-ORE_START)*PX_PE_ORA }}
                      onClick={e=>{
                        const rect = e.currentTarget.getBoundingClientRect();
                        const py = e.clientY - rect.top;
                        handleSlotClick(dataStr, pixelToOra(py));
                      }}>

                      {/* Linii ore */}
                      {Array.from({length: ORE_END-ORE_START}, (_,i)=>(
                        <div key={i} style={{ position:"absolute", top:i*PX_PE_ORA, left:0, right:0,
                          borderTop:`1px solid ${C.border}22`, height:PX_PE_ORA }}>
                          <div style={{ position:"absolute", top:"50%", left:0, right:0,
                            borderTop:`1px dashed ${C.border}15` }} />
                        </div>
                      ))}

                      {/* Linie "acum" */}
                      {eAzi && (() => {
                        const now = new Date();
                        const oraAcum = now.getHours() + now.getMinutes()/60;
                        if (oraAcum < ORE_START || oraAcum > ORE_END) return null;
                        return (
                          <div style={{ position:"absolute", left:0, right:0, top:oraToPixel(oraAcum),
                            borderTop:`2px solid ${C.danger}`, zIndex:10, pointerEvents:"none" }}>
                            <div style={{ position:"absolute", left:-4, top:-4, width:8, height:8,
                              borderRadius:"50%", background:C.danger }} />
                          </div>
                        );
                      })()}

                      {/* Task-uri cu ore */}
                      {taskuriZi.map(t=>{
                        const [oh,om] = (t.ora_start||"09:00").split(":").map(Number);
                        const [eh,em] = (t.ora_end||"10:00").split(":").map(Number);
                        const top = oraToPixel(oh, om);
                        const dur = (eh*60+em - (oh*60+om));
                        const height = Math.max((dur/60)*PX_PE_ORA, 22);
                        const done = t.status==="finalizat";
                        const sc   = taskStatusColor(t, azi);
                        const col  = sc.culoare;
                        const client = db.clienti.find(c=>c.id===t.client_id);
                        return (
                          <div key={t.id}
                            onClick={e=>{ e.stopPropagation(); setModal(t); }}
                            onMouseEnter={()=>setHover(t.id)}
                            onMouseLeave={()=>setHover(null)}
                            style={{ position:"absolute", left:2, right:2, top,
                              height, borderRadius:6, background: sc.bg,
                              border:`1.5px solid ${sc.border}`,
                              borderLeft:`3px solid ${col}`,
                              padding:"3px 6px", cursor:"pointer", overflow:"hidden", zIndex:2,
                              boxShadow: hover===t.id ? `0 0 0 2px ${col}55` : "none",
                              transition:"box-shadow .15s" }}>
                            <div style={{ fontSize:11, fontWeight:600, color: col,
                              whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis",
                              textDecoration: done?"line-through":"none" }}>
                              {(getTipInfo(t.tip_activitate)||{}).icon} {t.titlu}
                            </div>
                            {height > 30 && (
                              <div style={{ fontSize:10, color:col+"cc", marginTop:1,
                                overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                                {t.ora_start} → {t.ora_end}{client?` · ${client.denumire}`:""}
                              </div>
                            )}
                            {height > 52 && t.descriere && (
                              <div style={{ fontSize:10, color:col+"99", marginTop:2,
                                overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                                {t.descriere}
                              </div>
                            )}
                          </div>
                        );
                      })}

                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {/* LISTA */}
      {vizualizare==="lista" && (
        <div style={{ flex:1, overflowY:"auto", padding:"16px 24px" }}>
          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, overflow:"hidden" }}>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
              <thead>
                <tr style={{ borderBottom:`1px solid ${C.border}` }}>
                  <th style={{ width:36, padding:"10px 12px" }}></th>
                  <SortableHeader label="Task"       campId="titlu"      sortare={sortareTaskuri} />
                  <SortableHeader label="Client"     campId="client"     sortare={sortareTaskuri} />
                  <SortableHeader label="Asignat"    campId="asignat"    sortare={sortareTaskuri} />
                  <SortableHeader label="Tip" campId="prioritate" sortare={sortareTaskuri} />
                  <SortableHeader label="Scadență"   campId="scadenta"   sortare={sortareTaskuri} />
                  <SortableHeader label="Oră"        campId="ora_start"  sortare={sortareTaskuri} />
                  <SortableHeader label="Status"     campId="status"     sortare={sortareTaskuri} />
                </tr>
              </thead>
              <tbody>
                {sortArr(vizibile, sortareTaskuri.col, sortareTaskuri.dir, (t, col) => {
                  if (col==="titlu")      return t.titlu || "";
                  if (col==="client")     return (db.clienti.find(c=>c.id===t.client_id)||{}).denumire || "";
                  if (col==="asignat")    return (db.utilizatori.find(u=>u.id===t.asignat)||{}).nume || "";
                  if (col==="prioritate") return (t.tip_activitate||"task");
                  if (col==="scadenta")   return t.scadenta || "";
                  if (col==="ora_start")  return t.ora_start || "";
                  if (col==="status")     return t.status || "";
                  return "";
                }).map((t, i, arr) => {
                  const client  = db.clienti.find(c=>c.id===t.client_id);
                  const asignat = db.utilizatori.find(u=>u.id===t.asignat);
                  const done    = t.status==="finalizat";
                  const sc      = taskStatusColor(t, azi);
                  return (
                    <tr key={t.id}
                      onClick={()=>setModal(t)}
                      style={{ borderBottom: i<arr.length-1 ? `1px solid ${C.border}22` : "none",
                        cursor:"pointer", transition:"background .1s",
                        borderLeft: `3px solid ${sc.culoare}` }}
                      onMouseEnter={e=>e.currentTarget.style.background=C.surface}
                      onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                      <td style={{ padding:"10px 12px" }}>
                        <div style={{ width:8, height:8, borderRadius:"50%",
                          background:sc.culoare, margin:"0 auto" }} />
                      </td>
                      <td style={{ padding:"10px 14px" }}>
                        <div style={{ fontWeight:500, color:done?C.muted:C.text,
                          textDecoration:done?"line-through":"none" }}>{t.titlu}</div>
                        {t.descriere && (
                          <div style={{ fontSize:11, color:C.muted, marginTop:3,
                            overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap",
                            maxWidth:260 }}>
                            {t.descriere}
                          </div>
                        )}
                      </td>
                      <td style={{ padding:"10px 14px", color:C.muted, fontSize:12 }}>
                        {(client && client.denumire) || "—"}
                      </td>
                      <td style={{ padding:"10px 14px" }}>
                        {asignat && <div style={{ display:"flex", alignItems:"center", gap:6 }}>
                          <Avatar name={asignat.nume} size={18} color={C.accent} />
                          <span style={{ fontSize:12, color:C.muted }}>{asignat.nume.split(" ")[0]}</span>
                        </div>}
                      </td>
                      <td style={{ padding:"10px 14px" }}>
                        <div style={{ display:"flex", alignItems:"center", gap:5 }}>
                          <div style={{ width:7, height:7, borderRadius:"50%",
                            background:(getTipInfo(t.tip_activitate)||{}).culoare||C.muted }} />
                          <span style={{ fontSize:12, color:C.muted }}>
                            {(getTipInfo(t.tip_activitate)||{}).icon} {(getTipInfo(t.tip_activitate)||{}).label}
                          </span>
                        </div>
                      </td>
                      <td style={{ padding:"10px 14px", fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>
                        {t.scadenta || "—"}
                      </td>
                      <td style={{ padding:"10px 14px", fontSize:12, color:C.info, whiteSpace:"nowrap" }}>
                        {t.ora_start ? `${t.ora_start}${t.ora_end?` → ${t.ora_end}`:""}` : "—"}
                      </td>
                      <td style={{ padding:"10px 14px" }}>
                        <span style={{ fontSize:11, padding:"2px 8px", borderRadius:8, fontWeight:600,
                          background: sc.bg, color: sc.culoare, border:`1px solid ${sc.border}` }}>
                          {sc.label}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {vizibile.length===0 && <div style={{ padding:24, color:C.muted, textAlign:"center", fontSize:13 }}>Niciun task</div>}
          </div>
        </div>
      )}

      {modal!==null && <TaskModal db={db} user={user}
        task={modal && Object.keys(modal).length ? modal : null}
        onSave={salveaza} onDelete={sterge} onClose={()=>setModal(null)} />}

      {confirm && (
        <ConfirmModal
          titlu={confirm.titlu}
          mesaj={confirm.mesaj}
          labelConfirm="🗑 Șterge definitiv"
          onConfirm={confirm.onConfirm}
          onCancel={()=>setConfirm(null)} />
      )}
    </div>
  );
}

// ─── STATUS CULOARE TASK ────────────────────────────────────────────────────
// Returnează { label, culoare, bg, border } în funcție de status + dată
// Normalizează orice format de dată la YYYY-MM-DD pentru comparații corecte
function normDate(s) {
  if (!s) return "";
  s = String(s).trim();
  if (s.match(/^\d{4}-\d{2}-\d{2}/)) return s.slice(0,10); // deja ISO
  if (s.match(/^\d{1,2}\/\d{1,2}\/\d{4}/)) {
    const [m,d,y] = s.split("/"); // M/D/YYYY
    return `${y}-${String(m).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
  }
  if (s.match(/^\d{1,2}\.\d{1,2}\.\d{4}/)) {
    const [d,m,y] = s.split("."); // D.M.YYYY
    return `${y}-${String(m).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
  }
  // Conține spațiu → dată+oră combinate, ia doar data
  const part = s.split(" ")[0];
  return normDate(part);
}

function taskStatusColor(t, azi) {
  const done    = t.status === "finalizat";
  const scad    = normDate(t.scadenta);
  const aziNorm = normDate(azi);
  const ieri    = scad < aziNorm;
  const astazi  = scad === aziNorm;

  if (done)    return { label:"Realizat",  culoare:"#2472a4", bg:"#2472a4"+"18", border:"#2472a4"+"44" };
  if (astazi)  return { label:"Azi",        culoare:"#1a8c5b", bg:"#1a8c5b"+"15", border:"#1a8c5b"+"44" };
  if (ieri)    return { label:"Restant",    culoare:"#c0392b", bg:"#c0392b"+"15", border:"#c0392b"+"44" };
               return { label:"Planificat", culoare:"#6b7a99", bg:"#6b7a9915",    border:"#6b7a9940"      };
}

// ─── STATUS CULOARE PROIECT ──────────────────────────────────────────────────
// Calculează culoarea bordura cardului de proiect în funcție de activitățile sale
function proiectStatusColor(proiectId, taskuri) {
  const azi   = toDateStr(new Date());
  const maine = toDateStr(new Date(Date.now() + 86400000));

  const tProiect = taskuri.filter(t => t.proiect_id === proiectId);

  const areRestante = tProiect.some(t => t.status !== "finalizat" && normDate(t.scadenta) < azi);
  if (areRestante) return { culoare:"#c0392b", bg:"#c0392b0f", label:"Restant" };

  const areAzi = tProiect.some(t => t.status !== "finalizat" && normDate(t.scadenta) === azi);
  if (areAzi) return { culoare:"#1a8c5b", bg:"#1a8c5b0f", label:"Azi" };

  const areViitor = tProiect.some(t => t.status !== "finalizat" && normDate(t.scadenta) >= maine);
  if (areViitor) return { culoare:"#6b7a99", bg:"#6b7a990f", label:"Planificat" };

  return { culoare:"#c97b00", bg:"#c97b000f", label:"Fără activitate" };
}

// ─── TIPURI ACTIVITATE ───────────────────────────────────────────────────────
const TIPURI_ACTIVITATE = [
  { id:"apel",      label:"Apel telefonic", icon:"📞", culoare:"#4fa8f0" },
  { id:"email",     label:"E-mail",         icon:"✉️",  culoare:"#8b85ff" },
  { id:"intalnire", label:"Întâlnire",      icon:"🤝",  culoare:"#22c98a" },
  { id:"task",      label:"Task",           icon:"✓",   culoare:"#f0a500" },
];

function getTipInfo(id) {
  return TIPURI_ACTIVITATE.find(t=>t.id===id) || TIPURI_ACTIVITATE[3];
}

function TaskModal({ db, user, task, onSave, onDelete, onClose }) {

  // Determină agentul implicit: din proiect > din client > userul curent
  function agentImplicit() {
    if (task && task.proiect_id) {
      const pr = db.proiecte.find(p=>p.id===task.proiect_id);
      if ((pr && pr.agent_id)) return pr.agent_id;
    }
    if (task && task.client_id) {
      const cl = db.clienti.find(c=>c.id===task.client_id);
      if ((cl && cl.agent_id)) return cl.agent_id;
    }
    return user.id;
  }

  const [form, setForm] = useState({
    titlu:"", asignat: agentImplicit(), client_id:"", proiect_id:"",
    tip_activitate:"task",
    scadenta: toDateStr(new Date()),
    ora_start:"09:00", ora_end:"09:15",
    ...(task || {}),
    // dacă task vine cu asignat deja setat (ex: din ProiectModal), păstrăm cel calculat
    asignat: (task && task.asignat) || agentImplicit(),
  });
  const set = k => v => setForm(f=>({...f,[k]:v}));

  function setOraStart(val) {
    const [h, m] = val.split(":").map(Number);
    const endTot = h * 60 + m + 15;
    const endH = String(Math.floor(endTot / 60) % 24).padStart(2, "0");
    const endM = String(endTot % 60).padStart(2, "0");
    setForm(f => ({ ...f, ora_start: val, ora_end: `${endH}:${endM}` }));
  }

  const esteAgent = user.rol === "agent";
  const utilizatoriOpt = db.utilizatori
    .filter(u => esteAgent ? u.id === user.id : true)
    .map(u=>({value:u.id, label:`${u.nume} (${ROL_LABEL[u.rol]})`}));

  const clientiOpt = [{value:"",label:"Neasociat"}, ...db.clienti
    .filter(c => esteAgent ? c.agent_id === user.id : true)
    .map(c=>({value:c.id,label:c.denumire}))];
  const proiecteOpt = [{value:"",label:"Neasociat"}, ...db.proiecte
    .filter(p => {
      if (esteAgent && p.agent_id !== user.id) return false;
      if (form.client_id && p.client_id !== form.client_id) return false;
      return true;
    })
    .map(p=>({value:p.id,label:p.titlu}))];

  const oreOpt = Array.from({length:(ORE_END - ORE_START)*4}, (_,i)=>{
    const tot = ORE_START * 60 + i * 15;
    const h = String(Math.floor(tot / 60)).padStart(2, "0");
    const m = String(tot % 60).padStart(2, "0");
    return { value:`${h}:${m}`, label:`${h}:${m}` };
  });

  // Data minimă = azi, pentru ca input[type=date] să deschidă pe luna curentă
  const azi = toDateStr(new Date());
  const tipCurent = getTipInfo(form.tip_activitate);

  return (
    <Modal title={task && task.id ? "Editare activitate" : "Activitate nouă"} onClose={onClose}>

      {/* Selector tip activitate — ca butoane vizuale */}
      <div style={{ marginBottom:14 }}>
        <div style={{ fontSize:12, color:C.muted, marginBottom:8, fontWeight:500 }}>
          Tip activitate *
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8 }}>
          {TIPURI_ACTIVITATE.map(tip => {
            const activ = form.tip_activitate === tip.id;
            return (
              <div key={tip.id} onClick={() => set("tip_activitate")(tip.id)}
                style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:5,
                  padding:"10px 8px", borderRadius:10, cursor:"pointer", transition:"all .15s",
                  background: activ ? tip.culoare+"22" : C.surface,
                  border: `1.5px solid ${activ ? tip.culoare : C.border}` }}>
                <span style={{ fontSize:20 }}>{tip.icon}</span>
                <span style={{ fontSize:11, fontWeight:600,
                  color: activ ? tip.culoare : C.muted }}>
                  {tip.label}
                </span>
              </div>
            );
          })}
        </div>
      </div>

      <FormRow label="Titlu *">
        <Input value={form.titlu} onChange={set("titlu")}
          placeholder={`ex: ${tipCurent.icon} ${tipCurent.label} — denumire client`} />
      </FormRow>

      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>

        {/* Asignat */}
        <FormRow label="Asignat la">
          {esteAgent ? (
            <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
              padding:"8px 12px", fontSize:13,
              display:"flex", alignItems:"center", gap:8 }}>
              <Avatar name={user.nume} size={18} color={C.accent} />
              <span style={{ color:C.text }}>{user.nume}</span>
              <span style={{ fontSize:11, color:C.muted }}>(eu)</span>
            </div>
          ) : (
            <Select value={form.asignat} onChange={set("asignat")} options={utilizatoriOpt} />
          )}
        </FormRow>

        {/* Data — input nativ cu luna curentă */}
        <FormRow label="Dată">
          <input
            type="date"
            value={form.scadenta}
            min={azi}
            onChange={e => set("scadenta")(e.target.value)}
            style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
              padding:"8px 12px", color:C.text, fontSize:13, fontFamily:"inherit",
              outline:"none", width:"100%", boxSizing:"border-box",
              colorScheme:"light" }}
          />
        </FormRow>

        <FormRow label="Client">
          <Select value={form.client_id} onChange={set("client_id")} options={clientiOpt} />
        </FormRow>
        <FormRow label="Proiect">
          <Select value={form.proiect_id||""} onChange={set("proiect_id")} options={proiecteOpt} />
        </FormRow>

        <FormRow label="Oră început">
          <Select value={form.ora_start||"09:00"} onChange={setOraStart} options={oreOpt} />
        </FormRow>
        <FormRow label="Oră sfârșit">
          <Select value={form.ora_end||"09:15"} onChange={set("ora_end")} options={oreOpt} />
        </FormRow>
      </div>

      {/* Descriere / Note */}
      <div style={{ marginTop:4 }}>
        <div style={{ fontSize:12, color:C.muted, marginBottom:6, fontWeight:500 }}>
          Descriere / Note
        </div>
        <textarea
          value={form.descriere||""}
          onChange={e => set("descriere")(e.target.value)}
          placeholder="Adaugă detalii, note sau observații despre această activitate..."
          style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
            padding:"9px 12px", color:C.text, fontSize:13, fontFamily:"inherit",
            outline:"none", width:"100%", minHeight:90, boxSizing:"border-box",
            resize:"vertical", lineHeight:1.6, transition:"border-color .15s" }}
          onFocus={e => e.target.style.borderColor=C.accent}
          onBlur={e => e.target.style.borderColor=C.border}
        />
      </div>

      {/* Buton Marchează ca Realizat — vizibil doar la editare */}
      {task && task.id && (() => {
        const done = form.status === "finalizat";
        const sc   = taskStatusColor(form, toDateStr(new Date()));
        return (
          <div style={{ marginTop:14, padding:"12px 14px",
            background: done ? "#2472a411" : sc.bg,
            border:`1px solid ${done ? "#2472a444" : sc.border}`,
            borderRadius:10, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
            <div style={{ display:"flex", alignItems:"center", gap:10 }}>
              <div style={{ width:22, height:22, borderRadius:6,
                border:`2px solid ${done ? "#2472a4" : sc.culoare}`,
                background: done ? "#2472a4" : "transparent",
                display:"flex", alignItems:"center", justifyContent:"center",
                color:"#fff", fontSize:13, flexShrink:0 }}>
                {done && "✓"}
              </div>
              <div>
                <div style={{ fontSize:13, fontWeight:600,
                  color: done ? "#2472a4" : sc.culoare }}>
                  {done ? "Activitate realizată" : sc.label}
                </div>
                <div style={{ fontSize:11, color:C.muted, marginTop:1 }}>
                  {done ? "Click pentru a anula marcarea" : "Marchează după finalizarea activității"}
                </div>
              </div>
            </div>
            <button
              onClick={() => set("status")(done ? "de_facut" : "finalizat")}
              style={{ padding:"7px 16px", borderRadius:8, border:"none", cursor:"pointer",
                fontWeight:600, fontSize:12, fontFamily:"inherit", transition:"all .15s",
                background: done ? "#4fa8f0"+"22" : sc.culoare,
                color: done ? "#4fa8f0" : "#fff" }}>
              {done ? "✕ Anulează" : "✓ Marchează realizat"}
            </button>
          </div>
        );
      })()}

      <div style={{ display:"flex", justifyContent:"space-between", marginTop:12 }}>
        <div>
          {task && task.id && <Btn variant="danger" small onClick={()=>onDelete(task.id)}>🗑 Șterge</Btn>}
        </div>
        <div style={{ display:"flex", gap:8 }}>
          <Btn onClick={onClose}>Anulare</Btn>
          <Btn variant="primary" onClick={()=>onSave(form)} disabled={!form.titlu}>Salvează</Btn>
        </div>
      </div>
    </Modal>
  );
}

// ─── RAPOARTE ────────────────────────────────────────────────────────────────
function Rapoarte({ db }) {
  const { clienti, proiecte, taskuri, utilizatori } = db;
  const [filtruAgent, setFiltruAgent] = useState("toti");
  const azi = toDateStr(new Date());

  const agenti = utilizatori.filter(u => u.rol === "agent" && u.activ !== false);
  const agentSelectat = filtruAgent !== "toti" ? utilizatori.find(u => u.id === filtruAgent) : null;

  // Filtrare date după agent
  const proiecteFiltrate = filtruAgent === "toti"
    ? proiecte
    : proiecte.filter(p => p.agent_id === filtruAgent);

  const clientiFiltrati = filtruAgent === "toti"
    ? clienti
    : clienti.filter(c => c.agent_id === filtruAgent);

  const taskuriFiltrate = filtruAgent === "toti"
    ? taskuri
    : taskuri.filter(t => t.asignat === filtruAgent);

  const castigate = proiecteFiltrate.filter(p => isEtapaFinala(db, p.etapa));
  const active    = proiecteFiltrate.filter(p => !isEtapaInchisa(db, p.etapa));

  // ── Export CSV ──────────────────────────────────────────────────────────────
  function toCSV(rows, headers) {
    const escape = v => {
      const s = String(v || "").replace(/"/g, '""');
      return s.includes(",") || s.includes("\n") || s.includes('"') ? `"${s}"` : s;
    };
    const lines = [
      headers.map(escape).join(","),
      ...rows.map(row => headers.map(h => escape(row[h])).join(",")),
    ];
    return lines.join("\n");
  }

  function downloadCSV(content, filename) {
    const bom  = "\uFEFF"; // UTF-8 BOM pentru Excel cu diacritice
    const blob = new Blob([bom + content], { type: "text/csv;charset=utf-8;" });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement("a");
    a.href     = url;
    a.download = filename;
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 150);
  }

  function exportClienti() {
    const listaClienti = clientiFiltrati;
    const contacte     = db.contacte || [];
    const rows = listaClienti.map(c => {
      const agent    = utilizatori.find(u => u.id === c.agent_id);
      const ctPrinc  = contacte.find(ct => ct.client_id === c.id && ct.principal)
                    || contacte.find(ct => ct.client_id === c.id);
      const toateCtc = contacte.filter(ct => ct.client_id === c.id);
      const prAct    = proiecte.filter(p => p.client_id === c.id && !isEtapaInchisa(db, p.etapa)).length;
      const valCast  = proiecte.filter(p => p.client_id === c.id && isEtapaFinala(db, p.etapa))
                       .reduce((s, p) => s + (p.val_fin || 0), 0);
      return {
        "Denumire":              c.denumire,
        "Tip":                   c.tip === "juridica" ? "Persoană juridică" : "Persoană fizică",
        "CUI / CNP":             c.cui || "",
        "Oraș":                  c.oras || "",
        "Județ":                 c.judet || "",
        "Adresă":                c.adresa || "",
        "Website":               c.website || "",
        "Agent responsabil":     (agent && agent.nume) || "",
        "Contact principal":     ctPrinc ? `${ctPrinc.prenume} ${ctPrinc.nume}` : "",
        "Funcție contact":       (ctPrinc && ctPrinc.functie) || "",
        "Email contact":         (ctPrinc && ctPrinc.email) || "",
        "Telefon contact":       (ctPrinc && ctPrinc.telefon) || "",
        "Nr. contacte totale":   toateCtc.length,
        "Proiecte active":       prAct,
        "Valoare câștigată (€)": valCast,
      };
    });
    if (rows.length === 0) { alert("Nu există clienți de exportat pentru filtrul selectat."); return; }
    const headers = Object.keys(rows[0]);
    const suffix  = agentSelectat ? `_${agentSelectat.nume.split(" ")[0]}` : "_toti";
    downloadCSV(toCSV(rows, headers), `clienti${suffix}_${azi}.csv`);
  }

  function exportProiecte() {
    const rows = proiecteFiltrate.map(p => {
      const client  = clienti.find(c => c.id === p.client_id);
      const agent   = utilizatori.find(u => u.id === p.agent_id);
      const etapa   = (db.etape_pipeline || []).find(e => e.id === p.etapa);
      const nrTask  = taskuri.filter(t => t.proiect_id === p.id).length;
      const nrDone  = taskuri.filter(t => t.proiect_id === p.id && t.status === "finalizat").length;
      return {
        "Titlu proiect":          p.titlu,
        "Client":                 (client && client.denumire) || "",
        "Localitate client":      (client && client.oras) || "",
        "Agent":                  (agent && agent.nume) || "",
        "Etapă":                  (etapa && etapa.label) || p.etapa,
        "Valoare estimată (€)":   p.val_est || "",
        "Valoare finală (€)":     p.val_fin || "",
        "Descriere":              p.descriere || "",
        "Dată închidere":         p.data_inchidere ? new Date(p.data_inchidere).toLocaleDateString("ro-RO") : "",
        "Nr. activități totale":  nrTask,
        "Nr. activități finalizate": nrDone,
        "Arhivat":                proiectEsteArhivat(p, db) ? "Da" : "Nu",
      };
    });
    if (rows.length === 0) { alert("Nu există proiecte de exportat pentru filtrul selectat."); return; }
    const headers = Object.keys(rows[0]);
    const suffix  = agentSelectat ? `_${agentSelectat.nume.split(" ")[0]}` : "_toate";
    downloadCSV(toCSV(rows, headers), `proiecte${suffix}_${azi}.csv`);
  }

  function exportContacte() {
    const contacteFiltrate = filtruAgent === "toti"
      ? (db.contacte || [])
      : (db.contacte || []).filter(ct => {
          const client = clienti.find(c => c.id === ct.client_id);
          return client && client.agent_id === filtruAgent;
        });
    const rows = contacteFiltrate.map(ct => {
      const client = clienti.find(c => c.id === ct.client_id);
      const agent  = client ? utilizatori.find(u => u.id === client.agent_id) : null;
      return {
        "Prenume":           ct.prenume || "",
        "Nume":              ct.nume || "",
        "Funcție":           ct.functie || "",
        "Telefon":           ct.telefon || "",
        "Email":             ct.email || "",
        "Client asociat":    (client && client.denumire) || "",
        "Agent responsabil": (agent && agent.nume) || "",
        "Contact principal": ct.principal ? "Da" : "Nu",
      };
    });
    if (rows.length === 0) { alert("Nu există contacte de exportat."); return; }
    const headers = Object.keys(rows[0]);
    const suffix  = agentSelectat ? `_${agentSelectat.nume.split(" ")[0]}` : "_toate";
    downloadCSV(toCSV(rows, headers), `contacte${suffix}_${azi}.csv`);
  }

  function exportActivitati() {
    const taskuriFiltrate2 = filtruAgent === "toti"
      ? taskuri
      : taskuri.filter(t => t.asignat === filtruAgent);
    const rows = taskuriFiltrate2.map(t => {
      const client  = clienti.find(c => c.id === t.client_id);
      const proiect = proiecte.find(p => p.id === t.proiect_id);
      const agent   = utilizatori.find(u => u.id === t.asignat);
      const tipInfo = getTipInfo(t.tip_activitate);
      return {
        "Denumire activitate":   t.titlu || "",
        "Tip activitate":        (tipInfo && tipInfo.label) || t.tip_activitate || "",
        "Status":                t.status === "finalizat" ? "Realizat" : "De făcut",
        "Client asociat":        (client && client.denumire) || "",
        "Proiect asociat":       (proiect && proiect.titlu) || "",
        "Dată":                  t.scadenta || "",
        "Oră start":             t.ora_start || "",
        "Oră sfârșit":           t.ora_end || "",
        "Descriere":             t.descriere || "",
        "Agent responsabil":     (agent && agent.nume) || "",
      };
    });
    if (rows.length === 0) { alert("Nu există activități de exportat."); return; }
    const headers = Object.keys(rows[0]);
    const suffix  = agentSelectat ? `_${agentSelectat.nume.split(" ")[0]}` : "_toate";
    downloadCSV(toCSV(rows, headers), `activitati${suffix}_${azi}.csv`);
  }

  // Statistici per agent (pentru modul "toți")
  const agentiStats = agenti.map(a => {
    const proprii   = proiecte.filter(p => p.agent_id === a.id);
    const castig    = proprii.filter(p => isEtapaFinala(db, p.etapa));
    const incheiate = proprii.filter(p => isEtapaInchisa(db, p.etapa));
    return {
      ...a,
      nr: proprii.length,
      valoare: castig.reduce((s, p) => s + (p.val_fin || 0), 0),
      conversie: incheiate.length ? Math.round(castig.length / incheiate.length * 100) : 0,
    };
  });

  const peEtape = getEtape(db).map(e => ({
    etapa: e.id, label: e.label, culoare: e.culoare,
    nr:  proiecteFiltrate.filter(p => p.etapa === e.id).length,
    val: proiecteFiltrate.filter(p => p.etapa === e.id).reduce((s, p) => s + (p.val_est || 0), 0),
  }));

  const maxVal = Math.max(...agentiStats.map(a => a.valoare), 1);

  return (
    <div style={{ padding:"16px 14px" }}>

      {/* HEADER + FILTRU */}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:24 }}>
        <div>
          <div style={{ fontSize:20, fontWeight:700 }}>
            Rapoarte vânzări
            {agentSelectat && (
              <span style={{ fontSize:14, fontWeight:400, color:C.muted, marginLeft:10 }}>
                — {agentSelectat.nume}
              </span>
            )}
          </div>
          <div style={{ fontSize:12, color:C.muted, marginTop:4 }}>
            {filtruAgent === "toti" ? "Vizualizare consolidată — toată echipa" : "Vizualizare individuală"}
          </div>
        </div>

        {/* Filtru agent — același design ca în Dashboard și Pipeline */}
        <div style={{ display:"flex", alignItems:"center", gap:10, flexWrap:"wrap", justifyContent:"flex-end" }}>

          {/* Butoane export */}
          <div style={{ display:"flex", gap:8, flexWrap:"wrap" }}>
            <button onClick={exportClienti}
              title="Descarcă lista clienți (CSV)"
              style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                background:C.success+"22", color:C.success, border:`1px solid ${C.success}44`,
                borderRadius:8, cursor:"pointer", fontSize:12, fontWeight:600, fontFamily:"inherit",
                transition:"all .15s" }}
              onMouseEnter={e=>e.currentTarget.style.background=C.success+"33"}
              onMouseLeave={e=>e.currentTarget.style.background=C.success+"22"}>
              ⬇ Clienți.csv
            </button>
            <button onClick={exportContacte}
              title="Descarcă lista contacte (CSV)"
              style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                background:C.info+"22", color:C.info, border:`1px solid ${C.info}44`,
                borderRadius:8, cursor:"pointer", fontSize:12, fontWeight:600, fontFamily:"inherit",
                transition:"all .15s" }}
              onMouseEnter={e=>e.currentTarget.style.background=C.info+"33"}
              onMouseLeave={e=>e.currentTarget.style.background=C.info+"22"}>
              ⬇ Contacte.csv
            </button>
            <button onClick={exportProiecte}
              title="Descarcă toate proiectele (CSV)"
              style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                background:C.accent+"22", color:C.accentL, border:`1px solid ${C.accent}44`,
                borderRadius:8, cursor:"pointer", fontSize:12, fontWeight:600, fontFamily:"inherit",
                transition:"all .15s" }}
              onMouseEnter={e=>e.currentTarget.style.background=C.accent+"33"}
              onMouseLeave={e=>e.currentTarget.style.background=C.accent+"22"}>
              ⬇ Proiecte.csv
            </button>
            <button onClick={exportActivitati}
              title="Descarcă toate activitățile/task-urile (CSV)"
              style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                background:C.warn+"22", color:C.warn, border:`1px solid ${C.warn}44`,
                borderRadius:8, cursor:"pointer", fontSize:12, fontWeight:600, fontFamily:"inherit",
                transition:"all .15s" }}
              onMouseEnter={e=>e.currentTarget.style.background=C.warn+"33"}
              onMouseLeave={e=>e.currentTarget.style.background=C.warn+"22"}>
              ⬇ Activități.csv
            </button>
          </div>

          <div style={{ width:"1px", height:28, background:C.border }} />

          <span style={{ fontSize:12, color:C.muted, whiteSpace:"nowrap" }}>Agent:</span>
          <div style={{ display:"flex", background:C.surface, border:`1px solid ${C.border}`,
            borderRadius:10, overflow:"hidden" }}>

            {/* Toți */}
            <div onClick={() => setFiltruAgent("toti")}
              style={{ display:"flex", alignItems:"center", gap:6, padding:"7px 14px",
                cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                background: filtruAgent==="toti" ? C.accent : "transparent",
                color: filtruAgent==="toti" ? "#fff" : C.muted,
                borderRight:`1px solid ${C.border}` }}>
              <span style={{ fontSize:13 }}>⊞</span> Toți
            </div>

            {agenti.map(a => {
              const activ    = filtruAgent === a.id;
              const initials = a.nume.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
              const nrActive = proiecte.filter(p => p.agent_id === a.id && !isEtapaInchisa(db, p.etapa)).length;
              return (
                <div key={a.id} onClick={() => setFiltruAgent(a.id)} title={a.nume}
                  style={{ display:"flex", alignItems:"center", gap:7, padding:"7px 14px",
                    cursor:"pointer", fontSize:12, fontWeight:500, transition:"all .15s",
                    background: activ ? C.accent+"22" : "transparent",
                    color: activ ? C.accentL : C.muted,
                    borderRight:`1px solid ${C.border}33`,
                    borderBottom: activ ? `2px solid ${C.accent}` : "2px solid transparent" }}>
                  <div style={{ width:22, height:22, borderRadius:"50%", flexShrink:0,
                    background: activ ? C.accent : C.accent+"33",
                    color: activ ? "#fff" : C.accent,
                    display:"flex", alignItems:"center", justifyContent:"center",
                    fontSize:9, fontWeight:700 }}>
                    {initials}
                  </div>
                  <span style={{ whiteSpace:"nowrap" }}>{a.nume.split(" ")[0]} {(a.nume.split(" ")[1] && a.nume.split(" ")[1][0])}.</span>
                  <span style={{ fontSize:10, background:C.surface, color:C.muted,
                    padding:"1px 6px", borderRadius:8, border:`1px solid ${C.border}` }}>
                    {nrActive}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* METRICI PRINCIPALE */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:24 }}>
        {[
          { label:"Clienți",           val: clientiFiltrati.length },
          { label:"Proiecte câștigate", val: castigate.length,                                               col:C.success },
          { label:"Valoare câștigată",  val:`€ ${castigate.reduce((s,p)=>s+(p.val_fin||0),0).toLocaleString("ro-RO")}`, col:C.success },
          { label:"Pipeline activ",     val:`€ ${active.reduce((s,p)=>s+(p.val_est||0),0).toLocaleString("ro-RO")}`,    col:C.accent  },
        ].map(m=>(
          <div key={m.label} style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:"16px 18px" }}>
            <div style={{ fontSize:12, color:C.muted, marginBottom:6 }}>{m.label}</div>
            <div style={{ fontSize:22, fontWeight:700, color:m.col||C.text }}>{m.val}</div>
          </div>
        ))}
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:16 }}>

        {/* Performanță agenți — afișat doar în modul "Toți" */}
        {filtruAgent === "toti" ? (
          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
            <div style={{ fontWeight:600, marginBottom:16, fontSize:14 }}>Performanță agenți</div>
            {agentiStats.map(a => (
              <div key={a.id} style={{ marginBottom:16, cursor:"pointer" }}
                onClick={() => setFiltruAgent(a.id)}>
                <div style={{ display:"flex", justifyContent:"space-between", marginBottom:6 }}>
                  <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                    <Avatar name={a.nume} size={26} color={C.accent} />
                    <div>
                      <div style={{ fontSize:13, fontWeight:500 }}>{a.nume}</div>
                      <div style={{ fontSize:11, color:C.muted }}>{a.nr} proiecte · conversie {a.conversie}%</div>
                    </div>
                  </div>
                  <div style={{ fontSize:13, fontWeight:600, color:C.success }}>
                    € {a.valoare.toLocaleString("ro-RO")}
                  </div>
                </div>
                <div style={{ height:6, background:C.surface, borderRadius:3 }}>
                  <div style={{ height:6, borderRadius:3, background:C.accent,
                    width:`${Math.round(a.valoare/maxVal*100)}%`, transition:"width .3s" }} />
                </div>
              </div>
            ))}
            <div style={{ fontSize:11, color:C.muted, marginTop:4 }}>Click pe agent pentru vizualizare individuală</div>
          </div>
        ) : (
          /* Detalii agent individual */
          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
            <div style={{ fontWeight:600, marginBottom:16, fontSize:14 }}>Detalii agent</div>
            {agentSelectat && (() => {
              const stat = agentiStats.find(a => a.id === agentSelectat.id);
              return (
                <div>
                  <div style={{ display:"flex", alignItems:"center", gap:12, marginBottom:16 }}>
                    <Avatar name={agentSelectat.nume} size={44} color={C.accent} />
                    <div>
                      <div style={{ fontSize:16, fontWeight:700, color:C.text }}>{agentSelectat.nume}</div>
                      <div style={{ fontSize:12, color:C.muted, marginTop:2 }}>Agent vânzări</div>
                    </div>
                  </div>
                  <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
                    {[
                      { label:"Proiecte totale", val:(stat && stat.nr)||0 },
                      { label:"Rată conversie",  val:`${(stat && stat.conversie)||0}%`, col:C.success },
                      { label:"Val. câștigată",  val:`€ ${((stat && stat.valoare)||0).toLocaleString("ro-RO")}`, col:C.success },
                      { label:"Pipeline activ",  val:`€ ${active.reduce((s,p)=>s+(p.val_est||0),0).toLocaleString("ro-RO")}`, col:C.accent },
                    ].map(m=>(
                      <div key={m.label} style={{ background:C.surface, borderRadius:8, padding:"10px 14px" }}>
                        <div style={{ fontSize:11, color:C.muted, marginBottom:4 }}>{m.label}</div>
                        <div style={{ fontSize:18, fontWeight:700, color:m.col||C.text }}>{m.val}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })()}
          </div>
        )}

        {/* Distribuție pipeline */}
        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
          <div style={{ fontWeight:600, marginBottom:16, fontSize:14 }}>
            Distribuție pipeline{agentSelectat ? ` — ${agentSelectat.nume.split(" ")[0]}` : ""}
          </div>
          {peEtape.map(e=>{
            const col = e.culoare || C.muted;
            const total = proiecteFiltrate.length;
            return (
              <div key={e.etapa} style={{ display:"flex", alignItems:"center", gap:12, marginBottom:10 }}>
                <span style={{ background:col+"22", color:col, fontSize:11, padding:"2px 8px",
                  borderRadius:10, minWidth:90, textAlign:"center", fontWeight:600 }}>
                  {e.label}
                </span>
                <div style={{ flex:1, height:6, background:C.surface, borderRadius:3 }}>
                  <div style={{ height:6, borderRadius:3, background:col,
                    width:`${total ? Math.round(e.nr/total*100) : 0}%`, transition:"width .3s" }} />
                </div>
                <span style={{ fontSize:12, color:C.muted, minWidth:24, textAlign:"right" }}>{e.nr}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* Rezumat task-uri */}
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
        <div style={{ fontWeight:600, marginBottom:14, fontSize:14 }}>
          Rezumat activități{agentSelectat ? ` — ${agentSelectat.nume.split(" ")[0]}` : ""}
        </div>
        <div style={{ display:"flex", gap:16, flexWrap:"wrap" }}>
          {[
            { label:"De făcut",  val:taskuriFiltrate.filter(t=>t.status==="de_facut").length,                                    col:C.info    },
            { label:"Finalizate",val:taskuriFiltrate.filter(t=>t.status==="finalizat").length,                                   col:C.success },
            { label:"Restante",  val:taskuriFiltrate.filter(t=>t.status!=="finalizat"&&t.scadenta<azi).length,                   col:C.danger  },
            { label:"Azi",       val:taskuriFiltrate.filter(t=>t.status!=="finalizat"&&t.scadenta===azi).length,                  col:C.warn    },
          ].map(s=>(
            <div key={s.label} style={{ background:C.surface, borderRadius:10, padding:"12px 20px", flex:1,
              textAlign:"center", minWidth:100 }}>
              <div style={{ fontSize:28, fontWeight:700, color:s.col }}>{s.val}</div>
              <div style={{ fontSize:12, color:C.muted, marginTop:4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── SCHIMBĂ PAROLĂ ──────────────────────────────────────────────────────────
function SchimbaParola({ user, update }) {
  const [form, setForm] = useState({ veche:"", noua:"", confirma:"" });
  const [mesaj, setMesaj] = useState(null); // { tip:"ok"|"err", text }

  function handleSubmit() {
    setMesaj(null);
    if (!form.veche)    { setMesaj({ tip:"err", text:"Introdu parola actuală." }); return; }
    if (!form.noua)     { setMesaj({ tip:"err", text:"Introdu parola nouă." }); return; }
    if (form.noua.length < 6) { setMesaj({ tip:"err", text:"Parola nouă trebuie să aibă minim 6 caractere." }); return; }
    if (form.noua !== form.confirma) { setMesaj({ tip:"err", text:"Parolele noi nu coincid." }); return; }
    if (form.veche !== user.parola) { setMesaj({ tip:"err", text:"Parola actuală este incorectă." }); return; }

    update(d => ({
      ...d,
      utilizatori: d.utilizatori.map(u =>
        u.id === user.id ? { ...u, parola: form.noua } : u
      )
    }));
    // Actualizează și obiectul user din sesiune (prin window dacă există callback)
    setForm({ veche:"", noua:"", confirma:"" });
    setMesaj({ tip:"ok", text:"Parola a fost schimbată cu succes!" });
  }

  const rolColor = { director: C.warn, agent: C.accent };

  return (
    <div style={{ maxWidth:480 }}>
      {/* Profil utilizator */}
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12,
        padding:20, marginBottom:16, display:"flex", alignItems:"center", gap:16 }}>
        <Avatar name={user.nume} size={52} color={rolColor[user.rol]||C.accent} />
        <div>
          <div style={{ fontSize:16, fontWeight:700, color:C.text }}>{user.nume}</div>
          <div style={{ fontSize:13, color:C.muted, marginTop:2 }}>{user.email}</div>
          <span style={{ fontSize:11, background:C.accent+"18", color:C.accent,
            padding:"2px 8px", borderRadius:8, fontWeight:600, display:"inline-block", marginTop:6 }}>
            {user.rol === "director" ? "Director Vânzări" : "Agent Vânzări"}
          </span>
        </div>
      </div>

      {/* Formular schimbare parolă */}
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
        <div style={{ fontWeight:600, fontSize:14, marginBottom:16 }}>Schimbă parola</div>

        <FormRow label="Parola actuală">
          <input
            type="password"
            value={form.veche}
            onChange={e=>setForm(f=>({...f, veche:e.target.value}))}
            placeholder="Introdu parola actuală"
            style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
              padding:"8px 12px", color:C.text, fontSize:13, fontFamily:"inherit",
              outline:"none", width:"100%", boxSizing:"border-box" }}
          />
        </FormRow>

        <FormRow label="Parola nouă">
          <input
            type="password"
            value={form.noua}
            onChange={e=>setForm(f=>({...f, noua:e.target.value}))}
            placeholder="Minim 6 caractere"
            style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8,
              padding:"8px 12px", color:C.text, fontSize:13, fontFamily:"inherit",
              outline:"none", width:"100%", boxSizing:"border-box" }}
          />
        </FormRow>

        <FormRow label="Confirmă parola nouă">
          <input
            type="password"
            value={form.confirma}
            onChange={e=>setForm(f=>({...f, confirma:e.target.value}))}
            placeholder="Repetă parola nouă"
            onKeyDown={e=>e.key==="Enter"&&handleSubmit()}
            style={{ background:C.surface,
              border:`1px solid ${form.confirma && form.noua !== form.confirma ? C.danger : C.border}`,
              borderRadius:8, padding:"8px 12px", color:C.text, fontSize:13,
              fontFamily:"inherit", outline:"none", width:"100%", boxSizing:"border-box" }}
          />
        </FormRow>

        {/* Mesaj feedback */}
        {mesaj && (
          <div style={{ padding:"10px 14px", borderRadius:8, marginBottom:14, fontSize:13,
            background: mesaj.tip==="ok" ? C.success+"15" : C.danger+"12",
            color: mesaj.tip==="ok" ? C.success : C.danger,
            border:`1px solid ${mesaj.tip==="ok" ? C.success+"44" : C.danger+"33"}` }}>
            {mesaj.tip==="ok" ? "✓ " : "⚠ "}{mesaj.text}
          </div>
        )}

        <div style={{ display:"flex", justifyContent:"flex-end" }}>
          <Btn variant="primary" onClick={handleSubmit}>Salvează parola nouă</Btn>
        </div>
      </div>
    </div>
  );
}

function EditUtilizatorModal({ utilizator, onSave, onClose }) {
  const [form, setForm] = useState({
    nume:  utilizator.nume || "",
    email: utilizator.email || "",
  });
  const [err, setErr] = useState("");

  function handleSave() {
    if (!form.nume.trim())  { setErr("Numele este obligatoriu."); return; }
    if (!form.email.trim()) { setErr("Email-ul este obligatoriu."); return; }
    if (!form.email.includes("@")) { setErr("Adresa de email nu este validă."); return; }
    onSave(form);
  }

  return (
    <Modal title="Editare utilizator" onClose={onClose}>
      <div style={{ display:"flex", alignItems:"center", gap:12, marginBottom:20,
        padding:"12px 14px", background:C.bg, borderRadius:10 }}>
        <Avatar name={utilizator.nume} size={40} color={utilizator.rol==="director"?C.warn:C.accent} />
        <div>
          <div style={{ fontSize:13, fontWeight:600, color:C.text }}>{utilizator.nume}</div>
          <div style={{ fontSize:12, color:C.muted }}>{ROL_LABEL[utilizator.rol]}</div>
        </div>
      </div>

      <FormRow label="Nume complet *">
        <Input value={form.nume} onChange={v=>setForm(f=>({...f,nume:v}))}
          placeholder="ex: Ion Popescu" />
      </FormRow>

      <FormRow label="Adresă email *">
        <Input value={form.email} onChange={v=>{ setForm(f=>({...f,email:v})); setErr(""); }}
          placeholder="email@electra.ro" type="email" />
      </FormRow>

      {err && (
        <div style={{ padding:"8px 12px", borderRadius:8, marginBottom:12, fontSize:12,
          background:C.danger+"12", color:C.danger, border:`1px solid ${C.danger}33` }}>
          ⚠ {err}
        </div>
      )}

      <div style={{ display:"flex", justifyContent:"flex-end", gap:8, marginTop:8 }}>
        <Btn onClick={onClose}>Anulare</Btn>
        <Btn variant="primary" onClick={handleSave}>Salvează</Btn>
      </div>
    </Modal>
  );
}

function ResetParolaButonn({ utilizator: u, update }) {
  const [show, setShow] = useState(false);
  const [noua, setNoua] = useState("");
  const [ok, setOk]     = useState(false);

  function salveaza() {
    if (noua.length < 6) return;
    update(d => ({ ...d, utilizatori: d.utilizatori.map(x =>
      x.id === u.id ? { ...x, parola: noua, parola_temp:undefined, reset_cerut:false } : x
    )}));
    setOk(true);
    setTimeout(() => { setShow(false); setOk(false); setNoua(""); }, 1500);
  }

  if (!show) return (
    <Btn small onClick={()=>setShow(true)}>🔑 Reset parolă</Btn>
  );
  if (ok) return <span style={{ fontSize:12, color:C.success }}>✓ Salvat</span>;
  return (
    <div style={{ display:"flex", gap:6, alignItems:"center" }}>
      <input
        type="text"
        value={noua}
        onChange={e=>setNoua(e.target.value)}
        placeholder="Parolă nouă (min 6)"
        style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:6,
          padding:"4px 8px", fontSize:12, fontFamily:"inherit", outline:"none", width:140 }}
      />
      <Btn small variant="primary" onClick={salveaza} disabled={noua.length < 6}>✓</Btn>
      <Btn small onClick={()=>{ setShow(false); setNoua(""); }}>✕</Btn>
    </div>
  );
}

// ─── SETĂRI ──────────────────────────────────────────────────────────────────
const CULORI_PRESET = ["#f0a500","#4fa8f0","#8b85ff","#22c98a","#f04f4f","#e879a0","#34d6b0","#ff7043","#ab84ff","#64b5f6"];

function Setari({ db, user, update }) {
  const [modal, setModal] = useState(false);
  const [actModal, setActModal] = useState(false);
  const [sectiune, setSectiune] = useState("cont");

  function adaugaUtilizator(form) {
    update(d=>({...d, utilizatori:[...d.utilizatori,{...form,id:"u"+genId(),activ:true}]}));
    setModal(false);
  }
  function toggleActiv(uid) {
    update(d=>({...d, utilizatori:d.utilizatori.map(u=>u.id===uid?{...u,activ:!u.activ}:u)}));
  }
  function salveazaUtilizator(uid, form) {
    update(d=>({ ...d, utilizatori: d.utilizatori.map(u =>
      u.id === uid ? { ...u, nume: form.nume.trim(), email: form.email.trim().toLowerCase() } : u
    )}));
    setEditUtil(null);
  }
  const [editUtil, setEditUtil] = useState(null); // utilizator obiect de editat
  function stergeUtilizator(uid) {
    const u = db.utilizatori.find(x=>x.id===uid);
    setConfirmUtil({
      titlu: "Șterge utilizator",
      mesaj: `Ești sigur că vrei să ștergi utilizatorul "${u&&u.nume}"?\n\nAtenție: clienții, proiectele și activitățile asignate acestuia vor rămâne în sistem fără agent responsabil.`,
      onConfirm: () => {
        update(d=>({ ...d, utilizatori: d.utilizatori.filter(x=>x.id!==uid) }));
        setConfirmUtil(null);
      }
    });
  }
  const [confirmUtil, setConfirmUtil] = useState(null);
  function adaugaActivitate(form) {
    update(d=>({...d, activitati:[...d.activitati,{...form,id:"a"+genId(),utilizator_id:user.id,data:new Date().toISOString()}]}));
    setActModal(false);
  }

  const rolColor = { director:C.warn, agent:C.accent };

  // Tab-uri vizibile în funcție de rol
  const sectiuni = [
    { id:"cont",       label:"Contul meu" },
    ...(user.rol === "director" ? [
      { id:"utilizatori", label:"Utilizatori" },
      { id:"pipeline",    label:"Etape pipeline" },
      { id:"notificari",  label:"📧 Notificări email" },
      { id:"activitati",  label:"Activități" },
      { id:"import",      label:"⬆ Import date" },
    ] : []),
  ];

  return (
    <div style={{ padding:"16px 14px" }}>
      <div style={{ fontSize:20, fontWeight:700, marginBottom:20 }}>Setări</div>

      {/* Tab-uri sectiuni */}
      <div style={{ display:"flex", gap:4, marginBottom:20, borderBottom:`1px solid ${C.border}`, paddingBottom:0 }}>
        {sectiuni.map(s=>(
          <div key={s.id} onClick={()=>setSectiune(s.id)}
            style={{ padding:"8px 16px", cursor:"pointer", fontSize:13, fontWeight:500,
              color: sectiune===s.id ? C.accentL : C.muted,
              borderBottom: sectiune===s.id ? `2px solid ${C.accent}` : "2px solid transparent",
              marginBottom:-1, transition:"all .15s" }}>
            {s.label}
          </div>
        ))}
      </div>

      {/* CONTUL MEU — vizibil pentru toți utilizatorii */}
      {sectiune==="cont" && (
        <SchimbaParola user={user} update={update} />
      )}

      {/* UTILIZATORI */}
      {sectiune==="utilizatori" && (
        <div>
          {/* Cereri de reset parolă */}
          {db.utilizatori.some(u => u.reset_cerut) && (
            <div style={{ background:C.warn+"12", border:`1px solid ${C.warn}44`,
              borderRadius:12, padding:16, marginBottom:16 }}>
              <div style={{ fontWeight:600, fontSize:13, color:C.warn, marginBottom:10 }}>
                🔑 Cereri de resetare parolă ({db.utilizatori.filter(u=>u.reset_cerut).length})
              </div>
              {db.utilizatori.filter(u=>u.reset_cerut).map(u=>(
                <div key={u.id} style={{ display:"flex", alignItems:"center", gap:12,
                  background:C.card, borderRadius:8, padding:"10px 14px", marginBottom:8 }}>
                  <Avatar name={u.nume} size={28} color={rolColor[u.rol]||C.muted} />
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:500 }}>{u.nume}</div>
                    <div style={{ fontSize:11, color:C.muted }}>{u.email}</div>
                  </div>
                  <div style={{ background:C.bg, border:`1px solid ${C.border}`,
                    borderRadius:8, padding:"6px 12px", fontSize:12 }}>
                    <div style={{ fontSize:10, color:C.muted, marginBottom:2 }}>Parolă temporară:</div>
                    <div style={{ fontWeight:700, color:C.accent, letterSpacing:1 }}>
                      {u.parola_temp}
                    </div>
                  </div>
                  <div style={{ display:"flex", gap:6 }}>
                    <Btn small onClick={()=>{
                      // Setează parola_temp ca parolă curentă și marchează ca rezolvat
                      update(d=>({...d, utilizatori:d.utilizatori.map(x=>x.id===u.id
                        ? {...x, parola: u.parola_temp, parola_temp:undefined, reset_cerut:false, reset_email:undefined}
                        : x
                      )}));
                    }}>✓ Activează</Btn>
                    <Btn small variant="danger" onClick={()=>{
                      update(d=>({...d, utilizatori:d.utilizatori.map(x=>x.id===u.id
                        ? {...x, parola_temp:undefined, reset_cerut:false, reset_email:undefined}
                        : x
                      )}));
                    }}>✕ Respinge</Btn>
                  </div>
                </div>
              ))}
            </div>
          )}

          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:16 }}>
              <div style={{ fontWeight:600, fontSize:14 }}>Utilizatori ({db.utilizatori.length})</div>
              <Btn variant="primary" small onClick={()=>setModal(true)}>+ Utilizator nou</Btn>
            </div>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
              <thead>
                <tr style={{ borderBottom:`1px solid ${C.border}` }}>
                  {["Utilizator","Email","Rol","Status","Parolă",""].map(h=>(
                    <th key={h} style={{ padding:"8px 12px", textAlign:"left", fontSize:11,
                      fontWeight:600, color:C.muted, textTransform:"uppercase" }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {db.utilizatori.map(u=>(
                  <tr key={u.id} style={{ borderBottom:`1px solid ${C.border}22` }}>
                    <td style={{ padding:"12px 12px" }}>
                      <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                        <Avatar name={u.nume} size={28} color={rolColor[u.rol]||C.muted} />
                        <span style={{ fontWeight:500 }}>{u.nume}</span>
                      </div>
                    </td>
                    <td style={{ padding:"12px 12px", color:C.muted, fontSize:12 }}>{u.email}</td>
                    <td style={{ padding:"12px 12px" }}><Badge label={ROL_LABEL[u.rol]} color={rolColor[u.rol]||C.muted} /></td>
                    <td style={{ padding:"12px 12px" }}>
                      <Badge label={u.activ!==false?"Activ":"Inactiv"} color={u.activ!==false?C.success:C.danger} />
                    </td>
                    <td style={{ padding:"12px 12px", fontSize:12, color:C.muted }}>
                      {u.id === user.id ? "••••••••" : (
                        <ResetParolaButonn utilizator={u} update={update} />
                      )}
                    </td>
                    <td style={{ padding:"12px 12px" }}>
                      <div style={{ display:"flex", gap:6 }}>
                        <Btn small onClick={()=>setEditUtil(u)}>✎ Edit</Btn>
                        {u.id!==user.id && (
                          <>
                            <Btn small variant={u.activ!==false?"danger":"ghost"}
                              onClick={()=>toggleActiv(u.id)}>
                              {u.activ!==false?"Dezactivează":"Activează"}
                            </Btn>
                            <Btn small variant="danger"
                              onClick={()=>stergeUtilizator(u.id)}>
                              🗑
                            </Btn>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {confirmUtil && (
            <ConfirmModal
              titlu={confirmUtil.titlu}
              mesaj={confirmUtil.mesaj}
              labelConfirm="🗑 Șterge utilizator"
              onConfirm={confirmUtil.onConfirm}
              onCancel={()=>setConfirmUtil(null)} />
          )}

          {editUtil && (
            <EditUtilizatorModal
              utilizator={editUtil}
              onSave={(form)=>salveazaUtilizator(editUtil.id, form)}
              onClose={()=>setEditUtil(null)} />
          )}
        </div>
      )}

      {/* PIPELINE EDITOR */}
      {sectiune==="pipeline" && (
        <PipelineEditor db={db} update={update} />
      )}

      {/* NOTIFICĂRI EMAIL */}
      {sectiune==="notificari" && (
        <div style={{ maxWidth:560 }}>
          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginBottom:16 }}>
            <div style={{ fontWeight:600, fontSize:14, marginBottom:10 }}>Notificări configurate</div>

            {/* Notificări zilnice */}
            <div style={{ background:C.bg, borderRadius:10, padding:14, marginBottom:12,
              border:`1px solid ${C.success}33` }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:6 }}>
                <div style={{ width:8, height:8, borderRadius:"50%", background:C.success }} />
                <span style={{ fontSize:13, fontWeight:600, color:C.text }}>Notificări zilnice — agenți</span>
              </div>
              <div style={{ fontSize:12, color:C.muted, lineHeight:1.6 }}>
                Zilnic la <strong>08:00 (Luni–Vineri)</strong> — fiecare agent primește lista activităților proprii din ziua respectivă.
              </div>
            </div>

            {/* Raport lunar */}
            <div style={{ background:C.bg, borderRadius:10, padding:14, marginBottom:12,
              border:`1px solid ${C.accent}33` }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:6 }}>
                <div style={{ width:8, height:8, borderRadius:"50%", background:C.accent }} />
                <span style={{ fontSize:13, fontWeight:600, color:C.text }}>Raport lunar — director</span>
              </div>
              <div style={{ fontSize:12, color:C.muted, lineHeight:1.6 }}>
                În <strong>ziua 1 a fiecărei luni la 07:00</strong> — directorul primește 4 fișiere CSV cu exportul complet al bazei de date: clienți, contacte, proiecte și activități.
              </div>
            </div>

            {/* Status SMTP */}
            <div style={{ background:C.bg, borderRadius:10, padding:14, marginBottom:12,
              border:`1px solid ${C.border}` }}>
              <div style={{ fontSize:12, fontWeight:600, color:C.accent, marginBottom:10,
                textTransform:"uppercase", letterSpacing:.4 }}>Status serviciu</div>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:8 }}>
                <div style={{ width:8, height:8, borderRadius:"50%", background:C.success }} />
                <span style={{ fontSize:13, color:C.text, fontWeight:500 }}>
                  Configurat — gata de activare pe server
                </span>
              </div>
              <div style={{ fontSize:12, color:C.muted, lineHeight:1.6 }}>
                Credențialele SMTP sunt configurate. Serviciul se activează după instalarea pe VPS.
              </div>
            </div>

            {/* Configuratie SMTP */}
            <div style={{ fontSize:12, fontWeight:600, color:C.muted, textTransform:"uppercase",
              letterSpacing:.4, marginBottom:10 }}>Configurație SMTP</div>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
              <tbody>
                {[
                  ["Adresă expeditor", "crm@electra.ro",    true],
                  ["Server SMTP",      "mail.electra.ro",   true],
                  ["Port / Protocol",  "465 / SSL",         true],
                  ["Parolă SMTP",      "••••••••••••••",    true],
                ].map(([label, val, ok])=>(
                  <tr key={label} style={{ borderBottom:`1px solid ${C.border}22` }}>
                    <td style={{ padding:"10px 0", color:C.muted, width:"45%" }}>{label}</td>
                    <td style={{ padding:"10px 0" }}>
                      <span style={{ fontSize:12, fontWeight:ok?600:400,
                        color: ok ? C.success : C.muted }}>
                        {ok ? "✓ " : ""}{val}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginBottom:16 }}>
            <div style={{ fontWeight:600, fontSize:14, marginBottom:10 }}>Conținut email</div>
            <div style={{ fontSize:13, color:C.muted, lineHeight:1.7 }}>
              Fiecare agent primește un email personalizat care include:
            </div>
            <div style={{ marginTop:10, display:"flex", flexDirection:"column", gap:6 }}>
              {[
                "Numărul total de activități din ziua respectivă",
                "Lista activităților cu oră, tip, client și proiect asociat",
                "Descrierea / notele adăugate la fiecare activitate",
                "Sumar: câte întâlniri, apeluri și task-uri",
              ].map(item=>(
                <div key={item} style={{ display:"flex", gap:8, fontSize:13, color:C.text }}>
                  <span style={{ color:C.success, flexShrink:0 }}>●</span> {item}
                </div>
              ))}
            </div>
          </div>

          <div style={{ background:C.accent+"0f", border:`1px solid ${C.accent}33`,
            borderRadius:10, padding:14 }}>
            <div style={{ fontSize:13, fontWeight:600, color:C.accent, marginBottom:6 }}>
              Pașii următori pentru activare
            </div>
            <div style={{ fontSize:12, color:C.muted, lineHeight:1.8 }}>
              1. Trimite credențialele SMTP pentru <strong>crm@electra.ro</strong><br/>
              2. Serviciul <code style={{ background:C.bg, padding:"1px 5px", borderRadius:4 }}>emailNotifications.js</code> se configurează pe VPS<br/>
              3. Se testează trimiterea unui email de probă<br/>
              4. Se activează job-ul cron pentru 08:00 Luni–Vineri
            </div>
          </div>
        </div>
      )}

      {/* ACTIVITATI */}
      {sectiune==="activitati" && (
        <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:16 }}>
            <div style={{ fontWeight:600, fontSize:14 }}>Adaugă activitate manuală</div>
            <Btn small onClick={()=>setActModal(true)}>+ Activitate</Btn>
          </div>
          <div style={{ fontSize:12, color:C.muted }}>
            Înregistrează apeluri, întâlniri sau note legate de un client sau proiect.
          </div>
          <div style={{ marginTop:16 }}>
            {db.activitati.slice(-8).reverse().map(a=>{
              const u = db.utilizatori.find(x=>x.id===a.utilizator_id);
              const c = db.clienti.find(x=>x.id===a.client_id);
              return (
                <div key={a.id} style={{ display:"flex", gap:10, padding:"9px 0", borderBottom:`1px solid ${C.border}33` }}>
                  <span style={{ fontSize:14, minWidth:20 }}>
                    {{apel:"📞",email:"✉️",instalare:"🔧",nota:"📝",intalnire:"🤝",oferta:"📄",service:"⚙️"}[a.tip]||"•"}
                  </span>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, color:C.text }}>{a.descriere}</div>
                    <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>{(u && u.nume)} · {(c && c.denumire)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {sectiune==="import" && (
        <ImportDate db={db} update={update} />
      )}

      {modal && <UtilizatorModal onSave={adaugaUtilizator} onClose={()=>setModal(false)} />}
      {actModal && <ActivitateModal db={db} user={user} onSave={adaugaActivitate} onClose={()=>setActModal(false)} />}
    </div>
  );
}

// ─── IMPORT DATE ─────────────────────────────────────────────────────────────
function ImportDate({ db, update }) {
  const [tab, setTab] = useState("clienti");

  const taburi = [
    { id:"clienti",    icon:"🏢", label:"Clienți"    },
    { id:"contacte",   icon:"👤", label:"Contacte"   },
    { id:"proiecte",   icon:"📋", label:"Proiecte"   },
    { id:"activitati", icon:"📞", label:"Activități" },
  ];

  return (
    <div>
      <div style={{ display:"flex", gap:6, marginBottom:20, flexWrap:"wrap" }}>
        {taburi.map(t=>(
          <div key={t.id} onClick={()=>setTab(t.id)}
            style={{ padding:"8px 16px", borderRadius:8, cursor:"pointer", fontSize:13, fontWeight:500,
              background: tab===t.id ? C.accent+"22" : C.surface,
              color: tab===t.id ? C.accentL : C.muted,
              border: `1px solid ${tab===t.id ? C.accent+"55" : C.border}`,
              transition:"all .15s", display:"flex", alignItems:"center", gap:6 }}>
            {t.icon} {t.label}
          </div>
        ))}
      </div>
      {tab==="clienti"    && <ImportGeneric key="clienti"    tip="clienti"    db={db} update={update} />}
      {tab==="contacte"   && <ImportGeneric key="contacte"   tip="contacte"   db={db} update={update} />}
      {tab==="proiecte"   && <ImportGeneric key="proiecte"   tip="proiecte"   db={db} update={update} />}
      {tab==="activitati" && <ImportGeneric key="activitati" tip="activitati" db={db} update={update} />}
    </div>
  );
}

// ── Util: parsare fișier CSV/Excel ──────────────────────────────────────────
async function parseExcelFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = new Uint8Array(e.target.result);
        if (file.name.toLowerCase().endsWith(".csv")) {
          const text = new TextDecoder("utf-8").decode(data);
          const lines = text.split(/\r?\n/).filter(l=>l.trim());
          if (!lines.length) { reject(new Error("Fișier gol")); return; }
          const sep = lines[0].includes(";") ? ";" : ",";
          const parseLine = l => {
            const res=[]; let cur="", inQ=false;
            for(let i=0;i<l.length;i++){
              if(l[i]==='"'){ inQ=!inQ; }
              else if(l[i]===sep && !inQ){ res.push(cur.trim()); cur=""; }
              else cur+=l[i];
            }
            res.push(cur.trim()); return res;
          };
          const headers = parseLine(lines[0]).map(h=>h.replace(/^"|"$/g,"").trim());
          const rows = lines.slice(1).filter(l=>l.trim()).map(line=>{
            const vals = parseLine(line).map(v=>v.replace(/^"|"$/g,"").trim());
            const obj = {};
            headers.forEach((h,i)=>{ obj[h] = vals[i]||""; });
            return obj;
          });
          resolve({ headers, rows });
        } else {
          if (window.XLSX) {
            const wb = window.XLSX.read(data, { type:"array" });
            const ws = wb.Sheets[wb.SheetNames[0]];
            const json = window.XLSX.utils.sheet_to_json(ws, { defval:"" });
            resolve({ headers: json.length ? Object.keys(json[0]) : [], rows: json });
          } else {
            reject(new Error("Fișierele .xlsx nu sunt suportate direct. Exportați ca .csv din Excel și reimportați."));
          }
        }
      } catch(err) { reject(err); }
    };
    reader.onerror = () => reject(new Error("Eroare la citirea fișierului"));
    reader.readAsArrayBuffer(file);
  });
}

// ── Configurații import per tip ──────────────────────────────────────────────
const IMPORT_CONFIG = {
  clienti: {
    titlu: "Import Clienți",
    descriere: "Importă lista de clienți. Câmpurile obligatorii sunt marcate cu *.",
    campuri: [
      { id:"denumire",  label:"Denumire Client *", req:true  },
      { id:"adresa",    label:"Adresă"                      },
      { id:"oras",      label:"Oraș"                        },
      { id:"judet",     label:"Județ"                       },
      { id:"cui",       label:"CUI / CNP"                   },
      { id:"tip",       label:"Tip (juridica/fizica)"       },
      { id:"website",   label:"Website"                     },
      { id:"agent",     label:"Agent responsabil"           },
    ],
    sinonime: {
      denumire: ["denumire client","denumire","companie","firma","client","name","organization"],
      adresa:   ["adresa","adresă","address","strada","str"],
      oras:     ["oras","oraș","city","localitate","municipiu"],
      judet:    ["judet","județ","county","region"],
      cui:      ["cui","cif","cod fiscal","vat","cnp"],
      tip:      ["tip","type","categorie"],
      website:  ["website","web","site","url"],
      agent:    ["agent","agent responsabil","responsabil","salesperson","reprezentant","vanzator","vânzător","comercial"],
    },
    model: [
      { "Denumire Client":"SC Exemplu SRL", "Adresă":"Str. Principală 1", "Oraș":"Iași", "Județ":"Iași", "Agent responsabil":"Andrei Popa" },
      { "Denumire Client":"Ion Popescu",    "Adresă":"Bd. Unirii 10",     "Oraș":"Cluj", "Județ":"Cluj", "Agent responsabil":"Maria Ionescu" },
    ],
    exec(rows, db, mapare, optDuplicate) {
      let adaugate=0, sarite=0, actualizate=0, erori=[];
      const noi = { ...db, clienti:[...db.clienti], contacte:[...(db.contacte||[])] };
      rows.forEach((row,idx) => {
        const get = camp => row[Object.keys(mapare).find(k=>mapare[k]===camp)]||"";
        const denumire = get("denumire").trim();
        if(!denumire){ erori.push(`Rând ${idx+2}: denumire lipsă`); return; }
        const agent = (() => {
          const n = get("agent").trim();
          if (!n) return null;
          const nLow = n.toLowerCase();
          // Matching: nume complet, prenume, sau parțial
          return db.utilizatori.find(u => u.rol==="agent" && (
            u.nume.toLowerCase() === nLow ||
            u.nume.toLowerCase().includes(nLow) ||
            nLow.includes(u.nume.toLowerCase()) ||
            u.nume.toLowerCase().split(" ").some(part => part === nLow || nLow.startsWith(part))
          ));
        })();
        if (!agent && get("agent").trim()) {
          erori.push(`Rând ${idx+2}: agentul "${get("agent").trim()}" nu a fost găsit — clientul va fi fără agent responsabil`);
        }
        const existent = noi.clienti.find(c=>c.denumire.toLowerCase()===denumire.toLowerCase());
        if(existent && optDuplicate==="sarita"){ sarite++; return; }
        const obj = {
          id: (existent&&existent.id)||"c"+genId(),
          denumire,
          tip: get("tip").toLowerCase().includes("fiz") ? "fizica" : "juridica",
          adresa: get("adresa"),
          oras:   get("oras"),
          judet:  get("judet"),
          cui:    get("cui"),
          website:get("website"),
          agent_id: (agent&&agent.id) || "",
        };
        if(existent && optDuplicate==="suprascrie"){
          noi.clienti = noi.clienti.map(c=>c.id===existent.id?{...c,...obj}:c);
          actualizate++;
        } else {
          noi.clienti.push(obj); adaugate++;
        }
      });
      return { noi, adaugate, sarite, actualizate, erori };
    },
  },

  contacte: {
    titlu: "Import Contacte",
    descriere: "Importă persoane de contact asociate clienților existenți. Clientul asociat trebuie să existe deja în CRM.",
    campuri: [
      { id:"nume_prenume", label:"Nume și Prenume *", req:true },
      { id:"telefon",      label:"Număr de telefon"          },
      { id:"email",        label:"E-mail"                    },
      { id:"client",       label:"Client Asociat *",  req:true },
    ],
    sinonime: {
      nume_prenume: ["nume si prenume","nume și prenume","nume prenume","name","contact","persoana","persoană","full name"],
      telefon:      ["telefon","phone","tel","mobile","mobil","gsm","nr telefon","numar telefon"],
      email:        ["email","e-mail","mail"],
      client:       ["client","companie","firma","client asociat","organization"],
    },
    model: [
      { "Nume și Prenume":"Ion Popescu","Număr de telefon":"0742 111 222","E-mail":"ion@firma.ro","Client Asociat":"SC Exemplu SRL" },
    ],
    exec(rows, db, mapare, optDuplicate) {
      let adaugate=0, sarite=0, actualizate=0, erori=[];
      const noi = { ...db, contacte:[...(db.contacte||[])] };
      rows.forEach((row,idx) => {
        const get = camp => row[Object.keys(mapare).find(k=>mapare[k]===camp)]||"";
        const numePrenume = get("nume_prenume").trim();
        const clientNume  = get("client").trim();
        if(!numePrenume){ erori.push(`Rând ${idx+2}: nume și prenume lipsă`); return; }
        if(!clientNume){  erori.push(`Rând ${idx+2}: client asociat lipsă`); return; }
        const client = db.clienti.find(c=>c.denumire.toLowerCase()===clientNume.toLowerCase());
        if(!client){ erori.push(`Rând ${idx+2}: clientul "${clientNume}" nu există în CRM`); return; }
        // Separă numele în prenume + nume (primul cuvânt = prenume, restul = nume)
        const parts   = numePrenume.split(" ");
        const prenume = parts[0]||"";
        const nume    = parts.slice(1).join(" ")||"";
        const existent = noi.contacte.find(ct=>ct.client_id===client.id&&
          `${ct.prenume} ${ct.nume}`.toLowerCase()===numePrenume.toLowerCase());
        if(existent && optDuplicate==="sarita"){ sarite++; return; }
        const obj = {
          id:        (existent&&existent.id)||"ct"+genId(),
          client_id: client.id,
          prenume, nume,
          telefon:   get("telefon"),
          email:     get("email"),
          functie:   "",
          principal: !noi.contacte.some(ct=>ct.client_id===client.id&&ct.principal),
        };
        if(existent && optDuplicate==="suprascrie"){
          noi.contacte = noi.contacte.map(ct=>ct.id===existent.id?{...ct,...obj}:ct);
          actualizate++;
        } else {
          noi.contacte.push(obj); adaugate++;
        }
      });
      return { noi, adaugate, sarite, actualizate, erori };
    },
  },

  proiecte: {
    titlu: "Import Proiecte",
    descriere: "Importă proiecte în pipeline. Dacă clientul nu există, va fi creat automat.",
    campuri: [
      { id:"titlu",         label:"Denumire Proiect *",       req:true },
      { id:"client",        label:"Client asociat *",         req:true },
      { id:"etapa",         label:"Etapă Pipeline"                    },
      { id:"valoare_est",   label:"Valoare estimată (€)"             },
      { id:"agent",         label:"Agent responsabil"                 },
      { id:"data_estimata", label:"Dată estimată finalizare"         },
      { id:"descriere",     label:"Descriere"                         },
    ],
    sinonime: {
      titlu:        ["denumire proiect","titlu","proiect","title","name","project"],
      client:       ["client","companie","client asociat","firma"],
      etapa:        ["etapa","etapă","stage","status","faza","stadiu"],
      valoare_est:  ["valoare estimata","valoare estimată","budget","valoare","estimated"],
      agent:        ["agent","responsabil","agent responsabil"],
      data_estimata:["data estimata","data finalizare","deadline","termen","due date"],
      descriere:    ["descriere","description","obs","note","detalii"],
    },
    model: [
      { "Denumire Proiect":"Uși intrare bloc A","Client asociat":"SC Exemplu SRL","Etapă Pipeline":"Ofertă","Valoare estimată (€)":"45000","Agent responsabil":"Andrei Popa","Dată estimată":"31.12.2026" },
    ],
    exec(rows, db, mapare, optDuplicate) {
      let adaugate=0, sarite=0, actualizate=0, erori=[];
      const noi = { ...db, proiecte:[...db.proiecte], clienti:[...db.clienti] };
      const etapeDisp = db.etape_pipeline||[];
      const primeEtapa = (etapeDisp.find(e=>e.tip==="normal")||{}).id||"lead";
      rows.forEach((row,idx) => {
        const get = camp => row[Object.keys(mapare).find(k=>mapare[k]===camp)]||"";
        const titlu = get("titlu").trim();
        const clientNume = get("client").trim();
        if(!titlu){ erori.push(`Rând ${idx+2}: denumire proiect lipsă`); return; }
        let client = noi.clienti.find(c=>c.denumire.toLowerCase()===clientNume.toLowerCase());
        if(!client && clientNume){
          client = { id:"c"+genId(), denumire:clientNume, tip:"juridica", cui:"", oras:"", judet:"", adresa:"",
            agent_id:(db.utilizatori.find(u=>u.rol==="agent")||{}).id||"" };
          noi.clienti.push(client);
        }
        const etapaStr = get("etapa").toLowerCase().trim();
        const etapaGasita = etapeDisp.find(e=>e.label.toLowerCase().includes(etapaStr)||etapaStr.includes(e.label.toLowerCase()));
        const agent = (() => { const n=get("agent").toLowerCase().trim(); return n?db.utilizatori.find(u=>u.rol==="agent"&&u.nume.toLowerCase().includes(n)):null; })();
        const valEst = parseFloat(get("valoare_est").replace(/[^\d.,]/g,"").replace(",","."))||null;
        const existent = noi.proiecte.find(p=>p.titlu.toLowerCase()===titlu.toLowerCase());
        if(existent && optDuplicate==="sarita"){ sarite++; return; }
        const obj = {
          id: (existent&&existent.id)||"p"+genId(),
          titlu,
          client_id: (client&&client.id)||"",
          agent_id: (agent&&agent.id)||"",
          etapa: (etapaGasita&&etapaGasita.id)||primeEtapa,
          val_est: valEst,
          val_fin: null,
          descriere: get("descriere"),
          data_estimata: get("data_estimata"),
          data_inchidere: null,
        };
        if(existent && optDuplicate==="suprascrie"){
          noi.proiecte = noi.proiecte.map(p=>p.id===existent.id?{...p,...obj}:p);
          actualizate++;
        } else {
          noi.proiecte.push(obj); adaugate++;
        }
      });
      return { noi, adaugate, sarite, actualizate, erori };
    },
  },

  activitati: {
    titlu: "Import Activități",
    descriere: "Importă activități (task-uri) pentru agenți. Clientul și proiectul asociat trebuie să existe în CRM.",
    campuri: [
      { id:"titlu",       label:"Denumire activitate *",     req:true },
      { id:"tip",         label:"Tip activitate"                     },
      { id:"status",      label:"To do / Done"                       },
      { id:"client",      label:"Client asociat"                     },
      { id:"proiect",     label:"Proiect asociat"                    },
      { id:"data",        label:"Dată activitate"                    },
      { id:"ora_start",   label:"Oră start"                          },
      { id:"durata",      label:"Durată (minute)"                    },
      { id:"descriere",   label:"Descriere activitate"               },
      { id:"agent",       label:"Agent responsabil"                  },
    ],
    sinonime: {
      titlu:     ["denumire activitate","titlu","activitate","task","title","name"],
      tip:       ["tip","tip activitate","type","category","categorie"],
      status:    ["status","to do","done","realizat","finalizat","stare"],
      client:    ["client","companie","client asociat","firma"],
      proiect:   ["proiect","project","proiect asociat"],
      data:      ["data","dată","date","data activitate","zi"],
      ora_start: ["ora","oră","ora start","time","start","ora inceput"],
      durata:    ["durata","durată","duration","minute","timp"],
      descriere: ["descriere","description","note","obs","detalii"],
      agent:     ["agent","responsabil","agent responsabil","assigned"],
    },
    model: [
      { "Denumire activitate":"Apel follow-up","Tip activitate":"apel","To do / Done":"de_facut","Client asociat":"SC Exemplu SRL","Proiect asociat":"Uși intrare bloc A","Dată":"2026-06-15","Oră start":"10:00","Durată (min)":"30","Descriere":"Apel pentru confirmare comandă","Agent responsabil":"Andrei Popa" },
    ],
    exec(rows, db, mapare, optDuplicate) {
      let adaugate=0, sarite=0, erori=[];
      const noi = { ...db, taskuri:[...db.taskuri] };
      const tipuriValide = ["apel","email","intalnire","task"];
      rows.forEach((row,idx) => {
        const get = camp => row[Object.keys(mapare).find(k=>mapare[k]===camp)]||"";
        const titlu = get("titlu").trim();
        if(!titlu){ erori.push(`Rând ${idx+2}: denumire lipsă`); return; }
        const client = (() => { const n=get("client").trim(); return n?db.clienti.find(c=>c.denumire.toLowerCase()===n.toLowerCase()):null; })();
        const proiect = (() => { const n=get("proiect").trim(); return n?db.proiecte.find(p=>p.titlu.toLowerCase()===n.toLowerCase()):null; })();
        const agent   = (() => { const n=get("agent").toLowerCase().trim(); return n?db.utilizatori.find(u=>u.rol==="agent"&&u.nume.toLowerCase().includes(n)):null; })();
        const tipRaw  = get("tip").toLowerCase().trim();
        const tip     = tipuriValide.find(t=>tipRaw.includes(t))||"task";
        const statusRaw = get("status").toLowerCase().trim();
        const status  = (statusRaw.includes("done")||statusRaw.includes("realizat")||statusRaw.includes("finalizat")) ? "finalizat" : "de_facut";

        // Parsare dată+oră — suportă formate: "2026-05-08", "5/8/2026", "5/8/2026 11:30", "08.05.2026"
        const dataRaw = get("data").trim();
        let dataVal = "", oraExtracted = "";
        if (dataRaw) {
          // Dacă conține spațiu → data+oră combinate
          const parts = dataRaw.split(" ");
          const datePart = parts[0];
          if (parts.length >= 2) oraExtracted = parts[1];

          // Normalizare dată → YYYY-MM-DD
          if (datePart.match(/^\d{4}-\d{2}-\d{2}$/)) {
            dataVal = datePart; // deja ISO
          } else if (datePart.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)) {
            const [m,d,y] = datePart.split("/");
            dataVal = `${y}-${String(m).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
          } else if (datePart.match(/^\d{1,2}\.\d{1,2}\.\d{4}$/)) {
            const [d,m,y] = datePart.split(".");
            dataVal = `${y}-${String(m).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
          } else {
            dataVal = datePart; // fallback
          }
        }

        // Oră: preferă câmpul explicit, altfel din dată combinată
        const oraRaw = get("ora_start").trim() || oraExtracted;
        // Normalizare oră → HH:MM (suportă "11:30", "11.30", "1130")
        let oraStart = "09:00";
        if (oraRaw) {
          const oraClean = oraRaw.replace(".", ":").replace(/^(\d):/,"0$1:").trim();
          oraStart = oraClean.match(/^\d{2}:\d{2}/) ? oraClean.slice(0,5) : "09:00";
        }

        const durata  = parseInt(get("durata"))||15;
        const oraEnd  = (() => {
          const [h,m] = oraStart.split(":").map(Number);
          const tot = h*60+m+durata;
          return `${String(Math.floor(tot/60)%24).padStart(2,"0")}:${String(tot%60).padStart(2,"0")}`;
        })();
        const existent = noi.taskuri.find(t=>t.titlu.toLowerCase()===titlu.toLowerCase()&&t.scadenta===dataVal);
        if(existent && optDuplicate==="sarita"){ sarite++; return; }
        const obj = {
          id: (existent&&existent.id)||"t"+genId(),
          titlu,
          tip_activitate: tip,
          status,
          client_id: (client&&client.id)||"",
          proiect_id: (proiect&&proiect.id)||"",
          asignat: (agent&&agent.id)||"",
          creat_de: (agent&&agent.id)||"",
          scadenta: normDate(dataVal) || toDateStr(new Date()),
          ora_start: oraStart,
          ora_end:   oraEnd,
          descriere: get("descriere"),
        };
        if(existent && optDuplicate==="suprascrie"){
          noi.taskuri = noi.taskuri.map(t=>t.id===existent.id?{...t,...obj}:t);
        } else {
          noi.taskuri.push(obj); adaugate++;
        }
      });
      return { noi, adaugate, sarite, actualizate:0, erori };
    },
  },
};

// ── Componentă Import Generică ───────────────────────────────────────────────
function ImportGeneric({ tip, db, update }) {
  const cfg     = IMPORT_CONFIG[tip];
  const [faza, setFaza]     = useState("upload");
  const [headers, setHeaders] = useState([]);
  const [rows, setRows]     = useState([]);
  const [mapare, setMapare] = useState({});
  const [rezultat, setRezultat] = useState(null);
  const [eroare, setEroare] = useState("");
  const [loading, setLoading] = useState(false);
  const [optDup, setOptDup] = useState("sarita");

  async function handleFisier(f) {
    if(!f) return;
    setEroare(""); setLoading(true);
    try {
      const { headers:h, rows:r } = await parseExcelFile(f);
      setHeaders(h); setRows(r);
      // Auto-mapare
      const autoMap = {};
      h.forEach(col => {
        const colLow = col.toLowerCase().trim();
        for(const [camp, sin] of Object.entries(cfg.sinonime)) {
          if(sin.some(s=>colLow.includes(s)||s.includes(colLow))) {
            if(!Object.values(autoMap).includes(camp)) { autoMap[col]=camp; break; }
          }
        }
      });
      setMapare(autoMap);
      setFaza("mapare");
    } catch(err) { setEroare(err.message); }
    finally { setLoading(false); }
  }

  function execImport() {
    const { noi, adaugate, sarite, actualizate, erori } = cfg.exec(rows, db, mapare, optDup);
    update(()=>noi);
    setRezultat({ adaugate, sarite, actualizate:actualizate||0, erori, total:rows.length });
    setFaza("rezultat");
  }

  function reset() {
    setFaza("upload"); setHeaders([]); setRows([]); setMapare({}); setRezultat(null); setEroare("");
  }

  const campuriOpt = [
    { value:"", label:"— Ignoră —" },
    ...cfg.campuri.map(c=>({ value:c.id, label:c.label }))
  ];

  // Download model CSV
  function downloadModel() {
    if(!cfg.model || !cfg.model.length) return;
    const headers = Object.keys(cfg.model[0]);
    const rows = cfg.model.map(r=>headers.map(h=>`"${r[h]||""}"`).join(",")).join("\n");
    const csv = "\uFEFF" + headers.map(h=>`"${h}"`).join(",") + "\n" + rows;
    const blob = new Blob([csv], {type:"text/csv;charset=utf-8;"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a"); a.href=url; a.download=`model_import_${tip}.csv`;
    a.style.display="none"; document.body.appendChild(a); a.click();
    setTimeout(()=>{ document.body.removeChild(a); URL.revokeObjectURL(url); },150);
  }

  return (
    <div>
      {/* UPLOAD */}
      {faza==="upload" && (
        <div>
          <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginBottom:16 }}>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:10 }}>
              <div>
                <div style={{ fontWeight:600, fontSize:14, marginBottom:4 }}>{cfg.titlu}</div>
                <div style={{ fontSize:12, color:C.muted, lineHeight:1.6 }}>{cfg.descriere}</div>
              </div>
              <button onClick={downloadModel}
                style={{ padding:"6px 14px", borderRadius:8, border:`1px solid ${C.border}`,
                  background:C.surface, color:C.muted, fontSize:12, cursor:"pointer",
                  fontFamily:"inherit", whiteSpace:"nowrap", flexShrink:0, marginLeft:12 }}>
                ⬇ Model CSV
              </button>
            </div>
            <div style={{ marginTop:10 }}>
              <div style={{ fontSize:11, fontWeight:600, color:C.accent, textTransform:"uppercase",
                letterSpacing:.4, marginBottom:8 }}>Câmpuri acceptate</div>
              <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
                {cfg.campuri.map(c=>(
                  <span key={c.id} style={{ fontSize:11, padding:"3px 8px", borderRadius:6,
                    background: c.req ? C.accent+"18" : C.bg,
                    color: c.req ? C.accent : C.muted,
                    border:`1px solid ${c.req ? C.accent+"44" : C.border}` }}>
                    {c.label}
                  </span>
                ))}
              </div>
            </div>
          </div>
          <DropZone onFile={handleFisier} loading={loading} eroare={eroare}
            accept=".csv,.xlsx,.xls" label="Trage fișierul CSV sau Excel aici" />
        </div>
      )}

      {/* MAPARE */}
      {faza==="mapare" && (
        <div>
          <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginBottom:14 }}>
            <div style={{ fontWeight:600, fontSize:14, marginBottom:4 }}>Mapare coloane</div>
            <div style={{ fontSize:12, color:C.muted, marginBottom:16 }}>
              <strong style={{color:C.text}}>{headers.length} coloane</strong> și <strong style={{color:C.text}}>{rows.length} rânduri</strong> detectate.
              Verifică maparea și ajusteaz-o dacă e nevoie.
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              {headers.map(col=>(
                <div key={col} style={{ display:"flex", alignItems:"center", gap:8 }}>
                  <div style={{ flex:1, background:C.bg, border:`1px solid ${C.border}`, borderRadius:6,
                    padding:"6px 10px", fontSize:12, color:C.text, minWidth:0 }} title={col}>
                    <div style={{ overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>📊 {col}</div>
                    <div style={{ fontSize:10, color:C.muted, marginTop:2 }}>
                      ex: "{String((rows[0]&&rows[0][col])||"").slice(0,28)}"
                    </div>
                  </div>
                  <span style={{ color:C.muted }}>→</span>
                  <div style={{ flex:1 }}>
                    <select value={mapare[col]||""} onChange={e=>setMapare(m=>({...m,[col]:e.target.value}))}
                      style={{ background:C.surface, border:`1px solid ${mapare[col]?C.accent:C.border}`,
                        borderRadius:6, padding:"6px 8px", color:mapare[col]?C.text:C.muted,
                        fontSize:12, fontFamily:"inherit", outline:"none", width:"100%" }}>
                      {campuriOpt.map(o=><option key={o.value} value={o.value}>{o.label}</option>)}
                    </select>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Opțiune duplicate */}
          <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:10, padding:14, marginBottom:14 }}>
            <div style={{ fontSize:13, fontWeight:500, marginBottom:10 }}>Duplicate — ce facem cu înregistrările existente?</div>
            <div style={{ display:"flex", gap:10 }}>
              {[["sarita","Sari peste"],["suprascrie","Actualizează datele existente"]].map(([v,l])=>(
                <div key={v} onClick={()=>setOptDup(v)}
                  style={{ flex:1, padding:"9px 12px", borderRadius:8, cursor:"pointer", fontSize:12,
                    border:`1.5px solid ${optDup===v?C.accent:C.border}`,
                    background:optDup===v?C.accent+"11":C.bg,
                    color:optDup===v?C.accentL:C.muted, textAlign:"center", fontWeight:500 }}>
                  {optDup===v?"✓ ":""}{l}
                </div>
              ))}
            </div>
          </div>

          <PreviewTabel rows={rows.slice(0,5)} headers={headers} mapare={mapare} />

          <div style={{ display:"flex", justifyContent:"space-between", marginTop:14 }}>
            <Btn onClick={reset}>← Înapoi</Btn>
            <Btn variant="primary" onClick={execImport}>⬆ Importă {rows.length} înregistrări</Btn>
          </div>
        </div>
      )}

      {/* REZULTAT */}
      {faza==="rezultat" && rezultat && (
        <RezultatImport rezultat={rezultat} onReset={reset} />
      )}
    </div>
  );
}




// ── Componente auxiliare Import ───────────────────────────────────────────────
function DropZone({ onFile, loading, eroare, accept, label }) {
  const [drag, setDrag] = useState(false);
  const inputRef = React.useRef();

  function handleDrop(e) {
    e.preventDefault(); setDrag(false);
    const f = e.dataTransfer.files[0];
    if (f) onFile(f);
  }

  return (
    <div>
      <div
        onDragOver={e=>{ e.preventDefault(); setDrag(true); }}
        onDragLeave={()=>setDrag(false)}
        onDrop={handleDrop}
        onClick={()=>inputRef.current && inputRef.current.click()}
        style={{ border:`2px dashed ${drag ? C.accent : C.border}`, borderRadius:12,
          padding:"36px 24px", textAlign:"center", cursor:"pointer", transition:"all .2s",
          background: drag ? C.accent+"08" : C.bg }}>
        <div style={{ fontSize:32, marginBottom:10 }}>{loading ? "⏳" : "📂"}</div>
        <div style={{ fontSize:14, fontWeight:500, color:C.text, marginBottom:6 }}>
          {loading ? "Se procesează fișierul..." : label}
        </div>
        <div style={{ fontSize:12, color:C.muted }}>sau click pentru a selecta</div>
        <div style={{ fontSize:11, color:C.muted, marginTop:6 }}>Formate acceptate: {accept}</div>
      </div>
      <input ref={inputRef} type="file" accept={accept} style={{ display:"none" }}
        onChange={e=>{ if(e.target.files[0]) onFile(e.target.files[0]); e.target.value=""; }} />
      {eroare && (
        <div style={{ marginTop:10, background:C.danger+"11", border:`1px solid ${C.danger}33`,
          borderRadius:8, padding:"10px 14px", fontSize:12, color:C.danger }}>
          ⚠ {eroare}
        </div>
      )}
    </div>
  );
}

function PreviewTabel({ rows, headers, mapare }) {
  if (!rows || !rows.length) return null;
  const colMappate = headers.filter(h=>mapare[h]);
  if (!colMappate.length) return null;
  return (
    <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:10,
      overflow:"hidden", marginTop:12 }}>
      <div style={{ padding:"10px 14px", borderBottom:`1px solid ${C.border}`,
        fontSize:12, color:C.muted, fontWeight:500 }}>
        Previzualizare — primele {rows.length} rânduri
      </div>
      <div style={{ overflowX:"auto" }}>
        <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
          <thead>
            <tr>
              {colMappate.map(h=>(
                <th key={h} style={{ padding:"8px 12px", textAlign:"left", background:C.bg,
                  borderBottom:`1px solid ${C.border}`, color:C.accent, fontWeight:600,
                  whiteSpace:"nowrap", fontSize:11 }}>
                  {mapare[h]}
                  <div style={{ color:C.muted, fontWeight:400, fontSize:10 }}>{h}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row,i)=>(
              <tr key={i} style={{ borderBottom:`1px solid ${C.border}22` }}>
                {colMappate.map(h=>(
                  <td key={h} style={{ padding:"7px 12px", color:C.text, maxWidth:200,
                    overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                    {String(row[h]||"").slice(0,40) || <span style={{color:C.muted}}>—</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function RezultatImport({ rezultat, onReset }) {
  const { adaugate, sarite, actualizate, erori, total } = rezultat;
  return (
    <div>
      <div style={{ background:C.surface, border:`1px solid ${erori.length ? C.warn+"44" : C.success+"33"}`,
        borderRadius:12, padding:24, marginBottom:14, textAlign:"center" }}>
        <div style={{ fontSize:36, marginBottom:10 }}>{erori.length === 0 ? "✅" : "⚠️"}</div>
        <div style={{ fontSize:16, fontWeight:700, color:C.text, marginBottom:16 }}>Import finalizat</div>
        <div style={{ display:"flex", justifyContent:"center", gap:14, flexWrap:"wrap" }}>
          {[
            { label:"Total procesate", val:total,        col:C.text    },
            { label:"Adăugate",        val:adaugate,     col:C.success },
            { label:"Actualizate",     val:actualizate,  col:C.accent  },
            { label:"Sărite",          val:sarite,       col:C.warn    },
            { label:"Erori",           val:erori.length, col:erori.length ? C.danger : C.muted },
          ].map(m=>(
            <div key={m.label} style={{ background:C.bg, borderRadius:10,
              padding:"12px 18px", minWidth:90, border:`1px solid ${C.border}` }}>
              <div style={{ fontSize:22, fontWeight:700, color:m.col }}>{m.val}</div>
              <div style={{ fontSize:11, color:C.muted, marginTop:4 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </div>
      {erori.length > 0 && (
        <div style={{ background:C.danger+"0a", border:`1px solid ${C.danger}33`,
          borderRadius:10, padding:14, marginBottom:14 }}>
          <div style={{ fontSize:13, fontWeight:600, color:C.danger, marginBottom:8 }}>
            {erori.length} erori întâlnite:
          </div>
          <div style={{ maxHeight:120, overflowY:"auto" }}>
            {erori.map((e,i)=>(
              <div key={i} style={{ fontSize:12, color:C.muted, padding:"2px 0" }}>• {e}</div>
            ))}
          </div>
        </div>
      )}
      <div style={{ display:"flex", gap:10, justifyContent:"center" }}>
        <Btn variant="primary" onClick={onReset}>⬆ Import nou</Btn>
      </div>
    </div>
  );
}

// ─── PIPELINE EDITOR ─────────────────────────────────────────────────────────
function PipelineEditor({ db, update }) {
  const ETAPE_IMPLICITE = ["lead","calificare","oferta","negociere","castigat","pierdut"];

  const [etape, setEtape] = useState(()=>JSON.parse(JSON.stringify(db.etape_pipeline)));
  const [editId, setEditId] = useState(null);
  const [salvat, setSalvat]     = useState(false);
  const [nouaEtapa, setNouaEtapa] = useState({ label:"", culoare: CULORI_PRESET[3], tip:"normal" });
  const [adaugaOpen, setAdaugaOpen] = useState(false);

  const castigata = etape.find(e=>e.tip==="castigat");
  const pierduta  = etape.find(e=>e.tip==="pierdut");
  const normala   = etape.filter(e=>e.tip==="normal");

  function esteImplicita(id) { return ETAPE_IMPLICITE.includes(id); }

  function salveaza() {
    update(d=>({...d, etape_pipeline: etape}));
    setSalvat(true);
    setTimeout(()=>setSalvat(false), 2000);
  }

  function mutaSus(idx) {
    if (idx===0) return;
    const noi = [...etape];
    const normals = noi.filter(e=>e.tip==="normal");
    const realIdx = noi.indexOf(normals[idx]);
    const realIdxPrev = noi.indexOf(normals[idx-1]);
    [noi[realIdx], noi[realIdxPrev]] = [noi[realIdxPrev], noi[realIdx]];
    setEtape(noi);
  }
  function mutaJos(idx) {
    const normals = etape.filter(e=>e.tip==="normal");
    if (idx>=normals.length-1) return;
    const noi = [...etape];
    const realIdx = noi.indexOf(normals[idx]);
    const realIdxNext = noi.indexOf(normals[idx+1]);
    [noi[realIdx], noi[realIdxNext]] = [noi[realIdxNext], noi[realIdx]];
    setEtape(noi);
  }
  function stergeEtapa(id) {
    if (esteImplicita(id)) return; // etapele implicite nu se pot șterge
    const inUz = db.proiecte.some(p=>p.etapa===id);
    if (inUz) { alert("Această etapă are proiecte asociate. Mută proiectele mai întâi."); return; }
    setEtape(prev=>prev.filter(e=>e.id!==id));
  }
  function adaugaEtapa() {
    if (!nouaEtapa.label.trim()) return;
    const id = nouaEtapa.label.toLowerCase().replace(/[^a-z0-9]/g,"_")+"_"+genId().slice(0,4);
    const noua = { id, label:nouaEtapa.label.trim(), culoare:nouaEtapa.culoare, tip:"normal" };
    const noi = [...etape];
    const idxPierdut = noi.findIndex(e=>e.tip==="pierdut");
    if (idxPierdut>=0) noi.splice(idxPierdut, 0, noua);
    else noi.push(noua);
    setEtape(noi);
    setNouaEtapa({ label:"", culoare: CULORI_PRESET[Math.floor(Math.random()*CULORI_PRESET.length)], tip:"normal" });
    setAdaugaOpen(false);
  }

  return (
    <div>
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:20, marginBottom:16 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:6 }}>
          <div>
            <div style={{ fontWeight:600, fontSize:14, marginBottom:4 }}>Etape pipeline</div>
            <div style={{ fontSize:12, color:C.muted, lineHeight:1.6 }}>
              Etapele implicite (🔒) nu pot fi redenumite sau șterse. Poți adăuga etape personalizate suplimentare.
            </div>
          </div>
          <Btn variant="primary" small onClick={salveaza} style={{ flexShrink:0 }}>
            {salvat ? "✓ Salvat!" : "Salvează ordinea"}
          </Btn>
        </div>
      </div>

      {/* Etape normale */}
      <div style={{ marginBottom:12 }}>
        <div style={{ fontSize:11, fontWeight:600, color:C.muted, textTransform:"uppercase",
          letterSpacing:.5, marginBottom:8, padding:"0 4px" }}>
          Etape active ({normala.length})
        </div>

        {normala.map((etapa, idx)=>{
          const implicit = esteImplicita(etapa.id);
          return (
            <div key={etapa.id} style={{ background:C.card, border:`1px solid ${C.border}`,
              borderRadius:10, padding:"12px 14px", marginBottom:8, display:"flex",
              alignItems:"center", gap:12,
              opacity: implicit ? 1 : 1 }}>

              {/* Indicator culoare */}
              <div style={{ width:28, height:28, borderRadius:"50%", background:etapa.culoare,
                flexShrink:0, border:`2px solid ${etapa.culoare}88` }} />

              {/* Denumire — read-only dacă e implicită */}
              <div style={{ flex:1, display:"flex", alignItems:"center", gap:8 }}>
                <span style={{ fontSize:13, fontWeight:500, color:C.text }}>{etapa.label}</span>
                {implicit
                  ? <span title="Etapă implicită — nu poate fi modificată"
                      style={{ fontSize:11, color:C.muted }}>🔒</span>
                  : <span style={{ fontSize:11, color:C.muted }}>personalizată</span>
                }
              </div>

              {/* Nr proiecte */}
              <div style={{ fontSize:11, color:C.muted, flexShrink:0 }}>
                {db.proiecte.filter(p=>p.etapa===etapa.id).length} proiecte
              </div>

              {/* Reordonare — disponibilă pentru toate */}
              <div style={{ display:"flex", gap:2, flexShrink:0 }}>
                <Btn small onClick={()=>mutaSus(idx)} disabled={idx===0} style={{ padding:"4px 8px" }}>↑</Btn>
                <Btn small onClick={()=>mutaJos(idx)} disabled={idx===normala.length-1} style={{ padding:"4px 8px" }}>↓</Btn>
              </div>

              {/* Șterge — doar pentru etape personalizate */}
              {!implicit && (
                <Btn small variant="danger" onClick={()=>stergeEtapa(etapa.id)} style={{ flexShrink:0 }}>✕</Btn>
              )}
              {implicit && <div style={{ width:30 }} />}
            </div>
          );
        })}

        {/* Buton adaugă etapă nouă */}
        {!adaugaOpen ? (
          <div onClick={()=>setAdaugaOpen(true)} style={{
            border:`1.5px dashed ${C.border}`, borderRadius:10, padding:"12px 14px",
            cursor:"pointer", color:C.muted, fontSize:13, textAlign:"center",
            transition:"all .15s" }}
            onMouseEnter={e=>e.currentTarget.style.borderColor=C.accent}
            onMouseLeave={e=>e.currentTarget.style.borderColor=C.border}>
            + Adaugă etapă nouă
          </div>
        ) : (
          <div style={{ background:C.card, border:`1.5px dashed ${C.accent}`, borderRadius:10,
            padding:"14px", marginBottom:8 }}>
            <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:10 }}>
              <div style={{ position:"relative" }}>
                <div style={{ width:28, height:28, borderRadius:"50%", background:nouaEtapa.culoare,
                  cursor:"pointer", border:`2px solid ${nouaEtapa.culoare}88` }}
                  onClick={()=>setEditId(editId==="noua_col"?null:"noua_col")} />
                {editId==="noua_col" && (
                  <div style={{ position:"absolute", top:34, left:0, zIndex:10, background:C.surface,
                    border:`1px solid ${C.border}`, borderRadius:10, padding:10,
                    display:"flex", flexWrap:"wrap", gap:6, width:160 }}>
                    {CULORI_PRESET.map(col=>(
                      <div key={col} onClick={()=>{ setNouaEtapa(n=>({...n,culoare:col})); setEditId(null); }}
                        style={{ width:24, height:24, borderRadius:"50%", background:col, cursor:"pointer",
                          border: nouaEtapa.culoare===col ? `3px solid #fff` : "2px solid transparent" }} />
                    ))}
                    <input type="color" value={nouaEtapa.culoare}
                      onChange={e=>setNouaEtapa(n=>({...n,culoare:e.target.value}))}
                      style={{ width:24, height:24, borderRadius:"50%", border:"none", cursor:"pointer", padding:0 }} />
                  </div>
                )}
              </div>
              <input value={nouaEtapa.label} onChange={e=>setNouaEtapa(n=>({...n,label:e.target.value}))}
                placeholder="Denumire etapă (ex: Demo produs, Aprobare internă...)"
                autoFocus
                onKeyDown={e=>e.key==="Enter"&&adaugaEtapa()}
                style={{ flex:1, background:C.surface, border:`1px solid ${C.border}`, borderRadius:6,
                  padding:"7px 10px", color:C.text, fontSize:13, fontFamily:"inherit", outline:"none" }} />
            </div>
            <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
              <Btn small onClick={()=>setAdaugaOpen(false)}>Anulare</Btn>
              <Btn small variant="primary" onClick={adaugaEtapa} disabled={!nouaEtapa.label.trim()}>Adaugă</Btn>
            </div>
          </div>
        )}
      </div>

      {/* Etape speciale — Câștigat + Pierdut */}
      <div>
        <div style={{ fontSize:11, fontWeight:600, color:C.muted, textTransform:"uppercase",
          letterSpacing:.5, marginBottom:8, padding:"0 4px" }}>
          Etape speciale (fixe)
        </div>
        {[castigata, pierduta].filter(Boolean).map(etapa=>(
          <div key={etapa.id} style={{ background:C.card, border:`1px solid ${C.border}`,
            borderRadius:10, padding:"12px 14px", marginBottom:8, display:"flex",
            alignItems:"center", gap:12, opacity:.8 }}>
            <div style={{ width:28, height:28, borderRadius:"50%", background:etapa.culoare,
              border:`2px solid ${etapa.culoare}88`, flexShrink:0 }} />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:500, color:C.text }}>{etapa.label}</div>
              <div style={{ fontSize:11, color:C.muted }}>
                {etapa.tip==="castigat" ? "Proiect câștigat — apare în rapoarte ca vânzare finalizată" : "Proiect pierdut — exclus din pipeline activ"}
              </div>
            </div>
            <Badge label={etapa.tip==="castigat"?"Câștigat":"Pierdut"}
              color={etapa.tip==="castigat"?C.success:C.danger} />
            {/* Permite redenumire etape speciale */}
            <Btn small onClick={()=>setEditId(etapa.id)}>✎ Redenumire</Btn>
          </div>
        ))}
        {/* Modal redenumire etapă specială */}
        {editId && ["castigat","pierdut"].includes(editId) && (() => {
          const etapa = etape.find(e=>e.id===editId);
          if (!etapa) return null;
          return (
            <Modal title={`Redenumire "${etapa.label}"`} onClose={()=>setEditId(null)}>
              <FormRow label="Denumire nouă">
                <Input value={etapa.label} onChange={v=>actualizeazaEtapa(etapa.id,"label",v)} placeholder="ex: Deal închis" />
              </FormRow>
              <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
                <Btn onClick={()=>setEditId(null)}>Anulare</Btn>
                <Btn variant="primary" onClick={()=>setEditId(null)}>OK</Btn>
              </div>
            </Modal>
          );
        })()}
      </div>

      {/* Preview live */}
      <div style={{ background:C.card, border:`1px solid ${C.border}`, borderRadius:12, padding:16, marginTop:16 }}>
        <div style={{ fontSize:12, color:C.muted, marginBottom:10, fontWeight:500 }}>Preview pipeline</div>
        <div style={{ display:"flex", gap:6, flexWrap:"wrap" }}>
          {etape.map((e,i)=>(
            <div key={e.id} style={{ display:"flex", alignItems:"center", gap:4 }}>
              <span style={{ background:e.culoare+"22", color:e.culoare, fontSize:11, fontWeight:600,
                padding:"4px 10px", borderRadius:16, border:`1px solid ${e.culoare}44` }}>
                {e.label}
              </span>
              {i<etape.length-1 && <span style={{ color:C.muted, fontSize:12 }}>→</span>}
            </div>
          ))}
        </div>
        <div style={{ fontSize:11, color:C.muted, marginTop:10 }}>
          ⚠️ Apasă <strong style={{ color:C.text }}>Salvează</strong> în colțul din dreapta sus pentru a aplica modificările în pipeline.
        </div>
      </div>
    </div>
  );
}

function UtilizatorModal({ onSave, onClose }) {
  const [form, setForm] = useState({ nume:"", email:"", parola:"Parola123!", rol:"agent" });
  const set = k => v => setForm(f=>({...f,[k]:v}));
  return (
    <Modal title="Utilizator nou" onClose={onClose}>
      <FormRow label="Nume complet *"><Input value={form.nume} onChange={set("nume")} placeholder="Ion Popescu" /></FormRow>
      <FormRow label="Email *"><Input value={form.email} onChange={set("email")} placeholder="i.popescu@firma.ro" type="email" /></FormRow>
      <FormRow label="Parolă inițială"><Input value={form.parola} onChange={set("parola")} placeholder="Parola123!" /></FormRow>
      <FormRow label="Rol">
        <Select value={form.rol} onChange={set("rol")} options={[
          {value:"agent",label:"Agent vânzări"},{value:"director",label:"Director"}
        ]} />
      </FormRow>
      <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
        <Btn onClick={onClose}>Anulare</Btn>
        <Btn variant="primary" onClick={()=>onSave(form)} disabled={!form.nume||!form.email}>Salvează</Btn>
      </div>
    </Modal>
  );
}

function ActivitateModal({ db, user, onSave, onClose }) {
  const [form, setForm] = useState({ client_id:"", proiect_id:"", tip:"apel", descriere:"" });
  const set = k => v => setForm(f=>({...f,[k]:v}));

  const esteAgent = user.rol === "agent";

  // Agentul vede doar clienții proprii; directorul îi vede pe toți
  const clientiOpt = [{value:"",label:"Selectează client"}, ...db.clienti
    .filter(c => esteAgent ? c.agent_id === user.id : true)
    .map(c=>({value:c.id,label:c.denumire}))];

  // Proiecte filtrate pe client selectat și, pentru agent, doar ale lui
  const proiecteOpt = [{value:"",label:"Neasociat"}, ...db.proiecte
    .filter(p => {
      if (esteAgent && p.agent_id !== user.id) return false;
      if (form.client_id && p.client_id !== form.client_id) return false;
      return true;
    })
    .map(p=>({value:p.id,label:p.titlu}))];

  return (
    <Modal title="Activitate nouă" onClose={onClose}>
      {/* Indicator "înregistrată ca" — agentul nu poate schimba */}
      <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:14,
        background:C.surface, borderRadius:8, padding:"8px 12px",
        border:`1px solid ${C.border}` }}>
        <span style={{ fontSize:12, color:C.muted }}>Înregistrată de:</span>
        <Avatar name={user.nume} size={20} color={esteAgent ? C.accent : C.warn} />
        <span style={{ fontSize:13, fontWeight:500, color:C.text }}>{user.nume}</span>
        {esteAgent && <span style={{ fontSize:11, color:C.muted, marginLeft:2 }}>(nu se poate modifica)</span>}
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
        <FormRow label="Client *">
          <Select value={form.client_id} onChange={v=>{ set("client_id")(v); set("proiect_id")(""); }} options={clientiOpt} />
        </FormRow>
        <FormRow label="Proiect">
          <Select value={form.proiect_id} onChange={set("proiect_id")} options={proiecteOpt} />
        </FormRow>
        <FormRow label="Tip activitate">
          <Select value={form.tip} onChange={set("tip")} options={TIP_ACT.map(t=>({value:t,label:t.charAt(0).toUpperCase()+t.slice(1)}))} />
        </FormRow>
      </div>
      <FormRow label="Descriere *">
        <textarea value={form.descriere} onChange={e=>set("descriere")(e.target.value)} placeholder="Detalii activitate..."
          style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:8, padding:"8px 12px", color:C.text, fontSize:13, fontFamily:"inherit", outline:"none", width:"100%", minHeight:80, boxSizing:"border-box", resize:"vertical" }} />
      </FormRow>
      <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
        <Btn onClick={onClose}>Anulare</Btn>
        <Btn variant="primary" onClick={()=>onSave(form)} disabled={!form.client_id||!form.descriere}>Salvează</Btn>
      </div>
    </Modal>
  );
}


// CRM_V2_REACT_MOUNT_PATCH
const rootEl = document.getElementById("root");
if (rootEl) {
  ReactDOM.createRoot(rootEl).render(<App />);
}