1"use client";
2
3import { useState } from "react";
4import { Copy, Check } from "lucide-react";
5
6export const PromptImprover = () => {
7  const [inputValue, setInputValue] = useState("");
8  const [yourPrompt, setYourPrompt] = useState(
9    `Hi Lynel,
10
11I truly admire your work—it's consistently creative, original, and full of depth. I'm confident that collaborating with you would elevate my vision in ways I can't anticipate, which is exactly why I'd love to work together.
12
13I'm ready to move forward immediately. Please share the payment link, and I'll complete it right away so we can begin. I completely trust your process and would love for you to bring your full creativity to the project.
14
15Best regards,
16[Your Name]`
17  );
18  const [improvedPrompt, setImprovedPrompt] = useState(
19    `Hi Lynel,
20
21I want to say how much I admire your work—it's consistently fresh, original, and full of soul. You clearly bring more than design skills; you bring vision, and that's exactly what I'm looking for.
22
23This isn't just about hiring a designer—it's about collaborating with someone who can elevate my ideas and take them further than I could on my own. I completely trust your process and don't want to limit your creativity with too many details.
24
25I'm ready to move forward immediately. Please send me the payment link, and I'll take care of it right away so we can begin. I'm really excited to see where your creativity takes this project.
26
27Best regards,
28[Your Name]`
29  );
30  const [copiedOriginal, setCopiedOriginal] = useState(false);
31  const [copiedImproved, setCopiedImproved] = useState(false);
32
33  const handleImprove = () => {
34    if (!inputValue.trim()) return;
35
36    setYourPrompt(inputValue);
37
38    // Simulate AI improvement with a delay
39    setTimeout(() => {
40      setImprovedPrompt(inputValue + "\n\n[✨ Improved version would appear here]");
41    }, 1500);
42  };
43
44  const copyToClipboard = async (text: string, type: 'original' | 'improved') => {
45    await navigator.clipboard.writeText(text);
46    if (type === 'original') {
47      setCopiedOriginal(true);
48      setTimeout(() => setCopiedOriginal(false), 2000);
49    } else {
50      setCopiedImproved(true);
51      setTimeout(() => setCopiedImproved(false), 2000);
52    }
53  };
54
55  return (
56    <div className="flex items-center justify-center min-h-screen bg-gray-100 p-6">
57      <div className="w-full max-w-6xl bg-white rounded-3xl shadow-2xl overflow-hidden">
58        {/* Window Controls */}
59        <div className="flex items-center gap-2 px-6 py-4 border-b border-gray-200">
60          <div className="w-3 h-3 rounded-full bg-red-500" />
61          <div className="w-3 h-3 rounded-full bg-yellow-500" />
62          <div className="w-3 h-3 rounded-full bg-green-500" />
63        </div>
64
65        {/* Input Section */}
66        <div className="px-8 py-4 border-b border-gray-200">
67          <input
68            type="text"
69            placeholder="Type your prompt and we will improve it according to your goal..."
70            className="w-full px-4 py-2 text-gray-600 placeholder:text-gray-400 bg-transparent border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 transition-all"
71            value={inputValue}
72            onChange={(e) => setInputValue(e.target.value)}
73            onKeyDown={(e) => e.key === 'Enter' && handleImprove()}
74          />
75        </div>
76
77        {/* Content Area */}
78        <div className="grid grid-cols-2 gap-8 p-8">
79          {/* Your Prompt */}
80          <div className="space-y-4">
81            <div className="flex items-center justify-between">
82              <div className="inline-block px-6 py-2 bg-gray-100 rounded-full">
83                <span className="text-gray-600 font-medium">Your prompt</span>
84              </div>
85              <button
86                onClick={() => copyToClipboard(yourPrompt, 'original')}
87                className="p-2 hover:bg-gray-100 rounded-lg transition-colors group"
88                title="Copy to clipboard"
89              >
90                {copiedOriginal ? (
91                  <Check className="w-5 h-5 text-green-600" />
92                ) : (
93                  <Copy className="w-5 h-5 text-gray-400 group-hover:text-gray-600" />
94                )}
95              </button>
96            </div>
97            <div className="bg-white border border-gray-200 rounded-2xl p-8 min-h-[500px] relative group">
98              <pre className="text-gray-600 text-sm leading-relaxed whitespace-pre-wrap font-sans">
99                {yourPrompt}
100              </pre>
101              <div className="absolute bottom-4 right-4 text-xs text-gray-400">
102                {yourPrompt.length} characters
103              </div>
104            </div>
105          </div>
106
107          {/* Improved Prompt */}
108          <div className="space-y-4">
109            <div className="flex items-center justify-between">
110              <div className="inline-block px-6 py-2 bg-purple-100 rounded-full">
111                <span className="text-purple-600 font-medium">Improved prompt</span>
112              </div>
113              <button
114                onClick={() => copyToClipboard(improvedPrompt, 'improved')}
115                className="p-2 hover:bg-purple-100 rounded-lg transition-colors group"
116                title="Copy to clipboard"
117              >
118                {copiedImproved ? (
119                  <Check className="w-5 h-5 text-green-600" />
120                ) : (
121                  <Copy className="w-5 h-5 text-purple-400 group-hover:text-purple-600" />
122                )}
123              </button>
124            </div>
125            <div className="bg-purple-50 border border-purple-200 rounded-2xl p-8 min-h-[500px] relative group">
126              <pre className="text-purple-700 text-sm leading-relaxed whitespace-pre-wrap font-sans">
127                {improvedPrompt}
128              </pre>
129              <div className="absolute bottom-4 right-4 text-xs text-purple-400">
130                {improvedPrompt.length} characters
131              </div>
132            </div>
133          </div>
134        </div>
135      </div>
136    </div>
137  );
138};
139