/* FrontCall Hub — app shell + dashboard chart helpers. */

const FC_TABS = [
  { key: "dashboard", label: "Início", icon: "house" },
  { key: "calls", label: "Ligações", icon: "phone" },
  { key: "messages", label: "Mensagens", icon: "message-circle" },
  { key: "leads", label: "Clientes", icon: "users" },
  { key: "agenda", label: "Agenda", icon: "calendar" },
  { key: "more", label: "Mais", icon: "ellipsis" },
];

function AppHeader({ title, subtitle, onBack, right, brandMark }) {
  return (
    <div style={{
      flex: "none", background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)",
      padding: "12px 16px 12px", display: "flex", alignItems: "center", gap: 12, minHeight: 56,
    }}>
      {onBack && (
        <button onClick={onBack} style={{ border: "none", background: "var(--surface-sunken)", width: 36, height: 36, borderRadius: "var(--radius-full)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flex: "none" }}>
          <Icon name="chevron-left" size={20} color="var(--text-strong)" />
        </button>
      )}
      {brandMark && (
        <img src="../assets/logos/frontcall-hub-symbol-blue.svg" alt="" width="30" height="30" style={{ flex: "none" }} />
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: "var(--fs-h3)", fontWeight: "var(--fw-bold)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", lineHeight: 1.1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</div>
        {subtitle && <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)", marginTop: 2 }}>{subtitle}</div>}
      </div>
      {right}
    </div>
  );
}

function BottomTabs({ active, onChange }) {
  return (
    <div style={{
      flex: "none", background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)",
      display: "flex", padding: "8px 8px 26px", gap: 2,
    }}>
      {FC_TABS.map((t) => {
        const on = t.key === active;
        const unread = t.key === "messages" && window.msgUnreadTotal ? window.msgUnreadTotal() : 0;
        return (
          <button key={t.key} onClick={() => onChange(t.key)} style={{
            flex: 1, border: "none", background: "transparent", cursor: "pointer",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: "6px 0",
            color: on ? "var(--brand)" : "var(--text-faint)", position: "relative",
          }}>
            <span style={{ position: "relative", display: "flex" }}>
              <Icon name={t.icon} size={23} color={on ? "var(--brand)" : "var(--gray-400)"} strokeWidth={on ? 2.4 : 2} />
              {unread > 0 && (
                <span style={{ position: "absolute", top: -4, right: -8, minWidth: 16, height: 16, borderRadius: "var(--radius-full)", background: "var(--hot-500)", color: "#fff", fontSize: 9.5, fontWeight: "var(--fw-bold)", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 4px", border: "1.5px solid var(--surface-card)" }}>{unread}</span>
              )}
            </span>
            <span style={{ fontSize: 10.5, fontWeight: on ? "var(--fw-bold)" : "var(--fw-medium)", letterSpacing: "var(--ls-snug)" }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function AppShell({ header, children, activeTab, onTab, scrollRef }) {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)", fontFamily: "var(--font-sans)" }}>
      <div style={{ flex: "none", height: 54, background: "var(--surface-card)" }} />
      {header}
      <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", overflowX: "hidden", WebkitOverflowScrolling: "touch" }}>
        {children}
      </div>
      <BottomTabs active={activeTab} onChange={onTab} />
    </div>
  );
}

function SectionLabel({ children, action }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "4px 2px 10px" }}>
      <span style={{ fontSize: "var(--fs-micro)", fontWeight: "var(--fw-bold)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--text-muted)" }}>{children}</span>
      {action}
    </div>
  );
}

/* ---- Dashboard charts ---- */

function FunnelBars({ data }) {
  const max = Math.max(...data.map((d) => d.value));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {data.map((d, i) => (
        <div key={d.stage} style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 96, flex: "none", fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{d.stage}</span>
          <div style={{ flex: 1, height: 26, background: "var(--surface-sunken)", borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
            <div style={{
              width: `${(d.value / max) * 100}%`, height: "100%",
              background: `color-mix(in oklab, var(--brand) ${100 - i * 16}%, white)`,
              borderRadius: "var(--radius-sm)", transition: "width var(--dur-slow) var(--ease-out)",
            }} />
          </div>
          <span style={{ width: 26, flex: "none", textAlign: "right", fontSize: "var(--fs-body)", fontWeight: "var(--fw-bold)", color: "var(--text-strong)" }}>{d.value}</span>
        </div>
      ))}
    </div>
  );
}

function ServiceMix({ data }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", height: 12, borderRadius: "var(--radius-full)", overflow: "hidden" }}>
        {data.map((d) => <div key={d.label} style={{ width: `${d.pct}%`, background: d.tone }} />)}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 16px" }}>
        {data.map((d) => (
          <div key={d.label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: d.tone, flex: "none" }} />
            <span style={{ fontSize: "var(--fs-sm)", color: "var(--text-secondary)", flex: 1 }}>{d.label}</span>
            <span style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{d.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Heatmap({ data }) {
  const days = ["S", "T", "Q", "Q", "S", "S", "D"];
  const hours = ["8a", "10a", "12p", "2p", "4p", "6p"];
  const shades = ["var(--gray-100)", "var(--blue-200)", "var(--blue-400)", "var(--blue-600)"];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
      <div style={{ display: "grid", gridTemplateColumns: "18px repeat(6, 1fr)", gap: 5, marginBottom: 2 }}>
        <span />
        {hours.map((h) => <span key={h} style={{ fontSize: 10, color: "var(--text-faint)", textAlign: "center" }}>{h}</span>)}
      </div>
      {data.map((row, ri) => (
        <div key={ri} style={{ display: "grid", gridTemplateColumns: "18px repeat(6, 1fr)", gap: 5, alignItems: "center" }}>
          <span style={{ fontSize: 10, color: "var(--text-faint)" }}>{days[ri]}</span>
          {row.map((v, ci) => <div key={ci} style={{ height: 18, borderRadius: 4, background: shades[v] }} />)}
        </div>
      ))}
    </div>
  );
}

function callIcon(c) {
  if (c.status === "no_answer") return { name: "phone-missed", color: "var(--danger-500)" };
  if (c.recurring) return { name: "phone-incoming", color: "var(--brand)" };
  return { name: "phone-incoming", color: "var(--text-muted)" };
}

Object.assign(window, { FC_TABS, AppHeader, BottomTabs, AppShell, SectionLabel, FunnelBars, ServiceMix, Heatmap, callIcon });