import React, { useState, useRef } from 'react';
import { 
  Wand2, 
  MousePointerClick, 
  Heading1, 
  AlignLeft, 
  Copy, 
  CheckCircle2, 
  Sparkles,
  AlertCircle,
  Lightbulb,
  Smile,
  Code,
  LayoutTemplate,
  RotateCcw
} from 'lucide-react';

const apiKey = ""; // API key is provided by the execution environment

// --- Utility Functions ---
const copyToClipboard = (text) => {
  return new Promise((resolve, reject) => {
    // Create an invisible textarea to execute the copy command on
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    const handleCopy = (e) => {
      // Encode emojis as HTML entities for rich text editors
      const htmlText = Array.from(text)
        .map(char => char.codePointAt(0) > 127 ? `&#${char.codePointAt(0)};` : char)
        .join('');
      
      e.clipboardData.setData('text/plain', text);
      e.clipboardData.setData('text/html', `<span>${htmlText}</span>`);
      e.preventDefault();
    };

    // Attach listener specifically for this operation
    document.addEventListener('copy', handleCopy);

    try {
      const successful = document.execCommand('copy');
      if (successful) {
        resolve();
      } else {
        reject(new Error('Copy command failed'));
      }
    } catch (err) {
      reject(err);
    } finally {
      document.removeEventListener('copy', handleCopy);
      document.body.removeChild(textArea);
    }
  });
};

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const fetchWithRetry = async (url, options, maxRetries = 5) => {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      retries++;
      if (retries >= maxRetries) throw error;
      const backoffTime = Math.pow(2, retries - 1) * 1000;
      await delay(backoffTime);
    }
  }
};

// --- Main Application ---
export default function App() {
  const [intention, setIntention] = useState('');
  const [textType, setTextType] = useState('button');
  const [includeEmoji, setIncludeEmoji] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isPolishing, setIsPolishing] = useState(false);
  const [results, setResults] = useState([]);
  const [error, setError] = useState('');

  const handlePolishDraft = async () => {
    if (!intention.trim()) return;
    setIsPolishing(true);
    setError('');

    const prompt = `Rewrite the following rough thought into a clear, concise, professional goal statement for a UX copywriter. Keep it to exactly one sentence.\n\nRough thought: "${intention}"`;
    
    const payload = {
      contents: [{ parts: [{ text: prompt }] }],
      systemInstruction: { parts: [{ text: "You are a UX product manager. Return ONLY the rewritten sentence in plain text. No quotes, no markdown." }] }
    };

    try {
      const data = await fetchWithRetry(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        }
      );
      
      const responseText = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (responseText) {
        setIntention(responseText.trim());
      }
    } catch (err) {
      console.error("Failed to polish draft", err);
    } finally {
      setIsPolishing(false);
    }
  };

  const handleGenerate = async () => {
    if (!intention.trim()) {
      setError("Please tell me what you want to say first!");
      return;
    }

    setIsLoading(true);
    setError('');
    setResults([]);

    let systemInstruction = "";
    if (textType === 'button') {
      systemInstruction = "You are an expert UX copywriter. Generate Call-to-Action (CTA) button text. It must be short, punchy, and action-oriented (up to 5 words). Correct any errors in the user's intent.";
    } else if (textType === 'header') {
      systemInstruction = "You are an expert UX copywriter. Generate a header or title for a popup/balloon. It must be catchy, clear, and concise (3-6 words max). Correct any errors in the user's intent.";
    } else if (textType === 'smartTip') {
      systemInstruction = "You are an expert UX copywriter. Generate smart tip or tooltip text. It must be helpful, contextual, and very brief. Length should be 1-2 short sentences. Correct any errors in the user's intent.";
    } else if (textType === 'fullPopup') {
      systemInstruction = "You are an expert UX copywriter. Generate a complete popup/balloon containing a header, body text, and a CTA button. The header must be 3-6 words. The body must be 1-3 short sentences. The button must be 1-5 words. Ensure they flow logically. Correct any errors in the user's intent.";
    } else {
      systemInstruction = "You are an expert UX copywriter. Generate body text for a popup/balloon. It should be engaging, informative, easy to read, and grammatically perfect. Length should be 1-3 short, scannable sentences.";
    }

    if (includeEmoji && textType === 'smartTip') {
      systemInstruction += " You MUST include exactly one highly relevant emoji AT THE VERY BEGINNING of the generated text (e.g., '🚀 Your text here').";
    } else {
      systemInstruction += " Do NOT include any emojis in the text.";
    }

    const prompt = `User's Intention/Draft: "${intention}"\n\nProvide 3 distinct options for the ${textType} text. Focus on clarity, tone, and conversion.`;

    let itemSchema = {};
    if (textType === 'fullPopup') {
      itemSchema = {
        type: "OBJECT",
        properties: {
          header: { type: "STRING", description: "The popup header/title" },
          body: { type: "STRING", description: "The popup body text" },
          button: { type: "STRING", description: "The popup CTA button text" },
          reasoning: { type: "STRING", description: "A brief explanation of why this combination works well" }
        },
        required: ["header", "body", "button", "reasoning"]
      };
    } else {
      itemSchema = {
        type: "OBJECT",
        properties: {
          text: { type: "STRING", description: "The refined text suggestion" },
          reasoning: { type: "STRING", description: "A very brief explanation of why this option works well" }
        },
        required: ["text", "reasoning"]
      };
    }

    const payload = {
      contents: [{ parts: [{ text: prompt }] }],
      systemInstruction: { parts: [{ text: systemInstruction }] },
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: {
          type: "OBJECT",
          properties: {
            options: {
              type: "ARRAY",
              items: itemSchema
            }
          },
          required: ["options"]
        }
      }
    };

    try {
      const data = await fetchWithRetry(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        }
      );

      const responseText = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (responseText) {
        const parsed = JSON.parse(responseText);
        setResults(parsed.options || []);
      } else {
        throw new Error("Invalid response format from AI");
      }
    } catch (err) {
      console.error(err);
      setError("Oops! Something went wrong while generating the text. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

  const types = [
    { id: 'button', label: 'CTA Button', icon: MousePointerClick, desc: 'Short & Punchy (up to 5 words)' },
    { id: 'header', label: 'Title / Header', icon: Heading1, desc: 'Catchy & Clear (3-6 words)' },
    { id: 'body', label: 'Body Text', icon: AlignLeft, desc: 'Informative (1-3 sentences)' },
    { id: 'smartTip', label: 'Smart Tip', icon: Lightbulb, desc: 'Helpful hints (1-2 sentences)' },
    { id: 'fullPopup', label: 'Full Popup Set', icon: LayoutTemplate, desc: 'Header, Body & CTA Button' },
  ];

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans p-2 md:p-4 flex justify-center">
      <div className="max-w-4xl w-full grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
        
        {/* Header Title (Mobile only, moves to sidebar on desktop) */}
        <div className="lg:hidden col-span-1 text-center mb-2">
          <div className="inline-flex items-center justify-center p-2 bg-indigo-100 rounded-xl mb-2 text-indigo-600">
            <Sparkles size={24} />
          </div>
          <h1 className="text-2xl font-extrabold tracking-tight text-slate-900">Copy Refiner</h1>
          <p className="text-sm text-slate-500 mt-1">Turn messy thoughts into perfect UX copy.</p>
        </div>

        {/* Left Column: Inputs */}
        <div className="lg:col-span-5 space-y-5 bg-white p-4 md:p-5 rounded-2xl shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
          {/* Decorative background blob */}
          <div className="absolute top-0 right-0 -mr-16 -mt-16 w-32 h-32 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-full blur-2xl opacity-70 pointer-events-none"></div>

          <div className="hidden lg:block mb-5 relative z-10">
            <div className="flex items-center gap-2 text-indigo-600 mb-1">
              <Sparkles size={24} />
              <h1 className="text-2xl font-extrabold tracking-tight text-slate-900">Copy Refiner</h1>
            </div>
            <p className="text-sm text-slate-500">Turn messy thoughts into perfect UX copy.</p>
          </div>

          {/* Input 1: The Intention */}
          <div className="relative z-10">
            <div className="flex items-center justify-between mb-1.5">
              <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                1. What's the message?
              </label>
              <button 
                onClick={handlePolishDraft}
                disabled={isPolishing || !intention.trim()}
                className="text-[10px] flex items-center gap-1 font-bold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 px-2 py-1.5 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                title="Let AI refine your raw thought into a clear goal"
              >
                {isPolishing ? <div className="w-3 h-3 border-2 border-indigo-600/30 border-t-indigo-600 rounded-full animate-spin"></div> : <Sparkles size={12} />}
                ✨ Polish Draft
              </button>
            </div>
            <textarea
              className="w-full bg-slate-50 border-2 border-slate-200 rounded-xl p-3 text-sm text-slate-800 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 transition-all outline-none resize-none min-h-[80px]"
              placeholder="e.g., We want them to upgrade to pro because their trial is ending soon, tell them to act fast."
              value={intention}
              onChange={(e) => {
                setIntention(e.target.value);
                if (error) setError('');
              }}
            />
          </div>

          {/* Input 2: Text Type Selection */}
          <div className="relative z-10">
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">
              2. What are we writing?
            </label>
            <div className="grid grid-cols-2 gap-2">
              {types.map((type) => {
                const isSelected = textType === type.id;
                const Icon = type.icon;
                const isFullPopup = type.id === 'fullPopup';
                
                return (
                  <button
                    key={type.id}
                    onClick={() => {
                      setTextType(type.id);
                      if (type.id !== 'smartTip') setIncludeEmoji(false);
                    }}
                    className={`relative flex flex-col items-start text-left p-3 rounded-xl transition-all duration-200 border-2 ${
                      isFullPopup ? 'col-span-2' : ''
                    } ${
                      isSelected 
                        ? 'border-indigo-500 bg-indigo-50 shadow-sm shadow-indigo-100 scale-[1.02]' 
                        : 'border-slate-200 hover:border-indigo-300 hover:bg-slate-50 hover:scale-[1.02]'
                    }`}
                  >
                    {isSelected && (
                      <div className="absolute top-2.5 right-2.5 text-indigo-500">
                        <CheckCircle2 size={16} className="fill-indigo-100" />
                      </div>
                    )}
                    <div className={`p-1.5 mb-2 rounded-lg ${isSelected ? 'bg-indigo-500 text-white' : 'bg-slate-200 text-slate-500'}`}>
                      <Icon size={18} />
                    </div>
                    <div>
                      <div className={`text-sm font-bold leading-tight ${isSelected ? 'text-indigo-900' : 'text-slate-700'}`}>
                        {type.label}
                      </div>
                      <div className={`text-[10px] mt-1 leading-tight ${isSelected ? 'text-indigo-600' : 'text-slate-500'}`}>
                        {type.desc}
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Input 3: Emoji Toggle (Only for Smart Tip) */}
          {textType === 'smartTip' && (
            <div 
              className="relative z-10 flex items-center justify-between p-3 border-2 border-slate-200 rounded-xl bg-slate-50 hover:border-indigo-300 hover:bg-white transition-all cursor-pointer group" 
              onClick={() => setIncludeEmoji(!includeEmoji)}
            >
              <div className="flex items-center gap-3">
                <div className={`p-1.5 rounded-lg transition-colors ${includeEmoji ? 'bg-indigo-500 text-white shadow-sm' : 'bg-slate-200 text-slate-500'}`}>
                  <Smile size={18} />
                </div>
                <div>
                  <div className={`text-sm font-bold leading-tight ${includeEmoji ? 'text-indigo-900' : 'text-slate-700'}`}>
                    Add an emoji?
                  </div>
                  <div className={`text-[10px] mt-0.5 ${includeEmoji ? 'text-indigo-600' : 'text-slate-500'}`}>
                    Sprinkle some personality
                  </div>
                </div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer pointer-events-none">
                <input type="checkbox" className="sr-only peer" checked={includeEmoji} readOnly />
                <div className="w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-500"></div>
              </label>
            </div>
          )}

          {/* Action Button */}
          <div className="relative z-10 pt-1">
            <button
              onClick={handleGenerate}
              disabled={isLoading}
              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3 px-5 rounded-xl shadow-md shadow-indigo-500/30 transform transition-all active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
            >
              {isLoading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                  <span className="text-sm">Sprinkling magic...</span>
                </>
              ) : (
                <>
                  <Wand2 size={18} />
                  <span className="text-sm">Refine My Text</span>
                </>
              )}
            </button>
            {error && (
              <div className="mt-3 p-2.5 bg-red-50 border border-red-200 text-red-600 rounded-lg flex items-start gap-2 text-xs">
                <AlertCircle size={14} className="mt-0.5 flex-shrink-0" />
                <p>{error}</p>
              </div>
            )}
          </div>
        </div>

        {/* Right Column: Results */}
        <div className="lg:col-span-7 space-y-4 flex flex-col justify-center min-h-[400px]">
          {isLoading ? (
            <div className="space-y-3">
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 animate-pulse flex flex-col gap-3">
                  <div className="h-5 bg-slate-200 rounded-lg w-3/4"></div>
                  <div className="h-3 bg-slate-100 rounded-lg w-1/2"></div>
                </div>
              ))}
            </div>
          ) : results.length > 0 ? (
            <div className="space-y-3 animate-in fade-in slide-in-from-bottom-4 duration-500">
              <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2 mb-1">
                <CheckCircle2 size={20} className="text-emerald-500" />
                Here are some options:
              </h2>
              {results.map((result, index) => (
                <ResultCard key={index} initialResult={result} type={textType} intention={intention} />
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center text-center p-6 bg-slate-100/50 rounded-2xl border-2 border-dashed border-slate-200 h-full text-slate-400">
              <div className="w-16 h-16 bg-white rounded-xl shadow-sm flex items-center justify-center mb-4 rotate-3">
                <Wand2 size={28} className="text-slate-300" />
              </div>
              <h3 className="text-base font-bold text-slate-600 mb-1">Awaiting your prompt</h3>
              <p className="max-w-xs text-xs">
                Write your raw thoughts on the left, pick the type of text you need, and I'll polish it up for you.
              </p>
            </div>
          )}
        </div>

      </div>
    </div>
  );
}

// --- Subcomponents ---

function ResultCard({ initialResult, type, intention }) {
  const [result, setResult] = useState(initialResult);
  const [copied, setCopied] = useState(false);
  const [copiedCode, setCopiedCode] = useState(false);
  const [tweakLoading, setTweakLoading] = useState(null);
  const [tweakTarget, setTweakTarget] = useState('all');
  const [isTweaked, setIsTweaked] = useState(false);

  // Update local result if parent generates new results
  React.useEffect(() => {
    setResult(initialResult);
    setIsTweaked(false);
  }, [initialResult]);

  const handleTweak = async (tweakType) => {
    setTweakLoading(tweakType);
    
    let constraint = "";
    let promptText = "";
    let tweakSchema = {};

    if (type === 'fullPopup') {
      let targetInstruction = "";
      const lenConstraint = tweakType === 'longer' 
        ? "Header: 4-8 words, Body: 3-5 sentences, Button: 3-6 words." 
        : "Header: 3-6 words, Body: 1-3 sentences, Button: 1-5 words.";

      if (tweakTarget === 'all') {
        targetInstruction = `Provide a completely rewritten header, body, and button following the new tone/style. Length constraints: ${lenConstraint}`;
      } else if (tweakTarget === 'header') {
        targetInstruction = `Rewrite ONLY the Header to make it ${tweakType}. Keep the Body and Button EXACTLY the same as the original. New Header constraint: ${tweakType === 'longer' ? '4-8 words' : '3-6 words'}.`;
      } else if (tweakTarget === 'body') {
        targetInstruction = `Rewrite ONLY the Body to make it ${tweakType}. Keep the Header and Button EXACTLY the same as the original. New Body constraint: ${tweakType === 'longer' ? '3-5 sentences' : '1-3 sentences'}.`;
      } else if (tweakTarget === 'button') {
        targetInstruction = `Rewrite ONLY the Button to make it ${tweakType}. Keep the Header and Body EXACTLY the same as the original. New Button constraint: ${tweakType === 'longer' ? '3-6 words' : '1-5 words'}.`;
      }

      constraint = targetInstruction;
      promptText = `Original Header: "${result.header}"\nOriginal Body: "${result.body}"\nOriginal Button: "${result.button}"\nOriginal Intention: "${intention}"\n\nTask: Rewrite the original text (or targeted part) to make it ${tweakType}. \nConstraint: ${constraint}\n\nProvide the new popup text and reasoning.`;
      tweakSchema = {
        type: "OBJECT",
        properties: {
          header: { type: "STRING" },
          body: { type: "STRING" },
          button: { type: "STRING" },
          reasoning: { type: "STRING" }
        },
        required: ["header", "body", "button", "reasoning"]
      };
    } else {
      if (type === 'button') constraint = tweakType === 'longer' ? "Make it slightly longer and more descriptive (up to 7 words)." : "It must be short, punchy, and action-oriented (up to 5 words).";
      if (type === 'header') constraint = tweakType === 'longer' ? "Make it a longer, more descriptive header (up to 10 words)." : "It must be catchy, clear, and concise (3-6 words max).";
      if (type === 'smartTip') constraint = tweakType === 'longer' ? "Make it more detailed and explanatory (2-3 sentences)." : "It must be helpful, contextual, and very brief. Length should be 1-2 short sentences.";
      if (type === 'body') constraint = tweakType === 'longer' ? "Expand on the details, make it 3-5 sentences long." : "It should be engaging, informative, easy to read. Length should be 1-3 short sentences.";

      promptText = `Original text: "${result.text}"\nOriginal Intention: "${intention}"\n\nTask: Rewrite the original text to make it ${tweakType}. \nConstraint: ${constraint}\n\nProvide the new text and a brief reasoning for why this new version works well.`;
      tweakSchema = {
        type: "OBJECT",
        properties: {
          text: { type: "STRING" },
          reasoning: { type: "STRING" }
        },
        required: ["text", "reasoning"]
      };
    }

    const payload = {
      contents: [{ parts: [{ text: promptText }] }],
      systemInstruction: { parts: [{ text: "You are an expert UX copywriter. Respond ONLY with the requested JSON schema." }] },
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: tweakSchema
      }
    };

    try {
      const data = await fetchWithRetry(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        }
      );
      
      const responseText = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (responseText) {
        setResult(JSON.parse(responseText));
        setIsTweaked(true);
      }
    } catch (err) {
      console.error("Failed to tweak text", err);
    } finally {
      setTweakLoading(null);
    }
  };

  const handleRestore = () => {
    setResult(initialResult);
    setIsTweaked(false);
  };

  const handleCopy = async () => {
    try {
      const textToCopy = type === 'fullPopup' 
        ? `${result.header}\n\n${result.body}\n\n${result.button}`
        : result.text;
      await copyToClipboard(textToCopy);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy", err);
    }
  };

  const handleCopyCode = async () => {
    try {
      const rawText = type === 'fullPopup' ? `${result.header}\n\n${result.body}\n\n${result.button}` : result.text;
      // Create the literal HTML code string
      const codeText = Array.from(rawText)
        .map(char => char.codePointAt(0) > 127 ? `&#${char.codePointAt(0)};` : char)
        .join('');
        
      // Use a simple plain text copy for the code string
      const textArea = document.createElement("textarea");
      textArea.value = codeText;
      textArea.style.position = "fixed";
      textArea.style.left = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);

      setCopiedCode(true);
      setTimeout(() => setCopiedCode(false), 2000);
    } catch (err) {
      console.error("Failed to copy code", err);
    }
  };

  const handleManualCopy = (e) => {
    // Intercept manual Ctrl+C / Cmd+C to inject HTML entities
    const rawText = type === 'fullPopup' ? `${result.header}\n\n${result.body}\n\n${result.button}` : result.text;
    const htmlText = Array.from(rawText)
      .map(char => char.codePointAt(0) > 127 ? `&#${char.codePointAt(0)};` : char)
      .join('');
    
    e.clipboardData.setData('text/plain', rawText);
    e.clipboardData.setData('text/html', `<span>${htmlText.replace(/\n/g, '<br/>')}</span>`);
    e.preventDefault();
  };

  // Adjust display style based on type to give a visual hint
  let textStyle = "text-lg text-slate-800 font-medium";
  if (type === 'button') {
    textStyle = "text-lg font-bold text-indigo-700 bg-indigo-50 inline-block px-3 py-1.5 rounded-lg border border-indigo-100";
  } else if (type === 'header') {
    textStyle = "text-xl font-extrabold text-slate-900";
  } else if (type === 'body') {
    textStyle = "text-sm text-slate-600 leading-relaxed";
  } else if (type === 'smartTip') {
    textStyle = "text-sm text-slate-700 bg-slate-50 inline-block px-3 py-2 rounded-lg border border-slate-200 shadow-sm font-medium";
  }

  // Detect if the result text contains an emoji/special character
  const rawTextForEmojiCheck = type === 'fullPopup' ? `${result.header}${result.body}${result.button}` : result.text;
  const hasEmoji = Array.from(rawTextForEmojiCheck || '').some(char => char.codePointAt(0) > 127);

  return (
    <div className="group bg-white p-4 rounded-2xl shadow-sm hover:shadow-md hover:shadow-slate-200/50 transition-all duration-300 border border-slate-100 relative overflow-hidden">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1">
          <div className="mb-2" onCopy={handleManualCopy}>
            {type === 'fullPopup' ? (
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 shadow-inner space-y-3 mb-3">
                <div className="font-extrabold text-lg text-slate-900 leading-tight">{result.header}</div>
                <div className="text-sm text-slate-600 leading-relaxed">{result.body}</div>
                <div className="inline-block px-4 py-2 bg-indigo-600 text-white font-bold rounded-lg shadow-sm">{result.button}</div>
              </div>
            ) : (
              <span className={textStyle}>
                {type === 'smartTip' && <Lightbulb size={16} className="inline mr-1.5 text-slate-500 -mt-0.5" />}
                {result.text}
              </span>
            )}
          </div>
          <p className="text-xs text-slate-500 italic flex items-center gap-1.5 mb-3">
            <Sparkles size={12} className="text-amber-400 flex-shrink-0" />
            {result.reasoning}
          </p>
          
          {/* Quick AI Tweak Actions */}
          <div className="flex flex-wrap items-center gap-2 mt-1 border-t border-slate-100 pt-3">
            {type === 'fullPopup' && (
              <>
                <select 
                  value={tweakTarget}
                  onChange={(e) => setTweakTarget(e.target.value)}
                  className="text-[10px] bg-slate-100 border border-slate-200 rounded-md px-2 py-1.5 font-bold text-slate-600 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 cursor-pointer"
                  title="Select which part of the popup to tweak"
                >
                  <option value="all">Entire Popup</option>
                  <option value="header">Header Only</option>
                  <option value="body">Body Only</option>
                  <option value="button">Button Only</option>
                </select>
                <div className="w-px h-5 bg-slate-200 mx-0.5"></div>
              </>
            )}
            {['shorter', 'longer', 'friendlier', 'more urgent'].map(tweak => (
              <button
                key={tweak}
                onClick={() => handleTweak(tweak)}
                disabled={tweakLoading !== null}
                className="text-[10px] font-bold px-2.5 py-1.5 rounded-lg bg-slate-50 text-slate-600 border border-slate-200 hover:bg-indigo-50 hover:text-indigo-700 hover:border-indigo-200 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
              >
                {tweakLoading === tweak ? (
                  <div className="w-2.5 h-2.5 border border-indigo-600/30 border-t-indigo-600 rounded-full animate-spin"></div>
                ) : (
                  <span>✨</span>
                )}
                {tweak === 'shorter' ? 'Make Shorter' : tweak === 'longer' ? 'Make Longer' : tweak === 'friendlier' ? 'More Friendly' : 'Make Urgent'}
              </button>
            ))}
            
            {isTweaked && (
              <>
                <div className="w-px h-4 bg-slate-200 mx-1"></div>
                <button
                  onClick={handleRestore}
                  className="text-[10px] font-bold px-2.5 py-1.5 rounded-lg bg-slate-100 text-slate-500 border border-slate-200 hover:bg-slate-200 hover:text-slate-700 transition-all flex items-center gap-1"
                  title="Restore original text"
                >
                  <RotateCcw size={12} />
                  Restore Original
                </button>
              </>
            )}
          </div>
        </div>
        
        <div className="flex gap-2">
          {hasEmoji && (
            <button
              onClick={handleCopyCode}
              className={`flex-shrink-0 p-2 rounded-lg transition-all flex items-center gap-1.5 text-xs font-medium ${
                copiedCode 
                  ? 'bg-amber-100 text-amber-700 border-amber-200' 
                  : 'bg-white text-slate-400 hover:bg-amber-50 hover:text-amber-600 hover:border-amber-200 border border-transparent lg:opacity-0 lg:group-hover:opacity-100'
              }`}
              title="Copy as WalkMe Code (HTML Entities)"
            >
              {copiedCode ? <CheckCircle2 size={16} /> : <><Code size={16} /> <span className="hidden sm:inline">WalkMe Code</span></>}
            </button>
          )}
          <button
            onClick={handleCopy}
            className={`flex-shrink-0 p-2 rounded-lg transition-all ${
              copied 
                ? 'bg-emerald-100 text-emerald-600' 
                : 'bg-slate-100 text-slate-400 hover:bg-indigo-100 hover:text-indigo-600 lg:opacity-0 lg:group-hover:opacity-100'
            }`}
            title="Copy to clipboard"
          >
            {copied ? <CheckCircle2 size={18} /> : <Copy size={18} />}
          </button>
        </div>
      </div>
    </div>
  );
}