"use client";

import React from "react";
import {
  Box,
  Chip,
  Paper,
  Stack,
  Typography,
  alpha,
  useTheme,
} from "@mui/material";
import type { Theme } from "@mui/material/styles";
import BarChartRounded from "@mui/icons-material/BarChartRounded";
import LocationOnRounded from "@mui/icons-material/LocationOnRounded";
import SensorsRounded from "@mui/icons-material/SensorsRounded";
import BuildCircleRounded from "@mui/icons-material/BuildCircleRounded";

import { ChatInlineChart } from "./ChatInlineChart";
import type { AgentArtifact } from "./GlobalChatbox.types";

const artifactIcon = (kind: AgentArtifact["kind"]) => {
  if (kind === "chart") return <BarChartRounded sx={{ fontSize: 18 }} />;
  if (kind === "map") return <LocationOnRounded sx={{ fontSize: 18 }} />;
  if (kind === "panel") return <SensorsRounded sx={{ fontSize: 18 }} />;
  return <BuildCircleRounded sx={{ fontSize: 18 }} />;
};

const artifactColor = (kind: AgentArtifact["kind"], theme: Theme) => {
  if (kind === "chart") return theme.palette.info.main;
  if (kind === "map") return theme.palette.success.main;
  if (kind === "panel") return theme.palette.warning.main;
  return theme.palette.primary.main;
};

export const AgentArtifactPanel = ({ artifacts }: { artifacts: AgentArtifact[] }) => {
  const theme = useTheme();
  if (!artifacts.length) return null;

  return (
    <Stack spacing={1.25}>
      <Stack direction="row" spacing={1} alignItems="center">
        <Typography variant="caption" fontWeight={800} color="text.primary">
          结果与动作
        </Typography>
        <Chip
          size="small"
          label={`${artifacts.length} 项`}
          sx={{ height: 20, fontSize: "0.68rem" }}
        />
      </Stack>

      {artifacts.map((artifact) => {
        const color = artifactColor(artifact.kind, theme);
        if (artifact.kind === "chart") {
          return (
            <ChatInlineChart
              key={artifact.id}
              title={(artifact.params.title as string) ?? artifact.title}
              chart_type={
                (artifact.params.chart_type as "line" | "bar" | "pie") ?? "line"
              }
              x_data={
                artifact.params.x_data ??
                artifact.params.xData ??
                artifact.params.labels ??
                artifact.params.categories
              }
              series={artifact.params.series}
              x_axis_name={(artifact.params.x_axis_name as string) ?? undefined}
              y_axis_name={(artifact.params.y_axis_name as string) ?? undefined}
            />
          );
        }

        return (
          <Paper
            key={artifact.id}
            elevation={0}
            sx={{
              p: 1.35,
              borderRadius: 3,
              border: `1px solid ${alpha(color, 0.22)}`,
              bgcolor: alpha(color, 0.055),
            }}
          >
            <Stack direction="row" spacing={1.25} alignItems="center">
              <Box
                sx={{
                  width: 32,
                  height: 32,
                  borderRadius: 2,
                  bgcolor: alpha(color, 0.12),
                  color,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                {artifactIcon(artifact.kind)}
              </Box>
              <Box sx={{ minWidth: 0, flex: 1 }}>
                <Typography variant="caption" fontWeight={800} color="text.primary">
                  {artifact.title}
                </Typography>
                {artifact.description ? (
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    sx={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
                  >
                    {artifact.description}
                  </Typography>
                ) : null}
              </Box>
              <Chip
                size="small"
                label="已执行"
                sx={{
                  height: 22,
                  fontSize: "0.68rem",
                  bgcolor: alpha(color, 0.12),
                  color,
                }}
              />
            </Stack>
          </Paper>
        );
      })}
    </Stack>
  );
};