/* Copyright 2026 Marimo. All rights reserved. */

import { LoaderCircle, XIcon } from "lucide-react";
import type { CSSProperties } from "react";
import { TreeChevron } from "@/components/editor/file-tree/tree-actions";
import type { DataType } from "@/core/kernel/messages";
import { cn } from "@/utils/cn";
import {
  DATA_TYPE_ICON,
  getDataTypeColor,
  resolveDataType,
} from "../datasets/icons";

export const RotatingChevron: React.FC<{ isExpanded: boolean }> = ({
  isExpanded,
}) => <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />;

export const DatasourceLabel: React.FC<{
  children: React.ReactNode;
  className?: string;
  style?: CSSProperties;
}> = ({ children, className, style }) => {
  return (
    <div
      className={cn(
        "flex gap-1.5 items-center font-bold py-1.5 text-muted-foreground bg-(--slate-2) text-sm",
        className,
      )}
      style={style}
    >
      {children}
    </div>
  );
};

export const EmptyState: React.FC<{
  content: string;
  className?: string;
  style?: CSSProperties;
}> = ({ content, className, style }) => {
  return (
    <div
      className={cn("text-sm text-muted-foreground py-1", className)}
      style={style}
    >
      {content}
    </div>
  );
};

export const ErrorState: React.FC<{
  error: Error;
  style?: CSSProperties;
  className?: string;
  showIcon?: boolean;
}> = ({ error, style, className, showIcon = true }) => {
  return (
    <div
      className={cn(
        "text-sm bg-red-50 dark:bg-red-900 text-red-600 dark:text-red-50 flex items-center gap-2 p-2 h-8",
        className,
      )}
      style={style}
    >
      {showIcon && <XIcon className="h-4 w-4 mt-0.5" />}
      {error.message}
    </div>
  );
};

export const LoadingState: React.FC<{
  message: string;
  className?: string;
  style?: CSSProperties;
}> = ({ message, className, style }) => {
  return (
    <div
      className={cn(
        "text-sm bg-blue-50 dark:bg-(--accent) text-blue-500 dark:text-blue-50 flex items-center gap-2 p-2 h-8",
        className,
      )}
      style={style}
    >
      <LoaderCircle className="h-4 w-4 animate-spin" />
      {message}
    </div>
  );
};

export const ColumnPreviewContainer: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className }) => {
  return (
    <div className={cn("flex flex-col gap-2 relative", className)}>
      {children}
    </div>
  );
};

export const ColumnName = ({
  columnName,
  dataType,
  className,
}: {
  columnName: React.ReactNode;
  dataType: DataType;
  className?: string;
}) => {
  const resolvedDataType = resolveDataType(dataType);
  const Icon = DATA_TYPE_ICON[resolvedDataType];
  const color = getDataTypeColor(resolvedDataType);

  return (
    <div className={cn("flex flex-row items-center gap-1.5", className)}>
      <Icon
        className={`w-4 h-4 shrink-0 p-0.5 rounded-sm stroke-card-foreground ${color}`}
      />
      {columnName}
    </div>
  );
};