import React from "react";
import {
  Box,
  Typography,
  Paper,
  Stack,
  Divider,
  alpha,
  Link,
} from "@mui/material";
import PageHeader from "../../components/PageHeader/PageHeader";

const Section = ({ title, children }) => (
  <Paper
    elevation={0}
    sx={{
      border: "1px solid",
      borderColor: "grey.300",
      borderRadius: 1,
      overflow: "hidden",
      mb: 3,
    }}
  >
    <Box
      sx={{
        px: 3,
        py: 2,
        borderBottom: "1px solid",
        borderColor: (theme) =>
          theme.palette.mode === "dark"
            ? alpha(theme.palette.divider, 0.1)
            : "grey.200",
        bgcolor: (theme) =>
          theme.palette.mode === "dark"
            ? alpha(theme.palette.background.paper, 0.5)
            : "grey.50",
      }}
    >
      <Typography variant="h6" sx={{ fontWeight: 600, color: "text.primary" }}>
        {title}
      </Typography>
    </Box>
    <Box sx={{ p: 3, bgcolor: "background.paper" }}>{children}</Box>
  </Paper>
);

const Tag = ({ children }) => (
  <Box
    component="span"
    sx={{
      display: "inline-block",
      px: 1.5,
      py: 0.5,
      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
      color: "primary.main",
      borderRadius: 1,
      fontSize: "0.875rem",
      fontWeight: 600,
      mr: 1,
      mb: 1,
    }}
  >
    {children}
  </Box>
);

const TagSection = ({ title, description, tags, explanations }) => (
  <Box sx={{ mb: 4 }}>
    <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
      {title}
    </Typography>
    {description && (
      <Typography variant="body1" sx={{ mb: 2, color: "text.secondary" }}>
        {description}
      </Typography>
    )}
    <Stack spacing={1}>
      {tags.map((tag, index) => (
        <Box key={index}>
          <Tag>{tag}</Tag>
          {explanations && explanations[index] && (
            <Typography
              component="span"
              variant="body2"
              sx={{ color: "text.secondary", ml: 1 }}
            >
              {explanations[index]}
            </Typography>
          )}
        </Box>
      ))}
    </Stack>
  </Box>
);

const CodeBlock = ({ children }) => (
  <Box
    sx={{
      backgroundColor: (theme) =>
        theme.palette.mode === "dark"
          ? "rgba(255, 255, 255, 0.05)"
          : "rgba(0, 0, 0, 0.03)",
      p: 2,
      borderRadius: 1,
      fontFamily: "monospace",
      mb: 2,
    }}
  >
    {children}
  </Box>
);

const HowToSubmitPage = () => {
  return (
    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", padding: 4 }}>
      <PageHeader
        title="How to Submit"
        subtitle={
          <>
            Learn how to <span style={{ fontWeight: 600 }}>be listed</span> on
            the explorer
          </>
        }
      />

      <Section title="How to submit your leaderboard?">
        <Stack spacing={2}>
          <Typography variant="body1">
            Your space will appear automatically in the lists if it contains
            correct metadata!
          </Typography>
          <Typography variant="body1">
            Make sure to either use the tag leaderboard or arena to your space,
            by adding the following to your README:
          </Typography>
          <CodeBlock>
            tags:
            <br />
            &nbsp;&nbsp;- leaderboard
          </CodeBlock>
          <Typography variant="body1">
            then any other tags of interest to you.
          </Typography>
        </Stack>
      </Section>

      <Section title="What do the tags mean?">
        <TagSection
          title="Submission type"
          description="Arenas are not concerned by this category."
          tags={[
            "submission:automatic",
            "submission:semiautomatic",
            "submission:manual",
            "submission:closed",
          ]}
          explanations={[
            "users can submit their models as such to the leaderboard, and evaluation is run automatically without human intervention",
            "the leaderboard requires the model owner to run evaluations on his side and submit the results",
            "the leaderboard requires the leaderboard owner to run evaluations for new submissions",
            "the leaderboard does not accept submissions at the moment",
          ]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Test set status"
          description="Arenas are not concerned by this category."
          tags={["test:public", "test:mix", "test:private", "test:rolling"]}
          explanations={[
            "all the test sets used are public, the evaluations are completely reproducible",
            "some test sets are public and some private",
            "all the test sets used are private, the evaluations are hard to game",
            "the test sets used change regularly through time and evaluation scores are refreshed",
          ]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Judges"
          tags={[
            "judge:auto",
            "judge:model",
            "judge:humans",
            "judge:vibe_check",
          ]}
          explanations={[
            "evaluations are run automatically, using an evaluation suite such as lm_eval or lighteval",
            "evaluations are run using a model as a judge approach to rate answer",
            "evaluations are done by humans to rate answer - this is an arena",
            "evaluations are done manually by one or several humans",
          ]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Modalities"
          description="Can be any (or several) of the following list:"
          tags={[
            "modality:text",
            "modality:image",
            "modality:audio",
            "modality:video",
            "modality:tools",
            "modality:artefacts",
          ]}
          explanations={[
            "",
            "",
            "",
            "",
            "requires added tool usage - mostly for assistant models (a bit outside of usual modalities)",
            "the leaderboard concerns itself with machine learning artefacts as themselves, for example, quality evaluation of text embeddings (a bit outside of usual modalities)",
          ]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Evaluation categories"
          description="Can be any (or several) of the following list:"
          tags={[
            "eval:generation",
            "eval:math",
            "eval:code",
            "eval:performance",
            "eval:safety",
          ]}
          explanations={[
            "the evaluation looks at generation capabilities specifically (can be image generation, text generation, ...)",
            "the evaluation tests math abilities",
            "the evaluation tests coding capabilities",
            "model performance (speed, energy consumption, ...)",
            "the evaluation considers safety, toxicity, bias",
          ]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Language"
          description="You can indicate the languages covered by your benchmark like so: language:mylanguage. At the moment, we do not support language codes, please use the language name in English."
          tags={["language:english", "language:french"]}
        />

        <Divider sx={{ my: 3 }} />

        <TagSection
          title="Domain"
          description="Indicates the specific domain of the leaderboard:"
          tags={["domain:financial", "domain:medical", "domain:legal"]}
        />
        <Typography
          variant="body2"
          sx={{
            mt: 1,
            color: "text.secondary",
            fontSize: "0.875rem",
            fontStyle: "italic",
          }}
        >
          If you would like to see a domain that is not currently represented,
          please contact{" "}
          <Link
            href="https://huggingface.co/clementine"
            target="_blank"
            rel="noopener noreferrer"
            sx={{
              color: "primary.main",
              textDecoration: "none",
              "&:hover": {
                textDecoration: "underline",
              },
            }}
          >
            Clementine Fourrier
          </Link>{" "}
          on Hugging Face.
        </Typography>

        <Divider sx={{ my: 3 }} />
      </Section>
    </Box>
  );
};

export default HowToSubmitPage;