import AccountBalanceWalletOutlined from "@mui/icons-material/AccountBalanceWalletOutlined";
import AssessmentOutlined from "@mui/icons-material/AssessmentOutlined";
import CampaignOutlined from "@mui/icons-material/CampaignOutlined";
import StorageOutlined from "@mui/icons-material/StorageOutlined";

const reportSections = [
  { icon: AssessmentOutlined, key: "data", label: "数据报表" },
  { icon: AccountBalanceWalletOutlined, key: "finance", label: "财务报表" },
  { icon: CampaignOutlined, key: "operations", label: "运营报表" }
];

export function ReportSidebar({ activeSection = "data", onSectionChange }) {
  return (
    <aside className="databi-report-sidebar" aria-label="报表侧边栏">
      <div className="report-sidebar-brand" aria-hidden="true">
        <StorageOutlined fontSize="small" />
      </div>
      <nav className="report-sidebar-nav" role="tablist" aria-label="报表类型">
        {reportSections.map((section) => {
          const Icon = section.icon;
          const isActive = activeSection === section.key;
          return (
            <button
              aria-selected={isActive}
              className={isActive ? "report-sidebar-item is-active" : "report-sidebar-item"}
              key={section.key}
              onClick={() => onSectionChange?.(section.key)}
              role="tab"
              type="button"
            >
              <Icon fontSize="small" />
              <span>{section.label}</span>
            </button>
          );
        })}
      </nav>
    </aside>
  );
}

export function EmptyReportSection({ section }) {
  const label = reportSections.find((item) => item.key === section)?.label || "报表";
  return <section className="databi-empty-report-section" aria-label={label} />;
}