"use client";

import { useState, forwardRef } from "react";
import { ChevronDown, ChevronUp, Maximize2, Minimize2 } from "lucide-react";
import { McpAppFrame } from "./McpAppFrame";
import { McpAppData } from "@/lib/types";

interface McpAppCardProps {
  app: McpAppData;
  onToolCall?: (
    name: string,
    args: Record<string, unknown>
  ) => Promise<unknown>;
  onContextUpdate?: (context: Record<string, unknown>) => void;
  onMessageSend?: (content: string) => void;
}

export const McpAppCard = forwardRef<HTMLIFrameElement, McpAppCardProps>(function McpAppCard({
  app,
  onToolCall,
  onContextUpdate,
  onMessageSend,
}, ref) {
  const [isExpanded, setIsExpanded] = useState(true);
  const [isFullHeight, setIsFullHeight] = useState(false);

  const baseHeight = app.height || 500;
  const displayHeight = isFullHeight ? Math.max(baseHeight, 700) : baseHeight;

  return (
    <div className="my-2 animate-message-in">
      {/* Card header with controls */}
      <div
        className="flex items-center justify-between px-3 py-2 rounded-t-lg cursor-pointer select-none"
        style={{
          backgroundColor: "#1a1d23",
          borderRadius: isExpanded ? "8px 8px 0 0" : "8px",
          borderLeft: "1px solid #2f3136",
          borderRight: "1px solid #2f3136",
          borderTop: "1px solid #2f3136",
          borderBottom: isExpanded ? "none" : "1px solid #2f3136",
        }}
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex items-center gap-2">
          <div
            className="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold"
            style={{ backgroundColor: "#ff6d5a", color: "#ffffff" }}
          >
            ⚡
          </div>
          <span
            className="text-sm font-medium"
            style={{ color: "#dcddde" }}
          >
            {app.title || "MCP App"}
          </span>
        </div>

        <div className="flex items-center gap-1">
          {isExpanded && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                setIsFullHeight(!isFullHeight);
              }}
              className="p-1 rounded hover:brightness-125 transition-colors"
              style={{ color: "#72767d" }}
            >
              {isFullHeight ? (
                <Minimize2 className="w-3.5 h-3.5" />
              ) : (
                <Maximize2 className="w-3.5 h-3.5" />
              )}
            </button>
          )}
          <div className="p-1" style={{ color: "#72767d" }}>
            {isExpanded ? (
              <ChevronUp className="w-4 h-4" />
            ) : (
              <ChevronDown className="w-4 h-4" />
            )}
          </div>
        </div>
      </div>

      {/* Frame content */}
      {isExpanded && (
        <div
          className="rounded-b-lg overflow-hidden transition-all duration-300"
          style={{
            border: "1px solid #2f3136",
            borderTop: "none",
          }}
        >
          <McpAppFrame
            ref={ref}
            html={app.html}
            url={app.url}
            height={displayHeight}
            title={app.title}
            onToolCall={onToolCall}
            onContextUpdate={onContextUpdate}
            onMessageSend={onMessageSend}
          />
        </div>
      )}
    </div>
  );
});
