"use client";

import { ExternalLink, AlertTriangle, Maximize2 } from "lucide-react";

interface VisualCopilotModuleProps {
  url: string;
}

export function VisualCopilotModule({ url }: VisualCopilotModuleProps) {
  if (!url) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-4 text-muted-foreground">
        <AlertTriangle className="h-8 w-8 text-amber-500" />
        <div className="text-center">
          <p className="text-sm font-medium text-foreground">
            Visual CoPilot nu este configurat
          </p>
          <p className="mt-1 text-xs">
            Setează{" "}
            <code className="rounded bg-muted px-1 py-0.5 text-xs">
              VIM_URL
            </code>{" "}
            în environment variables (Portainer stack)
          </p>
        </div>
      </div>
    );
  }

  const embeddedUrl = url.includes('?') ? `${url}&embedded=1` : `${url}?embedded=1`;

  return (
    <div className="relative h-full w-full">
      <iframe
        src={embeddedUrl}
        className="h-full w-full border-0"
        title="Visual CoPilot"
        allow="fullscreen"
      />
      <div className="absolute bottom-4 right-4 flex items-center gap-1.5">
        <a
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1.5 text-xs text-muted-foreground backdrop-blur transition-colors hover:text-foreground"
          title="Deschide în tab nou"
        >
          <ExternalLink className="h-3 w-3" />
          Tab nou
        </a>
      </div>
    </div>
  );
}
