import { css } from "@emotion/react";
import { useNavigate } from "react-router";

import {
  Button,
  ExternalLinkButton,
  Flex,
  Icon,
  Icons,
  Text,
  View,
} from "@phoenix/components";
import { CompactEmptyState } from "@phoenix/components/core/empty";

const evaluatorTypeCardCSS = css`
  display: flex;
  flex-direction: column;
  gap: var(--global-dimension-size-50);
  padding: var(--global-dimension-size-200);
  border-radius: var(--global-rounding-small);
  border: 1px solid var(--global-border-color-default);
  background-color: transparent;
  width: 220px;
`;

/**
 * SVG-based workflow diagram showing the data flow:
 * Dataset (input/reference/metadata) → Task → output → Evaluator → Score
 *
 * This diagram illustrates how evaluators work in the experiment pipeline:
 * 1. Dataset contains examples with input, reference output, and metadata
 * 2. Task (LLM/Agent/App) processes the input and produces output
 * 3. Evaluator scores the output using reference and metadata as context
 */
const WorkflowDiagram = () => {
  // Colors matching the mermaid diagram style
  const colors = {
    dataset: "#e67e22", // orange
    task: "#2196f3", // blue
    evaluator: "#9c27b0", // purple
    output: "#1976d2", // darker blue
    score: "#7b1fa2", // darker purple
    arrow: "var(--global-color-gray-500)",
    dashedArrow: "var(--global-color-gray-400)",
    text: "var(--global-text-color-900)",
    subtext: "var(--global-text-color-700)",
    bg: "var(--global-color-gray-100)",
  };

  return (
    <svg
      width="620"
      height="290"
      viewBox="0 0 620 290"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      css={css`
        max-width: 100%;
        height: auto;
      `}
    >
      {/* Dataset Box */}
      <g>
        <rect
          x="20"
          y="40"
          width="160"
          height="200"
          rx="8"
          fill={colors.bg}
          stroke={colors.dataset}
          strokeWidth="2"
        />
        <text
          x="100"
          y="68"
          textAnchor="middle"
          fill={colors.text}
          fontSize="14"
          fontWeight="600"
        >
          Dataset
        </text>

        {/* Example items inside dataset */}
        <rect
          x="35"
          y="85"
          width="130"
          height="140"
          rx="4"
          fill="var(--global-color-gray-75)"
          stroke={colors.dataset}
          strokeWidth="1"
          strokeOpacity="0.5"
        />
        <text
          x="100"
          y="105"
          textAnchor="middle"
          fill={colors.subtext}
          fontSize="11"
        >
          Example
        </text>

        {/* Input field */}
        <rect
          x="45"
          y="115"
          width="110"
          height="28"
          rx="4"
          fill="var(--global-color-gray-200)"
        />
        <text
          x="100"
          y="134"
          textAnchor="middle"
          fill={colors.text}
          fontSize="11"
        >
          input
        </text>

        {/* Reference field */}
        <rect
          x="45"
          y="150"
          width="110"
          height="28"
          rx="4"
          fill="var(--global-color-gray-200)"
        />
        <text
          x="100"
          y="169"
          textAnchor="middle"
          fill={colors.text}
          fontSize="11"
        >
          reference
        </text>

        {/* Metadata field */}
        <rect
          x="45"
          y="185"
          width="110"
          height="28"
          rx="4"
          fill="var(--global-color-gray-200)"
        />
        <text
          x="100"
          y="204"
          textAnchor="middle"
          fill={colors.text}
          fontSize="11"
        >
          metadata
        </text>
      </g>

      {/* Task Box */}
      <g>
        <rect
          x="250"
          y="80"
          width="120"
          height="70"
          rx="8"
          fill={colors.bg}
          stroke={colors.task}
          strokeWidth="2"
        />
        <text
          x="310"
          y="108"
          textAnchor="middle"
          fill={colors.text}
          fontSize="14"
          fontWeight="600"
        >
          Task
        </text>
        <text
          x="310"
          y="128"
          textAnchor="middle"
          fill={colors.subtext}
          fontSize="11"
        >
          Playground Prompt
        </text>
      </g>

      {/* Output Node */}
      <g>
        <rect
          x="265"
          y="180"
          width="90"
          height="36"
          rx="18"
          fill={colors.bg}
          stroke={colors.output}
          strokeWidth="2"
        />
        <text
          x="310"
          y="203"
          textAnchor="middle"
          fill={colors.text}
          fontSize="12"
          fontWeight="500"
        >
          output
        </text>
      </g>

      {/* Evaluator Box */}
      <g>
        <rect
          x="430"
          y="120"
          width="120"
          height="70"
          rx="8"
          fill={colors.bg}
          stroke={colors.evaluator}
          strokeWidth="2"
        />
        <text
          x="490"
          y="152"
          textAnchor="middle"
          fill={colors.text}
          fontSize="14"
          fontWeight="600"
        >
          Evaluator
        </text>
        <text
          x="490"
          y="172"
          textAnchor="middle"
          fill={colors.subtext}
          fontSize="11"
        >
          LLM or Code
        </text>
      </g>

      {/* Score Node */}
      <g>
        <rect
          x="560"
          y="137"
          width="50"
          height="36"
          rx="18"
          fill={colors.bg}
          stroke={colors.score}
          strokeWidth="2"
        />
        <text
          x="585"
          y="160"
          textAnchor="middle"
          fill={colors.text}
          fontSize="11"
          fontWeight="500"
        >
          Score
        </text>
      </g>

      {/* Arrows */}
      <defs>
        <marker
          id="arrowhead"
          markerWidth="10"
          markerHeight="7"
          refX="9"
          refY="3.5"
          orient="auto"
        >
          <polygon points="0 0, 10 3.5, 0 7" fill={colors.arrow} />
        </marker>
        <marker
          id="arrowhead-dashed"
          markerWidth="10"
          markerHeight="7"
          refX="9"
          refY="3.5"
          orient="auto"
        >
          <polygon points="0 0, 10 3.5, 0 7" fill={colors.dashedArrow} />
        </marker>
      </defs>

      {/* Input → Task (solid): right from input, up, then right to Task */}
      <polyline
        points="155,129 200,129 200,115 248,115"
        stroke={colors.arrow}
        strokeWidth="2"
        fill="none"
        markerEnd="url(#arrowhead)"
      />

      {/* Task → Output (solid): straight down */}
      <line
        x1="310"
        y1="150"
        x2="310"
        y2="178"
        stroke={colors.arrow}
        strokeWidth="2"
        markerEnd="url(#arrowhead)"
      />

      {/* Output → Evaluator (solid): right from output, up, then right to Evaluator */}
      <polyline
        points="355,198 390,198 390,155 428,155"
        stroke={colors.arrow}
        strokeWidth="2"
        fill="none"
        markerEnd="url(#arrowhead)"
      />

      {/* Reference → Evaluator (dashed): right, up above everything, right, down to Evaluator top */}
      <polyline
        points="155,164 195,164 195,55 470,55 470,118"
        stroke={colors.dashedArrow}
        strokeWidth="1.5"
        strokeDasharray="4 3"
        fill="none"
        markerEnd="url(#arrowhead-dashed)"
        css={css`
          @keyframes dashFlow1 {
            to {
              stroke-dashoffset: -14;
            }
          }
          animation: dashFlow1 1.5s linear infinite;
        `}
      />

      {/* Metadata → Evaluator (dashed): right, down below everything, right, up to Evaluator bottom */}
      <polyline
        points="155,199 195,199 195,255 510,255 510,192"
        stroke={colors.dashedArrow}
        strokeWidth="1.5"
        strokeDasharray="4 3"
        fill="none"
        markerEnd="url(#arrowhead-dashed)"
        css={css`
          @keyframes dashFlow2 {
            to {
              stroke-dashoffset: -14;
            }
          }
          animation: dashFlow2 1.5s linear infinite;
        `}
      />

      {/* Evaluator → Score (solid) */}
      <line
        x1="550"
        y1="155"
        x2="558"
        y2="155"
        stroke={colors.arrow}
        strokeWidth="2"
        markerEnd="url(#arrowhead)"
      />
    </svg>
  );
};

export const GlobalEvaluatorsEmptyState = ({
  hasActiveFilter,
}: {
  hasActiveFilter: boolean;
}) => {
  const navigate = useNavigate();

  // Filtered empty state - simple message
  if (hasActiveFilter) {
    return (
      <CompactEmptyState
        icon={<Icon svg={<Icons.Scale />} />}
        description="No evaluators"
        isFiltered
      />
    );
  }

  // Unfiltered empty state - full quickstart
  return (
    <View width="100%" paddingY="size-400">
      <Flex
        direction="column"
        width="100%"
        alignItems="center"
        justifyContent="center"
        gap="size-400"
      >
        <Flex
          direction="column"
          justifyContent="center"
          width="100%"
          alignItems="center"
        >
          <Text size="XL" weight="heavy">
            Automate evaluation of your AI outputs
          </Text>

          {/* Workflow diagram */}
          <Flex direction="column" gap="size-100" alignItems="center">
            <Text size="S" color="text-700">
              Evaluators score playground experiment task outputs using dataset
              examples as context
            </Text>
            <WorkflowDiagram />
          </Flex>
        </Flex>

        {/* Evaluator type cards */}
        <Flex direction="column" gap="size-200" alignItems="center">
          <Text size="S" color="text-700">
            Get started with your first evaluator by creating a dataset and
            adding evaluators to it.
          </Text>
          <Flex direction="row" gap="size-200">
            <div css={evaluatorTypeCardCSS}>
              <Flex direction="row" gap="size-100" alignItems="center">
                <Icon svg={<Icons.LLMOutput />} />
                <Text weight="heavy">LLM Evaluators</Text>
              </Flex>
              <Text size="S" color="text-700">
                Use AI to assess correctness, relevance, and tone
              </Text>
            </div>
            <div css={evaluatorTypeCardCSS}>
              <Flex direction="row" gap="size-100" alignItems="center">
                <Icon svg={<Icons.Code />} />
                <Text weight="heavy">Code Evaluators</Text>
              </Flex>
              <Text size="S" color="text-700">
                Deterministic checks like exact_match, contains, and regex
              </Text>
            </div>
          </Flex>
        </Flex>

        {/* CTAs */}
        <Flex direction="row" gap="size-200">
          <Button
            variant="primary"
            onClick={() => {
              navigate("/datasets");
            }}
          >
            View Datasets
          </Button>
          <ExternalLinkButton
            href="https://arize.com/docs/phoenix/evaluation/server-evals/overview"
            target="_blank"
            leadingVisual={<Icon svg={<Icons.Book />} />}
          >
            Documentation
          </ExternalLinkButton>
        </Flex>
      </Flex>
    </View>
  );
};
