'use client';
import OfferGallery from '../offer-gallery';
import {useEffect,useState} from 'react';import {mutate} from '../controls';import {RequestRecord} from '../cereri/browse';import {Tabs,TabsList,TabsTrigger,TabsContent} from '@/components/ui/tabs';import {Dialog,DialogContent,DialogTitle,DialogDescription} from '@/components/ui/dialog';import {Switch} from '@/components/ui/switch';
type Offer={id:string,title:string,request_title:string,status:string,payload:string|null,promoted:number,contact_phone?:string};
type Data={profile:{id:string,name:string,phone:string,credits:number,notify_app:number,notify_email:number},requests:RequestRecord[],received:Offer[],sent:Offer[],favorites:{request_id:string}[],notifications:{id:string,body:string,created:number}[],ledger:{id:string,amount:number,reason:string}[]};
const labels:Record<string,string>={active:'Activă',inactive:'Dezactivată',expired:'Expirată',pending:'În așteptare',accepted:'Acceptată',rejected:'Refuzată',archived:'Arhivată'};
export default function Account(){const[d,setD]=useState<Data|null>(null),[error,setError]=useState(''),[status,setStatus]=useState(''),[tab,setTab]=useState('solicitant'),[chat,setChat]=useState<string|null>(null),[messages,setMessages]=useState<{id:string,body:string,sender:string}[]>([]);const reload=async()=>{const r=await fetch('/api/market?view=account'),data=await r.json() as Data & {error:string};if(!r.ok)throw Error(data.error);setD(data)};useEffect(()=>{if(location.search.includes('setari'))setTab('setari');reload().catch(e=>setError(e.message))},[]);const action=async(data:Record<string,unknown>)=>{setError('');setStatus('');try{await mutate(data);await reload();setStatus('Modificările au fost salvate.')}catch(e){setError((e as Error).message)}};useEffect(()=>{if(!chat)return;const refresh=()=>fetch('/api/market?view=messages&id='+chat).then(async r=>{const data=await r.json() as {id:string,body:string,sender:string}[] & {error:string};if(!r.ok)throw Error(data.error);setMessages(data)}).catch(e=>setError(e.message));refresh();const t=setInterval(refresh,5000);return()=>clearInterval(t)},[chat]);function offer(o:Offer,received:boolean){let p:{description?:string,price?:number,location?:string,commission?:string,agency?:boolean,creditAccepted?:boolean}|null=null;try{p=o.payload?JSON.parse(o.payload):null}catch{}return <article key={o.id} className={'request-card mb-4 '+(o.promoted?'promoted':'')} style={{opacity:['rejected','archived'].includes(o.status)?.55:1}}><div className="card-top"><span className="badge">{labels[o.status]}</span>{o.promoted?<span className="badge">Ofertă promovată</span>:null}</div><h3>{o.title}</h3><p className="demo-note">Pentru: {o.request_title}</p>{p&&<><strong>{p.price?.toLocaleString('ro-RO')} €</strong><p>{p.location}</p><p style={{whiteSpace:'pre-wrap'}}>{p.description}</p><p className="demo-note">{p.agency?'Agenție':'Particular'} · Comision: {p.commission||'Nespecificat'} · Credit: {p.creditAccepted?'acceptat':'neacceptat'}</p></>}{p&&<OfferGallery offerId={o.id}/>} {received&&o.status==='pending'&&<div className="flex gap-3 mt-4"><button className="button" onClick={()=>action({action:'decide',id:o.id,status:'accepted'})}>Acceptă oferta</button><button className="text-link" onClick={()=>{if(confirm('Refuzi definitiv oferta? Descrierea va fi ștearsă.'))action({action:'decide',id:o.id,status:'rejected'})}}>Refuză oferta</button></div>}{o.status==='accepted'&&<div className="flex gap-4 mt-4">{o.contact_phone&&<a className="button" href={'tel:'+o.contact_phone}>{o.contact_phone}</a>}<button className="button" onClick={()=>{setMessages([]);setChat(o.id)}}>Deschide chatul</button></div>}</article>}
return <div className="wrap"><div className="page-title"><span className="eyebrow">SPAȚIUL TĂU RELTO</span><h2>{d?'Bună, '+d.profile.name:'Contul meu'}</h2>{d&&<p className="mt-3">Sold: <strong>{d.profile.credits} credite</strong> · <a className="text-link" href="/credite">Pachete de credite →</a></p>}</div>{error&&<p role="alert" className="error">{error}</p>}{status&&<p role="status" className="success">{status}</p>}{d?<Tabs value={tab} onValueChange={setTab}><TabsList className="h-auto flex-wrap mb-7"><TabsTrigger value="solicitant">Sunt solicitant</TabsTrigger><TabsTrigger value="ofertant">Sunt ofertant</TabsTrigger><TabsTrigger value="favorite">Favorite</TabsTrigger><TabsTrigger value="notificari">Notificări</TabsTrigger><TabsTrigger value="setari">Setări</TabsTrigger></TabsList><TabsContent value="solicitant"><h2>Cererile mele</h2><div className="card-grid mt-5">{d.requests.map(r=><article key={r.id} className="request-card" style={{opacity:r.status==='expired'?.5:1}}><span className="badge">{labels[r.status]}</span><h3>{r.title}</h3><p>{r.city} · {r.budget.toLocaleString('ro-RO')} €</p><p className="demo-note">Expiră: {new Date(r.expires).toLocaleDateString('ro-RO')}</p>{r.status!=='expired'&&<div className="flex gap-3"><button className="text-link" onClick={()=>action({action:'status',id:r.id,status:r.status==='active'?'inactive':'active'})}>{r.status==='active'?'Dezactivează':'Reactivează'}</button><button className="text-link" onClick={()=>{if(confirm('Ștergi această cerere?'))action({action:'status',id:r.id,status:'deleted'})}}>Șterge</button></div>}</article>)}</div>{!d.requests.length&&<div className="empty-state mt-4">Nu ai publicat încă o cerere. <a href="/cerere-noua" className="text-link">Publică gratuit →</a></div>}<h2 className="my-6">Oferte primite</h2><p className="notice">Ofertele promovate au prioritate pentru vizibilitate; în perioadele de testare, promovarea poate fi gratuită. Promovarea nu garantează calitatea sau seriozitatea ofertei.</p>{d.received.map(o=>offer(o,true))}{!d.received.length&&<div className="empty-state">Ofertele noi vor apărea aici.</div>}</TabsContent><TabsContent value="ofertant"><h2 className="mb-5">Oferte plasate</h2>{d.sent.map(o=>offer(o,false))}{!d.sent.length&&<div className="empty-state">Nu ai trimis încă oferte. <a className="text-link" href="/cereri">Explorează cererile →</a></div>}</TabsContent><TabsContent value="favorite"><h2 className="mb-5">Cererile favorite</h2>{d.favorites.map(f=><div className="request-card flex justify-between mb-3" key={f.request_id}><a href={'/cereri/'+f.request_id}>Vezi cererea salvată →</a><button onClick={()=>action({action:'favorite',id:f.request_id,remove:true})}>Elimină</button></div>)}{!d.favorites.length&&<div className="empty-state">Cererile salvate vor apărea aici.</div>}</TabsContent><TabsContent value="notificari"><h2 className="mb-5">Notificări</h2>{d.notifications.map(n=><p key={n.id} className="notice">{n.body}<small className="block mt-2">{new Date(n.created).toLocaleString('ro-RO')}</small></p>)}{!d.notifications.length&&<div className="empty-state">Nu ai notificări noi.</div>}</TabsContent><TabsContent value="setari"><form className="panel" onSubmit={e=>{e.preventDefault();const f=Object.fromEntries(new FormData(e.currentTarget));action({...f,action:'profile',notifyApp:d.profile.notify_app,notifyEmail:d.profile.notify_email})}}><h2 className="mb-5">Profil și notificări</h2><div className="form-grid"><label className="field">Nume afișat<input name="name" defaultValue={d.profile.name} required maxLength={100}/></label><label className="field">Telefon privat<input name="phone" type="tel" defaultValue={d.profile.phone} required maxLength={25}/></label><label className="full flex items-center gap-3"><Switch checked={!!d.profile.notify_app} onCheckedChange={v=>setD({...d,profile:{...d.profile,notify_app:v?1:0}})}/> Notificări în cont</label><label className="full flex items-center gap-3"><Switch checked={!!d.profile.notify_email} onCheckedChange={v=>setD({...d,profile:{...d.profile,notify_email:v?1:0}})}/> Prefer notificări prin email</label></div><p className="notice">Preferința pentru email este salvată. Livrarea prin email va fi activată la conectarea serviciului de notificări.</p><button className="button">Salvează setările</button></form><h2 className="mb-5">Istoric credite</h2>{d.ledger.map(l=><p className="notice" key={l.id}>{l.reason}: {l.amount} credite</p>)}</TabsContent></Tabs>:!error&&<p>Se încarcă…</p>}<Dialog open={!!chat} onOpenChange={v=>{if(!v)setChat(null)}}><DialogContent className="sm:max-w-xl"><DialogTitle>Conversație privată</DialogTitle><DialogDescription>Acces disponibil după acceptarea ofertei.</DialogDescription><div style={{maxHeight:320,overflowY:'auto'}}>{messages.map(m=><p className="notice" key={m.id}><strong>{m.sender===d?.profile.id?'Tu':'Partenerul tău'}</strong><br/>{m.body}</p>)}{!messages.length&&<p>Începe conversația.</p>}</div><form className="flex gap-3" onSubmit={async e=>{e.preventDefault();const form=e.currentTarget;try{await mutate({action:'message',id:chat,body:new FormData(form).get('body')});form.reset();const r=await fetch('/api/market?view=messages&id='+chat);if(r.ok)setMessages(await r.json())}catch(e){setError((e as Error).message)}}}><input aria-label="Mesaj" className="border rounded-lg p-3 min-w-0 flex-1" name="body" maxLength={2000} required/><button className="button">Trimite</button></form></DialogContent></Dialog></div>}