"use client";

import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import type { StakeholderViewMode } from "@/features/stakeholder/components/table/stakeholder-table-config";

type StakeholderViewToggleProps = {
  viewMode: StakeholderViewMode;
  onViewModeChange: (viewMode: StakeholderViewMode) => void;
};

export function StakeholderViewToggle({
  viewMode,
  onViewModeChange,
}: StakeholderViewToggleProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const toggleItems = [
    {
      mode: "list" as const,
      label: "List",
      icon: dashboardAssets.listView,
      width: 13.67,
      height: 10.34,
    },
    {
      mode: "grid" as const,
      label: "Grid",
      icon: dashboardAssets.gridView,
      width: 8.67,
      height: 8.67,
    },
  ];

  return (
    <Box
      sx={{
        height: 40,
        width: { xs: "100%", sm: "auto" },
        borderRadius: "6px",
        bgcolor: isDark ? alpha("#ffffff", 0.08) : "#f5f5f5",
        border: `1px solid ${isDark ? alpha("#ffffff", 0.12) : "#f5f5f5"}`,
        p: 0.5,
        display: "inline-flex",
        alignItems: "center",
        gap: 0.5,
        flexShrink: 0,
      }}
    >
      {toggleItems.map((item) => {
        const active = viewMode === item.mode;

        return (
          <ButtonBase
            key={item.mode}
            onClick={() => onViewModeChange(item.mode)}
            sx={{
              height: "100%",
              px: 1,
              borderRadius: "2px",
              bgcolor: active
                ? "#1a64a8"
                : isDark
                  ? alpha("#ffffff", 0.1)
                  : "#ffffff",
              display: "inline-flex",
              alignItems: "center",
              gap: 0.75,
              minWidth: 70,
              justifyContent: "center",
              transition: "all 0.2s ease",
              "&:hover": {
                bgcolor: active
                  ? "#15548e"
                  : isDark
                    ? alpha("#ffffff", 0.14)
                    : "#ffffff",
              },
            }}
          >
            <DashboardAssetIcon
              src={item.icon}
              width={item.width}
              height={item.height}
              sx={{
                filter: active ? "brightness(0) invert(1)" : "none",
              }}
            />

            <Typography
              sx={{
                color: active
                  ? "#ffffff"
                  : isDark
                    ? alpha("#ffffff", 0.85)
                    : "#252b37",
                fontSize: 12,
                fontWeight: 500,
                lineHeight: 1,
              }}
            >
              {item.label}
            </Typography>
          </ButtonBase>
        );
      })}
    </Box>
  );
}