/* global React, LITIO */
const { useState: useStateM } = React;
const T = window.T;

const MAP_B = { latTop:-22.4, latBot:-26.8, lngMin:-69.0, lngMax:-65.2 };
const MVW = 600, MVH = 680, MM = 46;
const mx = (lng) => MM + (lng-MAP_B.lngMin)/(MAP_B.lngMax-MAP_B.lngMin)*(MVW-2*MM);
const my = (lat) => MM + (MAP_B.latTop-lat)/(MAP_B.latTop-MAP_B.latBot)*(MVH-2*MM);
const poly = (pts) => pts.map(p=>mx(p[1])+','+my(p[0])).join(' ');

const STATUS = {
  op:{lk:'status.op', color:'#2E9E8C', cls:'op'},
  con:{lk:'status.con', color:'#A67C3C', cls:'con'},
  adv:{lk:'status.adv', color:'#36769C', cls:'adv'}
};

const PROV = {
  jujuy: [[-22.4,-66.6],[-22.4,-65.2],[-24.0,-65.2],[-24.2,-66.0],[-23.6,-66.7]],
  salta: [[-22.4,-68.6],[-22.4,-66.6],[-23.6,-66.7],[-24.2,-66.0],[-24.0,-65.2],[-25.6,-65.2],[-25.8,-67.0],[-24.6,-68.6]],
  catamarca: [[-24.6,-68.6],[-25.8,-67.0],[-25.6,-65.2],[-26.8,-65.2],[-26.8,-68.6]]
};
const SALARS = [
  {lat:-23.5,lng:-66.71,rx:16,ry:26},  // Olaroz/Cauchari
  {lat:-24.0,lng:-66.95,rx:13,ry:18},  // Rincón
  {lat:-24.30,lng:-66.95,rx:12,ry:16}, // Centenario
  {lat:-25.4,lng:-67.0,rx:20,ry:24},   // Hombre Muerto
  {lat:-24.7,lng:-68.5,rx:11,ry:14}    // Llullaillaco
];

function ProjectsMap(){
  const [filter, setFilter] = useStateM('all');
  const [sel, setSel] = useStateM('rincon');
  const [hover, setHover] = useStateM(null);

  const projects = LITIO.projects;
  const shown = projects.filter(p => filter==='all' || p.status===filter);
  const active = projects.find(p=>p.id===sel);

  return (
    <section id="proyectos" className="sec-pad">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{T('s.proj.ey')}</div>
            <h2>{T('s.proj.h')}</h2>
            <p>{T('s.proj.p')}</p>
          </div>
        </div>

        <div className="map-wrap">
          <div className="map-stage">
            <div className="map-filters">
              <button className={'chip'+(filter==='all'?' on':'')} onClick={()=>setFilter('all')}
                style={filter==='all'?{color:'var(--text)',borderColor:'var(--line-2)',background:'var(--surface-3)'}:{}}>{T('map.all')}</button>
              {Object.entries(STATUS).map(([k,v])=>(
                <button key={k} className={'chip'+(filter===k?' on':'')} onClick={()=>setFilter(k)}
                  style={filter===k?{color:v.color,borderColor:v.color,background:v.color+'14'}:{}}>
                  <span className="swatch" style={{background:v.color}}></span>{T(v.lk)}
                </button>
              ))}
            </div>

            <svg className="map-svg" viewBox={`0 0 ${MVW} ${MVH}`} preserveAspectRatio="xMidYMid meet">
              <defs>
                <pattern id="mgrid" width="34" height="34" patternUnits="userSpaceOnUse">
                  <path d="M34 0 L0 0 0 34" fill="none" stroke="#DBE2E6" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect x="0" y="0" width={MVW} height={MVH} fill="url(#mgrid)" opacity="0.6"/>

              {/* provinces */}
              <polygon points={poly(PROV.salta)} fill="rgba(54,118,156,0.05)" stroke="#C4CDD2" strokeWidth="1.2" strokeDasharray="2 4"/>
              <polygon points={poly(PROV.jujuy)} fill="rgba(28,124,139,0.06)" stroke="#C4CDD2" strokeWidth="1.2" strokeDasharray="2 4"/>
              <polygon points={poly(PROV.catamarca)} fill="rgba(95,168,180,0.06)" stroke="#C4CDD2" strokeWidth="1.2" strokeDasharray="2 4"/>

              {/* province labels */}
              <text x={mx(-65.6)} y={my(-23.1)} className="pin-label" style={{fontSize:13, fill:'#2E7C86', letterSpacing:'0.18em'}}>JUJUY</text>
              <text x={mx(-67.7)} y={my(-23.3)} className="pin-label" style={{fontSize:13, fill:'#356A8E', letterSpacing:'0.18em'}}>SALTA</text>
              <text x={mx(-67.9)} y={my(-26.3)} className="pin-label" style={{fontSize:13, fill:'#4E8A92', letterSpacing:'0.18em'}}>CATAMARCA</text>

              {/* borders */}
              <line x1={mx(-68.9)} y1={my(-22.4)} x2={mx(-68.9)} y2={my(-26.8)} stroke="#BFC8CD" strokeWidth="1.4" strokeDasharray="6 5" opacity="0.8"/>
              <text x={mx(-68.85)} y={my(-25.7)} className="pin-label" style={{fontSize:11, fill:'#8A949B', letterSpacing:'0.2em'}} transform={`rotate(-90 ${mx(-68.85)} ${my(-25.7)})`}>← CHILE</text>
              <text x={mx(-67.3)} y={my(-22.25)} className="pin-label" style={{fontSize:10.5, fill:'#8A949B', letterSpacing:'0.2em'}}>BOLIVIA ↑</text>

              {/* salars */}
              {SALARS.map((s,i)=>(
                <ellipse key={i} cx={mx(s.lng)} cy={my(s.lat)} rx={s.rx} ry={s.ry}
                  fill="rgba(95,120,130,0.08)" stroke="rgba(95,120,130,0.2)" strokeWidth="1"/>
              ))}

              {/* pins (con anti-colisión vertical de etiquetas + líneas guía) */}
              {(()=>{
                const items = shown.map(p=>({ p, X:mx(p.lng), Y:my(p.lat), side: mx(p.lng) > MVW*0.6 ? 'right':'left' }));
                ['left','right'].forEach(side=>{
                  const g = items.filter(it=>it.side===side).sort((a,b)=>a.Y-b.Y);
                  const gap = 16; let prev = -1e9;
                  g.forEach(it=>{ let ly = it.Y+4; if (ly < prev+gap) ly = prev+gap; it.ly = ly; prev = ly; });
                });
                return items.map(({p,X,Y,side,ly})=>{
                  const col = STATUS[p.status].color;
                  const isActive = p.id===sel || p.id===hover;
                  const lx = side==='right' ? X-20 : X+20;
                  const moved = Math.abs(ly-(Y+4)) > 4;
                  return (
                    <g key={p.id} className={'pin'+(isActive?' active':'')}
                       onClick={()=>setSel(p.id)} onMouseEnter={()=>setHover(p.id)} onMouseLeave={()=>setHover(null)}>
                      {moved && <line x1={X} y1={Y} x2={side==='right'?lx+3:lx-3} y2={ly-3.5}
                        stroke={col} strokeWidth="1" opacity="0.4"/>}
                      <circle className="pin-ring" cx={X} cy={Y} r="16" fill="none" stroke={col} strokeWidth="1.5" opacity="0.5"/>
                      <circle className="pin-core" cx={X} cy={Y} r={p.id===sel?9:7} fill={col} stroke="#fff" strokeWidth="2"/>
                      <text className="pin-label" x={lx} y={ly} textAnchor={side==='right'?'end':'start'}
                        style={{fontWeight:p.id===sel?700:400, fontSize:11,
                          paintOrder:'stroke', stroke:'#EDF1F3', strokeWidth:3.5, strokeLinejoin:'round'}}>{p.name}</text>
                    </g>
                  );
                });
              })()}
            </svg>

            <div className="map-legend">
              {Object.entries(STATUS).map(([k,v])=>(
                <div className="ml" key={k}><i style={{background:v.color}}></i>{T(v.lk)}</div>
              ))}
            </div>
          </div>

          <div className="map-detail">
            {active ? <ProjectDetail p={active}/> :
              <div className="md-empty"><b>{T('map.empty_b')}</b><br/>{T('map.empty')}</div>}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectDetail({ p }){
  const st = STATUS[p.status];
  return (
    <div>
      <div className="md-head">
        <div className="md-name">{p.name}</div>
        <span className={'badge '+st.cls}><span className="bdot"></span>{T(st.lk)}</span>
      </div>
      <div className="md-salar">◇ {p.salar} · {p.prov}</div>
      <div className="md-stats">
        <div className="md-stat"><div className="ks">{T('map.method')}</div><div className="vs">{p.method}</div></div>
        <div className="md-stat"><div className="ks">{T('map.cap')}</div><div className="vs">{p.cap}</div></div>
        <div className="md-stat"><div className="ks">{T('map.prov')}</div><div className="vs">{p.prov}</div></div>
        <div className="md-stat"><div className="ks">{T('map.state')}</div><div className="vs">{p.prod}</div></div>
      </div>
      <div className="md-note">{p.note}</div>
      <div className="md-company">{T('map.operator')}<br/><b>{p.company}</b></div>
    </div>
  );
}

window.ProjectsMap = ProjectsMap;