"use client";

import type { ReactNode } from "react";
import { Box, Typography } from "@mui/material";
import { SearchOffOutlined } from "@mui/icons-material";
import { alpha } from "@mui/material/styles";

export interface PanelEmptyStateProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  variant?: "panel" | "compact";
}

const PanelEmptyState = ({
  icon,
  title,
  description,
  variant = "panel",
}: PanelEmptyStateProps) => {
  const compact = variant === "compact";

  return (
    <Box
      role="status"
      aria-live="polite"
      lang="zh-CN"
      sx={(theme) => ({
        width: "100%",
        height: compact ? "auto" : "100%",
        minHeight: compact ? 48 : 220,
        display: "flex",
        flexDirection: compact ? "row" : { xs: "column", sm: "row" },
        alignItems: "center",
        justifyContent: "center",
        gap: compact ? 1.5 : { xs: 1.75, sm: 2.5 },
        px: compact ? 1.5 : { xs: 2, sm: 4 },
        py: compact ? 1.25 : { xs: 4, sm: 5 },
        color: "text.secondary",
        textAlign: compact ? "left" : { xs: "center", sm: "left" },
        boxSizing: "border-box",
        "& .MuiTypography-root": {
          textWrap: "pretty",
        },
        "& .MuiSvgIcon-root": {
          fontSize: compact ? 22 : 32,
        },
        "& > [aria-hidden='true']": {
          flex: "0 0 auto",
          width: compact ? 36 : 56,
          height: compact ? 36 : 56,
          borderRadius: compact ? 2 : 3,
          display: "grid",
          placeItems: "center",
          color: "primary.main",
          backgroundColor: alpha(theme.palette.primary.main, 0.08),
          boxShadow: `inset 0 0 0 1px ${alpha(
            theme.palette.primary.main,
            0.12,
          )}`,
        },
      })}
    >
      {icon ? <Box aria-hidden="true">{icon}</Box> : null}
      <Box sx={{ minWidth: 0, maxWidth: compact ? "none" : 380 }}>
        <Typography
          variant={compact ? "body2" : "subtitle1"}
          sx={{
            color: "text.primary",
            fontWeight: 600,
            lineHeight: compact ? 1.5 : 1.55,
          }}
        >
          {title}
        </Typography>
        {description ? (
          <Typography
            variant={compact ? "caption" : "body2"}
            sx={{
              display: "block",
              mt: compact ? 0.25 : 0.75,
              color: "text.secondary",
              lineHeight: compact ? 1.6 : 1.7,
            }}
          >
            {description}
          </Typography>
        ) : null}
      </Box>
    </Box>
  );
};

export interface SchemeQueryEmptyStateProps {
  hasQueried: boolean;
}

export const SchemeQueryEmptyState = ({
  hasQueried,
}: SchemeQueryEmptyStateProps) => (
  <PanelEmptyState
    icon={<SearchOffOutlined />}
    title={hasQueried ? "未找到符合条件的方案" : "尚未查询历史方案"}
    description={
      hasQueried
        ? "请调整查询条件后重新查询，或先创建一个新方案。"
        : "设置查询条件后点击“查询”，这里将显示可查看的历史方案。"
    }
  />
);

export default PanelEmptyState;