const {Button,Badge}=window.VedutaDesignSystem_f6874f;
const MOODS=['Electric','Culture','Quiet','Professional','Coast','Retreat','Adventure'];
const card={background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'26px 28px',boxShadow:'var(--shadow-card)'};
const kicker={fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.22em',textTransform:'uppercase',fontWeight:500,color:'var(--gold)',marginBottom:'10px'};
const muted={fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14px',color:'var(--text-muted)'};
const fmtDate=s=>{if(!s)return'';const d=new Date(s+'T00:00:00');return isNaN(d)?s:d.toLocaleDateString(undefined,{month:'short',day:'numeric',year:'numeric'});};

function SignInForm({intro}){
  const [email,setEmail]=React.useState('');
  const [status,setStatus]=React.useState('idle');
  const [error,setError]=React.useState('');
  const submit=async e=>{
    e.preventDefault();
    const v=email.trim();
    if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)){setError('Please enter a valid email address.');return;}
    setStatus('sending');setError('');
    const r=await window.vedutaAuth.signIn(v);
    if(r.ok)setStatus('sent');else{setStatus('idle');setError(r.error||'Something went wrong. Please try again.');}
  };
  if(status==='sent')return <div style={{textAlign:'center'}}>
    <div style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'30px',color:'var(--navy)',lineHeight:1.2}}>Check your email</div>
    <p style={{margin:'14px auto 0',maxWidth:'440px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15.5px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>We sent a sign-in link to <strong style={{fontWeight:500}}>{email.trim()}</strong>. Open it on this device and you're in. No password to remember.</p>
  </div>;
  return <form onSubmit={submit} style={{maxWidth:'440px',margin:'0 auto',textAlign:'center'}}>
    {intro&&<p style={{margin:'0 0 22px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15.5px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>{intro}</p>}
    <VGoogleButton/>
    <VOrDivider/>
    <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
      <input className="vfield" type="email" name="email" placeholder="your@email.com" value={email} onChange={e=>{setEmail(e.target.value);setError('');}} required autoComplete="email"/>
      <Button size="lg">{status==='sending'?'Sending…':'Email Me a Sign-in Link'}</Button>
    </div>
    {error&&<div role="alert" style={{fontFamily:'var(--font-sans)',fontSize:'14px',color:'var(--terracotta)',marginTop:'12px'}}>{error}</div>}
    <div style={{marginTop:'14px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'12.5px',color:'var(--text-muted)'}}>New here? The same link creates your account.</div>
  </form>;
}

/* ---- Profile & preferences ---- */
function ProfileForm({profile,onSaved}){
  const prefs=profile.preferences||{};
  const [f,setF]=React.useState({
    first_name:profile.first_name||'',last_name:profile.last_name||'',phone:profile.phone||'',home_city:profile.home_city||'',
    travel_style:profile.travel_style||'',loves:profile.loves||'',happiest:profile.happiest||'',
    moods:prefs.moods||[],pace:prefs.pace||'',party:prefs.party||'',budget:prefs.budget||'',work_travel:!!prefs.work_travel,
    dates:(profile.travel_dates||[]).map(d=>({start:d.start||'',end:d.end||'',note:d.note||''}))
  });
  const [status,setStatus]=React.useState('idle');
  const [error,setError]=React.useState('');
  const set=k=>v=>{setF(x=>({...x,[k]:v}));if(status==='saved')setStatus('idle');};
  const toggleMood=m=>set('moods')(f.moods.includes(m)?f.moods.filter(x=>x!==m):[...f.moods,m]);
  const setDate=(i,k,v)=>set('dates')(f.dates.map((d,j)=>j===i?{...d,[k]:v}:d));
  const addDate=()=>set('dates')([...f.dates,{start:'',end:'',note:''}]);
  const removeDate=i=>set('dates')(f.dates.filter((_,j)=>j!==i));
  const submit=async e=>{
    e.preventDefault();
    for(const d of f.dates){if(d.start&&d.end&&d.end<d.start){setError('One of your travel dates ends before it starts.');return;}}
    setStatus('saving');setError('');
    const r=await window.vedutaData.saveProfile({
      first_name:f.first_name.trim()||null,last_name:f.last_name.trim()||null,phone:f.phone.trim()||null,home_city:f.home_city.trim()||null,
      travel_style:f.travel_style.trim()||null,loves:f.loves.trim()||null,happiest:f.happiest.trim()||null,
      preferences:{moods:f.moods,pace:f.pace||null,party:f.party||null,budget:f.budget||null,work_travel:f.work_travel},
      travel_dates:f.dates.filter(d=>d.start||d.end||d.note)
    });
    if(r.ok){setStatus('saved');onSaved&&onSaved();}else{setStatus('idle');setError(r.error||'Could not save. Please try again.');}
  };
  const label={fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,color:'var(--navy)'};
  return <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:'34px'}}>
    <div>
      <div style={kicker}>About you</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:'18px 20px'}}>
        <VField half label="First name" name="first_name" value={f.first_name} onChange={set('first_name')}/>
        <VField half label="Last name" name="last_name" value={f.last_name} onChange={set('last_name')}/>
        <VField half label="Phone" name="phone" type="tel" value={f.phone} onChange={set('phone')} placeholder="Optional"/>
        <VField half label="Home city" name="home_city" value={f.home_city} onChange={set('home_city')}/>
      </div>
    </div>
    <div>
      <div style={kicker}>How you travel</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:'18px 20px'}}>
        <div style={{gridColumn:'1 / -1'}}>
          <div style={{...label,marginBottom:'10px'}}>Moods you're drawn to</div>
          <div style={{display:'flex',gap:'10px',flexWrap:'wrap'}}>
            {MOODS.map(m=><span key={m} role="checkbox" aria-checked={f.moods.includes(m)} onClick={()=>toggleMood(m)} style={{cursor:'pointer',opacity:f.moods.includes(m)?1:.4,transition:'opacity var(--dur-fast) var(--ease-out)'}}><Badge mood={m}/></span>)}
          </div>
        </div>
        <VField half label="Pace" name="pace" as="select" value={f.pace} onChange={set('pace')} options={[['','Select one'],['slow','Slow: a few things done well'],['balanced','Balanced'],['packed','Packed: see everything']]}/>
        <VField half label="Who you travel with" name="party" as="select" value={f.party} onChange={set('party')} options={[['','Select one'],['solo','Solo'],['partner','A partner'],['friends','Friends'],['family','Family'],['team','A work team']]}/>
        <VField half label="Nightly budget" name="budget" as="select" value={f.budget} onChange={set('budget')} options={[['','Select one'],['under-250','Under $250'],['250-400','$250 – $400'],['400-600','$400 – $600'],['600-plus','$600 and up']]}/>
        <label style={{display:'flex',gap:'12px',alignItems:'center',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14.5px',color:'var(--text-body)',cursor:'pointer',alignSelf:'end',paddingBottom:'12px'}}>
          <input type="checkbox" name="work_travel" checked={f.work_travel} onChange={e=>set('work_travel')(e.target.checked)} style={{accentColor:'var(--gold)'}}/> I travel for work too
        </label>
        <VField label="How do you travel?" name="travel_style" as="textarea" rows={3} value={f.travel_style} onChange={set('travel_style')}/>
        <VField label="What do you love?" name="loves" as="textarea" rows={3} value={f.loves} onChange={set('loves')}/>
        <VField label="Where have you been happiest?" name="happiest" as="textarea" rows={3} value={f.happiest} onChange={set('happiest')}/>
      </div>
    </div>
    <div>
      <div style={kicker}>When you're likely to travel</div>
      <div style={{...muted,marginBottom:'14px'}}>Dates you already know you'll be away. We use them to hold space and plan ahead. Nothing is booked.</div>
      <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
        {f.dates.map((d,i)=><div key={i} className="date-row" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(150px,1fr))',gap:'10px',alignItems:'end'}}>
          <label style={{display:'flex',flexDirection:'column',gap:'6px'}}><span style={label}>From</span><input className="vfield" type="date" name={'date_start_'+i} value={d.start} onChange={e=>setDate(i,'start',e.target.value)}/></label>
          <label style={{display:'flex',flexDirection:'column',gap:'6px'}}><span style={label}>To</span><input className="vfield" type="date" name={'date_end_'+i} value={d.end} min={d.start||undefined} onChange={e=>setDate(i,'end',e.target.value)}/></label>
          <label style={{display:'flex',flexDirection:'column',gap:'6px',gridColumn:'span 2'}}><span style={label}>Note</span><input className="vfield" type="text" name={'date_note_'+i} value={d.note} placeholder="Where, who with, anything else" onChange={e=>setDate(i,'note',e.target.value)}/></label>
          <button type="button" onClick={()=>removeDate(i)} aria-label="Remove dates" style={{background:'none',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-sm)',padding:'12px',cursor:'pointer',fontFamily:'var(--font-sans)',fontSize:'12px',letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--text-muted)'}}>Remove</button>
        </div>)}
        <div><button type="button" onClick={addDate} style={{background:'transparent',border:'1px solid var(--navy)',color:'var(--navy)',borderRadius:'var(--radius-sm)',padding:'9px 20px',cursor:'pointer',fontFamily:'var(--font-sans)',fontWeight:500,fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase'}}>Add dates</button></div>
      </div>
    </div>
    <div style={{display:'flex',gap:'16px',alignItems:'center',flexWrap:'wrap'}}>
      <Button size="lg">{status==='saving'?'Saving…':status==='saved'?'Saved':'Save Profile'}</Button>
      {error&&<span role="alert" style={{fontFamily:'var(--font-sans)',fontSize:'14px',color:'var(--terracotta)'}}>{error}</span>}
    </div>
  </form>;
}

/* ---- Trip requests (the Concie-agent) ---- */
function TripRequestForm({cities,onCreated}){
  const [f,setF]=React.useState({city_slug:'',start_date:'',end_date:'',guests:'2',notes:''});
  const [status,setStatus]=React.useState('idle');
  const [error,setError]=React.useState('');
  const set=k=>v=>setF(x=>({...x,[k]:v}));
  const submit=async e=>{
    e.preventDefault();
    if(f.start_date&&f.end_date&&f.end_date<f.start_date){setError('The end date is before the start date.');return;}
    setStatus('sending');setError('');
    const r=await window.vedutaData.createRequest({kind:'concierge',city_slug:f.city_slug||null,start_date:f.start_date||null,end_date:f.end_date||null,guests:f.guests?Number(f.guests):null,notes:f.notes.trim()||null});
    if(r.ok){setStatus('sent');onCreated&&onCreated();}else{setStatus('idle');setError(r.error||'Could not send. Please try again.');}
  };
  if(status==='sent')return <div>
    <div style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'26px',color:'var(--navy)'}}>Request received.</div>
    <p style={{margin:'10px 0 18px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>The Concie-agent will come back to you with a first itinerary. It shows under your requests below.</p>
    <Button variant="outlineDark" size="sm" onClick={()=>{setF({city_slug:'',start_date:'',end_date:'',guests:'2',notes:''});setStatus('idle');}}>Request another trip</Button>
  </div>;
  return <form onSubmit={submit} style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:'18px 20px'}}>
    <VField half label="City" name="city_slug" as="select" value={f.city_slug} onChange={set('city_slug')} options={[['','Not sure yet']].concat(cities.map(c=>[c.slug,c.name]))}/>
    <VField half label="Guests" name="guests" type="number" value={f.guests} onChange={set('guests')}/>
    <VField half label="From" name="start_date" type="date" value={f.start_date} onChange={set('start_date')}/>
    <VField half label="To" name="end_date" type="date" value={f.end_date} onChange={set('end_date')}/>
    <VField label="Tell us about the trip" name="notes" as="textarea" rows={4} value={f.notes} onChange={set('notes')} placeholder="The occasion, the pace, what has to happen, what can't. We'll take it from here." required/>
    <div style={{gridColumn:'1 / -1',display:'flex',gap:'16px',alignItems:'center',flexWrap:'wrap'}}>
      <Button>{status==='sending'?'Sending…':'Send to the Concie-agent'}</Button>
      {error&&<span role="alert" style={{fontFamily:'var(--font-sans)',fontSize:'14px',color:'var(--terracotta)'}}>{error}</span>}
    </div>
  </form>;
}
function RequestList({requests,cities,onCancel}){
  const cityName=slug=>{const c=cities.find(x=>x.slug===slug);return c?c.name:(slug||'City to be decided');};
  const statusColor={requested:'var(--gold)',confirmed:'var(--olive)',declined:'var(--terracotta)',canceled:'var(--text-muted)'};
  if(!requests.length)return <div style={muted}>No requests yet. Your first one shows here with its status.</div>;
  return <div style={{display:'flex',flexDirection:'column'}}>
    {requests.map(r=><div key={r.id} style={{display:'flex',justifyContent:'space-between',gap:'16px',alignItems:'baseline',flexWrap:'wrap',padding:'14px 2px',borderBottom:'1px solid var(--border-subtle)'}}>
      <div>
        <div style={{fontFamily:'var(--font-serif)',fontSize:'19px',color:'var(--navy)'}}>{r.kind==='concierge'?'Trip':r.kind==='property'?'Stay':'Excursion'} · {cityName(r.city_slug)}</div>
        <div style={{...muted,marginTop:'4px'}}>{r.start_date?fmtDate(r.start_date)+(r.end_date?' – '+fmtDate(r.end_date):''):'Dates open'}{r.guests?' · '+r.guests+' guest'+(r.guests===1?'':'s'):''}</div>
        {r.notes&&<div style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14px',color:'var(--text-body)',marginTop:'6px',maxWidth:'560px'}}>{r.notes}</div>}
      </div>
      <div style={{display:'flex',gap:'16px',alignItems:'center'}}>
        <span style={{fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,color:statusColor[r.status]||'var(--navy)'}}>{r.status}</span>
        {r.status==='requested'&&<Button variant="link" size="sm" onClick={()=>onCancel(r.id)}>Cancel</Button>}
      </div>
    </div>)}
  </div>;
}

function PortalPage({onNavigate,section}){
  const auth=window.vedutaAuth.use();
  const [profile,setProfile]=React.useState(null);
  const [requests,setRequests]=React.useState([]);
  const [cities,setCities]=React.useState([]);
  const tab=['profile','requests'].includes(section)?section:'overview';
  const loadProfile=()=>window.vedutaData.myProfile().then(setProfile);
  const loadRequests=()=>window.vedutaData.myRequests().then(setRequests);
  React.useEffect(()=>{
    if(!auth.user){setProfile(null);setRequests([]);return;}
    loadProfile();loadRequests();window.vedutaData.listCities().then(setCities);
  },[auth.user&&auth.user.id]);
  const name=(profile&&profile.first_name)||'';
  const goTab=t=>onNavigate&&onNavigate(t==='overview'?'Portal':'Portal:'+t);
  const tabStyle=t=>({fontFamily:'var(--font-sans)',fontSize:'12px',letterSpacing:'0.18em',textTransform:'uppercase',fontWeight:500,color:tab===t?'var(--gold)':'var(--navy)',textDecoration:'none',padding:'18px 22px',borderBottom:'2px solid '+(tab===t?'var(--gold)':'transparent'),cursor:'pointer'});
  const complete=profile&&profile.first_name&&profile.home_city&&(profile.preferences||{}).moods&&(profile.preferences.moods||[]).length>0;
  return <div>
    <div className="page-hero" style={{background:'var(--grad-hero)',padding:'170px 48px 60px',textAlign:'center'}}>
      <div style={{fontSize:'12px',letterSpacing:'0.28em',textTransform:'uppercase',color:'var(--gold)',fontWeight:500,marginBottom:'18px'}}>Member Portal</div>
      <h1 style={{margin:0,fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'var(--text-h1)',color:'var(--text-on-dark)'}}>{auth.user?('Welcome'+(name?', '+name:'')):'Sign in'}</h1>
    </div>
    {auth.user&&<div style={{background:'var(--cream)',borderBottom:'1px solid var(--border-subtle)',padding:'0 48px'}}>
      <div style={{maxWidth:'var(--content-max)',margin:'0 auto',display:'flex',justifyContent:'center',flexWrap:'wrap'}}>
        {[['overview','Overview'],['profile','Profile & Preferences'],['requests','Trip Requests']].map(([t,l])=><a key={t} href={'#portal'+(t==='overview'?'':'/'+t)} onClick={e=>{e.preventDefault();goTab(t);}} style={tabStyle(t)}>{l}</a>)}
      </div>
    </div>}
    <VSection narrow={!auth.user} style={{paddingTop:'64px'}}>
      {!auth.ready?<div style={{textAlign:'center',...muted}}>Loading…</div>
      :!auth.enabled?<div style={{textAlign:'center'}}>
        <div style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'30px',color:'var(--navy)',lineHeight:1.2}}>Member sign-in opens soon</div>
        <p style={{margin:'14px auto 24px',maxWidth:'480px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'16px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>This is where members will sign in to their profile, preferences, the city guides, and the Concie-agent. Until launch, the waitlist is the way in, and founding members hear first.</p>
        <Button onClick={()=>window.vedutaScrollToWaitlist()}>Join the Waitlist</Button>
      </div>
      :!auth.user?<SignInForm intro="Sign in with your email. We'll send a one-time link, no password needed."/>
      :tab==='profile'?<div style={{maxWidth:'820px'}}>
        {profile?<ProfileForm key={profile.id} profile={profile} onSaved={loadProfile}/>:<div style={muted}>Loading your profile…</div>}
      </div>
      :tab==='requests'?<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'28px',alignItems:'start'}}>
        <div style={card}><div style={kicker}>Request a trip</div><div style={{...muted,marginBottom:'18px'}}>Tell the Concie-agent where and when. Everything else is handled.</div><TripRequestForm cities={cities} onCreated={loadRequests}/></div>
        <div style={card}><div style={kicker}>Your requests</div><RequestList requests={requests} cities={cities} onCancel={async id=>{await window.vedutaData.cancelRequest(id);loadRequests();}}/></div>
      </div>
      :<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:'20px'}}>
        <div style={card}>
          <div style={kicker}>Your account</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:'22px',color:'var(--navy)'}}>{profile&&(profile.first_name||profile.last_name)?[profile.first_name,profile.last_name].filter(Boolean).join(' '):'Profile not filled in yet'}</div>
          <div style={{...muted,marginTop:'6px'}}>{auth.user.email}</div>
          {profile&&profile.home_city&&<div style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14px',color:'var(--text-body)',marginTop:'6px'}}>{profile.home_city}</div>}
          <div style={{marginTop:'16px'}}><Button variant="outlineDark" size="sm" onClick={()=>goTab('profile')}>{complete?'Edit profile':'Complete your profile'}</Button></div>
        </div>
        <div style={card}>
          <div style={kicker}>Membership</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:'22px',color:'var(--navy)'}}>{auth.membership?auth.membership.tierName:'Waitlist'}</div>
          <div style={{...muted,marginTop:'6px'}}>{auth.membership?('Status: '+auth.membership.status+(auth.membership.billing_interval?' · billed '+(auth.membership.billing_interval==='year'?'yearly':'monthly'):'')):'Founding access opens Spring 2027.'}</div>
          <div style={{marginTop:'16px'}}><Button variant="outlineDark" size="sm" onClick={()=>onNavigate&&onNavigate('Membership')}>See the tiers</Button></div>
        </div>
        <div style={card}>
          <div style={kicker}>Travel dates</div>
          {profile&&profile.travel_dates&&profile.travel_dates.length
            ?<div style={{display:'flex',flexDirection:'column',gap:'6px'}}>{profile.travel_dates.slice(0,4).map((d,i)=><div key={i} style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14px',color:'var(--text-body)'}}>{fmtDate(d.start)}{d.end?' – '+fmtDate(d.end):''}{d.note?' · '+d.note:''}</div>)}</div>
            :<div style={muted}>None yet. Add the dates you know you'll be away.</div>}
          <div style={{marginTop:'16px'}}><Button variant="outlineDark" size="sm" onClick={()=>goTab('profile')}>Add dates</Button></div>
        </div>
        <div style={card}>
          <div style={kicker}>Trip requests</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:'22px',color:'var(--navy)'}}>{requests.filter(r=>r.status==='requested').length} open</div>
          <div style={{...muted,marginTop:'6px'}}>{requests.length?requests.length+' in total':'Hand a trip to the Concie-agent.'}</div>
          <div style={{marginTop:'16px'}}><Button variant="outlineDark" size="sm" onClick={()=>goTab('requests')}>Request a trip</Button></div>
        </div>
        <div style={{gridColumn:'1 / -1',display:'flex',gap:'14px',flexWrap:'wrap',marginTop:'10px'}}>
          <Button onClick={()=>onNavigate&&onNavigate('Destinations')}>Browse the Portfolio</Button>
          <Button variant="link" onClick={async()=>{await window.vedutaAuth.signOut();onNavigate&&onNavigate('Home');}}>Sign out</Button>
        </div>
      </div>}
    </VSection>
  </div>;
}
Object.assign(window,{PortalPage,SignInForm});