import ApartmentOutlined from "@mui/icons-material/ApartmentOutlined";
import BadgeOutlined from "@mui/icons-material/BadgeOutlined";
import CardGiftcardOutlined from "@mui/icons-material/CardGiftcardOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import GppBadOutlined from "@mui/icons-material/GppBadOutlined";
import GppGoodOutlined from "@mui/icons-material/GppGoodOutlined";
import GroupsOutlined from "@mui/icons-material/GroupsOutlined";
import ImageOutlined from "@mui/icons-material/ImageOutlined";
import ListAltOutlined from "@mui/icons-material/ListAltOutlined";
import ManageAccountsOutlined from "@mui/icons-material/ManageAccountsOutlined";
import MeetingRoomOutlined from "@mui/icons-material/MeetingRoomOutlined";
import MilitaryTechOutlined from "@mui/icons-material/MilitaryTechOutlined";
import NumbersOutlined from "@mui/icons-material/NumbersOutlined";
import PeopleOutlineOutlined from "@mui/icons-material/PeopleOutlineOutlined";
import PersonOffOutlined from "@mui/icons-material/PersonOffOutlined";
import SecurityOutlined from "@mui/icons-material/SecurityOutlined";
import TrendingUpOutlined from "@mui/icons-material/TrendingUpOutlined";
import WallpaperOutlined from "@mui/icons-material/WallpaperOutlined";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActionArea from "@mui/material/CardActionArea";
import CardContent from "@mui/material/CardContent";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { Link } from "react-router-dom";
import { useExternalAuth } from "../auth/ExternalAuthProvider.jsx";
import { EXTERNAL_CAPABILITIES, hasExternalCapability } from "../config/capabilities.js";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
import { ExternalPage } from "../shared/PageComponents.jsx";

const CAPABILITY_ICONS = {
  "agency:list": ApartmentOutlined,
  "banner:create": ImageOutlined,
  "bd-manager:list": SecurityOutlined,
  "bd:list": GroupsOutlined,
  "host:list": BadgeOutlined,
  "pretty-id:grant": NumbersOutlined,
  "privilege:grant": CardGiftcardOutlined,
  "privilege:list": ListAltOutlined,
  "room-background:grant": WallpaperOutlined,
  "room:list": MeetingRoomOutlined,
  "room:update": EditOutlined,
  "super-admin:list": SecurityOutlined,
  "team:view": GroupsOutlined,
  "user-ban:list": PersonOffOutlined,
  "user-level:grant": TrendingUpOutlined,
  "user-title:grant": MilitaryTechOutlined,
  "user:ban": GppBadOutlined,
  "user:list": PeopleOutlineOutlined,
  "user:unban": GppGoodOutlined,
  "user:update": ManageAccountsOutlined
};

export default function OverviewPage() {
  const { session } = useExternalAuth();
  const { t } = useExternalI18n();

  return (
    <ExternalPage title={t("nav.overview")}>
      <Box className="external-capability-grid">
        {EXTERNAL_CAPABILITIES.map((item) => {
          const enabled = hasExternalCapability(session, item.code);
          const Icon = CAPABILITY_ICONS[item.code] || ListAltOutlined;
          const content = (
            <CardContent>
              <Stack spacing={1.5} sx={{ alignItems: "flex-start" }}>
                <Box className="external-capability-icon"><Icon fontSize="small" /></Box>
                <Typography fontWeight={700}>{t(item.labelKey)}</Typography>
                <Chip color={enabled ? "success" : "default"} label={enabled ? t("overview.enabled") : t("overview.notEnabled")} size="small" variant="outlined" />
              </Stack>
            </CardContent>
          );
          return (
            <Card className={enabled ? "external-capability-card is-enabled" : "external-capability-card"} key={item.code} variant="outlined">
              {enabled ? <CardActionArea component={Link} to={item.path}>{content}</CardActionArea> : content}
            </Card>
          );
        })}
      </Box>
    </ExternalPage>
  );
}
