/* eslint-disable */
// Reporting 2.0 — Top-level App: hash-based router + Reports Index + Report Page

(function () {
const { useState, useEffect, useMemo } = React;
const {
  PageShell, Breadcrumb, FilterBar, DataTable, LoadingTable, EmptyTableBody,
  Icon, Button, REPORTS, CATEGORIES, fmtWeekLabel,
} = window;

// =============================================================================
// REPORTS INDEX
// =============================================================================
function ReportsIndex() {
  return (
    <PageShell>
      <Breadcrumb items={[{ label: "Dashboard" }, { label: "Reports" }]} />
      <div style={{ marginBottom: 32 }}>
        <h1 className="display-2" style={{ margin: 0, fontSize: 40, lineHeight: 1.1, color: "var(--neutral-100)" }}>Reports</h1>
        <p className="body-1" style={{ marginTop: 6, color: "var(--neutral-70)" }}>
          Select a report type to view and export data from HireArt.
        </p>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 28, maxWidth: 880 }}>
        {CATEGORIES.map(cat => (
          <section key={cat.key}>
            <div className="subtitle-1" style={{
              fontSize: 11, color: "var(--neutral-60)", marginBottom: 12,
              letterSpacing: "0.12em",
            }}>{cat.label}</div>

            {cat.reports.length === 0 ? (
              <div style={{
                padding: "16px 20px", border: "1px dashed var(--neutral-30)",
                borderRadius: 8, color: "var(--neutral-60)", fontSize: 13,
              }}>
                Coming soon — Candidate Pipeline is deferred pending data model work.
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {cat.reports.map(r => (
                  <a key={r.slug} onClick={() => window.location.hash = `#/reports/${r.slug}`}
                    style={{
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "18px 20px",
                      background: "var(--neutral-10)",
                      border: "2px solid var(--neutral-100)", borderRadius: 8,
                      boxShadow: "var(--shadow-sm)",
                      cursor: "pointer", textDecoration: "none", color: "inherit",
                      transition: "transform 0.1s, box-shadow 0.1s",
                    }}
                    onMouseEnter={e => { e.currentTarget.style.transform = "translate(-2px, -2px)"; e.currentTarget.style.boxShadow = "6px 6px 0 0 var(--neutral-100)"; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}>
                    <div style={{ flex: 1, paddingRight: 16 }}>
                      <div style={{ fontFamily: "var(--font-headline)", fontSize: 18, fontWeight: 700, color: "var(--neutral-100)", lineHeight: 1.3 }}>
                        {r.name}
                      </div>
                      <div style={{ fontSize: 14, color: "var(--neutral-70)", marginTop: 4, lineHeight: 1.5 }}>
                        {r.description}
                      </div>
                    </div>
                    <Icon name="chevron-right" size={20} style={{ color: "var(--neutral-100)" }} />
                  </a>
                ))}
              </div>
            )}
          </section>
        ))}
      </div>
    </PageShell>
  );
}

// =============================================================================
// REPORT PAGE
// =============================================================================
function ReportPage({ slug, stateOverride }) {
  const report = REPORTS[slug];
  const [filters, setFilters] = useState({
    period: "last_week", weeks: [],
    job: "All jobs", location: "All locations",
    filterBy: "work_week",
  });
  const [sortKey, setSortKey] = useState("Name");
  const [sortDir, setSortDir] = useState("asc");

  if (!report) {
    return (
      <PageShell>
        <Breadcrumb items={[{ label: "Dashboard" }, { label: "Reports", href: "#/reports" }, { label: "Not found" }]} />
        <div style={{ padding: 48, textAlign: "center", color: "var(--neutral-70)" }}>Report not found.</div>
      </PageShell>
    );
  }

  // Apply Job/Location filtering
  const filteredRows = useMemo(() => {
    let rows = report.rows;
    if (filters.job && filters.job !== "All jobs") {
      rows = rows.filter(r => r[2] === filters.job || r[1] === filters.job);
    }
    if (filters.location && filters.location !== "All locations") {
      rows = rows.filter(r => r.includes(filters.location));
    }
    return rows;
  }, [report, filters]);

  // Sorting
  const sortedRows = useMemo(() => {
    const colIdx = report.columns.findIndex(c => c.name === sortKey);
    if (colIdx < 0) return filteredRows;
    const dir = sortDir === "asc" ? 1 : -1;
    return [...filteredRows].sort((a, b) => {
      const av = a[colIdx], bv = b[colIdx];
      if (av == null) return 1; if (bv == null) return -1;
      if (av < bv) return -1 * dir;
      if (av > bv) return 1 * dir;
      return 0;
    });
  }, [filteredRows, sortKey, sortDir, report]);

  function handleSort(name) {
    if (sortKey === name) setSortDir(d => d === "asc" ? "desc" : "asc");
    else { setSortKey(name); setSortDir("asc"); }
  }

  // Build period banner label
  let periodLabel = report.defaultWeekLabel;
  if (filters.period === "custom") {
    if (filters.weeks.length === 0) periodLabel = "Select weeks above";
    else if (filters.weeks.length === 1) periodLabel = fmtWeekLabel(filters.weeks[0]);
    else periodLabel = `${fmtWeekLabel(filters.weeks[0])} — ${fmtWeekLabel(filters.weeks[filters.weeks.length-1])} (${filters.weeks.length} weeks)`;
  } else if (filters.period === "last_month") periodLabel = "Mar 2026";
  else if (filters.period === "last_quarter") periodLabel = "Q1 2026 (Jan – Mar)";
  else if (filters.period === "ytd") periodLabel = "Year to date — Jan 1 to Apr 28, 2026";

  // Determine state: data | loading | empty | error
  const state = stateOverride || "data";

  return (
    <PageShell>
      <Breadcrumb items={[
        { label: "Dashboard" },
        { label: "Reports", href: "#/reports" },
        { label: report.name },
      ]} />

      <a onClick={() => window.location.hash = "#/reports"}
        style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          color: "var(--neutral-80)", fontSize: 13, fontWeight: 600,
          textDecoration: "none", cursor: "pointer", marginBottom: 12,
        }}>
        <Icon name="arrow-left" size={14} /> Back to Reports
      </a>

      <div style={{ marginBottom: 24, maxWidth: 720 }}>
        <h1 className="display-2" style={{ margin: 0, fontSize: 40, lineHeight: 1.1, color: "var(--neutral-100)" }}>{report.name}</h1>
        <p className="body-1" style={{ marginTop: 6, color: "var(--neutral-70)" }}>{report.description}</p>
      </div>

      {/* Card */}
      <div style={{
        background: "var(--neutral-10)",
        border: "2px solid var(--neutral-100)", borderRadius: 12,
        boxShadow: "var(--shadow-md)", overflow: "hidden",
      }}>
        <FilterBar report={report} filters={filters} setFilters={setFilters} />

        {/* Info bar */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "10px 24px", background: "var(--bg-2)",
          borderBottom: "1px solid var(--neutral-20)",
          fontSize: 13, color: "var(--neutral-70)",
        }}>
          <span>Showing data for <strong style={{ color: "var(--neutral-100)" }}>{periodLabel}</strong></span>
          {state === "data" && <span style={{ fontSize: 12, color: "var(--neutral-60)" }}>{sortedRows.length} {report.lineItemLabel}</span>}
        </div>

        {/* Body */}
        {state === "loading" && <LoadingTable columns={report.columns} />}
        {state === "empty" && (
          <EmptyTableBody columns={report.columns}
            title="No data for this selection"
            subtitle="Try adjusting your filters — widen the date range or pick a different job." />
        )}
        {state === "error" && (
          <EmptyTableBody columns={report.columns}
            title="This report took too long to run"
            subtitle="Try narrowing the date range or selecting a specific job." />
        )}
        {state === "data" && (
          sortedRows.length === 0 ? (
            <EmptyTableBody columns={report.columns}
              title="No data for this selection"
              subtitle="Try adjusting your filters — widen the date range or pick a different job." />
          ) : (
            <DataTable columns={report.columns} rows={sortedRows}
              sortKey={sortKey} sortDir={sortDir} onSort={handleSort}
              masking={false} isOnboarding={!!report.isOnboarding} />
          )
        )}

        {/* Footer */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "10px 24px", borderTop: "1px solid var(--neutral-20)",
          background: "var(--neutral-10)",
          fontSize: 12, color: "var(--neutral-60)",
        }}>
          <span>{state === "data" ? `${sortedRows.length} ${report.lineItemLabel}` : "—"}</span>
          <span>Updated 4 minutes ago</span>
        </div>
      </div>
    </PageShell>
  );
}

// =============================================================================
// ROUTER + APP
// =============================================================================
function App() {
  const [hash, setHash] = useState(window.location.hash || "#/reports");
  const [stateOverride, setStateOverride] = useState(null);

  useEffect(() => {
    function onHash() { setHash(window.location.hash || "#/reports"); }
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Tweaks panel: state override
  const tweakDefaults = window.__TWEAKS__ || { stateOverride: "data" };
  const overrideToUse = stateOverride || (tweakDefaults.stateOverride === "data" ? null : tweakDefaults.stateOverride);

  // Listen for tweak edits broadcast from parent
  useEffect(() => {
    function onMessage(e) {
      const d = e.data;
      if (!d) return;
      if (d.type === "__local_tweak_change") {
        setStateOverride(d.value === "data" ? null : d.value);
      }
    }
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);

  // Parse hash
  let view = "index";
  let slug = null;
  const m = hash.match(/^#\/reports\/([^/?]+)/);
  if (m) { view = "report"; slug = m[1]; }

  if (view === "report") {
    return <ReportPage slug={slug} stateOverride={overrideToUse} />;
  }
  return <ReportsIndex />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();