import React from "react";
import { useAuth } from "../context/AuthContext";
import { PageHeader } from "../components/PageHeader";

const ALL_CARDS = [
  { label: "Catalog", desc: "Products, categories, pricing",  to: "/catalog", roles: ["admin", "vendor", "user"] },
  { label: "Events",  desc: "Events, tax overrides, reports", to: "/events",  roles: ["admin", "vendor"] },
  { label: "Users",   desc: "Manage roles and access",        to: "/users",   roles: ["admin", "vendor"] },
  { label: "Vendor",  desc: "Business details and tax settings", to: "/vendor", roles: ["admin", "vendor"] },
  { label: "Reports", desc: "Sales and tax summaries",        to: "/reports", roles: ["admin", "vendor"] },
];

export default function DashboardPage() {
  const { user } = useAuth();
  const cards = ALL_CARDS.filter((c) => c.roles.includes(user?.role ?? ""));

  return (
    <div style={{ padding: "32px 28px", maxWidth: 900 }}>
      <PageHeader
        title="Dashboard"
        subtitle={`Welcome back, ${user?.name} · ${user?.vendorName}`}
      />
      <div style={grid}>
        {cards.map((card) => (
          <a key={card.label} href={card.to} style={cardStyle}>
            <div style={{ fontWeight: 600, marginBottom: 4 }}>{card.label}</div>
            <div style={{ color: "var(--color-text-muted)", fontSize: 13 }}>{card.desc}</div>
          </a>
        ))}
      </div>
    </div>
  );
}

const grid: React.CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
  gap: 16,
};

const cardStyle: React.CSSProperties = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius)",
  padding: "20px",
  boxShadow: "var(--shadow)",
  textDecoration: "none",
  color: "var(--color-text)",
  display: "block",
};