\n setEditingProduct({...editingProduct, title: e.target.value})}\n placeholder=\"Product Title\"\n />\n setEditingProduct({...editingProduct, imageUrl: e.target.value})}\n placeholder=\"Image URL\"\n />\n

setEditingProduct({...editingProduct, description: e.target.value})}\n            placeholder=\"Product Description\"\n          />\n          <input \n            type=\"text\" \n            value={editingProduct.price || ''}\n            onChange={(e) => setEditingProduct({...editingProduct, price: e.target.value})}\n            placeholder=\"Price\"\n          />\n          <select \n            value={editingProduct.status} \n            onChange={(e) => setEditingProduct({\n              ...editingProduct, \n              status: e.target.value as AmazonProduct['status']\n            })}\n          >\n            <option value=\"plan to buy\">Plan to Buy</option>\n            <option value=\"bought\">Bought</option>\n            <option value=\"returned\">Returned</option>\n          </select>\n          <input \n            type=\"date\" \n            value={editingProduct.datePurchased || ''}\n            onChange={(e) => setEditingProduct({...editingProduct, datePurchased: e.target.value})}\n          />\n          <input \n            type=\"number\" \n            value={editingProduct.personalRating || ''}\n            onChange={(e) => setEditingProduct({...editingProduct, personalRating: Number(e.target.value)})}\n            placeholder=\"Personal Rating (1-5)\"\n            min=\"1\"\n            max=\"5\"\n          />\n          <textarea \n            value={editingProduct.notes || ''}\n            onChange={(e) => setEditingProduct({...editingProduct, notes: e.target.value})}\n            placeholder=\"Additional Notes\"\n          />\n          <div className=\"edit-actions\">\n            <button onClick={() => updateProduct(editingProduct)}>💾 Save</button>\n            <button onClick={() => setEditingProduct(null)}>❌ Cancel</button>\n          </div>\n        </div>\n      );\n    }\n\n    // Normal product card view\n    return (\n      <div key={product.id} className=\"product-card\">\n        <img src={product.imageUrl} alt={product.title} />\n        <div className=\"product-details\">\n          <h3>{product.title}</h3>\n          <p>{product.description}</p>\n          <div className=\"product-meta\">\n            {product.price && <span>💰 {product.price}</span>}\n            {product.personalRating && <span>⭐ {product.personalRating}/5</span>}\n          </div>\n          <select \n            value={product.status} \n            onChange={(e) => updateProduct({\n              ...product, \n              status: e.target.value as AmazonProduct['status']\n            })}\n          >\n            <option value=\"plan to buy\">Plan to Buy</option>\n            <option value=\"bought\">Bought</option>\n            <option value=\"returned\">Returned</option>\n          </select>\n          <input \n            type=\"date\" \n            value={product.datePurchased || ''}\n            onChange={(e) => updateProduct({\n              ...product, \n              datePurchased: e.target.value\n            })}\n          />\n          <textarea \n            placeholder=\"Notes\"\n            value={product.notes || ''}\n            onChange={(e) => updateProduct({\n              ...product, \n              notes: e.target.value\n            })}\n          />\n          <div className=\"product-actions\">\n            <button onClick={() => startEditing(product)}>✏️ Edit</button>\n            <button onClick={() => deleteProduct(product.id!)}>🗑️ Delete</button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"container\">\n      <h1>🛒 Amazon Product Tracker</h1>\n      <div className=\"add-product\">\n        <input \n          type=\"text\" \n          value={newProductUrl}\n          onChange={(e) => setNewProductUrl(e.target.value)}\n          placeholder=\"Paste Amazon Product URL\"\n        />\n        <button \n          onClick={handleAddProduct} \n          disabled={isLoading}\n        >\n          {isLoading ? 'Adding...' : 'Add Product'}\n        </button>\n      </div>\n      <div className=\"product-list\">\n        {products.map(renderProductCard)}\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{ color: '#888', textDecoration: 'none' }}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"attentiveSilverGuan\";\n  const SCHEMA_VERSION = 5; // Increment schema version to ensure fresh table\n\n  // Create products table with more comprehensive schema\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_products_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      amazon_url TEXT UNIQUE,\n      title TEXT,\n      image_url TEXT,\n      description TEXT,\n      price TEXT,\n      rating REAL,\n      date_purchased TEXT,\n      personal_rating INTEGER,\n      status TEXT,\n      notes TEXT\n    )\n  `);\n\n  // Simple product scraping (basic implementation)\n  async function scrapeAmazonProduct(url: string) {\n    try {\n      const response = await fetch(url);\n      const html = await response.text();\n      \n      // Basic parsing - this is a simplified example\n      const titleMatch = html.match(/<title>(.*?)<\\/title>/);\n      const imageMatch = html.match(/<img[^>]+src=\"([^\">]+)\"/);\n      const descriptionMatch = html.match(/product description.*?>(.*?)</si);\n      const priceMatch = html.match(/\\$[\\d,.]+/);\n\n      return {\n        amazonUrl: url,\n        title: titleMatch ? titleMatch[1] : 'Unknown Product',\n        imageUrl: imageMatch ? imageMatch[1] : '',\n        description: descriptionMatch ? descriptionMatch[1] : 'No description',\n        price: priceMatch ? priceMatch[0] : '',\n        status: 'plan to buy'\n      };\n    } catch (error) {\n      console.error('Scraping failed', error);\n      throw new Error('Could not scrape product');\n    }\n  }\n\n  // Route handling for products\n  if (request.method === 'GET' && new URL(request.url).pathname === '/products') {\n    const products = await sqlite.execute(`SELECT * FROM ${KEY}_products_${SCHEMA_VERSION}`);\n    return new Response(JSON.stringify(products.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Add product route\n  if (request.method === 'POST' && new URL(request.url).pathname === '/add-product') {\n    const { url } = await request.json();\n    const product = await scrapeAmazonProduct(url);\n\n    const result = await sqlite.execute(\n      `INSERT INTO ${KEY}_products_${SCHEMA_VERSION} \n      (amazon_url, title, image_url, description, price, status) \n      VALUES (?, ?, ?, ?, ?, ?)`,\n      [product.amazonUrl, product.title, product.imageUrl, product.description, product.price, product.status]\n    );\n\n    const insertedProduct = await sqlite.execute(\n      `SELECT * FROM ${KEY}_products_${SCHEMA_VERSION} WHERE id = ?`, \n      [url]\n    );\n\n    return new Response(JSON.stringify(insertedProduct.rows[0]), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Update product route\n  if (request.method === 'PUT' && new URL(request.url).pathname === '/update-product') {\n    const product = await request.json();\n    await sqlite.execute(\n      `UPDATE ${KEY}_products_${SCHEMA_VERSION}\n      SET title = ?, image_url = ?, description = ?, price = ?, \n      rating = ?, date_purchased = ?, personal_rating = ?, \n      status = ?, notes = ? \n      WHERE id = ?`,\n      [\n        product.title, \n        product.imageUrl, \n        product.description, \n        product.price,\n        product.rating,\n        product.datePurchased,\n        product.personalRating,\n        product.status,\n        product.notes,\n        product.id\n      ]\n    );\n\n    const updatedProduct = await sqlite.execute(\n      `SELECT * FROM ${KEY}_products_${SCHEMA_VERSION} WHERE id = ?`, \n      [product.id]\n    );\n\n    return new Response(JSON.stringify(updatedProduct.rows[0]), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Delete product route\n  if (request.method === 'DELETE' && new URL(request.url).pathname.startsWith('/delete-product/')) {\n    const productId = new URL(request.url).pathname.split('/').pop();\n    await sqlite.execute(\n      `DELETE FROM ${KEY}_products_${SCHEMA_VERSION} WHERE id = ?`, \n      [productId]\n    );\n    return new Response(JSON.stringify({ success: true }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Render HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Amazon Product Tracker</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n.container {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.add-product {\n  display: flex;\n  margin-bottom: 20px;\n}\n.add-product input {\n  flex-grow: 1;\n  padding: 10px;\n  margin-right: 10px;\n}\n.product-list {\n  display: grid;\n  gap: 20px;\n}\n.product-card {\n  display: flex;\n  border: 1px solid #eee;\n  padding: 15px;\n  border-radius: 5px;\n}\n.product-card.editing {\n  flex-direction: column;\n}\n.product-card img {\n  max-width: 200px;\n  object-fit: contain;\n  margin-right: 15px;\n}\n.product-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.product-card.editing input,\n.product-card.editing textarea,\n.product-card.editing select {\n  margin-bottom: 10px;\n  padding: 8px;\n}\n.product-meta {\n  display: flex;\n  gap: 10px;\n  color: #666;\n}\n.product-actions {\n  display: flex;\n  gap: 10px;\n}\n.edit-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 10px;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/aazad/attentiveSilverGuan/code/main.tsx","extension","actionData","errors"]
</article></body></html>