'use client';
import {useState} from 'react';
import {ShoppingBag,Store,Users,CalendarDays,MapPin} from 'lucide-react';
import {Tabs,TabsList,TabsTrigger,TabsContent} from '@/components/ui/tabs';
import {SectionWelcome} from '@/components/section-welcome';
import {shopCategories,shopPartners,experienceCategories,experiencePartners} from '@/lib/shop';
import {localDate} from '@/lib/health';
export function ShopWorkspace({navigate,p,change}:any){const [category,setCategory]=useState('All'),[experience,setExperience]=useState('All'),[location,setLocation]=useState(''),[name,setName]=useState(''),[date,setDate]=useState(localDate),[time,setTime]=useState(''),[saved,setSaved]=useState(false);
const partners=shopPartners.filter(x=>category==='All'||x.category===category);const outings=experiencePartners.filter(x=>(experience==='All'||x.category===experience)&&x.location.toLowerCase().includes(location.toLowerCase().trim()));
function plan(e:React.FormEvent){e.preventDefault();if(!name.trim()||!date)return;change((x:any)=>x.life.appointments.push({id:crypto.randomUUID(),name:name.trim(),date,time,done:false}));setName('');setSaved(true)}
return <div className="sectionworkspace shopspace"><SectionWelcome area="shop" eyebrow="SHOP NOW · EXPERIENCES & CONNECTION" title="Something special. Something shared."><p>A welcoming space for women and businesses to find each other. Discover a little luxury, try something new or make time for an outing together.</p></SectionWelcome><Tabs defaultValue="products"><TabsList className="shopnav"><TabsTrigger value="products"><ShoppingBag size={18}/> Products & Services</TabsTrigger><TabsTrigger value="experiences"><Users size={18}/> Experiences & Outings</TabsTrigger></TabsList><TabsContent value="products"><section className="panel"><h2>Browse Your Favourites</h2><div className="shopcategories" aria-label="Shop categories">{shopCategories.map(c=><button type="button" key={c} aria-pressed={category===c} className={category===c?'active':''} onClick={()=>setCategory(c)}>{c}</button>)}</div>{partners.length>0?<div className="shopgrid">{partners.map(x=><article className="shopcard" key={x.id}><span className="eyebrow">PAID PARTNER LISTING · {x.category.toUpperCase()}</span><h3>{x.name}</h3><p>{x.description}</p><a className="primarybutton" href={x.url} target="_blank" rel="noopener noreferrer sponsored"><ShoppingBag size={17}/> Shop Now</a></article>)}</div>:<div className="shopempty"><ShoppingBag size={32}/><h3>{category==='All'?'Our partner collection is on its way.':category+' partners are coming soon.'}</h3><p>Products and services will appear here as businesses join our directory.</p></div>}</section></TabsContent><TabsContent value="experiences"><section className="panel"><h2>Make Memories Together</h2><p>Pottery, paint-and-sip classes, group walks and more. Find something you would love to do with friends or your support circle.</p><div className="shopcategories" aria-label="Experience categories">{experienceCategories.map(c=><button type="button" key={c} aria-pressed={experience===c} className={experience===c?'active':''} onClick={()=>setExperience(c)}>{c}</button>)}</div><label className="field outinglocation"><span>Find experiences by town or area</span><input className="textinput" value={location} onChange={e=>setLocation(e.target.value)} placeholder="e.g. Pretoria, Durban or Cape Town"/></label>{outings.length>0?<div className="shopgrid">{outings.map(x=><article className="shopcard" key={x.id}><span className="eyebrow">PAID PARTNER LISTING · {x.category.toUpperCase()}</span><h3>{x.name}</h3><p>{x.business}</p><p>{x.description}</p><p><MapPin size={16}/> {x.location}</p><p><CalendarDays size={16}/> {x.date||'Choose a date with the organiser'} {x.time}</p><p><b>{x.price}</b></p><a className="primarybutton" href={x.url} target="_blank" rel="noopener noreferrer sponsored">View & Book</a><button className="textbutton" onClick={()=>{setName(x.name+' · '+x.location);if(x.date)setDate(x.date);setTime(x.time||'');setSaved(false)}}>Plan this outing</button></article>)}</div>:<div className="shopempty"><Users size={32}/><h3>{experiencePartners.length===0?'Experiences are coming soon.':'No experiences match your filters.'}</h3><p>{experiencePartners.length===0?'We are welcoming class hosts, walking groups and experience businesses. You can still make your own plan below.':'Try another category or area.'}</p></div>}</section><section className="panel"><h2>Plan Something Together</h2><p>Save an outing to Plan My Day, then arrange the details with your friends or support circle.</p><form className="healthform" onSubmit={plan}><label className="field"><span>What would you like to do?</span><input required className="textinput" maxLength={200} value={name} onChange={e=>{setName(e.target.value);setSaved(false)}} placeholder="e.g. Pottery with friends · Pretoria"/></label><div className="twofields"><label className="field"><span>Date</span><input required type="date" className="textinput" value={date} onChange={e=>setDate(e.target.value)}/></label><label className="field"><span>Time (optional)</span><input type="time" className="textinput" value={time} onChange={e=>setTime(e.target.value)}/></label></div><button className="primarybutton" disabled={!name.trim()||!date}>Save to My Day</button></form>{saved&&<p className="note" role="status">Added to your day planner. Check the app’s save status before closing.</p>}<div className="medicationactions"><button className="textbutton" onClick={()=>navigate('today')}>Open My Day</button><button className="textbutton" onClick={()=>navigate('support')}>Open My Support Circle</button></div><p className="note">Saving a plan does not book a place or invite anyone. Confirm bookings with the organiser.</p></section></TabsContent></Tabs><p className="note">Paid listings are clearly labelled. Shopping and bookings take place with the business under its own terms. Your private health records, finances and journal are not shared with businesses.</p><section className="panel affiliatepanel"><Store size={28} aria-hidden="true"/><p className="eyebrow">FOR BUSINESSES</p><h2>Become a Sovereign Affiliate</h2><p>Offer products, beauty services, classes or shared experiences to women looking for something special.</p><div className="affiliateprice"><h2>R299,99 <small>/ month</small></h2><p>For an approved business listing in Shop Now.</p></div><div className="membershipfeatures"><p>Your business name and introduction</p><p>A product, service or experience category</p><p>A direct shopping or booking link</p><p>Location, dates and prices for experiences</p></div><div className="reserve"><b>Applications are open</b><p>Introduce your business and upload your logo, photos and supporting profile. We review applications before subscription and publication.</p><a className="primarybutton" href="/signup">Apply as a business affiliate</a></div><button className="textbutton" onClick={()=>navigate('membership')}>View Sovereign Membership</button></section></div>}