// 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);
  return rows.filter(r => (r.Name || r.Title || "").trim());
}

// One row in a Drive-backed file list.
function DriveFileRow({ name, meta, type, url, last }) {
  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: "center", gap: 16, padding: "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: 38, height: 38, border: "1px solid " + (hover ? "var(--rdb-gold)" : "var(--ink-3)"), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "border-color 160ms" }}>
        <Icon name={fileIcon(type)} size={17} color="var(--rdb-gold)" />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ 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)"} />
    </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.Type, f.Updated ? "Updated " + f.Updated : ""].filter(Boolean).join(" · ")}
              last={i === fastpay.rows.length - 1} />
          ))}
        </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) => {
            const [hover, set] = [null, null];
            return <CommsRow key={i} c={c} last={i === comms.rows.length - 1} />;
          })}
        </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 }) {
  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: "center", gap: 16, padding: "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={17} color={hover ? "var(--rdb-gold)" : "var(--ink-6)"} style={{ flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ 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)"} />
    </a>
  );
}

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