/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ImportDeck() { const [deckText, setDeckText] = useState(""); const [message, setMessage] = useState(""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { const response = await fetch("/submit", { method: "POST", body: JSON.stringify({ deckText }), headers: { "Content-Type": "application/json", }, }); const result = await response.text(); setMessage(result); setDeckText(""); } catch (error) { setMessage("Error submitting deck"); } }; return (

🃏 Anki Deck Importer

setDeckText(e.target.value)}
          placeholder="Paste your Anki deck here. 
Format: 
Clue [tab] Answer
Clue2 [tab] Answer2"
          rows={10}
          style={{ width: "100%", marginBottom: "10px" }}
        />
        <button type="submit">Import Deck</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
}

function ViewDeck() {
  const [cards, setCards] = useState([]);
  const [error, setError] = useState("");
  const [editingCard, setEditingCard] = useState<{ id: number; field: string } | null>(null);
  const [sortColumn, setSortColumn] = useState<string | null>("last_random_time");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");

useEffect(() => {
    fetchCards();
  }, []);

async function fetchCards() {
    try {
      const response = await fetch("/view");
      if (!response.ok) {
        throw new Error("Failed to fetch cards");
      }
      const data = await response.json();
      setCards(data);
    } catch (err) {
      setError(err.message);
    }
  }

const handleSort = (column: string) => {
    // If clicking the same column, toggle direction
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      // If new column, start with descending for last_random_time, ascending for others
      setSortColumn(column);
      setSortDirection(column === "last_random_time" ? "desc" : "asc");
    }

// Perform client-side sorting
    const sortedCards = [...cards].sort((a, b) => {
      if (a[column] == null || b[column] == null) return 0;

// Handle numeric columns
      if (["id", "random_count"].includes(column)) {
        return sortDirection === "asc"
          ? a[column] - b[column]
          : b[column] - a[column];
      }

// Handle string columns (case-insensitive)
      if (typeof a[column] === "string") {
        return sortDirection === "asc"
          ? a[column].localeCompare(b[column])
          : b[column].localeCompare(a[column]);
      }

// Handle date columns
      if (["created_at", "last_random_time"].includes(column)) {
        return sortDirection === "asc"
          ? new Date(a[column]).getTime() - new Date(b[column]).getTime()
          : new Date(b[column]).getTime() - new Date(a[column]).getTime();
      }

return 0;
    });

setCards(sortedCards);
  };

const renderSortIcon = (column: string) => {
    if (sortColumn !== column) return null;
    return sortDirection === "asc" ? "▲" : "▼";
  };

const handleEditStart = (id: number, field: string) => {
    setEditingCard({ id, field });
  };

const handleEditSave = async (id: number, field: string, newValue: string) => {
    try {
      const response = await fetch("/update", {
        method: "POST",
        body: JSON.stringify({ id, field, value: newValue }),
        headers: {
          "Content-Type": "application/json",
        },
      });

if (!response.ok) {
        throw new Error("Failed to update card");
      }

// Update local state
      setCards(prevCards => prevCards.map(card => card.id === id ? { ...card, [field]: newValue } : card));

setEditingCard(null);
    } catch (err) {
      setError(err.message);
    }
  };

const renderEditableCell = (card: any, field: string) => {
    const isEditing = editingCard?.id === card.id && editingCard?.field === field;

if (isEditing) {
      return (
        <td style={{ border: "1px solid #ddd", padding: "8px" }}>
          <input
            type="text"
            defaultValue={card[field]}
            onBlur={(e) => handleEditSave(card.id, field, e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                handleEditSave(card.id, field, (e.target as HTMLInputElement).value);
              }
            }}
            autoFocus
            style={{ width: "100%", border: "1px solid #007bff" }}
          />
        </td>
      );
    }

return (
      <td
        style={{
          border: "1px solid #ddd",
          padding: "8px",
          position: "relative",
        }}
      >
        {card[field]}
        <button
          onClick={() => handleEditStart(card.id, field)}
          style={{
            position: "absolute",
            right: "0",
            top: "0",
            backgroundColor: "transparent",
            border: "none",
            color: "#007bff",
            cursor: "pointer",
          }}
        >
          ✏️
        </button>
      </td>
    );
  };

return (
    <div>
      <h1>📚 Anki Deck Cards</h1>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead>
          <tr style={{ backgroundColor: "#f0f0f0" }}>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("id")}
            >
              ID {renderSortIcon("id")}
            </th>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("clue")}
            >
              Clue {renderSortIcon("clue")}
            </th>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("answer")}
            >
              Answer {renderSortIcon("answer")}
            </th>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("created_at")}
            >
              Created At {renderSortIcon("created_at")}
            </th>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("random_count")}
            >
              Times appeared {renderSortIcon("random_count")}
            </th>
            <th
              style={{ border: "1px solid #ddd", padding: "8px", cursor: "pointer" }}
              onClick={() => handleSort("last_random_time")}
            >
              Last appeared {renderSortIcon("last_random_time")}
            </th>
          </tr>
        </thead>
        <tbody>
          {cards.map((card: any) => (
            <tr key={card.id}>
              <td style={{ border: "1px solid #ddd", padding: "8px" }}>{card.id}</td>
              {renderEditableCell(card, "clue")}
              {renderEditableCell(card, "answer")}
              <td style={{ border: "1px solid #ddd", padding: "8px" }}>{card.created_at}</td>
              <td style={{ border: "1px solid #ddd", padding: "8px" }}>{card.random_count}</td>
              <td style={{ border: "1px solid #ddd", padding: "8px" }}>{card.last_random_time}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Rest of the code remains unchanged from the previous implementation
function RandomCard() {
  const [randomCard, setRandomCard] = useState<
    {
      katakanaWord: string;
      englishWord: string;
      exampleSentence: string;
    } | null
  >(null);
  const [error, setError] = useState("");

return (
    <div>
      <h1>🎲 Random Card</h1>
      <button
        onClick={fetchRandomCard}
        style={{
          backgroundColor: "#28a745",
          color: "white",
          border: "none",
          padding: "10px 20px",
          marginBottom: "20px",
        }}
      >
        Get Random Card
      </button>

{error && <p style={{ color: "red" }}>{error}</p>}

{randomCard && (
        <div
          style={{
            border: "1px solid #ddd",
            padding: "15px",
            borderRadius: "5px",
          }}
        >
          <p>
            <strong>Katakana Word:</strong> {randomCard.katakanaWord}
          </p>
          <p>
            <strong>English Word:</strong> {randomCard.englishWord}
          </p>
          <p>
            <strong>Example Sentence:</strong> {randomCard.exampleSentence}
          </p>
        </div>
      )}
    </div>
  );
}

function App() {
  const [view, setView] = useState<"import" | "view" | "random">("import");

return (
    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: "20px",
        }}
      >
        <button
          onClick={() => setView("import")}
          style={{
            backgroundColor: view === "import" ? "#007bff" : "#6c757d",
            color: "white",
            border: "none",
            padding: "10px 20px",
          }}
        >
          Import Deck
        </button>
        <button
          onClick={() => setView("view")}
          style={{
            backgroundColor: view === "view" ? "#007bff" : "#6c757d",
            color: "white",
            border: "none",
            padding: "10px 20px",
          }}
        >
          View Deck
        </button>
        <button
          onClick={() => setView("random")}
          style={{
            backgroundColor: view === "random" ? "#007bff" : "#6c757d",
            color: "white",
            border: "none",
            padding: "10px 20px",
          }}
        >
          Random Card
        </button>
      </div>

{view === "import" && <ImportDeck />}
      {view === "view" && <ViewDeck />}
      {view === "random" && <RandomCard />}

<a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_top"
        style={{ color: "#888", fontSize: "0.8em", display: "block", marginTop: "20px" }}
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const { OpenAI } = await import("https://esm.town/v/std/openai");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;

// last two rows are backfilled from ${KEY}_anki_cards_1
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_anki_cards_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      clue TEXT NOT NULL,
      answer TEXT NOT NULL,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      
      random_count INTEGER DEFAULT 0,
      last_random_time DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

const url = new URL(request.url);

if (request.method === "POST" && url.pathname === "/submit") {
    try {
      const { deckText } = await request.json();
      const cards = deckText.split("\n")
        .filter(line => line.trim() !== "")
        .map(line => line.split("\t"));

for (const [clue, answer] of cards) {
        if (clue && answer) {
          await sqlite.execute(
            `
            INSERT INTO ${KEY}_anki_cards_${SCHEMA_VERSION} (clue, answer) 
            VALUES (?, ?)
          `,
            [clue, answer],
          );
        }
      }

return new Response(`Successfully imported ${cards.length} cards!`, { status: 200 });
    } catch (error) {
      return new Response(`Error: ${error.message}`, { status: 500 });
    }
  }

if (request.method === "GET" && url.pathname === "/view") {
    try {
      const result = await sqlite.execute(`
        SELECT * FROM ${KEY}_anki_cards_${SCHEMA_VERSION} 
        ORDER BY last_random_time DESC
      `);

return new Response(JSON.stringify(result.rows), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      return new Response(`Error: ${error.message}`, { status: 500 });
    }
  }

if (request.method === "POST" && url.pathname === "/update") {
    try {
      const { id, field, value } = await request.json();

// Validate input
      if (!["clue", "answer"].includes(field)) {
        return new Response("Invalid field", { status: 400 });
      }

await sqlite.execute(
        `
        UPDATE ${KEY}_anki_cards_${SCHEMA_VERSION} 
        SET ${field} = ? 
        WHERE id = ?
      `,
        [value, id],
      );

return new Response("Card updated successfully", { status: 200 });
    } catch (error) {
      return new Response(`Error: ${error.message}`, { status: 500 });
    }
  }

if (request.method === "GET" && (url.pathname === "/random" || url.pathname === "/random.json")) {
    try {
      const result = await sqlite.execute(`
        SELECT * FROM ${KEY}_anki_cards_${SCHEMA_VERSION} 
        ORDER BY RANDOM() 
        LIMIT 1
      `);

if (result.rows.length === 0) {
        return new Response("No cards found", { status: 404 });
      }

const card = result.rows[0];

// Update random_count and last_random_time
      await sqlite.execute(
        `
        UPDATE ${KEY}_anki_cards_${SCHEMA_VERSION} 
        SET random_count = ?, last_random_time = ?
        WHERE id = ?
      `,
        [
          parseInt(card.random_count ?? 0) + 1,
          new Date().toISOString().slice(0, 19).replace("T", " "),
          card.id,
        ],
      );

const openai = new OpenAI();

const completion = await openai.chat.completions.create({
        messages: [
          {
            role: "system",
            content:
              "You are a helpful assistant that converts Japanese words to the specified format. Always respond in valid JSON.",
          },
          {
            role: "user",
            content: `Convert this Japanese word to the following format:
- Remove any parenthetical explanations or HTML
- Create a katakana version of the word
- Create an English example sentence with the katakana version of the word in place of the original word

Katakana: ${card.clue}
English word: ${card.answer}
JSON Format:
{
  "katakanaWord": "...",
  "englishWord": "...",
  "exampleSentence": "..."
}`,
          },
        ],
        model: "gpt-4o-mini",
        response_format: { type: "json_object" },
      });

const parsedResponse = JSON.parse(completion.choices[0].message.content);

return new Response(JSON.stringify(parsedResponse), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      return new Response(`Error: ${error.message}`, { status: 500 });
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Anki Deck Importer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}</article></body></html>

highApricotImpala