/* Wa by Elivate — Dashboard home */

function StatCard({ icon, label, value, sub, tone, children }) {
  const I = Icons[icon];
  return (
    <div className="card stat-card">
      <div className="stat-top">
        <span className={"stat-ic " + tone}><I size={17} /></span>
        <span className="stat-label">{label}</span>
      </div>
      <div className="stat-value">{value}</div>
      {sub && <div className="stat-sub">{sub}</div>}
      {children}
    </div>
  );
}

const ACT_ICONS = { reply: "message", join: "userPlus", send: "send", kick: "userMinus", lock: "lock", unlock: "unlock" };

function DashboardScreen({ go }) {
  const [status, setStatus] = React.useState({ status: "reconnecting" });
  const [rules, setRules] = React.useState([]);
  const [groups, setGroups] = React.useState([]);
  const [logs, setLogs] = React.useState([]);
  const [settings, setSettings] = React.useState({ dailyCap: 400, hourlyCap: 80, throttleMinMs: 3000, throttleMaxMs: 10000, dedicatedNumber: true });
  const [groupError, setGroupError] = React.useState("");

  React.useEffect(() => {
    let alive = true;
    const load = async () => {
      const [nextStatus, nextRules, nextLogs, nextSettings] = await Promise.all([
        window.WaApi.status().catch(() => ({ status: "reconnecting" })),
        window.WaApi.automations().catch(() => []),
        window.WaApi.logs({ limit: 7 }).catch(() => []),
        window.WaApi.settings().catch(() => settings),
      ]);
      let nextGroups = [];
      let nextGroupError = "";
      try {
        nextGroups = await window.WaApi.groups();
      } catch (err) {
        nextGroupError = err.message;
      }
      if (!alive) return;
      setStatus(nextStatus);
      setRules(nextRules);
      setLogs(nextLogs);
      setSettings(nextSettings);
      setGroups(nextGroups);
      setGroupError(nextGroupError);
    };
    load();
    const timer = setInterval(load, 5000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  const activeRules = rules.filter((rule) => rule.enabled).length;
  const sentToday = logs.filter((log) => log.dir === "out" && String(log.time).slice(0, 10) === new Date().toISOString().slice(0, 10)).length;
  const pct = settings.dailyCap ? Math.min(100, Math.round((sentToday / settings.dailyCap) * 100)) : 0;
  const connected = status.status === "connected";
  return (
    <div className="page route-anim">
      <div className="stat-row">
        <StatCard icon="link" label="Connection" tone={connected ? "green" : "amber"} value={<span style={{ display: "flex", alignItems: "center", gap: 9 }}><span className={"dot " + (connected ? "green" : "amber")} style={{ width: 9, height: 9 }}></span>{connected ? "Connected" : "Waiting"}</span>} sub={connected ? "Linked · session persisted" : "Scan QR to load live groups"} />
        <StatCard icon="bolt" label="Active automations" tone="brand" value={activeRules} sub={`of ${rules.length} total rules`} />
        <StatCard icon="users" label="Groups" tone="violet" value={groups.length} sub={groupError ? "Connect WhatsApp to sync" : `${groups.filter(g => g.isAdmin).length} you administer`} />
        <StatCard icon="send" label="Sent today" tone="blue" value={sentToday}>
          <div className="cap-bar"><div className="cap-fill" style={{ width: pct + "%" }}></div></div>
          <div className="stat-sub">{sentToday} / {settings.dailyCap} daily cap · {pct}%</div>
        </StatCard>
      </div>

      <div className="dash-grid">
        <div className="card">
          <div className="card-head">
            <h2>Recent activity</h2>
            <button className="btn ghost sm" onClick={() => go("logs")}>View log <Icons.chevron size={14} /></button>
          </div>
          <div className="activity-list">
            {logs.map((a) => {
              const I = Icons[iconForLog(a)];
              return (
                <div className="activity-row" key={a.id}>
                  <span className={"act-ic " + toneForLog(a)}><I size={15} /></span>
                  <div className="act-body">
                    <div className="act-text">{a.evt}</div>
                    <div className="act-sub">{a.detail}</div>
                  </div>
                  <span className="act-time mono">{formatLogTime(a.time)}</span>
                </div>
              );
            })}
            {logs.length === 0 && <div className="empty-state"><Icons.logs size={26} /><p>No live activity yet.</p></div>}
          </div>
        </div>

        <div className="dash-side">
          <div className="card card-pad quick-card">
            <h2 style={{ fontSize: 14, marginBottom: 13 }}>Quick actions</h2>
            <button className="quick-btn" onClick={() => go("automations")}><span className="qb-ic brand"><Icons.plus size={16} /></span> New automation <Icons.chevron size={15} className="qb-arrow" /></button>
            <button className="quick-btn" onClick={() => go("send")}><span className="qb-ic blue"><Icons.send size={15} /></span> Send a message <Icons.chevron size={15} className="qb-arrow" /></button>
            <button className="quick-btn" onClick={() => go("groups")}><span className="qb-ic violet"><Icons.users size={15} /></span> Manage groups <Icons.chevron size={15} className="qb-arrow" /></button>
          </div>

          <div className="card card-pad">
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <span style={{ color: "var(--green)" }}><Icons.shield size={16} /></span>
              <h2 style={{ fontSize: 14 }}>Safety</h2>
              <span className="tag green" style={{ marginLeft: "auto", height: 22 }}>Healthy</span>
            </div>
            <div className="safety-row"><span>Throttle</span><b className="muted">{Math.round(settings.throttleMinMs / 1000)}-{Math.round(settings.throttleMaxMs / 1000)}s randomized</b></div>
            <div className="safety-row"><span>Hourly cap</span><b className="muted">{settings.hourlyCap} / hr</b></div>
            <div className="safety-row"><span>Dedicated number</span><b style={{ color: settings.dedicatedNumber ? "var(--green)" : "var(--amber)" }}>{settings.dedicatedNumber ? "Yes" : "No"}</b></div>
            <div className="safety-row" style={{ borderBottom: "none" }}><span>Re-scans (7d)</span><b className="muted">0</b></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function iconForLog(log) {
  if (log.evt?.includes("reply")) return "message";
  if (log.evt?.includes("send")) return "send";
  if (log.evt?.includes("lock")) return "lock";
  if (log.evt?.includes("remove")) return "userMinus";
  if (log.evt?.includes("qr")) return "qr";
  return "logs";
}

function toneForLog(log) {
  if (log.level === "error") return "red";
  if (log.level === "warn") return "amber";
  if (log.level === "action") return "brand";
  return "blue";
}

function formatLogTime(value) {
  if (!value) return "";
  return new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

window.DashboardScreen = DashboardScreen;