"use client";

import React, { useState } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { X, Copy, Check } from 'lucide-react';
import Editor from '@monaco-editor/react';

interface PromptModalProps {
  isOpen: boolean;
  onClose: () => void;
  prompt: string;
  title?: string;
}

const PromptModal: React.FC<PromptModalProps> = ({
  isOpen,
  onClose,
  prompt,
  title = "Architecture Prompt"
}) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(prompt);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error('Failed to copy to clipboard:', error);
      // Fallback: create a temporary textarea
      const textarea = document.createElement('textarea');
      textarea.value = prompt;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-[90vw] max-w-4xl h-[80vh] -translate-x-1/2 -translate-y-1/2 transform rounded-lg bg-white shadow-xl z-50 flex flex-col">
          {/* Header */}
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-start justify-between mb-3">
              <div className="flex-1 pr-4">
                <Dialog.Title className="text-xl font-semibold text-gray-900 mb-2">
                  {title}
                </Dialog.Title>
                <p className="text-sm text-gray-600 leading-relaxed">
                  Copy this prompt and paste it into any LLM (ChatGPT, Claude, etc.) to get architecture analysis, code generation, and implementation guidance.
                </p>
              </div>
              <div className="flex items-center space-x-2 flex-shrink-0">
                <button
                  onClick={handleCopy}
                  className={`flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                    copied 
                      ? 'bg-green-100 text-green-700 hover:bg-green-200' 
                      : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                  }`}
                >
                  {copied ? (
                    <>
                      <Check className="h-4 w-4 mr-2" />
                      Copied!
                    </>
                  ) : (
                    <>
                      <Copy className="h-4 w-4 mr-2" />
                      Copy Prompt
                    </>
                  )}
                </button>
                <Dialog.Close asChild>
                  <button
                    className="p-2 rounded-md hover:bg-gray-100 transition-colors"
                    aria-label="Close"
                  >
                    <X className="h-5 w-5 text-gray-500" />
                  </button>
                </Dialog.Close>
              </div>
            </div>
          </div>

          {/* Editor */}
          <div className="flex-1 p-4">
            <div className="h-full border border-gray-200 rounded-md overflow-hidden">
              <Editor
                height="100%"
                defaultLanguage="markdown"
                value={prompt}
                options={{
                  readOnly: true,
                  minimap: { enabled: false },
                  scrollBeyondLastLine: false,
                  wordWrap: 'on',
                  lineNumbers: 'on',
                  folding: false,
                  glyphMargin: false,
                  lineDecorationsWidth: 8,
                  lineNumbersMinChars: 3,
                  renderLineHighlight: 'none',
                  padding: {
                    top: 16,
                    bottom: 16,
                  },
                  scrollbar: {
                    vertical: 'auto',
                    horizontal: 'auto',
                    useShadows: false,
                    verticalHasArrows: false,
                    horizontalHasArrows: false,
                    verticalScrollbarSize: 10,
                    horizontalScrollbarSize: 10,
                  },
                  fontSize: 14,
                  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Menlo, Consolas, "Liberation Mono", "Courier New", monospace',
                  theme: 'vs-dark',
                }}
                loading={
                  <div className="flex items-center justify-center h-full">
                    <div className="text-sm text-gray-500">Loading editor...</div>
                  </div>
                }
              />
            </div>
          </div>

          {/* Footer */}
          <div className="flex items-center justify-between p-4 border-t border-gray-200 bg-gray-50">
            <div className="text-sm text-gray-600">
              This prompt contains your architecture diagram and component details
            </div>
            <button
              onClick={onClose}
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
            >
              Close
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default PromptModal;