import React, { useState } from "react"; import { callAI } from "call-ai"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; const SIZES = ["XS","S","M","L","XL","XXL","One Size"]; const CATS = ["Tops","Bottoms","Dresses","Outerwear","Shoes","Accessories"]; const USERS = ["Alex","Blake","Casey","Dana","Erin"]; function Spinner() { return ( ); } export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("closet-exchange-v1"); const { docs: items } = useLiveQuery("type", { key: "item", descending: true }); const { docs: swaps } = useLiveQuery("type", { key: "swap" }); const { doc: form, merge, submit } = useDocument({ type: "item", title: "", category: CATS[0], size: SIZES[2], description: "", owner: USERS[0], createdAt: Date.now(), }); const [view, setView] = useState("browse"); // browse | add | detail | swaps const [selectedItem, setSelectedItem] = useState(null); const [myOfferDoc, setMyOfferDoc] = useState(null); const [aiSuggestion, setAiSuggestion] = useState(""); const [isAiLoading, setIsAiLoading] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [imgFile, setImgFile] = useState(null); const [imgPrompt, setImgPrompt] = useState(""); const [dragOver, setDragOver] = useState(false); const myUser = USERS[0]; const myItems = items.filter(i => i.owner === myUser); async function handleAddItem(e) { e.preventDefault(); if (!form.title.trim()) return; setIsSubmitting(true); try { const doc = { ...form, createdAt: Date.now() }; if (imgFile) doc._files = { photo: imgFile }; if (imgPrompt) doc.imgPrompt = imgPrompt; await database.put(doc); merge({ title: "", description: "", imgPrompt: "" }); setImgFile(null); setImgPrompt(""); setView("browse"); } finally { setIsSubmitting(false); } } async function handleAISuggest() { if (!selectedItem || myItems.length === 0) return; setIsAiLoading(true); setAiSuggestion(""); try { const myList = myItems.map(i => `${i.title} (${i.category}, ${i.size})`).join(", "); const res = await callAI( `Someone wants to swap: "${selectedItem.title}" (${selectedItem.category}, size ${selectedItem.size}). My closet: ${myList}. Which single item from my closet is the best swap match and why? Be brief (1 sentence).`, { schema: { properties: { suggestion: { type: "string" } } } } ); setAiSuggestion(JSON.parse(res).suggestion); } finally { setIsAiLoading(false); } } async function handleProposeSwap() { if (!selectedItem || !myOfferDoc) return; await database.put({ type: "swap", wantId: selectedItem._id, wantTitle: selectedItem.title, wantOwner: selectedItem.owner, offerId: myOfferDoc._id, offerTitle: myOfferDoc.title, offerOwner: myUser, status: "pending", createdAt: Date.now(), }); setView("swaps"); setSelectedItem(null); setMyOfferDoc(null); setAiSuggestion(""); } function onDrop(e) { e.preventDefault(); setDragOver(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) setImgFile(file); } const c = { bg: "bg-[#f5f3ee]", card: "bg-[#ffffff]", ink: "text-[#1a1820]", muted: "text-[#6b6880]", border: "border-[#1a1820]", red: "bg-[#c0392b]", yellow: "bg-[#d4a017]", green: "bg-[#3a8f5c]", blue: "bg-[#2c5fa8]", shadow: "shadow-[4px_4px_0px_#1a1820]", shadowSm: "shadow-[3px_3px_0px_#1a1820]", btnPrimary: "bg-[#c0392b] text-white border-[3px] border-[#1a1820] shadow-[4px_4px_0px_#1a1820] hover:shadow-[6px_6px_0px_#1a1820] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150 font-bold uppercase tracking-wide text-sm px-4 py-2 rounded-[4px] cursor-pointer", btnYellow: "bg-[#d4a017] text-[#1a1820] border-[3px] border-[#1a1820] shadow-[3px_3px_0px_#1a1820] hover:shadow-[6px_6px_0px_#1a1820] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150 font-bold uppercase tracking-wide text-sm px-4 py-2 rounded-[4px] cursor-pointer", btnGhost: "bg-white text-[#1a1820] border-[3px] border-[#1a1820] hover:shadow-[3px_3px_0px_#1a1820] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none transition-all duration-150 font-bold uppercase tracking-wide text-sm px-4 py-2 rounded-[4px] cursor-pointer", input: "w-full bg-white border-[3px] border-[#1a1820] rounded-[4px] px-3 py-2 text-[#1a1820] text-sm focus:outline-none focus:shadow-[4px_4px_0px_#1a1820] focus:-translate-x-0.5 focus:-translate-y-0.5 transition-all duration-150", navBtn: "border-[3px] border-[#1a1820] px-3 py-1 rounded-[4px] text-xs font-bold uppercase tracking-wider transition-all duration-150 cursor-pointer", }; const swapStatusColor = (s) => s === "pending" ? "bg-[#d4a017] text-[#1a1820]" : s === "accepted" ? "bg-[#3a8f5c] text-white" : "bg-[#888] text-white"; return (

{/* Ambient blocks */}

{/* NAV */} {/* HERO ACCENT BAR */}

{/* STATS ROW */} {view === "browse" && (

{[ {label:"Items Listed", val:items.length, hdr:"bg-[#c0392b]", htxt:"text-white"}, {label:"My Items", val:myItems.length, hdr:"bg-[#d4a017]", htxt:"text-[#1a1820]"}, {label:"Swap Requests", val:swaps.length, hdr:"bg-[#2c5fa8]", htxt:"text-white"}, {label:"Pending", val:swaps.filter(s=>s.status==="pending").length, hdr:"bg-[#3a8f5c]", htxt:"text-white"}, ].map(({label,val,hdr,htxt}) => (

{label}

{val}

))}

)} {/* BROWSE VIEW */} {view === "browse" && (

All Listings

{items.length === 0 && (

No items listed yet. Add your first item!

)}

{items.map(item => (

{ setSelectedItem(item); setView("detail"); setAiSuggestion(""); setMyOfferDoc(null); }}>

{item.imgPrompt ? ( ) : ( {item.title}

)}

{item.title}

{item.size} {item.category}

{item.owner}

))}

)} {/* DETAIL VIEW */} {view === "detail" && selectedItem && (

Item Detail

{selectedItem.imgPrompt ? ( ) : ( {selectedItem.title}

)}

{selectedItem.title}

Listed by {selectedItem.owner}

SIZE {selectedItem.size} {selectedItem.category}

{selectedItem.description &&

{selectedItem.description}

}

{selectedItem.owner !== myUser && (

Offer One of Your Items

{myItems.length === 0 ? (

Add items to your closet first!

) : ( )}

{aiSuggestion && (

AI Suggestion

{aiSuggestion}

)}

)} {/* ADD ITEM VIEW */} {view === "add" && (

Add to Your Closet

Item Title * merge({title:e.target.value})} placeholder="e.g. Vintage Denim Jacket"/>

Category

Size

Description

merge({description:e.target.value})} placeholder="Condition, style notes, measurements..."/>
                </div>
                <div>
                  <label className="block text-[0.65rem] uppercase tracking-[0.15em] text-[#6b6880] font-bold mb-1">Your Name</label>
                  <select className={c.input} value={form.owner} onChange={e=>merge({owner:e.target.value})}>
                    {USERS.map(u=><option key={u}>{u}</option>)}
                  </select>
                </div>
              </div>

<div className="flex flex-col gap-4">
                <div>
                  <label className="block text-[0.65rem] uppercase tracking-[0.15em] text-[#6b6880] font-bold mb-1">Photo Description (AI)</label>
                  <input className={c.input} value={imgPrompt} onChange={e=>setImgPrompt(e.target.value)} placeholder="e.g. oversized blue denim jacket, vintage wash"/>
                  <div className={`text-[0.65rem] ${c.muted} mt-1`}>We'll generate a preview image from your description</div>
                </div>
                <div>
                  <label className="block text-[0.65rem] uppercase tracking-[0.15em] text-[#6b6880] font-bold mb-1">Or Upload Photo</label>
                  <div
                    onDragOver={e=>{e.preventDefault();setDragOver(true)}}
                    onDragLeave={()=>setDragOver(false)}
                    onDrop={onDrop}
                    onClick={()=>document.getElementById("file-in").click()}
                    className={`border-[3px] border-dashed border-[#1a1820] rounded-[4px] p-6 text-center cursor-pointer transition-colors ${dragOver?"bg-[#d4a017]":"bg-[#f5f3ee] hover:bg-[#d4a017]"}`}
                  >
                    {imgFile ? (
                      <div className="text-sm font-bold text-[#1a1820]">{imgFile.name}</div>
                    ) : (
                      <>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6b6880" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        <div className="text-xs font-bold uppercase tracking-wide text-[#6b6880]">Drop or click to upload</div>
                      </>
                    )}
                    <input id="file-in" type="file" accept="image/*" className="hidden" onChange={e=>setImgFile(e.target.files[0])}/>
                  </div>
                </div>

{imgPrompt && (
                  <div className="border-[3px] border-[#1a1820] rounded-[4px] overflow-hidden h-40">
                    <ImgVibes prompt={imgPrompt} showControls={false} className="w-full h-full object-cover"/>
                  </div>
                )}
              </div>

<div className="sm:col-span-2 flex gap-3 border-t-[2px] border-[#1a1820] pt-4">
                <button type="submit" disabled={isSubmitting || !form.title.trim()} className={`${c.btnPrimary} flex items-center gap-2`}>
                  {isSubmitting ? <Spinner/> : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>}
                  {isSubmitting ? "Saving..." : "List Item"}
                </button>
                <button type="button" onClick={()=>setView("browse")} className={c.btnGhost}>Cancel</button>
              </div>
            </form>
          </div>
        )}

{/* SWAPS VIEW */}
        {view === "swaps" && (
          <div>
            <div className="text-[0.65rem] uppercase tracking-[0.15em] text-[#6b6880] mb-3 font-bold">Swap Proposals</div>
            {swaps.length === 0 && (
              <div className={`${c.card} border-[3px] ${c.border} ${c.shadow} rounded-[4px] p-8 text-center ${c.muted} text-sm`}>
                No swap proposals yet. Browse items and propose a swap!
              </div>
            )}
            <div className="flex flex-col gap-3">
              {swaps.map(swap => (
                <div key={swap._id} className={`${c.card} border-[3px] ${c.border} ${c.shadowSm} rounded-[4px] p-4 flex items-center justify-between gap-4`}>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-bold text-sm text-[#1a1820] uppercase">{swap.offerTitle}</span>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b6880" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                      <span className="font-bold text-sm text-[#1a1820] uppercase">{swap.wantTitle}</span>
                    </div>
                    <div className={`text-[0.7rem] ${c.muted} mt-1`}>
                      <span className="font-bold text-[#1a1820]">{swap.offerOwner}</span> wants <span className="font-bold text-[#1a1820]">{swap.wantOwner}</span>'s item
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className={`text-[0.65rem] font-bold uppercase px-2 py-1 rounded-[2px] border-[2px] border-[#1a1820] ${swapStatusColor(swap.status)}`}>{swap.status}</span>
                    {swap.status === "pending" && (
                      <button onClick={() => database.put({...swap, status:"accepted"})} className={`${c.btnYellow} text-xs py-1 px-2`}>Accept</button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>