"use client";

import * as React from "react";

interface FloatingChatButtonProps {
  onClick: () => void;
  isOpen?: boolean;
  unreadCount?: number;
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  size?: "sm" | "md" | "lg";
  color?: string;
  className?: string;
  disabled?: boolean;
  ariaLabel?: string;
}

export function FloatingChatButton({
  onClick,
  isOpen = false,
  unreadCount = 0,
  position = "bottom-right",
  size = "md",
  color = "#3B82F6",
  className = "",
  disabled = false,
  ariaLabel = "Open chat",
}: FloatingChatButtonProps) {
  // Position classes
  const positionClasses = {
    "bottom-right": "bottom-4 right-4",
    "bottom-left": "bottom-4 left-4",
    "top-right": "top-4 right-4",
    "top-left": "top-4 left-4",
  };

  // Size classes
  const sizeClasses = {
    sm: "w-12 h-12 text-sm",
    md: "w-14 h-14 text-base",
    lg: "w-16 h-16 text-lg",
  };

  const baseClasses = [
    "fixed z-50 rounded-full shadow-lg",
    "flex items-center justify-center",
    "transition-all duration-200 ease-in-out",
    "hover:scale-110 focus:scale-110",
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
    isOpen ? "rotate-45" : "",
    disabled
      ? "opacity-50 cursor-not-allowed"
      : "cursor-pointer hover:shadow-xl",
    positionClasses[position],
    sizeClasses[size],
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={baseClasses}
      style={{ backgroundColor: color }}
      aria-label={ariaLabel}
      type="button"
    >
      {/* Chat Icon */}
      {!isOpen && (
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20 2H4C2.9 2 2 2.9 2 4V16C2 17.1 2.9 18 4 18H18L22 22V4C22 2.9 21.1 2 20 2Z"
            fill="currentColor"
          />
        </svg>
      )}

      {/* Close Icon */}
      {isOpen && (
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      )}

      {/* Unread Badge */}
      {unreadCount > 0 && !isOpen && (
        <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full min-w-[20px] h-5 flex items-center justify-center px-1">
          {unreadCount > 99 ? "99+" : unreadCount}
        </span>
      )}
    </button>
  );
}

// Type exports for compatibility
export interface Message {
  id: string;
  text: string;
  sender: "user" | "bot";
  timestamp: Date;
  type?: "text" | "image" | "file";
  metadata?: Record<string, any>;
}

export interface AgentConfig {
  id: string;
  name: string;
  description: string;
  systemPrompt: string;
  model: string;
  temperature: number;
  maxTokens: number;
  enabled: boolean;
  createdAt: Date;
  updatedAt: Date;
}