/* Torre Auro — "Ecosistema en construcción"
   Cada oficina disponible es un proyecto de licitación abierta.
   Cualquiera se suma desde su rol → da vida al ecosistema desde los preparativos. */

const PRJ_STORE_KEY = 'ta_proyectos_v1';

function prjLoad() {
  try { return JSON.parse(localStorage.getItem(PRJ_STORE_KEY)) || {}; }
  catch (e) { return {}; }
}
function prjSave(s) {
  try { localStorage.setItem(PRJ_STORE_KEY, JSON.stringify(s)); } catch (e) {}
}
function prjHash(str) {
  let h = 0;
  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
  return h;
}

const PROJECT_ROLES = [
  { id:'comercial',    name:'Comercial / Broker',         icon:'ti-briefcase',              tagline:'Trae al inquilino ideal',        contrib:'Promueve el espacio y conecta con la empresa que lo ocupará.', incentive:'Comisión por renta concretada', cupos:3 },
  { id:'admin',        name:'Administrativo',             icon:'ti-file-text',              tagline:'Gestión y contrato',             contrib:'Coordina papeleo, contrato y enlace con el desarrollador.',    incentive:'Honorarios + reputación',       cupos:1 },
  { id:'obra',         name:'Proveedor de obra',          icon:'ti-bucket-droplet',         tagline:'Pintura, pisos, acondicionamiento', contrib:'Acondiciona la obra gris según el concepto del inquilino.', incentive:'Contrato de la obra',           cupos:4 },
  { id:'mobiliario',   name:'Mobiliario y equipamiento',  icon:'ti-armchair',               tagline:'Amobla el espacio',              contrib:'Provee mobiliario, equipo y soluciones de oficina.',          incentive:'Contrato de suministro',        cupos:3 },
  { id:'interiores',   name:'Diseño de interiores',       icon:'ti-ruler-2',                tagline:'Arquitectura y layout',          contrib:'Diseña la distribución y la imagen del espacio.',             incentive:'Contrato de diseño',            cupos:2 },
  { id:'branding',     name:'Branding y señalización',    icon:'ti-tag',                    tagline:'Identidad del espacio',          contrib:'Señalización, rotulación y presencia de marca.',              incentive:'Contrato de imagen',            cupos:2 },
  { id:'mudanzas',     name:'Mudanzas y logística',       icon:'ti-truck',                  tagline:'Traslado e instalación',         contrib:'Logística de instalación y mudanza del inquilino.',           incentive:'Contrato de servicio',          cupos:2 },
  { id:'inversionista',name:'Inversionista / Patrocinador',icon:'ti-coin',                  tagline:'Respalda el proyecto',           contrib:'Aporta capital o patrocinio para acelerar el acondicionamiento.', incentive:'Retorno + reputación',      cupos:2 },
  { id:'marketing',    name:'Marketing',                  icon:'ti-chart-arrows-vertical',  tagline:'Campaña y contenido',            contrib:'Estrategia de difusión, contenido y campañas digitales.',     incentive:'Honorarios + reputación',       cupos:2 },
  { id:'embajador',    name:'Embajador / Promotor',       icon:'ti-speakerphone',           tagline:'Difunde en sus redes',           contrib:'Promociona el inmueble en su comunidad y redes sociales.',    incentive:'Puntos + recompensa por referido', cupos:99 },
];

const PRJ_NAMES = ['MV','RT','AL','GP','JC','DS','EN','LF','BR','OM','CV','TH','NK','PA','SR','Yed','Zam'];

function ProjectModal() {
  const [open, setOpen] = useState(false);
  const [ctx, setCtx] = useState(null);     // { floorId, code }
  const [view, setView] = useState('overview'); // overview | apply | done
  const [role, setRole] = useState(null);
  const [form, setForm] = useState({ nombre:'', contacto:'', propuesta:'' });
  const [store, setStore] = useState(prjLoad());
  const bodyRef = useRef(null);

  useEffect(() => {
    const onOpen = (e) => {
      setCtx(e.detail);
      setView('overview');
      setRole(null);
      setForm({ nombre:'', contacto:'', propuesta:'' });
      setStore(prjLoad());
      setOpen(true);
    };
    window.addEventListener('ta:open-project', onOpen);
    return () => window.removeEventListener('ta:open-project', onOpen);
  }, []);

  useEffect(() => {
    if (open) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!ctx) return <div className="prj-root" />;

  const floor = FLOOR_BY_ID[ctx.floorId];
  const office = floor?.offices.find(o => o.code === ctx.code);
  if (!floor || !office) return <div className="prj-root" />;

  const z = ZONES[floor.zone];
  const acc = z.accHex;
  const ecoName = z.tag;
  const key = floor.id + '::' + office.code;
  const userApps = store[key] || [];

  // deterministic base data
  const seed = prjHash(key);
  const baseApplicants = (rid) => prjHash(key + rid) % 4;
  const appliedRoles = new Set(userApps.map(a => a.role));
  const countFor = (rid) => baseApplicants(rid) + userApps.filter(a => a.role === rid).length;

  const totalApplicants = PROJECT_ROLES.reduce((a, r) => a + countFor(r.id), 0);
  const rolesWithTeam = PROJECT_ROLES.filter(r => countFor(r.id) > 0).length;

  // progress / stage
  const rented = !office.ok;
  let progress, stage;
  if (rented) {
    progress = 100; stage = 'Operando';
  } else {
    const base = 22 + (seed % 26);                  // 22–47 baseline
    const boost = Math.min(28, userApps.length * 6); // user participation pushes it
    progress = Math.min(96, base + boost);
    stage = progress < 30 ? 'Publicado'
          : progress < 60 ? 'Licitación abierta'
          : progress < 85 ? 'Equipo en formación'
          : 'Acondicionamiento';
  }
  const daysLeft = rented ? 0 : 9 + (seed % 25);

  // participants (anonymized initials)
  const participants = [];
  PROJECT_ROLES.forEach((r, i) => {
    const n = countFor(r.id);
    for (let k = 0; k < Math.min(n, 4); k++) {
      participants.push({ ini: PRJ_NAMES[(seed + i * 7 + k * 3) % PRJ_NAMES.length], role: r.name, rid: r.id });
    }
  });

  // supplier proposals (visible, summary only)
  const PROPOSALS = [
    { rid:'obra',       who:'Acabados del Golfo',   text:'Pintura + piso porcelánico, obra gris a llave', range:'$120K – $180K', eta:'4 semanas' },
    { rid:'mobiliario', who:'Oficina Integral MX',  text:'Estaciones, sala de juntas y recepción',        range:'$90K – $140K',  eta:'3 semanas' },
    { rid:'interiores', who:'Estudio Litoral',      text:'Proyecto ejecutivo + dirección de obra',        range:'$60K – $95K',   eta:'2 semanas' },
  ].filter((_, i) => ((seed >> i) & 1) || i === 0);

  function applyTo(r) { setRole(r); setView('apply'); }
  function submit(e) {
    e.preventDefault();
    const next = { ...store, [key]: [...userApps, { role: role.id, nombre: form.nombre, ts: Date.now() }] };
    prjSave(next);
    setStore(next);
    setView('done');
  }

  return (
    <div className="prj-root">
      <div className={`prj-overlay ${open ? 'open' : ''}`} onClick={() => setOpen(false)} />
      <div className={`prj-panel ${open ? 'open' : ''}`} role="dialog" aria-label="Aplicar a proyecto">
        <button className="prj-close" onClick={() => setOpen(false)} aria-label="Cerrar"><Icon n="ti-x" /></button>

        {/* HEADER */}
        <div className="prj-head" style={{ '--acc': acc }}>
          <div className="prj-head-kicker">Ecosistema en construcción · Licitación abierta</div>
          <div className="prj-head-row">
            <div>
              <div className="prj-head-code">{office.code}</div>
              <div className="prj-head-meta">
                {floor.sh} · {ecoName} · {office.m2} m² · {office.type}
              </div>
            </div>
            <div className="prj-head-status" data-rented={rented}>
              <span className="dot" style={{ background: rented ? 'var(--muted-2)' : acc }} />
              {stage}
            </div>
          </div>
          <p className="prj-head-lead">
            {rented
              ? 'Este espacio ya está operando. Su proyecto fue construido por la comunidad del ecosistema.'
              : 'Este espacio es un proyecto abierto. Cualquier persona puede sumarse desde su rol para que se concrete — de forma transparente, como una licitación colectiva.'}
          </p>
        </div>

        <div className="prj-body" ref={bodyRef}>
          {view === 'overview' && (
            <>
              {/* PROGRESS */}
              <section className="prj-progress">
                <div className="prj-prog-top">
                  <span className="prj-prog-stage">{stage}</span>
                  <span className="prj-prog-pct">{progress}%</span>
                </div>
                <div className="prj-prog-track">
                  <div className="prj-prog-fill" style={{ width: progress + '%', background: acc }} />
                </div>
                <div className="prj-prog-foot">
                  <span><b>{totalApplicants}</b> participantes · <b>{rolesWithTeam}</b>/{PROJECT_ROLES.length} roles activos</span>
                  <span>{rented ? 'Proyecto completado' : daysLeft + ' días para cerrar equipo'}</span>
                </div>
              </section>

              {/* ROLES */}
              <section className="prj-section">
                <div className="prj-sec-head">
                  <h3>Ubicación en el plano</h3>
                  <span className="prj-sec-note">{office.code} · {office.type} · {office.m2} m²</span>
                </div>
                {floor.planClass && (
                  <figure className="prj-plan">
                    <div className={`prj-plan-img ${floor.planClass}`} role="img" aria-label={`Plano ${floor.sh}`} />
                    <figcaption className="prj-plan-cap">
                      <span className="prj-plan-unit" style={{ color: acc }}>
                        <Icon n="ti-map-pin" /> {office.code}
                      </span>
                      <span>{office.use} · {office.m2} m²</span>
                    </figcaption>
                  </figure>
                )}
              </section>

              {/* ROLES */}
              <section className="prj-section">
                <div className="prj-sec-head">
                  <h3>Súmate desde tu rol</h3>
                  <span className="prj-sec-note">Elige cómo aportas al proyecto</span>
                </div>
                <div className="prj-roles">
                  {PROJECT_ROLES.map(r => {
                    const n = countFor(r.id);
                    const did = appliedRoles.has(r.id);
                    const full = r.cupos < 90 && n >= r.cupos;
                    return (
                      <div key={r.id} className={`prj-role ${did ? 'applied' : ''}`}>
                        <div className="prj-role-icon" style={{ color: acc }}><Icon n={r.icon} /></div>
                        <div className="prj-role-main">
                          <div className="prj-role-name">{r.name}</div>
                          <div className="prj-role-tag">{r.tagline}</div>
                          <div className="prj-role-incentive"><Icon n="ti-award" /> {r.incentive}</div>
                        </div>
                        <div className="prj-role-side">
                          <div className="prj-role-count">
                            <b>{n}</b>
                            <span>{r.cupos < 90 ? `de ${r.cupos}` : 'sumados'}</span>
                          </div>
                          {rented ? (
                            <span className="prj-role-btn done"><Icon n="ti-check" /></span>
                          ) : did ? (
                            <span className="prj-role-btn applied"><Icon n="ti-check" /> Aplicaste</span>
                          ) : full ? (
                            <span className="prj-role-btn full">Completo</span>
                          ) : (
                            <button className="prj-role-btn" style={{ '--acc': acc }} onClick={() => applyTo(r)}>
                              Aplicar
                            </button>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </section>

              {/* PARTICIPANTS */}
              <section className="prj-section">
                <div className="prj-sec-head">
                  <h3>Quiénes se han sumado</h3>
                  <span className="prj-sec-note">Resumen público · sin datos sensibles</span>
                </div>
                <div className="prj-participants">
                  {participants.slice(0, 14).map((p, i) => (
                    <div key={i} className="prj-avatar" title={p.role} style={{ borderColor: acc }}>{p.ini}</div>
                  ))}
                  {participants.length > 14 && (
                    <div className="prj-avatar more">+{participants.length - 14}</div>
                  )}
                  {participants.length === 0 && (
                    <div className="prj-empty">Sé el primero en sumarte a este proyecto.</div>
                  )}
                </div>
              </section>

              {/* PROPOSALS */}
              {PROPOSALS.length > 0 && (
                <section className="prj-section">
                  <div className="prj-sec-head">
                    <h3>Propuestas de proveedores</h3>
                    <span className="prj-sec-note">Ofertas visibles · transparencia de licitación</span>
                  </div>
                  <div className="prj-proposals">
                    {PROPOSALS.map((p, i) => {
                      const r = PROJECT_ROLES.find(x => x.id === p.rid);
                      return (
                        <div key={i} className="prj-proposal">
                          <div className="prj-prop-top">
                            <span className="prj-prop-role" style={{ color: acc }}><Icon n={r?.icon} /> {r?.name}</span>
                            <span className="prj-prop-eta">{p.eta}</span>
                          </div>
                          <div className="prj-prop-who">{p.who}</div>
                          <div className="prj-prop-text">{p.text}</div>
                          <div className="prj-prop-range">{p.range}</div>
                        </div>
                      );
                    })}
                  </div>
                </section>
              )}

              {/* INCENTIVE FOOTER */}
              <div className="prj-incentive-note">
                <Icon n="ti-info-circle" />
                <span>Cada participante gana <b>comisión por renta concretada</b> o el <b>contrato de su servicio</b>, y suma <b>puntos de reputación</b> en el ecosistema Torre Auro.</span>
              </div>
            </>
          )}

          {view === 'apply' && role && (
            <section className="prj-apply">
              <button className="prj-back" onClick={() => setView('overview')}><Icon n="ti-arrow-left" /> Volver al proyecto</button>
              <div className="prj-apply-head" style={{ '--acc': acc }}>
                <div className="prj-apply-icon" style={{ color: acc }}><Icon n={role.icon} /></div>
                <div>
                  <div className="prj-apply-role">{role.name}</div>
                  <div className="prj-apply-ctx">{office.code} · {floor.sh} · {ecoName}</div>
                </div>
              </div>
              <p className="prj-apply-desc">{role.contrib}</p>
              <div className="prj-apply-incentive"><Icon n="ti-award" /> {role.incentive}</div>

              <form onSubmit={submit} className="prj-form">
                <div className="prj-field">
                  <label>Nombre o empresa</label>
                  <input required value={form.nombre} onChange={e => setForm({ ...form, nombre: e.target.value })} placeholder="¿Cómo te identificas en el ecosistema?" />
                </div>
                <div className="prj-field">
                  <label>Contacto</label>
                  <input required value={form.contacto} onChange={e => setForm({ ...form, contacto: e.target.value })} placeholder="Correo o teléfono" />
                </div>
                <div className="prj-field">
                  <label>Tu propuesta {role.id === 'embajador' ? '(opcional)' : ''}</label>
                  <textarea value={form.propuesta} onChange={e => setForm({ ...form, propuesta: e.target.value })} placeholder={role.id === 'obra' || role.id === 'mobiliario' || role.id === 'interiores' ? 'Alcance, tiempo estimado y rango de inversión' : 'Cómo aportas a que este proyecto se concrete'} />
                </div>
                <button type="submit" className="btn btn-gold" style={{ width:'100%', justifyContent:'center' }}>
                  Sumarme al proyecto <Icon n="ti-arrow-right" />
                </button>
                <p className="prj-form-note">Al sumarte aceptas las reglas de transparencia del ecosistema. Tu propuesta será visible como resumen, sin datos sensibles.</p>
              </form>
            </section>
          )}

          {view === 'done' && role && (
            <section className="prj-done">
              <div className="prj-done-mark" style={{ color: acc }}><Icon n="ti-circle-check" /></div>
              <h3>Te sumaste al proyecto.</h3>
              <p>Estás dentro de <b>{office.code}</b> como <b>{role.name}</b>. El equipo de Torre Auro revisará tu propuesta y te contactará. Tu participación ya cuenta en el avance del proyecto.</p>
              <div className="prj-done-actions">
                <button className="btn btn-navy" onClick={() => setView('overview')}>Ver el proyecto</button>
                <button className="btn btn-outline" onClick={() => setOpen(false)}>Cerrar</button>
              </div>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}

function openProject(floorId, code) {
  window.dispatchEvent(new CustomEvent('ta:open-project', { detail: { floorId, code } }));
}

Object.assign(window, { ProjectModal, openProject, PROJECT_ROLES });