// Roadmap View: Board with areas as rows and time (Q or Month) as columns

const RoadmapView = ({ projects }) => {
  const [mode, setMode] = React.useState("quarter"); // "quarter" | "month"
  const currentYear = 2026;

  const quarters = [
    { label: "Q1 2026", sub: "ENE - MAR", start: "2026-01-01", end: "2026-03-31" },
    { label: "Q2 2026", sub: "ABR - JUN", start: "2026-04-01", end: "2026-06-30" },
    { label: "Q3 2026", sub: "JUL - SEP", start: "2026-07-01", end: "2026-09-30" },
    { label: "Q4 2026", sub: "OCT - DIC", start: "2026-10-01", end: "2026-12-31" },
  ];

  const months = [
    "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
    "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
  ].map((m, i) => {
    const s = `${currentYear}-${String(i + 1).padStart(2, '0')}-01`;
    const e = new Date(currentYear, i + 1, 0).toISOString().split('T')[0];
    return { label: m, sub: currentYear, start: s, end: e };
  });

  const columns = mode === "quarter" ? quarters : months;
  const colWidth = mode === "quarter" ? "280px" : "180px";

  const areaMapping = {
    "Transversal": "TRV",
    "Marketing": "MKT",
    "Operaciones": "OPS",
    "Legal": "LEG",
    "Finanzas": "FIN",
    "Comercial": "COM",
    "RH": "RH"
  };

  const getProjectsInCell = (area, col) => {
    return projects.filter(p => {
      if (p.area !== area) return false;
      const pStart = new Date(p.start + "T00:00:00");
      const pEnd = new Date(p.end + "T00:00:00");
      const colStart = new Date(col.start + "T00:00:00");
      const colEnd = new Date(col.end + "T00:00:00");
      return pStart <= colEnd && pEnd >= colStart;
    });
  };

  return (
    <div className="roadmap-view">
      <div className="view-header">
        <div>
          <div className="view-title">Roadmap</div>
          <div className="view-sub">Visión estratégica por áreas y periodos · 2026</div>
        </div>
        <div className="seg-toggle">
          <button className={"seg-btn " + (mode === "quarter" ? "active" : "")} onClick={() => setMode("quarter")}>Trimestres</button>
          <button className={"seg-btn " + (mode === "month" ? "active" : "")} onClick={() => setMode("month")}>Meses</button>
        </div>
      </div>

      <div className="roadmap-container">
        <div className="roadmap-grid" style={{ "--cols": columns.length, "--col-width": colWidth }}>
          <div className="roadmap-cell head corner">Áreas</div>
          {columns.map((col, i) => (
            <div key={i} className="roadmap-cell head">
              <div className="col-label">{col.label}</div>
              <div className="col-sub">{col.sub}</div>
            </div>
          ))}

          {window.AREAS.map(area => (
            <React.Fragment key={area}>
              <div className="roadmap-cell area-label">
                <div className="area-text">{areaMapping[area] || area}</div>
              </div>
              {columns.map((col, i) => {
                const cellProjects = getProjectsInCell(area, col);
                return (
                  <div key={i} className="roadmap-cell projects-cell">
                    {cellProjects.map(p => (
                      <div key={p.id} className="roadmap-card" style={{ "--proj-color": p.color }}>
                        <div className="card-top">
                          <span className="dot" />
                          <span className="name">{p.name}</span>
                        </div>
                        <div className="card-status">{window.statusLabel(p.status)}</div>
                      </div>
                    ))}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { RoadmapView });