// DashboardPanel.jsx — Right nav panel with clock header, dir contents, clickable sub-files

const getDirContents = (dir) => {
  if (!dir || !PORTFOLIO_DATA.content[dir]) return [];
  return PORTFOLIO_DATA.content[dir].items || [];
};

const navS = {
  panel: {
    width: "230px", minWidth: "230px", height: "100%",
    background: "#0a0a0a", borderLeft: "1px solid rgba(255,90,0,0.25)",
    display: "flex", flexDirection: "column", overflow: "hidden",
  },
  // Top strip with clock + ONLINE (replaces global top bar)
  topStrip: {
    padding: "5px 10px", display: "flex", alignItems: "center",
    justifyContent: "flex-end", gap: "8px",
    background: "#000", borderBottom: "1px solid rgba(255,90,0,0.3)",
    flexShrink: 0,
  },
  clock: { fontSize: "10px", letterSpacing: "0.06em", color: "#555", fontFamily: "'JetBrains Mono',monospace" },
  onlineWrap: { display: "flex", alignItems: "center", gap: "5px", fontSize: "10px", letterSpacing: "0.15em", color: "#00ff88", fontFamily: "'JetBrains Mono',monospace" },
  onlineDot: { width: "5px", height: "5px", background: "#00ff88", borderRadius: "50%", animation: "pulse-dot 2s ease-in-out infinite" },
  // Nav header
  header: { padding: "10px 12px 8px 12px", borderBottom: "1px solid rgba(255,90,0,0.15)", flexShrink: 0 },
  headerLabel: { fontSize: "10px", letterSpacing: "0.28em", color: "#ff5a00", fontFamily: "'JetBrains Mono',monospace", marginBottom: "3px" },
  headerTitle: { fontSize: "14px", letterSpacing: "0.08em", color: "#e0e0e0", fontFamily: "'JetBrains Mono',monospace", fontWeight: "700" },
  // Path bar
  pathBar: { padding: "5px 12px", borderBottom: "1px solid rgba(255,90,0,0.08)", fontSize: "11px", fontFamily: "'JetBrains Mono',monospace", color: "#444", background: "#080808", flexShrink: 0 },
  pathCurrent: { color: "#ff5a00" },
  // List
  list: { flex: 1, overflowY: "auto", padding: "2px 0" },
  // Root section items
  item: (active, hovered, isDir) => ({
    display: "flex", alignItems: "center", cursor: "pointer",
    background: active ? (isDir ? "rgba(0,255,136,0.07)" : "rgba(255,90,0,0.1)") : hovered ? "rgba(255,255,255,0.03)" : "transparent",
    borderLeft: active ? `2px solid ${isDir ? "#00ff88" : "#ff5a00"}` : "2px solid transparent",
    borderBottom: "1px solid rgba(255,255,255,0.025)",
    padding: "11px 10px 11px 12px", transition: "all 0.1s", gap: "7px",
  }),
  itemIcon: (active, isDir) => ({ fontSize: "12px", color: isDir ? (active ? "#00ff88" : "#2a8a5a") : "#ff5a00", fontFamily: "'JetBrains Mono',monospace", minWidth: "12px", fontWeight: "bold" }),
  itemLabel: (active, isDir) => ({ fontSize: "14px", color: isDir ? (active ? "#00ff88" : "#5acc88") : (active ? "#ffffff" : "#aaa"), fontFamily: "'JetBrains Mono',monospace", fontWeight: "700", flex: 1 }),
  itemMeta: (active) => ({ fontSize: "11px", color: active ? "rgba(255,90,0,0.7)" : "#333", fontFamily: "'JetBrains Mono',monospace" }),
  arrow: (active, isDir) => ({ fontSize: "9px", color: active ? (isDir ? "#00ff88" : "#ff5a00") : "transparent", fontFamily: "monospace" }),
  // Back button
  backBtn: {
    display: "flex", alignItems: "center", gap: "8px", cursor: "pointer",
    padding: "8px 12px", borderBottom: "1px solid rgba(255,90,0,0.12)",
    color: "#ff5a00", fontSize: "11px", fontFamily: "'JetBrains Mono',monospace",
    background: "rgba(255,90,0,0.03)", flexShrink: 0,
  },
  // Sub-file items inside a directory
  subItem: (active, hovered) => ({
    display: "flex", alignItems: "center", cursor: "pointer",
    background: active ? "rgba(255,90,0,0.09)" : hovered ? "rgba(255,255,255,0.025)" : "transparent",
    borderLeft: active ? "2px solid #ff5a00" : "2px solid transparent",
    borderBottom: "1px solid rgba(255,255,255,0.02)",
    padding: "9px 10px 9px 14px", transition: "all 0.1s", gap: "6px",
  }),
  subName: (active) => ({ fontSize: "11px", color: active ? "#f0f0f0" : "#888", fontFamily: "'JetBrains Mono',monospace", fontWeight: active ? "700" : "400", flex: 1 }),
  subStatus: (status) => ({
    fontSize: "8px", color: status === "DEPLOYED" ? "#00ff88" : "#ff5a00",
    border: `1px solid ${status === "DEPLOYED" ? "rgba(0,255,136,0.25)" : "rgba(255,90,0,0.25)"}`,
    padding: "1px 4px", fontFamily: "'JetBrains Mono',monospace",
  }),
  subLabel: { fontSize: "9px", color: "#555", fontFamily: "'JetBrains Mono',monospace", flex: 1 },
  // Footer
  footer: { padding: "8px 12px", borderTop: "1px solid rgba(255,90,0,0.1)", background: "rgba(0,0,0,0.4)", flexShrink: 0 },
  footerLine: { fontSize: "9px", letterSpacing: "0.08em", color: "#555", fontFamily: "'JetBrains Mono',monospace", marginBottom: "2px" },
  navHint: { fontSize: "8px", letterSpacing: "0.06em", color: "#2a2a2a", fontFamily: "'JetBrains Mono',monospace" },
};

function NavClock() {
  const { useState, useEffect } = React;
  const [t, setT] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []);
  return <span style={navS.clock}>{t.toUTCString().replace("GMT","UTC")}</span>;
}

function DashboardPanel({ sections, activeSection, currentDir, onFileSelect, onDirSelect, onSubFileSelect }) {
  const { useState } = React;
  const [hoveredIdx,  setHoveredIdx]  = useState(null);
  const [hoveredSub,  setHoveredSub]  = useState(null);
  const [activeSubFile, setActiveSubFile] = useState(null);

  const pathStr = currentDir ? `~/${currentDir}/` : "~/";
  const subItems = getDirContents(currentDir);

  const handleSectionClick = (section) => {
    setActiveSubFile(null);
    if (section.type === "dir") onDirSelect(section.id);
    else onFileSelect(section.id);
  };

  const handleSubFileClick = (item) => {
    setActiveSubFile(item.name);
    if (onSubFileSelect) onSubFileSelect(currentDir, item.name, item.label);
  };

  const handleBack = () => {
    setActiveSubFile(null);
    onFileSelect(null); // signals App to reset to root
  };

  return (
    <div style={navS.panel}>

      {/* Clock + ONLINE strip */}
      <div style={navS.topStrip}>
        <NavClock />
        <div style={navS.onlineWrap}>
          <div style={navS.onlineDot} />
          ONLINE
        </div>
      </div>

      {/* Nav header */}
      <div style={navS.header}>
        <div style={navS.headerLabel}>// NAVIGATOR</div>
        <div style={navS.headerTitle}>PORTFOLIO.SYS v2.5</div>
      </div>

      {/* Path bar */}
      <div style={navS.pathBar}>
        <span style={{ color: "#444" }}>user@portfolio:</span>
        <span style={navS.pathCurrent}>{pathStr}</span>
      </div>

      <div style={navS.list}>
        {/* Always show root sections — directory just gets highlighted */}
        {sections.map((section, i) => {
          const isActive = section.id === activeSection || section.id === currentDir;
          const isHovered = hoveredIdx === i;
          const isDir = section.type === "dir";
          return (
            <div
              key={section.id}
              id={`nav-${section.id}`}
              style={navS.item(isActive, isHovered, isDir)}
              onClick={() => {
                if (isDir) onDirSelect(section.id);
                else onFileSelect(section.id);
              }}
              onMouseEnter={() => setHoveredIdx(i)}
              onMouseLeave={() => setHoveredIdx(null)}
              role="button" tabIndex={0} aria-selected={isActive}
              onKeyDown={e => e.key==="Enter" && (isDir ? onDirSelect(section.id) : onFileSelect(section.id))}
            >
              <span style={navS.itemIcon(isActive, isDir)}>{section.icon}</span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={navS.itemLabel(isActive, isDir)}>{section.label}</div>
                <div style={navS.itemMeta(isActive)}>{section.meta}</div>
              </div>
              <span style={navS.arrow(isActive, isDir)}>▶</span>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div style={navS.footer}>
        <div style={navS.footerLine}>
          {currentDir ? `IN: ${currentDir}/` : activeSection ? `SEL: ${activeSection}` : "SELECT FILE OR DIR"}
        </div>
        <div style={navS.navHint}>↑↓ KEYS · CLICK · TERMINAL</div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPanel });