"use client";

import type { ReactNode } from "react";

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

import {
  FileCheckOutlineIcon,
  FileCloseOutlineIcon,
  FilesOutlineIcon,
  FolderEditOutlineIcon,
} from "@/components/dashboard/dashboard-icons";
import { useAppLanguage } from "@/components/providers/app-language-provider";

import { IN_PROGRESS_COLOR } from "../plenary-data";
import {
  normalizePlenaryLanguage,
  plenaryText,
} from "../plenary-i18n";

type PlenarySummaryCardProps = {
  label: string;
  value: string;
  icon: ReactNode;
  backgroundColor: string;
  borderColor: string;
};

export function PlenarySummaryCards() {
  const theme = useTheme();
  const { language } = useAppLanguage();

  const currentLanguage =
    normalizePlenaryLanguage(language);

  const text = plenaryText[currentLanguage];

  const cards: PlenarySummaryCardProps[] = [
    {
      label: text.totalIssues,
      value: "179",
      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.mode === "dark"
          ? 0.18
          : 0.12
      ),
      borderColor: alpha(
        theme.palette.primary.main,
        theme.palette.mode === "dark"
          ? 0.35
          : 0.22
      ),
      icon: (
        <FilesOutlineIcon
          sx={{
            fontSize: 18,
            color:
              theme.palette.primary.main,
          }}
        />
      ),
    },
    {
      label: text.solved,
      value: "166/179",
      backgroundColor: alpha(
        theme.palette.success.main,
        theme.palette.mode === "dark"
          ? 0.18
          : 0.12
      ),
      borderColor: alpha(
        theme.palette.success.main,
        theme.palette.mode === "dark"
          ? 0.35
          : 0.22
      ),
      icon: (
        <FileCheckOutlineIcon
          sx={{
            fontSize: 18,
            color:
              theme.palette.success.main,
          }}
        />
      ),
    },
    {
      label: text.inProgress,
      value: "13/179",
      backgroundColor: alpha(
        IN_PROGRESS_COLOR,
        theme.palette.mode === "dark"
          ? 0.22
          : 0.14
      ),
      borderColor: alpha(
        IN_PROGRESS_COLOR,
        theme.palette.mode === "dark"
          ? 0.4
          : 0.28
      ),
      icon: (
        <FolderEditOutlineIcon
          sx={{
            fontSize: 18,
            color: IN_PROGRESS_COLOR,
          }}
        />
      ),
    },
    {
      label: text.notAddressed,
      value: "0/179",
      backgroundColor: alpha(
        theme.palette.error.main,
        theme.palette.mode === "dark"
          ? 0.18
          : 0.12
      ),
      borderColor: alpha(
        theme.palette.error.main,
        theme.palette.mode === "dark"
          ? 0.35
          : 0.22
      ),
      icon: (
        <FileCloseOutlineIcon
          sx={{
            fontSize: 18,
            color:
              theme.palette.error.main,
          }}
        />
      ),
    },
    {
      label: text.totalPrimaryAgencies,
      value: "14/14",
      backgroundColor: alpha(
        theme.palette.text.secondary,
        theme.palette.mode === "dark"
          ? 0.12
          : 0.08
      ),
      borderColor: alpha(
        theme.palette.text.secondary,
        theme.palette.mode === "dark"
          ? 0.24
          : 0.16
      ),
      icon: (
        <FilesOutlineIcon
          sx={{
            fontSize: 18,
            color:
              theme.palette.text.secondary,
          }}
        />
      ),
    },
  ];

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: "repeat(2, minmax(0, 1fr))",
          md: "repeat(5, minmax(0, 1fr))",
        },
        gap: 1.5,
      }}
    >
      {cards.map((card) => (
        <PlenarySummaryCard
          key={card.label}
          {...card}
        />
      ))}
    </Box>
  );
}

function PlenarySummaryCard({
  label,
  value,
  icon,
  backgroundColor,
  borderColor,
}: PlenarySummaryCardProps) {
  const theme = useTheme();

  const isDark =
    theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        width: "100%",
        minHeight: 96,
        px: 2,
        py: 1.75,
        borderRadius: "14px",
        bgcolor: backgroundColor,
        border: `1px solid ${borderColor}`,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent:
            "space-between",
          gap: 2,
        }}
      >
        <Box sx={{ minWidth: 0 }}>
          <Typography
            sx={{
              color: isDark
                ? "#b8c3d6"
                : "#667085",
              fontSize: 11,
              fontWeight: 500,
              whiteSpace: "nowrap",
            }}
          >
            {label}
          </Typography>

          <Typography
            sx={{
              mt: 1.25,
              color: isDark
                ? "#f8fafc"
                : "#1f2937",
              fontSize: 24,
              fontWeight: 600,
              lineHeight: 1,
              letterSpacing: "-0.02em",
            }}
          >
            {value}
          </Typography>
        </Box>

        <Box
          sx={{
            width: 44,
            height: 44,
            borderRadius: "14px",
            bgcolor: isDark
              ? "#0b1730"
              : "#ffffff",
            border: `1px solid ${borderColor}`,
            display: "grid",
            placeItems: "center",
            flexShrink: 0,
          }}
        >
          {icon}
        </Box>
      </Box>
    </Box>
  );
}