// components-cc.jsx — Control Center animated UI mockup
const { useState: useState_cc, useEffect: useEffect_cc, useRef: useRef_cc } = React;

// Shared reduced-motion hook · exposed on window for use across script tags
window.useReducedMotion = function useReducedMotion(){
  const [reduced, setReduced] = useState_cc(
    typeof window !== 'undefined' && window.matchMedia &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches
  );
  useEffect_cc(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const handler = (e) => setReduced(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return reduced;
};

// Spotlight lead avance comercial · 6 stages cycling
const CC_STAGES = [
  { label: 'Lead nuevo',       sc: 'orange', dur: 2200 },
  { label: 'Contactado',       sc: 'ok',     dur: 2200 },
  { label: 'Calificando',      sc: 'warn',   dur: 2200 },
  { label: 'Demo agendada',    sc: 'orange', dur: 2200 },
  { label: 'Propuesta',        sc: 'orange', dur: 2200 },
  { label: 'En seguimiento',   sc: 'ok',     dur: 2400 },
];
// CC_SPOTLIGHT · datos ficticios para mostrar la lógica del avance comercial
const CC_SPOTLIGHT = { nm:'Andrea Quiroz', co:'Robótica MX', or:'LINKEDIN · ABM', v:'$320,000', a:'flujo en vivo' };

function ControlCenter({ density='detailed', animIntensity=1 }){
  const data = window.SINDICATO;
  const reduced = window.useReducedMotion();
  const motionOn = !reduced && animIntensity > 0.05;
  const [stageIdx, setStageIdx] = useState_cc(0);

  // Spotlight lead stage cycle · pauses on hover/focus of the cc-window
  useEffect_cc(() => {
    if (!motionOn) return;
    const id = setInterval(() => {
      setStageIdx(i => (i + 1) % CC_STAGES.length);
    }, 2400 / Math.max(animIntensity, 0.3));
    return () => clearInterval(id);
  }, [motionOn, animIntensity]);

  // Animated leads: rotate which one is "new" and which timeline event is current
  const [tick, setTick] = useState_cc(0);
  const [visibleLeads, setVisibleLeads] = useState_cc(data.CC_LEADS.slice(0, 6));
  const [newRowKey, setNewRowKey] = useState_cc(0);

  useEffect_cc(() => {
    if (!motionOn) return;
    const id = setInterval(() => {
      setTick(t => t+1);
      setVisibleLeads(prev => {
        // rotate the order: insert a new lead at the top from the pool
        const allLeads = data.CC_LEADS;
        const nextIdx = (tick + prev.length) % allLeads.length;
        const newLead = allLeads[nextIdx];
        // randomize "ago" slightly to look live
        const refreshed = {...newLead, a: 'justo ahora'};
        return [refreshed, ...prev.slice(0, 5)];
      });
      setNewRowKey(k => k+1);
    }, 4200 / Math.max(animIntensity, 0.3));
    return () => clearInterval(id);
  }, [tick, motionOn, animIntensity]);

  // Animated KPI numbers · increment subtly
  const [kpiBump, setKpiBump] = useState_cc(0);
  useEffect_cc(() => {
    if (!motionOn) return;
    const id = setInterval(() => setKpiBump(b => b+1), 5800 / Math.max(animIntensity, 0.3));
    return () => clearInterval(id);
  }, [motionOn, animIntensity]);

  // Timeline cursor
  const [tlCursor, setTlCursor] = useState_cc(2);
  useEffect_cc(() => {
    if (!motionOn) return;
    const id = setInterval(() => setTlCursor(c => (c+1) % data.CC_TIMELINE.length), 2400 / Math.max(animIntensity, 0.3));
    return () => clearInterval(id);
  }, [motionOn, animIntensity]);

  const kpis = data.CC_KPIS.map((k, i) => ({
    ...k,
    v: typeof k.v === 'number' ? k.v + (i===0 ? kpiBump*3 : i===1 ? kpiBump : 0) : k.v,
  }));

  return (
    <section className={`cc-sec density-${density}`} id="control">
      <div className="wrap-wide">
        <div className="cc-head reveal">
          <div>
            <span className="eyebrow">{data.CC.eyebrow}</span>
            <h2 style={{marginTop:24}}>{data.CC.headline}</h2>
          </div>
          <p className="lead-mixed">{data.CC.sub}</p>
        </div>

        <div className="cc-illus-tag reveal" aria-label="Aviso">
          <span className="cit-dot" aria-hidden="true"></span>
          <span>{data.CC.illusLabel}</span>
        </div>

        <div className="cc-window reveal">
          <div className="cc-titlebar">
            <div className="dots"><i></i><i></i><i></i></div>
            <span className="crumb">SINDICATO · CONTROL CENTER · ACCOUNT DEMO / B2BOOST CONTROL</span>
            <div className="right">
              <span>v 2.4</span>
              <span className="live">LIVE</span>
            </div>
          </div>

          <div className="cc-body">
            {density === 'detailed' && (
              <aside className="cc-side">
                {data.CC_SIDE.map((sec, i) => (
                  <div className="ssec" key={i}>
                    <div className="lbl">{sec.sec}</div>
                    {sec.items.map((it, j) => (
                      <div className={`item ${it.on ? 'on' : ''}`} key={j}>
                        <span>{it.n}</span>
                        <span className="ct">{it.c.toLocaleString('es-MX')}</span>
                      </div>
                    ))}
                  </div>
                ))}
                <div className="ssec" style={{marginTop:'auto', marginBottom:0, paddingBottom:0}}>
                  <div className="lbl">PULSO DEL SISTEMA</div>
                  <div className="cc-pulse">
                    <div className="p"></div><div className="p"></div><div className="p"></div><div className="p"></div><div className="p"></div>
                    <span style={{marginLeft:8}}>OK</span>
                  </div>
                </div>
              </aside>
            )}

            <main className="cc-main">
              <div className="cc-illus-tag cc-illus-tag-inline" aria-label="Aviso de datos ilustrativos">
                <span className="cit-dot" aria-hidden="true"></span>
                <span>{data.CC.illusLabel}</span>
              </div>
              <div className="cc-kpis">
                {kpis.map((k, i) => (
                  <div className="cc-kpi" key={i}>
                    <div className="lbl">{k.k}</div>
                    <div className="v" style={{transition:'color 200ms'}}>{typeof k.v === 'number' ? k.v.toLocaleString('es-MX') : k.v}</div>
                    <div className={`d ${k.neg ? 'neg' : ''}`}>{k.d} · 30D</div>
                  </div>
                ))}
              </div>

              <div className="cc-table-head">
                <span></span>
                <span>Lead</span>
                <span>Origen</span>
                <span>Etapa</span>
                <span>Valor</span>
                <span>Tiempo</span>
              </div>
              <div className="cc-row cc-spotlight" aria-label="Lead destacado avanzando por etapas">
                <span className="marker spot" aria-hidden="true"></span>
                <div className="name">{CC_SPOTLIGHT.nm}<span className="sub">{CC_SPOTLIGHT.co}</span></div>
                <div className="origin">{CC_SPOTLIGHT.or}</div>
                <div className="stage">
                  <span className={`pill ${CC_STAGES[stageIdx].sc}`} key={stageIdx}>{CC_STAGES[stageIdx].label}</span>
                </div>
                <div className="val">{CC_SPOTLIGHT.v}</div>
                <div className="ago">{CC_SPOTLIGHT.a}</div>
              </div>
              {visibleLeads.map((r, i) => (
                <div className={`cc-row ${i===0 ? 'new' : ''}`} key={`${newRowKey}-${i}`}>
                  <span className="marker"></span>
                  <div className="name">{r.nm}<span className="sub">{r.co}</span></div>
                  <div className="origin">{r.or}</div>
                  <div className="stage"><span className={`pill ${r.sc}`}>{r.s}</span></div>
                  <div className="val">{r.v}</div>
                  <div className="ago">{r.a}</div>
                </div>
              ))}
            </main>

            {density === 'detailed' && (
              <aside className="cc-aside">
                <div className="blk">
                  <div className="lbl">CPL · ÚLTIMOS 7 DÍAS</div>
                  <div className="v">$284</div>
                  <div className="t" style={{color:'var(--ok)'}}>−12% vs. periodo anterior</div>
                </div>
                <div className="blk">
                  <div className="lbl">CICLO LEAD → PROPUESTA</div>
                  <div className="v">11.4 d</div>
                  <div className="t" style={{color:'rgba(255,255,255,0.5)'}}>Mediana · 30 días</div>
                </div>
                <div className="blk">
                  <div className="lbl">Eventos · Iscor</div>
                  <div className="timeline">
                    {data.CC_TIMELINE.map((e, i) => (
                      <div className="ev" key={i} style={{opacity: i <= tlCursor ? 1 : 0.32, transition:'opacity 400ms'}}>
                        <span className="t">{e.t}</span>
                        <span className="x" dangerouslySetInnerHTML={{__html: e.x}}></span>
                      </div>
                    ))}
                  </div>
                </div>
              </aside>
            )}
          </div>

          <div className="cc-foot">
            <span>MX-CDMX · {new Date().toLocaleDateString('es-MX',{day:'2-digit',month:'short',year:'numeric'}).toUpperCase()}</span>
            <span>NEWSLETTER SEMANAL · ENVIADO {(['LUN','MAR','MIE','JUE','VIE'])[(new Date().getDay()+4)%5]} 09:00</span>
            <span style={{color:'var(--sindicato-orange)'}}>← / → PARA NAVEGAR</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ControlCenter = ControlCenter;