// Map section + interactive deployment viewer + archive grid

// ==================== PAST PERFORMANCE / MAP ====================
function PastPerformance() {
  const [activeState, setActiveState] = useState(null);
  const [selectedProject, setSelectedProject] = useState(null);
  const [filter, setFilter] = useState("ALL");
  const svgRef = useRef(null);

  const projectsByState = useMemo(() => {
    const map = {};
    window.PROJECT_DATA.forEach(p => {
      if (!map[p.state]) map[p.state] = [];
      map[p.state].push(p);
    });
    return map;
  }, []);

  const statesWithProjects = useMemo(
    () => new Set(Object.keys(projectsByState)),
    [projectsByState]
  );

  const filtered = useMemo(() => {
    return window.PROJECT_DATA.filter(p => filter === "ALL" || p.type === filter);
  }, [filter]);

  useEffect(() => {
    if (!svgRef.current) return;
    window.renderUSMap(svgRef.current, {
      onStateClick: (s) => setActiveState(s),
      activeState,
      statesWithProjects,
      projectData: filtered,
    });
  }, [activeState, statesWithProjects, filtered]);

  const activeProjects = activeState ? (projectsByState[activeState] || []).filter(
    p => filter === "ALL" || p.type === filter
  ) : [];

  const totalProjects = filtered.length;
  const totalStates = new Set(filtered.map(p => p.state)).size;
  const inQueueCount = filtered.filter(p => p.status === "IN QUEUE").length;

  const filters = ["ALL"];

  return (
    <section className="section" id="performance" style={{background: "var(--bg-elev)"}}>
      <div className="container">
        <div className="sh">
          <div className="num">02 / PAST PERFORMANCE</div>
          <h2>Theater of Operations</h2>
          <div className="meta">{totalProjects} Projects · {totalStates} States · {inQueueCount} In Queue</div>
        </div>

        {/* Filter row */}
        <div style={{display:"flex", gap:8, marginBottom:24, flexWrap:"wrap"}}>
          {filters.map(f => (
            <button key={f} onClick={() => setFilter(f)}
              className="tweak-btn" style={{
                flex: "0 0 auto",
                padding: "10px 16px",
                fontSize: 10,
                background: filter === f ? "var(--accent)" : "transparent",
                color: filter === f ? "#111" : "var(--fg-dim)",
                borderColor: filter === f ? "var(--accent)" : "var(--rule)",
              }}>
              {f}
            </button>
          ))}
        </div>

        <div className="map-wrap">
          <div className="map-stage">
            <div className="map-hud">
              <span className="live">● LIVE FEED</span>
              <span>OPS THEATER · CONUS</span>
              <span>ZOOM · 1:12M</span>
            </div>
            <div className="map-hud-right">
              <div>ASSETS · {filtered.length}</div>
              <div>FEATURED · {filtered.filter(p => p.photos).length}</div>
              <div>{activeState || "— · SELECT STATE"}</div>
            </div>
            <svg ref={svgRef} />
            <div className="map-legend">
              <div><span className="legend-dot dot-complete" /> Complete</div>
              <div><span className="legend-dot dot-queue" /> In Queue</div>
              <div><span className="legend-dot dot-standard" /> Past Performance</div>
            </div>
          </div>

          <div className="map-panel">
            <div className="map-panel-head">
              <span>Theater Report</span>
              <span className="state-name">
                {activeState ? (window.US_STATE_NAMES[activeState] || activeState) : "Select a state"}
              </span>
            </div>
            <div className="map-panel-body">
              {!activeState && (
                <div className="map-empty">
                  Click a state or marker to view assignments deployed in theater.<br/><br/>
                  <span style={{color:"var(--accent)"}}>■</span> Amber markers = featured jobs with field documentation.
                </div>
              )}
              {activeState && activeProjects.length === 0 && (
                <div className="map-empty">
                  No projects match the current filter in this state.
                </div>
              )}
              {activeState && activeProjects.map(p => (
                <div className={`project-card ${p.photos ? "has-photos" : ""} ${p.status === "IN QUEUE" ? "in-queue" : ""}`}
                     key={p.id} onClick={() => setSelectedProject(p)}>
                  <div className="pc-head">
                    <span className="pc-id">{p.id}</span>
                    <span className="pc-year">
                      {p.status === "IN QUEUE" ? <span className="queue-pill">IN QUEUE</span> : p.year}
                    </span>
                  </div>
                  <h4 className="pc-name">{p.name}</h4>
                  <div className="pc-client">{p.client}</div>
                  <div className="pc-meta">
                    <span>{p.city}, {p.state}</span>
                    <span>{p.type}</span>
                  </div>
                  {p.photos && (
                    <div className="pc-photo-badge">
                      ▶ {p.photos.length} PHOTO{p.photos.length !== 1 ? "S" : ""} · VIEW DEPLOYMENT
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Deployment Archive — featured projects grid */}
        <DeploymentArchive onSelect={setSelectedProject} />
      </div>

      {selectedProject && (
        selectedProject.photos
          ? <DeploymentViewer project={selectedProject} onClose={() => setSelectedProject(null)} />
          : <ProjectModal project={selectedProject} onClose={() => setSelectedProject(null)} />
      )}
    </section>
  );
}

// ==================== DEPLOYMENT ARCHIVE ====================
function DeploymentArchive({ onSelect }) {
  const featured = window.FEATURED_PROJECTS || [];
  return (
    <div className="archive">
      <div className="archive-head">
        <div>
          <div className="archive-num">03 / FIELD DOCUMENTATION</div>
          <h3 className="archive-title">Deployment Archive</h3>
        </div>
        <div className="archive-sub">
          Real jobsites · scrubable progression · live crew footage
        </div>
      </div>
      <div className="archive-grid">
        {featured.map((p, i) => {
          const cover = p.photos[0].url;
          return (
            <div key={p.id} className={`archive-card ${p.status === "IN QUEUE" ? "queue" : ""}`} onClick={() => onSelect(p)}>
              <div className="archive-cover" style={{backgroundImage:`url(${cover})`}}>
                <div className="archive-scan" />
                <div className="archive-corner tl" />
                <div className="archive-corner tr" />
                <div className="archive-corner bl" />
                <div className="archive-corner br" />
                <div className="archive-status">
                  {p.status === "IN QUEUE" ? "● IN QUEUE" : "● COMPLETE"}
                </div>
                <div className="archive-index">DEPLOY-{String(i+1).padStart(2,"0")}</div>
              </div>
              <div className="archive-body">
                <div className="archive-loc">
                  <span>{p.city.toUpperCase()}, {p.state}</span>
                  <span className="archive-type">{p.type}</span>
                </div>
                <h4 className="archive-name">{p.name}</h4>
                <div className="archive-stats">
                  <div><span className="astat-k">SF</span><span className="astat-v">{p.sqft.toLocaleString()}</span></div>
                  <div><span className="astat-k">CREW</span><span className="astat-v">{p.crew}</span></div>
                  <div><span className="astat-k">DUR</span><span className="astat-v">{p.duration}</span></div>
                </div>
                <div className="archive-cta">
                  ▶ VIEW {p.photos.length} FIELD PHOTO{p.photos.length !== 1 ? "S" : ""}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ==================== DEPLOYMENT VIEWER (interactive) ====================
function DeploymentViewer({ project, onClose }) {
  const [idx, setIdx] = useState(0);
  const [autoPlay, setAutoPlay] = useState(false);
  const [zoomFocus, setZoomFocus] = useState({x: 50, y: 50});
  const photos = project.photos;
  const current = photos[idx];

  // Escape + arrow keys
  useEffect(() => {
    const onKey = e => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIdx(i => Math.min(i + 1, photos.length - 1));
      if (e.key === "ArrowLeft") setIdx(i => Math.max(i - 1, 0));
      if (e.key === " ") { e.preventDefault(); setAutoPlay(p => !p); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, photos.length]);

  // Auto-play reel
  useEffect(() => {
    if (!autoPlay) return;
    const t = setInterval(() => {
      setIdx(i => (i + 1) % photos.length);
    }, 3600);
    return () => clearInterval(t);
  }, [autoPlay, photos.length]);

  // Ken Burns — slow pan as idx changes
  const kenBurnsKey = `kb-${idx}-${autoPlay ? "on" : "off"}`;

  // Scrub handler
  const onScrub = (e) => {
    const v = parseInt(e.target.value);
    setIdx(v);
    setAutoPlay(false);
  };

  // Generate timestamp for current frame
  const timestamp = useMemo(() => {
    const base = new Date(`${project.year}-06-15T06:00:00`);
    base.setHours(base.getHours() + idx * 48);
    const pad = n => String(n).padStart(2,"0");
    return `${base.getFullYear()}-${pad(base.getMonth()+1)}-${pad(base.getDate())} · ${pad(base.getHours())}${pad(base.getMinutes())}`;
  }, [idx, project.year]);

  return (
    <div className="viewer-backdrop" onClick={onClose}>
      <div className="viewer" onClick={e => e.stopPropagation()}>
        {/* Command header */}
        <div className="viewer-head">
          <div className="vh-left">
            <span className="vh-tag">DEPLOYMENT FILE</span>
            <span className="vh-id">{project.id}</span>
            <span className="vh-status" data-status={project.status}>
              ● {project.status}
            </span>
          </div>
          <div className="vh-center">
            <span className="vh-coords">
              {project.lat.toFixed(4)}°N · {Math.abs(project.lon).toFixed(4)}°W
            </span>
          </div>
          <button className="vh-close" onClick={onClose}>✕ CLOSE</button>
        </div>

        {/* Main viewer area */}
        <div className="viewer-main">
          {/* Left rail — crew + scope */}
          <aside className="viewer-rail">
            <div className="vr-section">
              <div className="vr-label">Project</div>
              <h3 className="vr-title">{project.name}</h3>
              <div className="vr-sub">{project.client}</div>
              <div className="vr-loc">{project.city}, {project.state} · FY{project.year}</div>
            </div>
            <div className="vr-grid">
              <div><span className="vrg-k">ROOF AREA</span><span className="vrg-v">{project.sqft.toLocaleString()} SF</span></div>
              <div><span className="vrg-k">CREW</span><span className="vrg-v">{project.crew}</span></div>
              <div><span className="vrg-k">DURATION</span><span className="vrg-v">{project.duration}</span></div>
              <div><span className="vrg-k">SECTOR</span><span className="vrg-v">{project.sector}</span></div>
            </div>
            <div className="vr-section">
              <div className="vr-label">Material System</div>
              <div className="vr-mat">{project.material}</div>
            </div>
            <div className="vr-section">
              <div className="vr-label">Mission Brief</div>
              <p className="vr-brief">{project.scope}</p>
            </div>
          </aside>

          {/* Center — photo stage */}
          <div className="viewer-stage">
            <div className="stage-frame">
              {photos.map((p, i) => (
                <div key={p.url}
                     className={`stage-img ${i === idx ? "active" : ""}`}
                     style={{backgroundImage:`url(${p.url})`}}
                     data-kb={i === idx ? kenBurnsKey : undefined} />
              ))}
              {/* HUD overlay */}
              <div className="stage-hud">
                <div className="sh-corner tl">
                  <div className="sh-line">● REC</div>
                  <div className="sh-line">{timestamp}</div>
                </div>
                <div className="sh-corner tr">
                  <div className="sh-line">CAM · FIELD-{String(idx+1).padStart(2,"0")}</div>
                  <div className="sh-line">{project.city.toUpperCase()}</div>
                </div>
                <div className="sh-corner bl">
                  <div className="sh-phase">{current.phase}</div>
                  <div className="sh-caption">{current.caption}</div>
                </div>
                <div className="sh-corner br">
                  <div className="sh-line">FRAME {idx+1}/{photos.length}</div>
                </div>
                {/* Crosshairs */}
                <div className="sh-cross cross-tl" />
                <div className="sh-cross cross-tr" />
                <div className="sh-cross cross-bl" />
                <div className="sh-cross cross-br" />
                {/* Scan line */}
                <div className="sh-scan" />
              </div>
            </div>

            {/* Timeline scrubber */}
            <div className="viewer-timeline">
              <div className="vt-header">
                <button className="vt-play" onClick={() => setAutoPlay(a => !a)}>
                  {autoPlay ? "▐▐ PAUSE" : "▶ PLAY REEL"}
                </button>
                <div className="vt-ticks">
                  {photos.map((p, i) => (
                    <div key={i}
                         className={`vt-tick ${i === idx ? "active" : ""}`}
                         onClick={() => { setIdx(i); setAutoPlay(false); }}>
                      <div className="vt-phase">{p.phase}</div>
                      <div className="vt-dot" />
                    </div>
                  ))}
                </div>
                <div className="vt-time">{timestamp.split(" · ")[1]}</div>
              </div>
              <input type="range"
                     className="vt-scrub"
                     min="0" max={photos.length - 1} step="1"
                     value={idx} onChange={onScrub} />
              {/* Thumbnail strip */}
              <div className="vt-thumbs">
                {photos.map((p, i) => (
                  <div key={p.url}
                       className={`vt-thumb ${i === idx ? "active" : ""}`}
                       style={{backgroundImage:`url(${p.url})`}}
                       onClick={() => { setIdx(i); setAutoPlay(false); }}>
                    <div className="vt-thumb-label">{String(i+1).padStart(2,"0")}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ==================== FALLBACK MODAL (non-featured projects) ====================
function ProjectModal({ project, onClose }) {
  useEffect(() => {
    const onKey = e => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div className="modal-hero" style={{
          backgroundImage: `url("https://m1a1construction.com/wp-content/uploads/2026/03/m1a1-project-${(Math.abs(project.id.charCodeAt(0) + project.id.charCodeAt(project.id.length-1)) % 6) + 1}.jpg")`
        }}>
          <div className="placeholder-label" style={{zIndex:2}}>[ PROJECT PHOTO · {project.city.toUpperCase()} ]</div>
          <div style={{position:"relative", zIndex:2}}>
            <div className="pid">{project.id} · FY{project.year} · {project.type}</div>
            <h2 className="pname">{project.name}</h2>
          </div>
        </div>
        <div className="modal-body">
          <div>
            <h4>Mission Brief</h4>
            <p>{project.scope}</p>
            <h4 style={{marginTop:24}}>Scope of Work</h4>
            <p>
              Full project management from pre-construction through commissioning. Executed under
              federal contracting standards with full safety compliance, on-schedule delivery, and
              zero lost-time incidents. M1A1 crews applied military-grade discipline to daily
              operations, coordinated directly with the contracting officer, and adhered to all
              base security protocols.
            </p>
          </div>
          <div className="modal-spec">
            <dl>
              <div><dt>Client</dt><dd>{project.client}</dd></div>
              <div><dt>Location</dt><dd>{project.city}, {project.state}</dd></div>
              <div><dt>Coordinates</dt><dd style={{fontFamily:"var(--font-mono)",fontSize:13}}>{project.lat.toFixed(4)}° N<br/>{Math.abs(project.lon).toFixed(4)}° W</dd></div>
              <div><dt>Fiscal Year</dt><dd>FY{project.year}</dd></div>
              <div><dt>Service Type</dt><dd>{project.type}</dd></div>
              <div><dt>Sector</dt><dd>{window.SECTOR_LABELS[project.sector] || project.sector}</dd></div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PastPerformance, ProjectModal, DeploymentViewer, DeploymentArchive });