/* eslint-disable */
const { useState, useMemo, useEffect } = React;

/* ----- pricing helpers ----- */
const SERVICE_OPTIONS = [
  { id: 'standard',  label: 'Standard',   multiplier: 1.0  },
  { id: 'deep',      label: 'Deep clean', multiplier: 1.45 },
  { id: 'moveout',   label: 'Move-out',   multiplier: 1.75 },
  { id: 'airbnb',    label: 'Airbnb',     multiplier: 0.85 },
  { id: 'office',    label: 'Office',     multiplier: 1.15 },
];

const SQFT_OPTIONS = [
  { id: 'small',  label: 'Under 1,200', base: 65 },
  { id: 'med',    label: '1,200–2,000', base: 95 },
  { id: 'large',  label: '2,000–3,000', base: 115 },
  { id: 'xl',     label: '3,000+',      base: 135 },
];

const ADDONS = [
  { id: 'fridge', label: 'Inside fridge',    price: 20 },
  { id: 'oven',   label: 'Inside oven',      price: 25 },
  { id: 'windows',label: 'Interior windows', price: 20 },
  { id: 'laundry',label: 'Laundry & fold',   price: 20 },
];

function calcPrice({ service, sqft, beds, baths, addons }) {
  const svc = SERVICE_OPTIONS.find(s => s.id === service);
  const sz  = SQFT_OPTIONS.find(s => s.id === sqft);
  if (!svc || !sz) return 0;
  let total = sz.base * svc.multiplier;
  total += beds * 18;
  total += baths * 22;
  for (const id of addons) {
    const a = ADDONS.find(x => x.id === id);
    if (a) total += a.price;
  }
  return Math.round(total / 5) * 5; // round to $5
}

/* ----- date helpers ----- */
function nextDays(n) {
  const out = [];
  const today = new Date();
  for (let i = 1; i <= n; i++) {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    out.push(d);
  }
  return out;
}
const fmtDay = d => d.toLocaleDateString('en-US', { weekday: 'short' });
const fmtNum = d => d.getDate();
const fmtMonth = d => d.toLocaleDateString('en-US', { month: 'short' });

/* ============ COMPONENT ============ */
function BookingFlow() {
  const [step, setStep] = useState(1);
  const [service, setService] = useState('standard');
  const [sqft, setSqft] = useState('med');
  const [beds, setBeds] = useState(2);
  const [baths, setBaths] = useState(2);
  const [addons, setAddons] = useState([]);
  const [date, setDate] = useState(null);
  const [window_, setWindow_] = useState('am');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState('');

  const price = useMemo(() => calcPrice({ service, sqft, beds, baths, addons }), [service, sqft, beds, baths, addons]);
  const days = useMemo(() => nextDays(7), []);

  const toggleAddon = (id) => {
    setAddons(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [step]);

  if (step === 4) {
    return (
      <div className="confirmation">
        <div className="check">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        </div>
        <h3>You're booked!</h3>
        <p>We'll see you {date ? `${fmtDay(date)}, ${fmtMonth(date)} ${fmtNum(date)}` : 'soon'} — {window_ === 'am' ? 'morning (8a–12p)' : 'afternoon (12p–5p)'}.</p>
        <div className="summary">
          <div><span>Service</span><strong>{SERVICE_OPTIONS.find(s=>s.id===service)?.label}</strong></div>
          <div><span>Home</span><strong>{SQFT_OPTIONS.find(s=>s.id===sqft)?.label} sqft · {beds} bed · {baths} bath</strong></div>
          {addons.length > 0 && <div><span>Add-ons</span><strong>{addons.map(id => ADDONS.find(a=>a.id===id)?.label).join(', ')}</strong></div>}
          <div><span>Total</span><strong>${price}</strong></div>
        </div>
        <div className="channels">
          <span className="channel">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            Email sent to {email || 'your inbox'}
          </span>
          <span className="channel">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            Text sent to {phone || 'your phone'}
          </span>
        </div>
        <button className="btn btn-ghost" onClick={() => setStep(1)}>Book another clean</button>
      </div>
    );
  }

  return (
    <div className="booking-card">
      <h3>Book your clean</h3>
      <p className="sub">Step {step} of 3 · No payment yet · Cancel anytime up to 24h before</p>

      {step === 1 && (
        <>
          <div className="field">
            <label>Service</label>
            <div className="chip-row">
              {SERVICE_OPTIONS.map(s => (
                <button key={s.id} className={`chip ${service === s.id ? 'active' : ''}`} onClick={() => setService(s.id)}>{s.label}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Square footage</label>
            <div className="chip-row">
              {SQFT_OPTIONS.map(s => (
                <button key={s.id} className={`chip ${sqft === s.id ? 'active' : ''}`} onClick={() => setSqft(s.id)}>{s.label}</button>
              ))}
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Bedrooms</label>
              <div className="input-wrap">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v10"/><path d="M2 17h20"/><path d="M6 8v9"/></svg>
                <select className="select" value={beds} onChange={e => setBeds(+e.target.value)}>
                  {[1,2,3,4,5,6].map(n => <option key={n} value={n}>{n} bedroom{n>1?'s':''}</option>)}
                </select>
              </div>
            </div>
            <div className="field">
              <label>Bathrooms</label>
              <div className="input-wrap">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6 6.5 3.5a1.5 1.5 0 0 0-1-.5C4.683 3 4 3.683 4 4.5V17a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/><line x1="10" y1="5" x2="8" y2="7"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="7" y1="19" x2="7" y2="21"/><line x1="17" y1="19" x2="17" y2="21"/></svg>
                <select className="select" value={baths} onChange={e => setBaths(+e.target.value)}>
                  {[1,1.5,2,2.5,3,3.5,4].map(n => <option key={n} value={n}>{n} bathroom{n>1?'s':''}</option>)}
                </select>
              </div>
            </div>
          </div>
          <div className="field">
            <label>Add-ons (optional)</label>
            <div className="chip-row">
              {ADDONS.map(a => (
                <button key={a.id} className={`chip lemon ${addons.includes(a.id) ? 'active' : ''}`} onClick={() => toggleAddon(a.id)}>
                  {a.label} <span style={{opacity:0.6, marginLeft:6}}>+${a.price}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="price-display">
            <div>
              <div className="label">Your price</div>
              <div className="price">${price}<small></small></div>
            </div>
            <div className="right">
              <button className="btn btn-primary" onClick={() => setStep(2)}>
                Pick a date
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              </button>
              <small>All-inclusive · supplies included</small>
            </div>
          </div>
        </>
      )}

      {step === 2 && (
        <>
          <div className="field">
            <label>Choose a date</label>
            <div className="chip-row" style={{gap:8}}>
              {days.map((d, i) => {
                const active = date && d.toDateString() === date.toDateString();
                return (
                  <button key={i} className={`chip ${active ? 'active' : ''}`} onClick={() => setDate(d)} style={{flexDirection:'column', minWidth:64, padding:'10px 12px'}}>
                    <span style={{fontSize:11, opacity:0.7, textTransform:'uppercase', letterSpacing:'0.1em'}}>{fmtDay(d)}</span>
                    <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:22, lineHeight:1, marginTop:2}}>{fmtNum(d)}</span>
                    <span style={{fontSize:10, opacity:0.6, marginTop:2}}>{fmtMonth(d)}</span>
                  </button>
                );
              })}
            </div>
          </div>
          <div className="field">
            <label>Arrival window</label>
            <div className="chip-row">
              <button className={`chip ${window_==='am'?'active':''}`} onClick={() => setWindow_('am')}>
                Morning · 8a – 12p
              </button>
              <button className={`chip ${window_==='pm'?'active':''}`} onClick={() => setWindow_('pm')}>
                Afternoon · 12p – 5p
              </button>
            </div>
          </div>
          <div className="price-display">
            <div>
              <div className="label">Your price</div>
              <div className="price">${price}</div>
            </div>
            <div className="right" style={{display:'flex', flexDirection:'column', gap:6, alignItems:'flex-end'}}>
              <button className="btn btn-primary" onClick={() => setStep(3)} disabled={!date}>
                Continue
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              </button>
              <button className="chip" onClick={() => setStep(1)} style={{padding:'6px 14px', fontSize:12}}>← Back</button>
            </div>
          </div>
        </>
      )}

      {step === 3 && (
        <>
          <div className="field">
            <label>Your name</label>
            <div className="input-wrap">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              <input className="input" placeholder="Jane Doe" value={name} onChange={e => setName(e.target.value)}/>
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Email (for confirmation)</label>
              <div className="input-wrap">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                <input className="input" type="email" placeholder="jane@email.com" value={email} onChange={e => setEmail(e.target.value)}/>
              </div>
            </div>
            <div className="field">
              <label>Phone (for text)</label>
              <div className="input-wrap">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                <input className="input" type="tel" placeholder="(985) 249-8682" value={phone} onChange={e => setPhone(e.target.value)}/>
              </div>
            </div>
          </div>
          <div className="field">
            <label>Service address</label>
            <div className="input-wrap">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              <input className="input" placeholder="123 Lakeshore Dr, Mandeville LA" value={address} onChange={e => setAddress(e.target.value)}/>
            </div>
          </div>
          <div className="price-display">
            <div>
              <div className="label">{date && `${fmtDay(date)}, ${fmtMonth(date)} ${fmtNum(date)} · ${window_==='am'?'AM':'PM'}`}</div>
              <div className="price">${price}</div>
            </div>
            <div className="right" style={{display:'flex', flexDirection:'column', gap:6, alignItems:'flex-end'}}>
              <button className="btn btn-primary" onClick={() => setStep(4)} disabled={!name || !email || !phone}>
                Confirm booking
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </button>
              <button className="chip" onClick={() => setStep(2)} style={{padding:'6px 14px', fontSize:12}}>← Back</button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('booking-app')).render(<BookingFlow/>);