import React, { useState } from "react" import { useFireproof } from "use-fireproof" import { callAI } from "call-ai" import { ImgGen } from "use-vibes" export default function WineCellarManager() { const { database, useLiveQuery, useDocument } = useFireproof("wine-cellar") const [selectedWine, setSelectedWine] = useState(null) const [editingWine, setEditingWine] = useState(null) const [drinkingWine, setDrinkingWine] = useState(null) const [tastingNotes, setTastingNotes] = useState('') const [rating, setRating] = useState(5) const [searchTerm, setSearchTerm] = useState('') const [lookingUpEdit, setLookingUpEdit] = useState(false) const { doc: newWine, merge: mergeNewWine, submit: submitNewWine } = useDocument({ type: "wine", producer: "", name: "", vintage: "", region: "", varietal: "", location: "", purchaseDate: new Date().toISOString().split('T')[0], purchasePrice: "", notes: "", minCellaring: "", maxCellaring: "", prompt: "", bottleImagePrompt: "" }) const { docs: allWines } = useLiveQuery("type", { key: "wine", descending: true }) const { docs: tastingRecords } = useLiveQuery("type", { key: "tasting", descending: true }) const { docs: wineImages } = useLiveQuery("type", { key: "image", descending: true }) // Filter wines based on search const filteredWines = allWines.filter(wine => wine.name?.toLowerCase().includes(searchTerm.toLowerCase()) || wine.producer?.toLowerCase().includes(searchTerm.toLowerCase()) || wine.region?.toLowerCase().includes(searchTerm.toLowerCase()) || wine.varietal?.toLowerCase().includes(searchTerm.toLowerCase()) || wine.location?.toLowerCase().includes(searchTerm.toLowerCase()) ) // Get wine image for a specific wine const getWineImage = (wineId) => { return wineImages.find(img => img.wineId === wineId) } // Calculate drinking windows const calculateDrinkingWindow = (wine) => { if (!wine.vintage || !wine.minCellaring || !wine.maxCellaring) return null const vintageYear = parseInt(wine.vintage) const drinkFromYear = vintageYear + parseInt(wine.minCellaring) const drinkUntilYear = vintageYear + parseInt(wine.maxCellaring) return { drinkFromYear, drinkUntilYear } } // Get wines ready to drink now const currentYear = new Date().getFullYear() const readyTodrink = allWines.filter(wine => { const window = calculateDrinkingWindow(wine) if (!window) return false return currentYear >= window.drinkFromYear && currentYear <= window.drinkUntilYear }) const lookupWineInfo = async () => { if (!newWine.producer || !newWine.name || !newWine.vintage) return const generator = await callAI(`Look up cellaring information for ${newWine.producer} ${newWine.name} ${newWine.vintage} from ${newWine.region}. Provide minimum and maximum cellaring years from vintage.`, { stream: true, schema: { properties: { minCellaring: { type: "string", description: "Minimum years to cellar from vintage" }, maxCellaring: { type: "string", description: "Maximum years to cellar from vintage" }, description: { type: "string", description: "Wine description and characteristics" }, varietal: { type: "string", description: "Primary grape variety" }, bottleDescription: { type: "string", description: "Detailed description of the wine bottle appearance, label design, and distinctive visual features" } } } }) let finalResponse = "" for await (const chunk of generator) { finalResponse = chunk } try { const wineData = JSON.parse(finalResponse) const bottlePrompt = `Professional wine bottle product photography of ${newWine.producer} ${newWine.name} ${newWine.vintage}. ${wineData.bottleDescription || `Elegant wine bottle with ${newWine.producer} label, ${newWine.vintage} vintage, from ${newWine.region}`}. Clean white background, professional studio lighting, high quality product photography, centered composition.` mergeNewWine({ minCellaring: wineData.minCellaring || "", maxCellaring: wineData.maxCellaring || "", varietal: wineData.varietal || newWine.varietal, notes: wineData.description || "", prompt: `Wine bottle label for ${newWine.producer} ${newWine.name} ${newWine.vintage}`, bottleImagePrompt: bottlePrompt }) // Create bottle image document if (bottlePrompt) { await database.put({ type: "image", prompt: bottlePrompt, wineId: newWine._id, producer: newWine.producer, name: newWine.name, vintage: newWine.vintage }) } } catch (error) { console.error("Failed to parse wine data:", error) } } const lookupEditWineInfo = async () => { if (!editingWine.producer || !editingWine.name || !editingWine.vintage) return setLookingUpEdit(true) const generator = await callAI(`Look up detailed information for ${editingWine.producer} ${editingWine.name} ${editingWine.vintage} from ${editingWine.region}. Provide cellaring recommendations and wine details.`, { stream: true, schema: { properties: { minCellaring: { type: "string", description: "Minimum years to cellar from vintage" }, maxCellaring: { type: "string", description: "Maximum years to cellar from vintage" }, description: { type: "string", description: "Wine description and characteristics" }, varietal: { type: "string", description: "Primary grape variety or blend" }, region: { type: "string", description: "Wine region or appellation" }, suggestedPrice: { type: "string", description: "Typical market price range" }, storageNotes: { type: "string", description: "Optimal storage recommendations" }, bottleDescription: { type: "string", description: "Detailed description of the wine bottle appearance, label design, and distinctive visual features" } } } }) let finalResponse = "" for await (const chunk of generator) { finalResponse = chunk } try { const wineData = JSON.parse(finalResponse) const bottlePrompt = `Professional wine bottle product photography of ${editingWine.producer} ${editingWine.name} ${editingWine.vintage}. ${wineData.bottleDescription || `Elegant wine bottle with ${editingWine.producer} label, ${editingWine.vintage} vintage, from ${editingWine.region}`}. Clean white background, professional studio lighting, high quality product photography, centered composition.` setEditingWine(prev => ({ ...prev, minCellaring: wineData.minCellaring || prev.minCellaring, maxCellaring: wineData.maxCellaring || prev.maxCellaring, varietal: wineData.varietal || prev.varietal, region: wineData.region || prev.region, notes: wineData.description ? `${wineData.description}\n\nStorage: ${wineData.storageNotes}` : prev.notes, prompt: `Wine bottle label for ${prev.producer} ${prev.name} ${prev.vintage}`, bottleImagePrompt: bottlePrompt })) // Update bottle image document if (bottlePrompt) { await database.put({ type: "image", prompt: bottlePrompt, wineId: editingWine.originalId, producer: editingWine.producer, name: editingWine.name, vintage: editingWine.vintage }) } } catch (error) { console.error("Failed to parse wine data:", error) } finally { setLookingUpEdit(false) } } const generateDemoData = async () => { const generator = await callAI("Generate 5 realistic wine entries with producers, names, vintages, regions, and cellaring years.", { stream: true, schema: { properties: { wines: { type: "array", items: { type: "object", properties: { producer: { type: "string" }, name: { type: "string" }, vintage: { type: "string" }, region: { type: "string" }, varietal: { type: "string" }, location: { type: "string" }, purchasePrice: { type: "string" }, minCellaring: { type: "string" }, maxCellaring: { type: "string" }, notes: { type: "string" }, bottleDescription: { type: "string" } } } } } } }) let finalResponse = "" for await (const chunk of generator) { finalResponse = chunk } try { const data = JSON.parse(finalResponse) for (const wine of data.wines) { const wineDoc = await database.put({ type: "wine", ...wine, purchaseDate: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000 * 3).toISOString().split('T')[0], bottleImagePrompt: `Professional wine bottle product photography of ${wine.producer} ${wine.name} ${wine.vintage}. ${wine.bottleDescription || `Elegant wine bottle with ${wine.producer} label, ${wine.vintage} vintage, from ${wine.region}`}. Clean white background, professional studio lighting, high quality product photography, centered composition.` }) // Create bottle image document await database.put({ type: "image", prompt: `Professional wine bottle product photography of ${wine.producer} ${wine.name} ${wine.vintage}. ${wine.bottleDescription || `Elegant wine bottle with ${wine.producer} label, ${wine.vintage} vintage, from ${wine.region}`}. Clean white background, professional studio lighting, high quality product photography, centered composition.`, wineId: wineDoc.id, producer: wine.producer, name: wine.name, vintage: wine.vintage }) } } catch (error) { console.error("Failed to generate demo data:", error) } } const handleEditWine = (wine) => { setEditingWine({ ...wine, originalId: wine._id }) } const saveEditedWine = async () => { if (!editingWine) return const { originalId, ...updatedWine } = editingWine await database.put({ ...updatedWine, _id: originalId }) setEditingWine(null) setSelectedWine(null) } const handleDrinkWine = (wine) => { setDrinkingWine(wine) setTastingNotes('') setRating(5) } const saveTastingNotes = async () => { if (!drinkingWine || !tastingNotes.trim()) return // Save tasting record await database.put({ type: "tasting", wineId: drinkingWine._id, producer: drinkingWine.producer, name: drinkingWine.name, vintage: drinkingWine.vintage, tastingDate: new Date().toISOString().split('T')[0], rating: rating, notes: tastingNotes, location: drinkingWine.location }) // Remove the wine from cellar and its image await database.del(drinkingWine._id) const wineImage = getWineImage(drinkingWine._id) if (wineImage) { await database.del(wineImage._id) } setDrinkingWine(null) setTastingNotes('') setRating(5) setSelectedWine(null) } if (drinkingWine) { return (

🍷 Enjoying Your Wine!

🍾🥂

{drinkingWine.producer}

{drinkingWine.name} {drinkingWine.vintage}

Rating (1-10)

{[1,2,3,4,5,6,7,8,9,10].map(num => ( ))}

Tasting Notes *

setTastingNotes(e.target.value)}
              className="w-full p-4 border-4 border-black text-black font-bold h-32"
              placeholder="How does it taste? Aroma, flavor, finish, overall experience..."
            />
          </div>

<div className="flex gap-4">
            <button
              onClick={saveTastingNotes}
              disabled={!tastingNotes.trim()}
              className="flex-1 bg-#70d6ff border-4 border-black font-black text-black px-6 py-3 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all disabled:opacity-50"
            >
              💾 Save Tasting & Remove from Cellar
            </button>
            
            <button
              onClick={() => setDrinkingWine(null)}
              className="bg-#ff9770 border-4 border-black font-black text-black px-6 py-3 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all"
            >
              ❌ Cancel
            </button>
          </div>
        </div>
      </div>
    )
  }

if (editingWine) {
    const editWindow = calculateDrinkingWindow(editingWine)
    const editImage = getWineImage(editingWine.originalId)
    
    return (
      <div 
        className="min-h-screen p-6"
        style={{
          background: `linear-gradient(45deg, #e9ff70 0%, #ff9770 25%, #70d6ff 50%, #ff70a6 75%, #ffd670 100%)`,
          backgroundSize: '40px 40px'
        }}
      >
        <div className="max-w-4xl mx-auto">
          <div className="bg-white border-8 border-black p-6 shadow-[8px_8px_0px_0px_rgba(36,36,36,1)]">
            <h2 className="text-2xl font-black text-black mb-4">✏️ Edit Wine</h2>
            
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="lg:col-span-2">
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block font-black text-black mb-2">Producer</label>
                    <input
                      type="text"
                      value={editingWine.producer}
                      onChange={(e) => setEditingWine({...editingWine, producer: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                  <div>
                    <label className="block font-black text-black mb-2">Wine Name</label>
                    <input
                      type="text"
                      value={editingWine.name}
                      onChange={(e) => setEditingWine({...editingWine, name: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block font-black text-black mb-2">Vintage</label>
                    <input
                      type="number"
                      value={editingWine.vintage}
                      onChange={(e) => setEditingWine({...editingWine, vintage: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                  <div>
                    <label className="block font-black text-black mb-2">Region</label>
                    <input
                      type="text"
                      value={editingWine.region}
                      onChange={(e) => setEditingWine({...editingWine, region: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block font-black text-black mb-2">Varietal</label>
                    <input
                      type="text"
                      value={editingWine.varietal}
                      onChange={(e) => setEditingWine({...editingWine, varietal: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                  <div>
                    <label className="block font-black text-black mb-2">Cellar Location</label>
                    <input
                      type="text"
                      value={editingWine.location}
                      onChange={(e) => setEditingWine({...editingWine, location: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block font-black text-black mb-2">Min Cellaring (years)</label>
                    <input
                      type="number"
                      value={editingWine.minCellaring}
                      onChange={(e) => setEditingWine({...editingWine, minCellaring: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                  <div>
                    <label className="block font-black text-black mb-2">Max Cellaring (years)</label>
                    <input
                      type="number"
                      value={editingWine.maxCellaring}
                      onChange={(e) => setEditingWine({...editingWine, maxCellaring: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                </div>

{editingWine.vintage && editingWine.minCellaring && editingWine.maxCellaring && editWindow && (
                  <div className="bg-#ff70a6 border-4 border-black p-3 mb-4">
                    <div className="font-black text-black">Drinking Window:</div>
                    <div className="text-black">
                      {editWindow.drinkFromYear} - {editWindow.drinkUntilYear}
                      {currentYear >= editWindow.drinkFromYear && 
                       currentYear <= editWindow.drinkUntilYear && 
                       " 🎯 READY NOW!"}
                    </div>
                  </div>
                )}

<div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block font-black text-black mb-2">Purchase Price</label>
                    <input
                      type="text"
                      value={editingWine.purchasePrice}
                      onChange={(e) => setEditingWine({...editingWine, purchasePrice: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                  <div>
                    <label className="block font-black text-black mb-2">Purchase Date</label>
                    <input
                      type="date"
                      value={editingWine.purchaseDate}
                      onChange={(e) => setEditingWine({...editingWine, purchaseDate: e.target.value})}
                      className="w-full p-3 border-4 border-black text-black font-bold"
                    />
                  </div>
                </div>

<div className="mb-6">
                  <label className="block font-black text-black mb-2">Notes</label>
                  <textarea
                    value={editingWine.notes}
                    onChange={(e) => setEditingWine({...editingWine, notes: e.target.value})}
                    className="w-full p-3 border-4 border-black text-black font-bold h-20"
                  />
                </div>

<div className="flex gap-4">
                  <button
                    onClick={lookupEditWineInfo}
                    disabled={!editingWine.producer || !editingWine.name || !editingWine.vintage || lookingUpEdit}
                    className="bg-#ff70a6 border-4 border-black font-black text-black px-4 py-2 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all disabled:opacity-50"
                  >
                    {lookingUpEdit ? '🔍 Looking up...' : '🔍 Lookup Updated Info'}
                  </button>
                  
                  <button
                    onClick={saveEditedWine}
                    className="bg-#70d6ff border-4 border-black font-black text-black px-6 py-2 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all"
                  >
                    💾 Save Changes
                  </button>
                  
                  <button
                    onClick={() => setEditingWine(null)}
                    className="bg-#ff9770 border-4 border-black font-black text-black px-6 py-2 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all"
                  >
                    ❌ Cancel
                  </button>
                </div>
              </div>

<div className="border-4 border-black">
                <h3 className="font-black text-black mb-2 p-2 bg-#ffd670">Bottle Image:</h3>
                {editImage ? (
                  <ImgGen 
                    _id={editImage._id}
                    database={database}
                    className="w-full"
                  />
                ) : (
                  <div className="p-4 text-center text-black">
                    <div className="text-4xl mb-2">🍷</div>
                    <div>Lookup wine info to generate bottle image</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div 
      className="min-h-screen p-6"
      style={{
        background: `linear-gradient(45deg, #e9ff70 0%, #ff9770 25%, #70d6ff 50%, #ff70a6 75%, #ffd670 100%)`,
        backgroundSize: '40px 40px'
      }}
    >
      <div className="max-w-6xl mx-auto">
        <div className="bg-white border-8 border-black p-8 shadow-[8px_8px_0px_0px_rgba(36,36,36,1)] mb-8">
          <h1 className="text-4xl font-black text-black mb-2">🍷 Wine Cellar Manager</h1>
          <p className="text-lg text-black mb-6">
            <em>Track your wine collection with **precise cellaring data** and **AI-generated bottle images**. Get aging recommendations, calculate optimal drinking windows, and **record tasting experiences** when you open bottles.</em>
          </p>

{allWines.length === 0 && (
            <button
              onClick={generateDemoData}
              className="bg-#ff70a6 border-4 border-black font-black text-black px-6 py-3 mb-6 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all"
            >
              🎭 Generate Demo Cellar
            </button>
          )}

{readyTodrink.length > 0 && (
            <div className="bg-#e9ff70 border-4 border-black p-4 mb-6 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)]">
              <h2 className="text-xl font-black text-black mb-2">🎯 Ready to Drink Now ({readyTodrink.length} wines)</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                {readyTodrink.map(wine => {
                  const window = calculateDrinkingWindow(wine)
                  const wineImage = getWineImage(wine._id)
                  return (
                    <div 
                      key={wine._id} 
                      className="bg-white border-3 border-black p-3 shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] cursor-pointer hover:shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] transform hover:-translate-x-1 hover:-translate-y-1 transition-all"
                      onClick={() => setSelectedWine(wine)}
                    >
                      {wineImage && (
                        <div className="mb-2 h-24 border-2 border-black">
                          <ImgGen 
                            _id={wineImage._id}
                            database={database}
                            className="w-full h-full object-cover"
                          />
                        </div>
                      )}
                      <div className="font-black text-black text-sm">{wine.producer}</div>
                      <div className="text-black font-bold text-sm">{wine.name} {wine.vintage}</div>
                      <div className="text-black text-xs">📍 {wine.location}</div>
                      {window && (
                        <div className="text-black text-xs">🕒 {window.drinkFromYear}-{window.drinkUntilYear}</div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
          )}

{tastingRecords.length > 0 && (
            <div className="bg-#ff70a6 border-4 border-black p-4 mb-6 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)]">
              <h2 className="text-xl font-black text-black mb-2">📖 Recent Tastings ({tastingRecords.length} total)</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-48 overflow-y-auto">
                {tastingRecords.slice(0, 4).map(tasting => (
                  <div key={tasting._id} className="bg-white border-3 border-black p-3">
                    <div className="font-black text-black">{tasting.producer}</div>
                    <div className="text-black font-bold">{tasting.name} {tasting.vintage}</div>
                    <div className="text-black">⭐ Rating: {tasting.rating}/10</div>
                    <div className="text-black text-sm">📅 {new Date(tasting.tastingDate).toLocaleDateString()}</div>
                    <div className="text-black text-sm mt-1">{tasting.notes.slice(0, 80)}...</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Add Wine Form */}
          <div className="bg-white border-8 border-black p-6 shadow-[8px_8px_0px_0px_rgba(36,36,36,1)]">
            <h2 className="text-2xl font-black text-black mb-4">➕ Add Wine</h2>
            
            <div className="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block font-black text-black mb-2">Producer *</label>
                <input
                  type="text"
                  value={newWine.producer}
                  onChange={(e) => mergeNewWine({ producer: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="Château Margaux"
                />
              </div>
              <div>
                <label className="block font-black text-black mb-2">Wine Name *</label>
                <input
                  type="text"
                  value={newWine.name}
                  onChange={(e) => mergeNewWine({ name: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="First Growth Red"
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block font-black text-black mb-2">Vintage *</label>
                <input
                  type="number"
                  value={newWine.vintage}
                  onChange={(e) => mergeNewWine({ vintage: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="2018"
                />
              </div>
              <div>
                <label className="block font-black text-black mb-2">Region</label>
                <input
                  type="text"
                  value={newWine.region}
                  onChange={(e) => mergeNewWine({ region: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="Bordeaux, France"
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block font-black text-black mb-2">Varietal</label>
                <input
                  type="text"
                  value={newWine.varietal}
                  onChange={(e) => mergeNewWine({ varietal: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="Cabernet Sauvignon"
                />
              </div>
              <div>
                <label className="block font-black text-black mb-2">Cellar Location 📍</label>
                <input
                  type="text"
                  value={newWine.location}
                  onChange={(e) => mergeNewWine({ location: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="Rack 3, Shelf B"
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block font-black text-black mb-2">Min Cellaring (years)</label>
                <input
                  type="number"
                  value={newWine.minCellaring}
                  onChange={(e) => mergeNewWine({ minCellaring: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="5"
                />
              </div>
              <div>
                <label className="block font-black text-black mb-2">Max Cellaring (years)</label>
                <input
                  type="number"
                  value={newWine.maxCellaring}
                  onChange={(e) => mergeNewWine({ maxCellaring: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="20"
                />
              </div>
            </div>

{newWine.vintage && newWine.minCellaring && newWine.maxCellaring && (
              <div className="bg-#ff70a6 border-4 border-black p-3 mb-4">
                <div className="font-black text-black">Drinking Window:</div>
                <div className="text-black">
                  {parseInt(newWine.vintage) + parseInt(newWine.minCellaring)} - {parseInt(newWine.vintage) + parseInt(newWine.maxCellaring)}
                  {currentYear >= parseInt(newWine.vintage) + parseInt(newWine.minCellaring) && 
                   currentYear <= parseInt(newWine.vintage) + parseInt(newWine.maxCellaring) && 
                   " 🎯 READY NOW!"}
                </div>
              </div>
            )}

<div className="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block font-black text-black mb-2">Purchase Date</label>
                <input
                  type="date"
                  value={newWine.purchaseDate}
                  onChange={(e) => mergeNewWine({ purchaseDate: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                />
              </div>
              <div>
                <label className="block font-black text-black mb-2">Purchase Price</label>
                <input
                  type="text"
                  value={newWine.purchasePrice}
                  onChange={(e) => mergeNewWine({ purchasePrice: e.target.value })}
                  className="w-full p-3 border-4 border-black text-black font-bold"
                  placeholder="$150"
                />
              </div>
            </div>

<div className="mb-4">
              <label className="block font-black text-black mb-2">Notes</label>
              <textarea
                value={newWine.notes}
                onChange={(e) => mergeNewWine({ notes: e.target.value })}
                className="w-full p-3 border-4 border-black text-black font-bold h-20"
                placeholder="Tasting notes, storage conditions..."
              />
            </div>

<div className="flex gap-4">
              <button
                onClick={lookupWineInfo}
                disabled={!newWine.producer || !newWine.name || !newWine.vintage}
                className="bg-#ff70a6 border-4 border-black font-black text-black px-4 py-2 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all disabled:opacity-50"
              >
                🔍 Lookup Wine Info
              </button>
              
              <button
                onClick={submitNewWine}
                className="bg-#70d6ff border-4 border-black font-black text-black px-6 py-2 shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] hover:shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-1 hover:translate-y-1 transition-all"
              >
                💾 Save Wine
              </button>
            </div>

{newWine.bottleImagePrompt && (
              <div className="mt-6">
                <h3 className="font-black text-black mb-2">Bottle Preview:</h3>
                <div className="border-4 border-black h-48">
                  {/* Find the corresponding image document */}
                  {(() => {
                    const newWineImage = wineImages.find(img => img.wineId === newWine._id)
                    return newWineImage ? (
                      <ImgGen 
                        _id={newWineImage._id}
                        database={database}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <div className="w-full h-full bg-#ffd670 flex items-center justify-center">
                        <div className="text-4xl">🍷</div>
                      </div>
                    )
                  })()}
                </div>
              </div>
            )}
          </div>

{/* Wine List */}
          <div className="bg-white border-8 border-black p-6 shadow-[8px_8px_0px_0px_rgba(36,36,36,1)]">
            <h2 className="text-2xl font-black text-black mb-4">🍾 Cellar ({allWines.length} wines)</h2>

<div className="mb-4">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full p-3 border-4 border-black text-black font-bold"
                placeholder="🔍 Search wines..."
              />
            </div>

<div className="space-y-3 max-h-96 overflow-y-auto">
              {filteredWines.map(wine => {
                const window = calculateDrinkingWindow(wine)
                const isReady = window && currentYear >= window.drinkFromYear && currentYear <= window.drinkUntilYear
                const wineImage = getWineImage(wine._id)
                
                return (
                  <div 
                    key={wine._id}
                    className={`border-4 border-black p-4 cursor-pointer shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] hover:shadow-[4px_4px_0px_0px_rgba(36,36,36,1)] transform hover:-translate-x-1 hover:-translate-y-1 transition-all ${
                      isReady ? 'bg-#e9ff70' : 'bg-white'
                    }`}
                    onClick={() => setSelectedWine(selectedWine?._id === wine._id ? null : wine)}
                  >
                    <div className="flex gap-4">
                      <div className="flex-shrink-0">
                        {wineImage ? (
                          <div className="w-16 h-20 border-2 border-black">
                            <ImgGen 
                              _id={wineImage._id}
                              database={database}
                              className="w-full h-full object-cover"
                            />
                          </div>
                        ) : (
                          <div className="w-16 h-20 border-2 border-black bg-#ffd670 flex items-center justify-center">
                            <div className="text-xl">🍷</div>
                          </div>
                        )}
                      </div>
                      
                      <div className="flex-1 flex justify-between">
                        <div className="flex-1">
                          <div className="font-black text-black text-lg">
                            {wine.producer} {isReady && '🎯'}
                          </div>
                          <div className="text-black font-bold">{wine.name} {wine.vintage}</div>
                          <div className="text-black">{wine.region} • {wine.varietal}</div>
                          <div className="text-black">📍 {wine.location}</div>
                          {window && (
                            <div className="text-black text-sm">
                              🕒 {window.drinkFromYear} - {window.drinkUntilYear}
                            </div>
                          )}
                        </div>
                        <div className="text-black font-bold">{wine.purchasePrice}</div>
                      </div>
                    </div>
                    
                    {selectedWine?._id === wine._id && (
                      <div className="mt-4 pt-4 border-t-4 border-black">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <div className="font-black text-black">Purchase Date:</div>
                            <div className="text-black">{new Date(wine.purchaseDate).toLocaleDateString()}</div>
                          </div>
                          <div>
                            <div className="font-black text-black">Current Age:</div>
                            <div className="text-black">{currentYear - parseInt(wine.vintage)} years</div>
                          </div>
                        </div>
                        {wine.notes && (
                          <div className="mt-2">
                            <div className="font-black text-black">Notes:</div>
                            <div className="text-black text-sm">{wine.notes}</div>
                          </div>
                        )}
                        <div className="mt-4 flex gap-2">
                          <button
                            onClick={(e) => {
                              e.stopPropagation()
                              handleDrinkWine(wine)
                            }}
                            className="bg-#e9ff70 border-4 border-black font-black text-black px-3 py-1 text-sm shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] hover:shadow-[1px_1px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-0.5 hover:translate-y-0.5 transition-all"
                          >
                            🍷 Drink Wine
                          </button>
                          
                          <button
                            onClick={(e) => {
                              e.stopPropagation()
                              handleEditWine(wine)
                            }}
                            className="bg-#ffd670 border-4 border-black font-black text-black px-3 py-1 text-sm shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] hover:shadow-[1px_1px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-0.5 hover:translate-y-0.5 transition-all"
                          >
                            ✏️ Edit
                          </button>
                          
                          <button
                            onClick={(e) => {
                              e.stopPropagation()
                              database.del(wine._id)
                              const image = getWineImage(wine._id)
                              if (image) database.del(image._id)
                              setSelectedWine(null)
                            }}
                            className="bg-#ff9770 border-4 border-black font-black text-black px-3 py-1 text-sm shadow-[2px_2px_0px_0px_rgba(36,36,36,1)] hover:shadow-[1px_1px_0px_0px_rgba(36,36,36,1)] transform hover:translate-x-0.5 hover:translate-y-0.5 transition-all"
                          >
                            🗑️ Remove
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

🍷 Wine Cellar Manager

➕ Add Wine

🍾 Cellar (0 wines)