import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ThankYouCard({ note, theme, font, recipientName, senderName }) { const [firstHalf, secondHalf] = splitNote(note); return (

Thank You

Dear {recipientName},

{firstHalf}

{secondHalf}

Sincerely,
{senderName}

); } function splitNote(note) { const words = note.split(" "); const midpoint = Math.ceil(words.length / 2); return [ words.slice(0, midpoint).join(" "), words.slice(midpoint).join(" "), ]; } function capitalizeName(name) { if (!name) return ""; return name .split(" ") .map(part => { if (part.length === 0) return ""; return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(); }) .join(" "); } function App() { const [recipientName, setRecipientName] = useState(""); const [senderName, setSenderName] = useState(""); const [gift, setGift] = useState(""); const [additionalDetails, setAdditionalDetails] = useState(""); const [isLoading, setIsLoading] = useState(false); const [noteId, setNoteId] = useState(""); const [error, setError] = useState(""); const [theme, setTheme] = useState("default"); const [font, setFont] = useState("'Indie Flower', cursive"); const [copySuccess, setCopySuccess] = useState(""); const [generatedNote, setGeneratedNote] = useState(""); const [isEditing, setIsEditing] = useState(false); const [editedNote, setEditedNote] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); setError(""); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ recipientName, senderName, gift, additionalDetails, theme, font }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Received data:", data); setNoteId(data.id); setGeneratedNote(data.note); } catch (err) { console.error("Error generating note:", err); setError("Failed to generate note. Please try again."); } finally { setIsLoading(false); } }; const copyToClipboard = async () => { try { await navigator.clipboard.writeText(`${window.location.origin}/view/${noteId}`); setCopySuccess("Copied!"); setTimeout(() => setCopySuccess(""), 2000); } catch (err) { console.error("Failed to copy text: ", err); setCopySuccess("Failed to copy"); } }; return (

CREATE A THANK YOU NOTE!

🎈 🎁

👤 setRecipientName(capitalizeName(e.target.value))} required />

👤 setSenderName(capitalizeName(e.target.value))} required />

🎁 setGift(e.target.value)} required />

📝

🎨

🔤

{error &&

{error}

} {generatedNote && (

Preview Your Thank You Note

{!isEditing ? ( ) : (

)}

{!isEditing ? ( ) : (

setEditedNote(e.target.value)}
                  className="edit-textarea"
                />
              )}
          </div>
        )}
        {noteId && (
          <div className="generated-note">
            <h2>Your Thank You Note has been generated!</h2>
            <p>You can view and share your note using this link:</p>
            <div className="link-copy-container">
              <input
                type="text"
                readOnly
                value={`${window.location.origin}/view/${noteId}`}
              />
              <button onClick={copyToClipboard} className="copy-button">
                {copySuccess || "Copy Link"}
              </button>
            </div>
            <div className="share-options">
              <h3>Share this note:</h3>
              <div className="social-share">
                <button
                  onClick={() =>
                    window.open(
                      `https://twitter.com/intent/tweet?text=${
                        encodeURIComponent(`Check out my thank you note: ${window.location.origin}/view/${noteId}`)
                      }`,
                    )}
                >
                  <span role="img" aria-label="Twitter">🐦</span> Twitter
                </button>
                <button
                  onClick={() =>
                    window.open(
                      `https://www.facebook.com/sharer/sharer.php?u=${
                        encodeURIComponent(`${window.location.origin}/view/${noteId}`)
                      }`,
                    )}
                >
                  <span role="img" aria-label="Facebook">📘</span> Facebook
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  console.log(`Received ${request.method} request to ${request.url}`);

const { OpenAI } = await import("https://esm.town/v/std/openai");
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const openai = new OpenAI();
  const url = new URL(request.url);

const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const TABLE_VERSION = 2; // Increment this when you change the table schema
  const TABLE_NAME = `${KEY}_thank_you_notes_v${TABLE_VERSION}`;

try {
    // Create table if it doesn't exist
    await sqlite.execute(`
      CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
        id TEXT PRIMARY KEY,
        recipient_name TEXT,
        sender_name TEXT,
        gift TEXT,
        note TEXT,
        theme TEXT,
        font TEXT
      )
    `);

if (request.method === "POST" && url.pathname === "/generate") {
      const { recipientName, senderName, gift, additionalDetails, theme, font } = await request.json();
      console.log("Received form data:", { recipientName, senderName, gift, additionalDetails, theme, font });

const prompt =
        `Write a warm, personal thank you note body expressing gratitude for the ${gift}. Additional context to incorporate: ${additionalDetails}. IMPORTANT: Start directly with the message - do NOT include any greeting (no 'Dear' or name), subject line, or date. The template already handles the greeting. Begin with expressing your gratitude directly. Keep the tone warm and conversational, not formal.`;
      console.log("Generated prompt:", prompt);

const completion = await openai.chat.completions.create({
        messages: [{ role: "user", content: prompt }],
        model: "gpt-4o-mini",
        max_tokens: 150,
      });

const note = completion.choices[0].message.content;
      const id = Math.random().toString(36).substr(2, 9);

// Store the note in SQLite
      await sqlite.execute(
        `
        INSERT INTO ${TABLE_NAME} (id, recipient_name, sender_name, gift, note, theme, font)
        VALUES (?, ?, ?, ?, ?, ?, ?)
      `,
        [id, recipientName, senderName, gift, note, theme, font],
      );

console.log("Generated note with ID:", id);

return new Response(JSON.stringify({ id, note }), {
        headers: { "Content-Type": "application/json" },
      });
    }

if (request.method === "GET" && url.pathname.startsWith("/view/")) {
      const id = url.pathname.split("/")[2];
      console.log("Attempting to view note with ID:", id);

// Retrieve the note from SQLite
      const result = await sqlite.execute(
        `
        SELECT * FROM ${TABLE_NAME} WHERE id = ?
      `,
        [id],
      );

if (result.rows.length > 0) {
        const note = result.rows[0];
        console.log("Note found:", note);
        const [firstHalf, secondHalf] = splitNote(note.note);
        return new Response(
          `
          <html>
            <head>
              <title>Thank You Note for ${note.recipient_name}</title>
              <style>${css}</style>
              <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
            </head>
            <body>
              <div class="container fade-in">
                <div class="thank-you-card ${note.theme}" style="font-family: ${note.font}">
                  <div class="card-page left-page">
                    <div class="card-content">
                      <h2>Thank You</h2>
                      <p>Dear ${note.recipient_name},</p>
                      <p>${firstHalf}</p>
                    </div>
                  </div>
                  <div class="card-page right-page">
                    <div class="card-content">
                      <p>${secondHalf}</p>
                      <p class="signature">
                        Sincerely,<br>
                        ${note.sender_name}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </body>
          </html>
        `,
          {
            headers: { "Content-Type": "text/html" },
          },
        );
      } else {
        console.log("Note not found for ID:", id);
        return new Response("Note not found", { status: 404 });
      }
    }

if (request.method === "POST" && url.pathname.startsWith("/update/")) {
      const id = url.pathname.split("/")[2];
      const { note } = await request.json();

await sqlite.execute(
        `
    UPDATE ${TABLE_NAME} 
    SET note = ?
    WHERE id = ?
    `,
        [note, id],
      );

return new Response(JSON.stringify({ success: true }), {
        headers: { "Content-Type": "application/json" },
      });
    }

console.log("Serving main page");
    return new Response(
      `
      <html>
        <head>
          <title>Thank You Note Generator</title>
          <style>${css}</style>
          <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
        </head>
        <body>
          <div id="root" class="fade-in"></div>
          <script src="https://esm.town/v/std/catch"></script>
          <script type="module" src="${import.meta.url}"></script>
          <div class="footer">
            <a href="${import.meta.url.replace("esm.town", "val.town")}">View Source</a>
          </div>
        </body>
      </html>
    `,
      {
        headers: {
          "content-type": "text/html",
        },
      },
    );
  } catch (error) {
    console.error("Server error:", error);
    return new Response("Internal Server Error", { status: 500 });
  }
}

const css = `
body {
  font-family: 'Indie Flower', cursive;
  background-color: #f8f7f2;
  margin: 0;
  padding: 0;
  color: #333;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.title-section {
  text-align: center;
  margin-bottom: 40px;
}

.form-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.title {
  font-size: 4em;
  font-weight: bold;
  line-height: 1.2;
}

.title span {
  display: block;
}

.title .line1 { color: #000; transform: rotate(-5deg); }
.title .line2 { color: #ff6b6b; transform: rotate(2deg); }
.title .line3 { color: #4ecdc4; transform: rotate(-2deg); }

.decorative-elements {
  font-size: 3em;
  margin-top: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.input-group span {
  font-size: 1.5em;
  margin-right: 10px;
}

.input-group input,
.input-group select,
.input-group textarea {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.submit-button {
  background-color: #9b59b6;
  color: white;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #8e44ad;
}

.submit-button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.generated-note {
  margin-top: 30px;
  padding: 20px;
  background-color: #ecf0f1;
  border-radius: 8px;
}

.thank-you-card {
  background-color: rgb((198, 174, 168));
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  max-width: 800px;
  margin: 30px auto;
  overflow: hidden;
  position: relative;
}

.thank-you-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/png;base64,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");
  opacity: 0.1;
  z-index: 0;
}

.card-page {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

.left-page, .right-page {
  background-color: rgba(198, 174, 168, 0.8); 
}

.card-content {
  margin-bottom: 20px;
}

.thank-you-card h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #2a2420;
}

.thank-you-card p {
  font-size: 1.2em;
  line-height: 1.6;
  color: #2a2420;
}

.signature {
  margin-top: auto;
  align-self: flex-end;
}

.footer {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.footer a {
  color: #3498db;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.share-options {
  margin-top: 20px;
}

.share-options input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
}

.social-share {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-share button {
  padding: 10px 15px;
  font-size: 16px;
}

.error {
  color: #e74c3c;
  margin-top: 10px;
  font-weight: bold;
}

.preview-section {
  margin-top: 30px;
}

.preview-section h2 {
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
  
  .title {
    font-size: 2em;
  }
  
  .submit-button {
    font-size: 16px;
  }

.thank-you-card {
    flex-direction: column;
  }

.left-page {
    border-bottom: 2px solid #c4b6ad;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

.link-copy-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.link-copy-container input {
  flex-grow: 1;
  margin-right: 10px;
}

.copy-button {
  padding: 10px 15px;
  font-size: 14px;
  white-space: nowrap;
}

.copy-button:active {
  transform: translateY(1px);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.edit-button, .save-button, .cancel-button {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.edit-button {
  background-color: #4CAF50;
  color: white;
  border: none;
}

.save-button {
  background-color: #2196F3;
  color: white;
  border: none;
  margin-right: 10px;
}

.cancel-button {
  background-color: #f44336;
  color: white;
  border: none;
}

.edit-textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  margin-bottom: 20px;
}

.edit-actions {
  display: flex;
  gap: 10px;
}
`;</article></body></html>

ThankYouNoteGenerator