// ─────────────────────────────────────────────
// DO_HomePage.jsx
// Home page — grid of table cards
//
// Loaded in: do-app/index.html (before App.jsx)
// Used by:   App.jsx  as:
//   <DOHomePage tables={tables} theme={theme} onSelect={goList} />
//
// Layout notes:
//   • Cards are equal width via CSS grid auto-fill
//   • Desktop: ~4 cards per row (minmax 220px)
//   • Phone:   1 card full width (minmax 100%)
//   • Card layout: [Emoji  Name] on one line, Desc below
//   • Header shows APP_NAME + APP_DESC instead of "Tables"
//
// To tweak card styles yourself, look for SH.tableCard below.
// To change the grid column width, change the 220px in SH.tableGrid.
// To change header font size, look for SH.appName / SH.appDesc.
// ─────────────────────────────────────────────

function DOHomePage({ tables, theme, appName, appDesc, onSelect }) {

  // Filter hidden tables, then sort by the dev-assigned sort order
  const sorted = [...tables]
    .filter(t => t.show !== false)
    .sort((a, b) => {
      const sa = Number(a.sort ?? 99);
      const sb = Number(b.sort ?? 99);
      if (sa !== sb) return sa - sb;
      // Tie-break alphabetically
      return (a.name || "").localeCompare(b.name || "");
    });

  const br = theme?.border_radius ? `${theme.border_radius}px` : "10px";

  return (
    <div style={{ ...SH.wrap, background: theme?.page_bg || "#f8fafc" }}>

      {/* ── Header: App Name + optional description ── */}
      <div style={SH.header}>
        <div style={{ ...SH.appName, fontFamily: theme?.font || "'Segoe UI', sans-serif", color: theme?.primary || "#1a3a5c" }}>
          {appName}
        </div>
        {appDesc && (
          <div style={{ ...SH.appDesc, fontFamily: theme?.font || "'Segoe UI', sans-serif" }}>
            {appDesc}
          </div>
        )}
      </div>

      {/* ── Table card grid ── */}
      <div style={SH.grid}>
        {sorted.map((t, i) => {
          const icon = t.icon && t.icon.trim().length > 0 && !/[?]/.test(t.icon)
            ? t.icon.trim()
            : null;
          // Strip leading non-alpha chars from name (emoji prefix cleanup)
          const name = (t.name || "").replace(/^[^\w]+/, "").trim() || t.name || "";

          return (
            <button
              key={i}
              onClick={() => onSelect(t)}
              style={{
                ...SH.card,
                background:   theme?.card_bg || "#ffffff",
                borderRadius: br,
                fontFamily:   theme?.font || "'Segoe UI', sans-serif",
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)"; e.currentTarget.style.borderColor = (theme?.primary || "#2563eb"); }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = SH.card.boxShadow;             e.currentTarget.style.borderColor = "#e2e8f0"; }}
            >
              {/* ── Emoji + Name row ── */}
              <div style={SH.cardTop}>
                {icon && (
                  <span style={SH.cardIcon}>{icon}</span>
                )}
                <span style={{ ...SH.cardName, color: theme?.primary || "#1a3a5c" }}>
                  {name}
                </span>
              </div>

              {/* ── Description ── */}
              {t.desc && (
                <div style={SH.cardDesc}>{t.desc}</div>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// STYLES
// Edit these to change the home page appearance.
// ─────────────────────────────────────────────
const SH = {

  wrap: {
    padding: "24px 0",
  },

  // ── Header ──
  header: {
    marginBottom: 20,
  },
  appName: {
    fontSize:   26,
    fontWeight: 700,
    lineHeight: 1.2,
    marginBottom: 4,
  },
  appDesc: {
    fontSize: 13,
    color:    "#94a3b8",
    fontWeight: 400,
  },

  // ── Grid — equal-width cards ──
  // Change 220px to make cards wider/narrower.
  // Cards fill the row evenly; last row left-aligns naturally.
  grid: {
    display:             "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
    gap:                 14,
  },

  // ── Card ──
  // All cards are identical width (grid handles this).
  // minHeight ensures short-desc cards don't look tiny.
  card: {
    display:       "flex",
    flexDirection: "column",
    justifyContent:"flex-start",
    textAlign:     "left",
    padding:       "16px 18px",
    border:        "1px solid #e2e8f0",
    cursor:        "pointer",
    boxShadow:     "0 1px 3px rgba(0,0,0,0.05)",
    transition:    "box-shadow 0.15s, border-color 0.15s",
    minHeight:     80,
  },

  // ── Emoji + Name on same line ──
  cardTop: {
    display:    "flex",
    alignItems: "center",
    gap:        10,
    marginBottom: 6,
  },
  cardIcon: {
    fontSize:   26,
    lineHeight: 1,
    flexShrink: 0,
  },
  cardName: {
    fontSize:   18,
    fontWeight: 700,
    lineHeight: 1.2,
  },

  // ── Description ──
  // maxWidth keeps long descriptions from stretching oddly.
  // overflow hidden + 2-line clamp keeps card height uniform.
  cardDesc: {
    fontSize:         12,
    color:            "#94a3b8",
    lineHeight:       1.5,
    overflow:         "hidden",
    display:          "-webkit-box",
    WebkitLineClamp:  2,
    WebkitBoxOrient:  "vertical",
    maxWidth:         "100%",
  },

};