import AddIcon from "@mui/icons-material/Add";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import { parseAsStringEnum, useQueryState } from "nuqs";
import { Suspense, useState, type SyntheticEvent } from "react";

import Evaluators from "@/components/evaluators/Evaluators";
import { Results } from "@/components/live-evals/components/results";
import { FilterStoreProvider } from "@/components/traces/stores/filter.store";
import { TOUR_IDS } from "@/features/task-tour/selectors";
import { dispatchTourEvent, TASK_TOUR_EVENTS } from "@/features/task-tour/tourEvents";

type EvaluateTab = "evaluators" | "results";

export const EvaluateView = () => {
  const [isEvalsModalOpen, setIsEvalsModalOpen] = useState(false);

  const [activeTab, setActiveTab] = useQueryState("section", parseAsStringEnum<EvaluateTab>(["evaluators", "results"]).withDefault("evaluators"));

  const handleTabChange = (_: SyntheticEvent, value: EvaluateTab) => {
    void setActiveTab(value);
    if (value === "results") {
      dispatchTourEvent(TASK_TOUR_EVENTS.evaluateResultsOpened);
    }
  };

  return (
    <Box
      sx={{
        height: "100%",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        bgcolor: "background.default",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          px: 3,
          pt: 3,
          pb: 2,
          borderBottom: 1,
          borderColor: "divider",
          backgroundColor: "background.paper",
        }}
      >
        <Stack direction="row" alignItems="flex-start" justifyContent="space-between">
          <Box>
            <Typography variant="h5" fontWeight={600} color="text.primary">
              Evaluate
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
              Manage evaluators and monitor continuous evaluation performance
            </Typography>
          </Box>
          {activeTab === "evaluators" && (
            <Button variant="contained" color="primary" startIcon={<AddIcon />} onClick={() => setIsEvalsModalOpen(true)}>
              Evaluator
            </Button>
          )}
        </Stack>
      </Box>

      <Tabs
        variant="fullWidth"
        value={activeTab}
        onChange={handleTabChange}
        sx={{ backgroundColor: "background.paper", borderBottom: 1, borderColor: "divider" }}
      >
        <Tab label="Evaluators" value="evaluators" />
        <Tab label="Results" value="results" data-tour-id={TOUR_IDS.evaluateResultsTab} />
      </Tabs>

      <Box sx={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
        {activeTab === "evaluators" && (
          <Evaluators
            embedded
            isCreateModalOpen={isEvalsModalOpen}
            onCreateModalOpen={() => setIsEvalsModalOpen(true)}
            onCreateModalClose={() => setIsEvalsModalOpen(false)}
          />
        )}
        {activeTab === "results" && (
          <Suspense
            fallback={
              <Box sx={{ p: 3 }}>
                <Skeleton variant="rectangular" height="50%" sx={{ borderRadius: 1 }} />
              </Box>
            }
          >
            <FilterStoreProvider timeRange="3 months">
              <Results />
            </FilterStoreProvider>
          </Suspense>
        )}
      </Box>
    </Box>
  );
};
