// Resources — Drive/Sheet-backed document hub. Three sections share one page:
//   • Hilton Fastpay  → files from a designated Google Drive folder
//   • Communications  → newsletters/announcements index (title, date, link),
//                        designed for ~weekly self-serve additions
//   • Forms & Tax     → the hosted W-9 (secure download) + key documents
//
// Drive folders can't be listed client-side without the Drive API, so each file
// list is driven by a published index Sheet (row-1 headers) the client updates.
// Placeholder sheet/folder ids until RDB provides the real ones.

// ---- Hilton Fastpay (file index, maintained by RDB) ----
const FASTPAY_INDEX_CSV = "/api/sheet?src=fastpay";
const FASTPAY_SEED = [
  { Name: "Hilton Fastpay — Enrollment Guide", Type: "PDF", Updated: "2026-05-02", Url: "#" },
  { Name: "Fastpay Commission Schedule 2026", Type: "Sheet", Updated: "2026-04-18", Url: "#" },
  { Name: "Fastpay FAQ — Contractors", Type: "PDF", Updated: "2026-03-30", Url: "#" },
  { Name: "Direct Deposit Setup Form", Type: "PDF", Updated: "2026-03-12", Url: "#" },
];

// ---- Communications archive (index, maintained by RDB) ----
const COMMS_INDEX_CSV = "/api/sheet?src=comms";
const COMMS_SEED = [
  { Title: "Backstage Weekly — Jun 22", Date: "2026-06-22", Type: "Newsletter", Url: "#" },
  { Title: "Summer storm waivers — what to know", Date: "2026-06-20", Type: "Announcement", Url: "#" },
  { Title: "Backstage Weekly — Jun 15", Date: "2026-06-15", Type: "Newsletter", Url: "#" },
  { Title: "New supplier added: Get Your Guide", Date: "2026-06-11", Type: "Announcement", Url: "#" },
  { Title: "Backstage Weekly — Jun 8", Date: "2026-06-08", Type: "Newsletter", Url: "#" },
  { Title: "SION reconciliation tips", Date: "2026-06-03", Type: "Announcement", Url: "#" },
];

function buildFiles(text) {
  const { rows } = rdbParseSheetObjects(text);
  // The live sheets use their own header names (Fastpay: "Document Title" /
  // "Drive Link"; Comms: "Title" / "Drive Link"). Map those onto the canonical
  // fields the rows render from so a live read isn't discarded as "empty" and
  // links point at the real Drive URL instead of falling back to "#".
  return rows
    .map(r => {
      r.Name  = r.Name  || r["Document Title"] || r.Title || "";
      r.Title = r.Title || r.Name;
      r.Url   = r.Url   || r["Drive Link"] || r.Link || "";
      return r;
    })
    .filter(r => (r.Name || r.Title || "").trim());
}

// One row in a Drive-backed file list.
function DriveFileRow({ name, meta, type, url, last, compact }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={url || "#"} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", alignItems: compact ? "flex-start" : "center", gap: compact ? 14 : 16,
        padding: compact ? "14px 16px" : "15px 20px",
        borderBottom: last ? "none" : "1px solid var(--ink-2)",
        background: hover ? "var(--ink-1)" : "transparent", textDecoration: "none", cursor: "pointer",
        transition: "background 160ms" }}>
      <div style={{ width: compact ? 34 : 38, height: compact ? 34 : 38, border: "1px solid " + (hover ? "var(--rdb-gold)" : "var(--ink-3)"), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: compact ? 2 : 0, transition: "border-color 160ms" }}>
        <Icon name={fileIcon(type)} size={compact ? 15 : 17} color="var(--rdb-gold)" />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={compact
          ? { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--fg-1)", whiteSpace: "normal", overflowWrap: "anywhere", lineHeight: 1.3 }
          : { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-6)", marginTop: 3 }}>{meta}</div>
      </div>
      <Icon name={hover ? "external-link" : "download"} size={16} color={hover ? "var(--rdb-gold)" : "var(--ink-5)"} style={{ flexShrink: 0, marginTop: compact ? 2 : 0 }} />
    </a>
  );
}

function SectionHead({ icon, title, status, action }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 16, flexWrap: "wrap" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Icon name={icon} size={18} color="var(--rdb-gold)" />
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--fg-1)", margin: 0, letterSpacing: "-0.01em" }}>{title}</h2>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        {status && <SyncPill status={status} liveLabel="Live · read-only" sampleLabel="Sample index · live when hosted" />}
        {action}
      </div>
    </div>
  );
}

function OpenFolderBtn() { return null; }


function ResourcesPage({ compact }) {
  const fastpay = useSheet(FASTPAY_INDEX_CSV, FASTPAY_SEED, buildFiles);
  const comms = useSheet(COMMS_INDEX_CSV, COMMS_SEED, buildFiles);
  const pad = compact ? "22px 18px 60px" : "48px 64px 96px";

  return (
    <div style={{ padding: pad, maxWidth: compact ? "100%" : 1100, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>Backstage · Resources</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 30 : 48, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02 }}>Resources</h1>
        <p style={{ fontFamily: "var(--font-body)", fontSize: compact ? 14 : 16, lineHeight: 1.6, color: "var(--fg-2)", margin: "16px 0 0", maxWidth: 620 }}>
          Documents, payment guides, communications, and tax forms — kept current by the RDB team.
        </p>
      </div>

      <div style={{ height: 1, background: "var(--rdb-gold-soft)", margin: compact ? "26px 0" : "36px 0 32px" }} />

      {/* Hilton Fastpay */}
      <section style={{ marginBottom: compact ? 36 : 52 }}>
        <SectionHead icon="credit-card" title="Hilton Fastpay" status={fastpay.status} />
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: "0 0 16px", maxWidth: 600 }}>
          Enrollment guides, schedules, and forms for the Hilton Fastpay commission program, maintained by the RDB team.
        </p>
        <div style={{ border: "1px solid var(--ink-3)" }}>
          {fastpay.rows.map((f, i) => (
            <DriveFileRow key={i} name={f.Name} type={f.Type} url={f.Url}
              meta={[f.Month, f.Type, f.Updated ? "Updated " + f.Updated : "", f.Notes].filter(Boolean).join(" · ")}
              last={i === fastpay.rows.length - 1} compact={compact} />
          ))}
        </div>
      </section>

      {/* Communications */}
      <section style={{ marginBottom: compact ? 36 : 52 }}>
        <SectionHead icon="newspaper" title="Communications" status={comms.status} />
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: "0 0 16px", maxWidth: 600 }}>
          Newsletters and announcements, newest first. New issues are posted weekly.
        </p>
        <div style={{ border: "1px solid var(--ink-3)" }}>
          {comms.rows.map((c, i) => (
            <CommsRow key={i} c={c} last={i === comms.rows.length - 1} compact={compact} />
          ))}
        </div>
      </section>

      {/* Forms & Tax — W-9 */}
      <section>
        <SectionHead icon="shield-check" title="Forms & Tax" />
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: "0 0 16px", maxWidth: 600 }}>
          RDB's completed W-9 for your records — available here and on the Information page.
        </p>
        <div style={{ maxWidth: compact ? "100%" : 460 }}>
          <W9Card />
        </div>
      </section>
    </div>
  );
}

function CommsRow({ c, last, compact }) {
  const [hover, setHover] = React.useState(false);
  const isNews = (c.Type || "").toLowerCase().includes("news");
  return (
    <a href={c.Url || "#"} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", alignItems: compact ? "flex-start" : "center", gap: compact ? 14 : 16,
        padding: compact ? "14px 16px" : "15px 20px",
        borderBottom: last ? "none" : "1px solid var(--ink-2)",
        background: hover ? "var(--ink-1)" : "transparent", textDecoration: "none", cursor: "pointer", transition: "background 160ms" }}>
      <Icon name={isNews ? "mail" : "megaphone"} size={compact ? 15 : 17} color={hover ? "var(--rdb-gold)" : "var(--ink-6)"} style={{ flexShrink: 0, marginTop: compact ? 3 : 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={compact
          ? { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--fg-1)", whiteSpace: "normal", overflowWrap: "anywhere", lineHeight: 1.3 }
          : { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.Title}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-6)", marginTop: 3 }}>{c.Type} · {c.Date}</div>
      </div>
      <Icon name="arrow-up-right" size={16} color={hover ? "var(--rdb-gold)" : "var(--ink-5)"} style={{ flexShrink: 0, marginTop: compact ? 3 : 0 }} />
    </a>
  );
}

Object.assign(window, { ResourcesPage, DriveFileRow, CommsRow });