// ActionMinutes — home base dashboard
const { useState: useStateD, useEffect: useEffectD } = React;

const GATED_TILES = [
  { ic: "plug-zap", tt: "Set up integrations", ss: "Connect Legistar, CivicClerk, or Granicus and fully automate your process.", locked: true, key: "integrations" },
  { ic: "zap", tt: "More monthly credits", ss: "Pro raises your monthly allowance for busier seasons and more boards.", locked: true, key: "pro" },
  { ic: "mail-plus", tt: "Connect Outlook", ss: "Speaker registration and meeting emails, handled where you already work.", locked: true, key: "outlook" },
  { ic: "messages-square", tt: "Capture public comments", ss: "Take comments online before the meeting — tied to the same agenda.", locked: true, key: "comments" },
  { ic: "chart-column", tt: "Public comment reports", ss: "Turn comment threads into a report your council will actually read.", locked: true, key: "reports" },
  { ic: "lightbulb", tt: "Meeting insights", ss: "Patterns across your meetings — what's recurring, what's stuck.", soon: true, key: "insights" },
];

function DashboardPage({ name, navigate, user, appState, setAppState, isStaff }) {
  const [data, setData] = useStateD(null);
  const [loading, setLoading] = useStateD(true);
  const [fetchError, setFetchError] = useStateD(null);
  const [gateModal, setGateModal] = useStateD(null);
  const [exhaustModal, setExhaustModal] = useStateD(false);
  const [toast, setToast] = useStateD(null);

  // Staff switcher
  const [staffSearch, setStaffSearch] = useStateD("");
  const [staffAccounts, setStaffAccounts] = useStateD([]);
  const [staffSearching, setStaffSearching] = useStateD(false);
  const [showStaffSwitcher, setShowStaffSwitcher] = useStateD(false);

  useEffectD(() => {
    AM_API.dashboard.get().then((d) => {
      setData(d);
      // Sync credits into appState
      if (d.credits) setAppState((s) => ({ ...s, credits: d.credits }));
    }).catch((err) => {
      setFetchError(err.message || "Could not load dashboard.");
    }).finally(() => setLoading(false));
  }, []);

  const credits = data && data.credits ? data.credits : (appState.credits || { used: 0, total: 3, remaining: 3, resetsOn: "next month" });
  const boards = data && data.boards ? data.boards : [];
  const recentMinutes = data && data.recent ? data.recent : [];
  const inProgress = data && data.inProgress ? data.inProgress : [];
  const first = (user && user.name ? user.name : "there").split(" ")[0];

  const handleGenerate = (board) => {
    if (credits.remaining <= 0) {
      setExhaustModal(true);
    } else {
      setAppState((s) => ({ ...s, boardId: board.id, boardName: board.name }));
      navigate("/setup/equation");
    }
  };

  const talkToTeam = () => {
    setGateModal(null);
    setExhaustModal(false);
    setToast("Thanks — someone from PublicInput will reach out shortly.");
    setTimeout(() => setToast(null), 3200);
  };

  const handleStaffSearch = async (q) => {
    setStaffSearch(q);
    if (!q.trim()) { setStaffAccounts([]); return; }
    setStaffSearching(true);
    try {
      const results = await AM_API.admin.accounts(q);
      setStaffAccounts(results);
    } catch (err) {
      setStaffAccounts([]);
    } finally {
      setStaffSearching(false);
    }
  };

  const handleImpersonate = async (account) => {
    try {
      const res = await AM_API.admin.impersonate(account.clerkUserId || account.id);
      AM_API.setToken(res.accessToken);
      setAppState((s) => ({ ...s, actor: "staff", actorAccount: account }));
      setShowStaffSwitcher(false);
      // Reload dashboard for the target account
      window.location.reload();
    } catch (err) {
      setToast("Could not switch account: " + err.message);
      setTimeout(() => setToast(null), 3200);
    }
  };

  if (loading) {
    return (
      <div className="am-appmain" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }}>
        <span className="am-spin" style={{ width: 32, height: 32, borderColor: "rgba(3,149,255,0.2)", borderTopColor: "var(--pi-blue)", display: "inline-block" }}></span>
      </div>
    );
  }

  if (fetchError) {
    return (
      <div className="am-appmain">
        <div className="am-domain-note warn">
          <span className="ico"><AMIcon name="triangle-alert" size={15} /></span>
          <span>{fetchError}</span>
        </div>
        <button className="pi-btn pi-btn-primary" style={{ marginTop: 16 }} onClick={() => window.location.reload()}>Reload</button>
      </div>
    );
  }

  const primaryBoard = boards.length > 0 ? boards[0] : null;
  const nextMeeting = data && data.nextMeeting ? data.nextMeeting : null;

  return (
    <div className="am-appmain">
      {/* Staff switcher (isStaff users) */}
      {appState.isStaff && (
        <div style={{ marginBottom: 20 }}>
          {!showStaffSwitcher ? (
            <button className="pi-btn pi-btn-outline" style={{ fontSize: 12 }} onClick={() => setShowStaffSwitcher(true)}>
              <AMIcon name="shield" size={14} /> Switch to another account
            </button>
          ) : (
            <div className="pi-card" style={{ padding: "18px 22px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, marginBottom: 12 }}>Switch to account (staff)</div>
              <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
                <input
                  type="text" placeholder="Search by name or email…"
                  value={staffSearch} onChange={(e) => handleStaffSearch(e.target.value)}
                  style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 13, padding: "8px 12px", border: "1px solid var(--border-1)", borderRadius: "var(--radius-md)" }}
                />
                <button className="pi-btn pi-btn-ghost" onClick={() => { setShowStaffSwitcher(false); setStaffAccounts([]); setStaffSearch(""); }}>Cancel</button>
              </div>
              {staffSearching && <div style={{ fontSize: 12, color: "var(--fg-3)" }}>Searching…</div>}
              {staffAccounts.length > 0 && (
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  {staffAccounts.map((a) => (
                    <button key={a.id} onClick={() => handleImpersonate(a)}
                      style={{ textAlign: "left", background: "none", border: "1px solid var(--border-1)", borderRadius: "var(--radius-md)", padding: "10px 14px", cursor: "pointer" }}>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13 }}>{a.name || a.email}</div>
                      {a.jurisdiction && <div style={{ fontSize: 11, color: "var(--fg-3)" }}>{a.jurisdiction}</div>}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Primary CTA */}
      <div className="am-next-meeting">
        <div className="am-dotring" style={{ width: 220, height: 220, right: -70, top: -90, opacity: 0.25 }}></div>
        <div>
          <div className="tt">Good afternoon, {first}.</div>
          <div className="ss">
            {nextMeeting ? (
              <React.Fragment>
                <strong>{nextMeeting.boardName || (primaryBoard && primaryBoard.name) || "Your board"}</strong> meets <strong>{nextMeeting.dateLabel || "soon"}</strong>
                {nextMeeting.agendaPosted ? " — the agenda is already posted. Want minutes ready the morning after?" : "."}
              </React.Fragment>
            ) : primaryBoard ? (
              <React.Fragment>
                <strong>{primaryBoard.name}</strong> is set up and ready to go. Generate your first draft minutes.
              </React.Fragment>
            ) : (
              "Set up your first board to get started."
            )}
          </div>
        </div>
        {!isStaff && (
          <button className="pi-btn pi-btn-primary pi-btn-lg" style={{ flexShrink: 0 }} onClick={() => primaryBoard ? handleGenerate(primaryBoard) : navigate("/setup/board")}>
            <AMIcon name="sparkles" size={15} /> {primaryBoard ? "Generate minutes for your next meeting" : "Set up a board"}
          </button>
        )}
      </div>

      {/* Boards */}
      <div className="am-section-label">Your boards</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {boards.map((b) => (
          <div key={b.id} className="pi-card" style={{ padding: "20px 22px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15 }}>{b.name}</div>
                <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 3 }}>{b.jurisdiction || (user && user.jurisdiction) || ""}</div>
              </div>
              <span className="pi-badge pi-badge-success"><AMIcon name="check" size={11} strokeWidth={3} /> Setup complete</span>
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 14, fontSize: 12, color: "var(--fg-2)" }}>
              {b.agendaSource && <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><AMIcon name="file-text" size={13} color="#07AFAA" /> Agenda · {b.agendaSource}</span>}
              {b.videoSource && <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><AMIcon name="video" size={13} color="#07AFAA" /> Video · {b.videoSource}</span>}
              {b.hasTemplate && <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><AMIcon name="file-check" size={13} color="#07AFAA" /> Template on file</span>}
            </div>
            {!isStaff && (
              <div style={{ marginTop: 14 }}>
                <button className="pi-btn pi-btn-outline" style={{ fontSize: 12 }} onClick={() => handleGenerate(b)}>
                  <AMIcon name="sparkles" size={13} /> Generate minutes
                </button>
              </div>
            )}
          </div>
        ))}
        {boards.length === 0 && (
          <div className="pi-card" style={{ padding: "20px 22px", color: "var(--fg-3)", fontSize: 13 }}>
            No boards set up yet.
          </div>
        )}
        <button className="am-board-opt" style={{ borderStyle: "dashed", justifyContent: "center" }} onClick={() => navigate("/setup/board")}>
          <span className="ic" style={{ background: "var(--pi-gray-100)", color: "var(--fg-2)" }}><AMIcon name="plus" size={18} /></span>
          <span>
            <div className="tt">Add another board</div>
            <div className="ss">Council, Board of Supervisors, Planning… your credits cover them all</div>
          </span>
        </button>
      </div>

      {/* In-progress */}
      {inProgress.length > 0 && (
        <React.Fragment>
          <div className="am-section-label">In progress</div>
          <div className="pi-card" style={{ overflow: "hidden" }}>
            <table className="pi-table">
              <thead>
                <tr><th>Meeting</th><th>Board</th><th>Status</th><th></th></tr>
              </thead>
              <tbody>
                {inProgress.map((row) => (
                  <tr key={row.id} onClick={() => navigate("/jobs/" + row.id)}>
                    <td><span className="pi-row-title">{row.meetingTitle || "Meeting"}</span></td>
                    <td>{row.boardName || ""}</td>
                    <td><span className="pi-badge pi-badge-info">{row.stage || "Processing"}</span></td>
                    <td className="pi-row-actions"><AMIcon name="chevron-right" size={15} color="var(--pi-gray-400)" /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </React.Fragment>
      )}

      {/* Recent minutes */}
      <div className="am-section-label">Recent minutes</div>
      <div className="pi-card" style={{ overflow: "hidden" }}>
        {recentMinutes.length > 0 ? (
          <table className="pi-table">
            <thead>
              <tr><th>Meeting</th><th>Board</th><th>Status</th><th>Credits</th><th>Rating</th><th></th></tr>
            </thead>
            <tbody>
              {recentMinutes.map((row) => (
                <tr key={row.id} onClick={() => navigate("/minutes/" + (row.generationJobId || row.id))}>
                  <td>
                    <span className="pi-row-title">{row.meetingTitle || "Meeting"}</span>
                    {row.deliveredUtc && <div className="pi-row-sub">Delivered {new Date(row.deliveredUtc).toLocaleDateString()}</div>}
                  </td>
                  <td>{row.boardName || ""}</td>
                  <td><span className="pi-badge pi-badge-success">Draft delivered</span></td>
                  <td>{row.creditsUsed || 1}</td>
                  <td style={{ color: "#FFC700", letterSpacing: 1 }}>
                    {row.rating ? "★".repeat(row.rating) + "☆".repeat(5 - row.rating) : <span style={{ color: "var(--fg-3)" }}>—</span>}
                  </td>
                  <td className="pi-row-actions"><AMIcon name="chevron-right" size={15} color="var(--pi-gray-400)" /></td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="am-empty">
            <span className="ic"><AMIcon name="file-text" size={28} strokeWidth={1.5} /></span>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--fg-2)", marginBottom: 4 }}>No minutes yet</div>
            {primaryBoard ? `Generate your first draft — your ${primaryBoard.name} setup is ready to go.` : "Set up a board and generate your first draft."}
          </div>
        )}
      </div>

      {/* Gated tiles */}
      <div className="am-section-label">Do more with your meetings</div>
      <div className="am-gated-grid">
        {GATED_TILES.map((t) => (
          <button key={t.key} className="am-gated" onClick={() => !t.soon && setGateModal(t)}>
            <span className="lockbadge">{t.soon ? <span className="pi-badge pi-badge-neutral">Coming soon</span> : <AMIcon name="lock" size={14} />}</span>
            <span className="ic"><AMIcon name={t.ic} size={17} /></span>
            <div className="tt">{t.tt}</div>
            <div className="ss">{t.ss}</div>
          </button>
        ))}
      </div>

      {/* Gated feature modal */}
      {gateModal && (
        <AMModal
          title={gateModal.tt}
          onClose={() => setGateModal(null)}
          footer={
            <React.Fragment>
              <button className="pi-btn pi-btn-ghost" onClick={() => setGateModal(null)}>Maybe later</button>
              <button className="pi-btn pi-btn-primary" onClick={talkToTeam}><AMIcon name="phone" size={13} /> Talk to our team</button>
            </React.Fragment>
          }
        >
          <p style={{ fontSize: 13.5, color: "var(--fg-2)", lineHeight: 1.6, margin: 0 }}>
            {gateModal.ss} This is part of the full PublicInput platform — when you upgrade,
            your boards, templates, and minutes history come with you automatically. No re-setup,
            no starting over.
          </p>
          <div className="am-domain-note ok" style={{ alignItems: "center" }}>
            <span className="ico"><AMIcon name="badge-check" size={15} /></span>
            <span>Everything you've built in {name} migrates to PublicInput Core on day one.</span>
          </div>
        </AMModal>
      )}

      {/* Credit exhaustion modal */}
      {exhaustModal && (
        <AMModal
          title={`You've used all ${credits.total} credits this month`}
          onClose={() => setExhaustModal(false)}
          width={560}
          footer={
            <React.Fragment>
              <button className="pi-btn pi-btn-ghost" onClick={() => setExhaustModal(false)}>I'll wait for the reset</button>
              <button className="pi-btn pi-btn-primary" onClick={talkToTeam}><AMIcon name="zap" size={13} /> Upgrade to Pro</button>
            </React.Fragment>
          }
        >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <CreditsPill used={credits.used} allowance={credits.total} resetLabel={credits.resetsOn || "next month"} />
            <span style={{ fontSize: 12.5, color: "var(--fg-2)" }}>Your credits reset {credits.resetsOn ? "on " + credits.resetsOn : "soon"}.</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="am-plan-card">
              <div className="am-plan-name">Free <span className="pi-badge pi-badge-neutral">Current</span></div>
              <div className="am-plan-line"><AMIcon name="check" size={13} color="#07AFAA" /> {credits.total} meeting credits / month</div>
              <div className="am-plan-line"><AMIcon name="check" size={13} color="#07AFAA" /> Unlimited boards, pooled credits</div>
              <div className="am-plan-line" style={{ color: "var(--fg-3)" }}><AMIcon name="x" size={13} /> Integrations & automation</div>
            </div>
            <div className="am-plan-card featured">
              <div className="am-plan-name">Pro <span className="pi-badge pi-badge-info">More credits</span></div>
              <div className="am-plan-line"><AMIcon name="check" size={13} color="#0277CC" /> 12 meeting credits / month</div>
              <div className="am-plan-line"><AMIcon name="check" size={13} color="#0277CC" /> Priority generation queue</div>
              <div className="am-plan-line"><AMIcon name="check" size={13} color="#0277CC" /> Agenda-system integrations</div>
            </div>
          </div>
          <p style={{ fontSize: 12.5, color: "var(--fg-3)", margin: 0 }}>
            Running a whole meeting workflow — comments, registration, reports? Ask us about
            <strong> PublicInput Core</strong>; your {name} setup carries over.
          </p>
        </AMModal>
      )}

      {toast && <Toast icon="check">{toast}</Toast>}
    </div>
  );
}

Object.assign(window, { DashboardPage });