/* Car Wash — Booking Screens for POS */
const { useState, useEffect, useMemo } = React;

/* ── Calendar helper: generate 14 days ────────────── */
function useCalendarDays() {
  const [version, setVersion] = useState(0);

  useEffect(() => {
    CW.init().catch((err) => console.error('Car wash init failed:', err));
    return CW.subscribe(() => setVersion(v => v + 1));
  }, []);

  return useMemo(() => {
    const arr = [];
    const now = new Date();
    for (let i = 0; i < 14; i++) {
      const d = new Date(now);
      d.setDate(d.getDate() + i);
      const ds = CW.dateStr(d);
      const count = CW.getDateCount(ds);
      arr.push({
        date: ds,
        day: d.toLocaleDateString('en', { weekday: 'short' }),
        num: d.getDate(),
        month: d.toLocaleDateString('en', { month: 'short' }),
        today: i === 0,
        blocked: CW.isBlocked(ds),
        count,
        full: count >= CW.MAX_PER_DAY,
      });
    }
    return arr;
  }, [version]);
}

/* ── Booking Screen ───────────────────────────────── */
function CarWashScreen({ onBook, accent }) {
  const [cwReady, setCwReady] = useState(CW.isReady());
  const [selDate, setSelDate] = useState(null);
  const [selWashId, setSelWashId] = useState(null);
  const [ownCar, setOwnCar] = useState(true);

  const washTypes = CW.getWashTypes();
  const selWash = washTypes.find(w => w.id === selWashId);
  const days = useCalendarDays();
  const selectedDay = days.find((d) => d.date === selDate);

  const canBook = !!(selWash && selectedDay && !selectedDay.blocked && !selectedDay.full);
  const price = ownCar ? 0 : (selWash ? selWash.price : 0);

  useEffect(() => {
    let mounted = true;
    CW.init()
      .then(() => { if (mounted) setCwReady(true); })
      .catch((err) => console.error('Car wash load failed:', err));
    return CW.subscribe(() => { if (mounted) setCwReady(CW.isReady()); });
  }, []);

  useEffect(() => {
    if (!selDate) return;
    if (!selectedDay || selectedDay.blocked || selectedDay.full) {
      setSelDate(null);
    }
  }, [selDate, selectedDay]);

  if (!cwReady) {
    return (
      <div className="cw" style={{ alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ color: 'var(--text2)', fontSize: 16 }}>Loading car wash options…</div>
      </div>
    );
  }

  const handleBook = () => {
    if (!canBook) return;
    onBook({ date: selDate, washType: selWash, isOwnCar: ownCar, vehicleOwner: null, price });
  };

  const fmtDate = selDate
    ? new Date(selDate + 'T12:00:00').toLocaleDateString('en-ZA', { weekday: 'long', day: 'numeric', month: 'long' })
    : null;

  return (
    <div className="cw">
      <div className="cw-scroll">
        <div className="cw-head">
          <h2 className="cw-title">Book a Car Wash</h2>
          <p className="cw-sub">Select a day and wash type</p>
        </div>

        {/* ── Calendar ──────────────────────── */}
        <div className="cw-section">
          <div className="cw-sec-hdr">
            <h3 className="cw-sec-title">Pick a Day</h3>
            <span className="cw-sec-note">Next 2 weeks · Max {CW.MAX_PER_DAY}/day</span>
          </div>
          <div className="cw-cal">
            {days.map(d => {
              const off = d.blocked || d.full;
              const on = selDate === d.date;
              return (
                <button key={d.date}
                  className={`cw-day${on ? ' cw-day--on' : ''}${off ? ' cw-day--off' : ''}${d.today ? ' cw-day--today' : ''}`}
                  style={on ? { borderColor: accent, background: accent + '18' } : undefined}
                  disabled={off}
                  onClick={() => setSelDate(d.date)}>
                  <span className="cw-day-wd">{d.day}</span>
                  <span className="cw-day-num">{d.num}</span>
                  <span className="cw-day-mo">{d.month}</span>
                  <span className={`cw-day-sl${d.full ? ' cw-day-sl--full' : ''}`}>
                    {d.blocked ? 'Closed' : d.count + '/' + CW.MAX_PER_DAY}
                  </span>
                </button>
              );
            })}
          </div>
        </div>

        {/* ── Wash Type ─────────────────────── */}
        <div className="cw-section">
          <div className="cw-sec-hdr">
            <h3 className="cw-sec-title">Wash Type</h3>
          </div>
          <div className="cw-types">
            {washTypes.map(w => {
              const on = selWashId === w.id;
              return (
                <button key={w.id}
                  className={`cw-type${on ? ' cw-type--on' : ''}`}
                  style={on ? { borderColor: accent, background: accent + '18' } : undefined}
                  onClick={() => setSelWashId(w.id)}>
                  <div className="cw-type-info">
                    <span className="cw-type-name">{w.name}</span>
                    <span className="cw-type-desc">{w.desc}</span>
                  </div>
                  <span className="cw-type-price">R{w.price.toFixed(2)}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* ── Vehicle ───────────────────────── */}
        <div className="cw-section">
          <div className="cw-sec-hdr">
            <h3 className="cw-sec-title">Vehicle</h3>
          </div>
          <div className="cw-veh">
            <button className={`cw-veh-opt${ownCar ? ' cw-veh-opt--on' : ''}`}
              style={ownCar ? { borderColor: accent, background: accent + '18' } : undefined}
              onClick={() => { setOwnCar(true); }}>
              <svg className="cw-veh-ico" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17h10M5 13l1.5-5h11L19 13M5 13h14v4H5zM7.5 17a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM16.5 17a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
              <span className="cw-veh-main">My car</span>
              <span className="cw-veh-sub">Free perk</span>
            </button>
            <button className={`cw-veh-opt${!ownCar ? ' cw-veh-opt--on' : ''}`}
              style={!ownCar ? { borderColor: accent, background: accent + '18' } : undefined}
              onClick={() => setOwnCar(false)}>
              <svg className="cw-veh-ico" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
              <span className="cw-veh-main">Someone else's</span>
              <span className="cw-veh-sub">Charged to tab</span>
            </button>
          </div>
        </div>

        {/* ── Summary ───────────────────────── */}
        {(selDate || selWash) && (
          <div className="cw-summary">
            <div className="cw-summary-hd">Booking Summary</div>
            {fmtDate && <div className="cw-summary-row"><span>Date</span><span>{fmtDate}</span></div>}
            {selWash && <div className="cw-summary-row"><span>Wash</span><span>{selWash.name}</span></div>}
            <div className="cw-summary-row">
              <span>Vehicle</span>
              <span>{ownCar ? 'Own car (free)' : "Someone else's car"}</span>
            </div>
            <div className="cw-summary-total">
              <span>Total</span>
              <span>{price === 0 ? 'Free' : 'R' + price.toFixed(2)}</span>
            </div>
          </div>
        )}
      </div>

      {/* ── Footer ──────────────────────────── */}
      <div className="cw-foot">
        <button className="cw-book-btn" disabled={!canBook}
          style={{ background: canBook ? accent : '#e5e5e5', color: canBook ? textOnColor(accent) : '#999' }}
          onClick={handleBook}>
          {canBook
            ? (price === 0 ? 'Book Wash \u00b7 Free' : 'Book Wash \u00b7 R' + price.toFixed(2))
            : 'Select day and wash type'}
        </button>
      </div>
    </div>
  );
}

/* ── Car Wash Confirm Dialog ──────────────────────── */
function CarWashConfirm({ person, booking, tab, onConfirm, onCancel, accent }) {
  const fmtDate = new Date(booking.date + 'T12:00:00').toLocaleDateString('en-ZA', {
    weekday: 'long', day: 'numeric', month: 'long',
  });

  return (
    <div className="overlay" onClick={onCancel}>
      <div className="confirm" onClick={e => e.stopPropagation()}>
        <div className="confirm-who">
          <span className="confirm-av" style={{ background: nameToColor(person) }}>{nameToInitials(person)}</span>
          <div>
            <div className="confirm-name">{person}</div>
            {booking.price > 0 && <div className="confirm-curtab">Current tab: R{tab.toFixed(2)}</div>}
          </div>
        </div>
        <div className="confirm-items">
          <div className="confirm-row"><span>Date</span><span>{fmtDate}</span></div>
          <div className="confirm-row"><span>Wash</span><span>{booking.washType.name}</span></div>
          <div className="confirm-row"><span>Vehicle</span><span>{booking.isOwnCar ? 'Own car' : "Someone else's car"}</span></div>
        </div>
        <div className="confirm-total-row">
          <span>Total</span>
          <span className="confirm-total">{booking.price === 0 ? 'Free' : 'R' + booking.price.toFixed(2)}</span>
        </div>
        {booking.price > 0 && (
          <div className="confirm-newtab">New tab: <strong>R{(tab + booking.price).toFixed(2)}</strong></div>
        )}
        <div className="confirm-acts">
          <button className="btn-cancel" onClick={onCancel}>Cancel</button>
          <button className="btn-confirm" style={{ background: accent, color: textOnColor(accent) }} onClick={onConfirm}>Confirm Booking</button>
        </div>
      </div>
    </div>
  );
}

/* ── Car Wash Success Modal ───────────────────────── */
function CarWashSuccess({ person, booking, onDismiss, accent }) {
  const [pct, setPct] = useState(100);
  const timer = useRef(null);
  useEffect(() => {
    const dur = 4000, iv = 50, step = 100 / dur * iv;
    timer.current = setInterval(() => setPct(p => {
      if (p <= 0) { clearInterval(timer.current); onDismiss(); return 0; }
      return p - step;
    }), iv);
    return () => clearInterval(timer.current);
  }, [onDismiss]);

  const fmtDate = new Date(booking.date + 'T12:00:00').toLocaleDateString('en-ZA', {
    weekday: 'long', day: 'numeric', month: 'long',
  });

  return (
    <div className="overlay overlay--success" onClick={onDismiss}>
      <div className="smodal" onClick={e => e.stopPropagation()}>
        <div className="smodal-check">
          <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
            <path d="M9 18l6 6 12-12" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="check-path" />
          </svg>
        </div>
        <h3 className="smodal-title">Wash Booked</h3>
        <div className="smodal-who">
          <span className="smodal-av" style={{ background: nameToColor(person) }}>{nameToInitials(person)}</span>
          <div>
            <div className="smodal-charged">Booked for <strong>{person}</strong></div>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{booking.washType.name}</div>
          </div>
        </div>
        <div className="smodal-items">
          <div className="smodal-row"><span>Date</span><span>{fmtDate}</span></div>
          <div className="smodal-row"><span>Vehicle</span><span>{booking.isOwnCar ? 'Own car' : "Someone else's car"}</span></div>
          <div className="smodal-row">
            <span>Cost</span>
            <span>{booking.price === 0 ? 'Free' : 'R' + booking.price.toFixed(2)}</span>
          </div>
        </div>
        <div className="smodal-tab">
          {booking.price > 0 ? 'Charged to monthly tab' : 'Company perk — no charge'}
        </div>
        <div className="smodal-bar">
          <div className="smodal-fill" style={{ width: pct + '%', background: accent }}></div>
        </div>
        <button className="smodal-done" onClick={onDismiss}>Done</button>
      </div>
    </div>
  );
}

Object.assign(window, { CarWashScreen, CarWashConfirm, CarWashSuccess });