import { useState } from 'react';

const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
  const [isEditingPrompt, setIsEditingPrompt] = useState(false);
  const [tempPrompt, setTempPrompt] = useState("");

  return (
    <div className="w-full max-w-4xl mb-4">
      <div className="flex justify-between items-center mb-1">
        <label htmlFor="system-prompt" className="block text-sm font-medium text-gray-700">
          System Prompt
        </label>
        {!isEditingPrompt ? (
          <button
            onClick={() => {
              setTempPrompt(customPrompt);
              setIsEditingPrompt(true);
            }}
            className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>
            Edit
          </button>
        ) : null}
      </div>
      
      {isEditingPrompt ? (
        <div>
          <textarea
            id="system-prompt"
            value={tempPrompt}
            onChange={(e) => setTempPrompt(e.target.value)}
            onKeyDown={(e) => {
              // Save on Ctrl+Enter or Cmd+Enter
              if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                setCustomPrompt(tempPrompt);
                setIsEditingPrompt(false);
              }
            }}
            className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
            rows={4}
            placeholder="Enter your custom prompt for Gemini..."
          />
          <div className="flex justify-end mt-2 space-x-2">
            <span className="text-xs text-gray-500 self-center mr-auto">
              Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
            </span>
            <button
              onClick={() => setIsEditingPrompt(false)}
              className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100"
            >
              Cancel
            </button>
            <button
              onClick={() => {
                setCustomPrompt(tempPrompt);
                setIsEditingPrompt(false);
              }}
              className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
            >
              Save
            </button>
          </div>
        </div>
      ) : (
        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 whitespace-pre-wrap">
          {customPrompt}
        </div>
      )}
    </div>
  );
};

export default PromptEditor;