/* global React, PbIcon, PbEyebrow, PbBearAvatar */

/* "En jij ziet dit" — dashboard mockup that mirrors the WhatsApp ticket */
function DashboardSection() {
  return (
    <section style={{ background: "#fff", padding: "120px 32px 100px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <PbEyebrow>Terwijl jij niets hoeft te doen</PbEyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: "var(--fg-1)", margin: "16px auto 0", maxWidth: 760,
          }}>Alles overzichtelijk in één inbox.</h2>
        </div>
        <DashboardMock />
      </div>
    </section>
  );
}

function DashboardMock() {
  return (
    <div style={{
      position: "relative",
      background: "linear-gradient(180deg, #FAFAF7 0%, #F0FBF5 100%)",
      borderRadius: 20, padding: 24,
      border: "1px solid var(--border-default)",
    }}>
      <div style={{
        background: "#fff", borderRadius: 12,
        border: "1px solid var(--border-default)",
        boxShadow: "0 20px 40px rgba(0,0,0,0.08)",
        overflow: "hidden",
        display: "grid", gridTemplateColumns: "200px 1fr",
        minHeight: 540,
      }}>
        {/* sidebar */}
        <div style={{ background: "var(--bg-cream)", borderRight: "1px solid var(--border-default)", padding: "16px 12px", display: "flex", flexDirection: "column", gap: 4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 8px 16px" }}>
            <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--color-pandbeer-green)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <PbBearAvatar size={18} />
            </div>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, color: "var(--fg-1)" }}>Pandbeer</span>
          </div>
          {[
            ["Inbox", "inbox", true, "12"],
            ["Panden", "building-2", false, null],
            ["Vakmannen", "wrench", false, null],
            ["Eigenaren", "users", false, null],
            ["Briefings", "file-check", false, null],
          ].map(([l, ic, active, badge]) => (
            <div key={l} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 6,
              background: active ? "#fff" : "transparent",
              border: active ? "1px solid var(--border-default)" : "1px solid transparent",
              fontSize: 13, fontWeight: active ? 600 : 500,
              color: active ? "var(--fg-1)" : "var(--fg-2)",
            }}>
              <PbIcon name={ic} size={16} color={active ? "var(--color-forest)" : "var(--fg-3)"} />
              <span style={{ flex: 1 }}>{l}</span>
              {badge && <span style={{ fontSize: 11, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "var(--color-pandbeer-green)", color: "#fff" }}>{badge}</span>}
            </div>
          ))}
          <div style={{ marginTop: "auto", paddingTop: 16 }}>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-3)", padding: "0 10px 8px" }}>Account</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", fontSize: 13, color: "var(--fg-2)" }}>
              <div style={{ width: 22, height: 22, borderRadius: 999, background: "var(--color-mint)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 600, color: "var(--color-forest)" }}>BV</div>
              <span style={{ flex: 1 }}>Bart de Vries</span>
            </div>
          </div>
        </div>

        {/* main */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          {/* topbar */}
          <div style={{ padding: "14px 24px", borderBottom: "1px solid var(--border-default)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--fg-1)", letterSpacing: "-0.01em" }}>Inbox</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>Vandaag · 12 meldingen · 3 urgent</div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <div style={{ fontSize: 12, fontWeight: 500, color: "var(--fg-2)", padding: "8px 12px", border: "1px solid var(--border-default)", borderRadius: 8, display: "inline-flex", alignItems: "center", gap: 6 }}>
                Filter
                <PbIcon name="chevron-down" size={12} />
              </div>
              <div style={{ fontSize: 12, fontWeight: 500, color: "#fff", padding: "8px 12px", background: "var(--color-forest)", borderRadius: 8 }}>+ Nieuwe melding</div>
            </div>
          </div>

          {/* stats row */}
          <div style={{ padding: "20px 24px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              ["Actieve tickets", "3", null],
              ["In behandeling", "2", null],
              ["Afgerond deze week", "8", "+3"],
              ["Gem. responstijd", "47s", "−12s"],
            ].map(([l, v, d]) => (
              <div key={l} style={{ background: "var(--bg-cream)", border: "1px solid var(--border-subtle)", borderRadius: 10, padding: "12px 14px" }}>
                <div style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 500 }}>{l}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 4 }}>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, color: "var(--fg-1)", letterSpacing: "-0.02em" }}>{v}</span>
                  {d && <span style={{ fontSize: 11, fontWeight: 500, color: "var(--color-forest)" }}>{d}</span>}
                </div>
              </div>
            ))}
          </div>

          {/* AI insight */}
          <div style={{ margin: "0 24px 16px", padding: "12px 14px", background: "linear-gradient(135deg, rgba(127,233,197,0.18) 0%, rgba(16,217,160,0.08) 100%)", border: "1px solid rgba(16,217,160,0.3)", borderRadius: 10, display: "flex", alignItems: "flex-start", gap: 10 }}>
            <div style={{ width: 22, height: 22, borderRadius: 999, background: "var(--color-pandbeer-green)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}>
              <PbBearAvatar size={16} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--color-forest)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 2 }}>AI-insight</div>
              <div style={{ fontSize: 13, color: "var(--fg-1)", lineHeight: 1.45 }}>
                Lekkagemeldingen zijn deze maand <b>15% hoger</b> dan gemiddeld. Twee komen uit Bedrijfsverzamelgebouw De Basis — wellicht een patroon.
              </div>
            </div>
          </div>

          {/* tickets table */}
          <div style={{ padding: "0 24px 24px", flex: 1 }}>
            <div style={{ border: "1px solid var(--border-default)", borderRadius: 10, overflow: "hidden", background: "#fff" }}>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr 180px 130px 80px", padding: "10px 16px", background: "var(--bg-cream)", borderBottom: "1px solid var(--border-default)", gap: 12, fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-3)" }}>
                <span>Status</span><span>Melding</span><span>Pand</span><span>Vakman</span><span>Tijd</span>
              </div>
              {[
                { st: "Toegewezen", urgent: true, t: "Lekkage gang unit 3B", id: "MELD-2041", b: "Bedrijfsverzamel De Basis", v: "Van Dijk Loodgieters", time: "14:22", highlight: true },
                { st: "Open", urgent: false, t: "CV start niet meer", id: "MELD-2040", b: "Kantoorpand Houtstraat", v: "—", time: "13:18" },
                { st: "Bij vakman", urgent: false, t: "Brandblusser keuring", id: "MELD-2038", b: "De Basis", v: "Van Houten BHV", time: "Gisteren" },
                { st: "Afgerond", urgent: false, t: "Sleutels kwijt", id: "MELD-2039", b: "Bedrijfsverzamel De Basis", v: "Slotenmaker Friso", time: "Gisteren" },
              ].map((r, i) => (
                <div key={r.id} style={{
                  display: "grid", gridTemplateColumns: "auto 1fr 180px 130px 80px", padding: "12px 16px", gap: 12,
                  borderBottom: i < 3 ? "1px solid var(--border-subtle)" : 0,
                  background: r.highlight ? "rgba(127,233,197,0.10)" : "#fff",
                  alignItems: "center",
                }}>
                  <StatusPill status={r.st} urgent={r.urgent} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>{r.t}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", marginTop: 1 }}>#{r.id}</div>
                  </div>
                  <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{r.b}</span>
                  <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{r.v}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>{r.time}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatusPill({ status, urgent }) {
  const map = {
    "Open":        { bg: "#FEF3C7", fg: "#92400E", dot: "#F59E0B" },
    "Toegewezen":  { bg: "rgba(16,217,160,0.16)", fg: "#065F46", dot: "#10D9A0" },
    "Bij vakman":  { bg: "rgba(127,233,197,0.30)", fg: "#065F46", dot: "#0EA47A" },
    "Afgerond":    { bg: "#F3F4F6", fg: "#374151", dot: "#9CA3AF" },
  };
  const c = map[status] || map["Open"];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 9px", borderRadius: 999, background: c.bg, color: c.fg, fontSize: 11, fontWeight: 500, border: urgent ? "1px solid #EF4444" : "1px solid transparent", whiteSpace: "nowrap" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: c.dot }} />
      {status}{urgent ? " · hoog" : ""}
    </span>
  );
}

window.PbDashboardSection = DashboardSection;