// CardByte Enterprise — Dashboard (analytics overview).
const React = window.React;
const Icon = window.CBIcon;

function Spark({ color, points }) {
  const w = 88, h = 30;
  const max = Math.max(...points), min = Math.min(...points);
  const span = max - min || 1;
  const d = points.map((p, i) => `${(i / (points.length - 1)) * w},${h - ((p - min) / span) * (h - 4) - 2}`).join(" ");
  return (
    <svg width={w} height={h} style={{ display: "block" }}>
      <polyline points={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SectionCard({ title, action, children }) {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 22 }}>
      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
        <h3 style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)" }}>{title}</h3>
        {action}
      </div>
      {children}
    </div>
  );
}

function PerfCard({ label, value, delta, trend, color, points, icon }) {
  const up = trend === "up";
  return (
    <div style={{ flex: 1, minWidth: 150, background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--text-muted)", fontSize: 12.5, fontWeight: 500 }}>
        <Icon name={icon} size={15} style={{ color: "var(--cb-blue)" }} /> {label}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 7, margin: "8px 0 6px" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, color: "var(--text-strong)" }}>{value}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, fontWeight: 500, color: up ? "var(--cb-success)" : "var(--cb-danger)" }}>{up ? "▲" : "▼"} {delta}</span>
      </div>
      <Spark color={color} points={points} />
    </div>
  );
}

function QuickAction({ icon, color, bg, label, onClick }) {
  return (
    <button onClick={onClick} style={{ flex: 1, display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", cursor: "pointer", fontFamily: "var(--font-sans)" }}
      onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--shadow-md)")}
      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}>
      <span style={{ width: 38, height: 38, borderRadius: "var(--radius-md)", background: bg, color, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={19} />
      </span>
      <span style={{ fontWeight: 600, fontSize: 14.5, color: "var(--text-strong)" }}>{label}</span>
    </button>
  );
}

function DashboardScreen() {
  const { Tabs, Button } = window.CardByteDesignSystem_069862;
  const [range, setRange] = React.useState("90d");
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
        <Tabs value={range} onChange={setRange} tabs={[{ id: "7d", label: "This Week" }, { id: "30d", label: "Last 30 Days" }, { id: "90d", label: "Last 90 Days" }]} style={{ flex: 1 }} />
        <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 240 }}>
          <span style={{ width: 34, height: 34, borderRadius: "50%", background: "var(--cb-blue-50)", color: "var(--cb-blue)", fontWeight: 600, fontSize: 13, display: "flex", alignItems: "center", justifyContent: "center" }}>AK</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 4 }}>Profile Strength</div>
            <div style={{ height: 7, borderRadius: 4, background: "var(--cb-gray-200)", overflow: "hidden" }}>
              <div style={{ width: "67%", height: "100%", background: "var(--cb-blue)", borderRadius: 4 }} />
            </div>
          </div>
          <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--text-strong)" }}>67%</span>
        </div>
      </div>

      <SectionCard title="Quick Actions">
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <QuickAction icon="sparkle" color="var(--cb-violet)" bg="var(--cb-violet-100)" label="Update Card" />
          <QuickAction icon="contacts" color="var(--cb-coral)" bg="var(--cb-coral-100)" label="Invite Users" />
          <QuickAction icon="scan" color="var(--cb-blue)" bg="var(--cb-blue-50)" label="Scan a Card" />
          <QuickAction icon="qr" color="var(--cb-green)" bg="var(--cb-green-100)" label="Share QR" />
        </div>
      </SectionCard>

      <SectionCard title="Card Analytics" action={<Button variant="secondary" size="sm" style={{ marginLeft: "auto", height: 32 }}>Expand</Button>}>
        <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginBottom: 10, fontWeight: 500 }}>Card Performance</div>
            <div style={{ display: "flex", gap: 12 }}>
              <PerfCard label="Card Scanned" value="0" delta="0%" trend="down" color="var(--cb-danger)" points={[3, 2, 4, 1, 2]} icon="scan" />
              <PerfCard label="Card Added" value="2" delta="200%" trend="up" color="var(--cb-coral)" points={[1, 2, 1, 4, 3]} icon="contacts" />
              <PerfCard label="Card Shared" value="16" delta="1400%" trend="up" color="var(--cb-gold)" points={[1, 1, 2, 6, 16]} icon="share" />
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginBottom: 10, fontWeight: 500 }}>My Activity</div>
            <div style={{ display: "flex", gap: 12 }}>
              <PerfCard label="Contacts Added" value="2" delta="200%" trend="up" color="var(--cb-blue)" points={[0, 1, 1, 2, 2]} icon="contacts" />
              <PerfCard label="Reminders" value="0" delta="0%" trend="down" color="var(--cb-gray-400)" points={[2, 1, 0, 0, 0]} icon="calendar" />
              <PerfCard label="Events" value="0" delta="0%" trend="down" color="var(--cb-gray-400)" points={[1, 0, 1, 0, 0]} icon="actions" />
            </div>
          </div>
        </div>
      </SectionCard>
    </div>
  );
}
window.CBDashboardScreen = DashboardScreen;