"use client";

import type { NodeProps } from "@xyflow/react";
import { Handle, Position } from "@xyflow/react";
import type { ReactNode } from "react";

export interface BaseNodeData {
  label: string;
  content?: string | null;
  nodeType: string;
  tags?: string[];
  domain?: string | null;
  [key: string]: unknown;
}

interface BaseNodeProps extends NodeProps {
  data: BaseNodeData;
  icon: ReactNode;
  color: string;
  borderStyle?: "solid" | "dashed" | "dotted";
}

export function BaseNode({
  data,
  selected,
  icon,
  color,
  borderStyle = "solid",
}: BaseNodeProps): React.JSX.Element {
  return (
    <div
      className={`
        px-4 py-3 rounded-lg shadow-md min-w-[150px] max-w-[250px]
        bg-white dark:bg-gray-800
        border-2 transition-all duration-200
        ${selected ? "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900" : ""}
      `}
      style={{
        borderColor: color,
        borderStyle,
      }}
    >
      <Handle
        type="target"
        position={Position.Top}
        className="w-3 h-3 !bg-gray-400 dark:!bg-gray-500"
      />

      <div className="flex items-start gap-2">
        <div
          className="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center text-white text-sm"
          style={{ backgroundColor: color }}
        >
          {icon}
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-medium text-gray-900 dark:text-gray-100 truncate">{data.label}</div>
          {data.content && (
            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
              {data.content}
            </div>
          )}
          {data.tags && data.tags.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-2">
              {data.tags.slice(0, 3).map((tag) => (
                <span
                  key={tag}
                  className="px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                >
                  {tag}
                </span>
              ))}
              {data.tags.length > 3 && (
                <span className="text-xs text-gray-400">+{data.tags.length - 3}</span>
              )}
            </div>
          )}
        </div>
      </div>

      <Handle
        type="source"
        position={Position.Bottom}
        className="w-3 h-3 !bg-gray-400 dark:!bg-gray-500"
      />
    </div>
  );
}
