/* Car Wash — Washer Display */
const { useState, useEffect, useCallback, useMemo } = React;

/* ── Helpers ──────────────────────────────────────── */
function nameToColor(name) {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h);
  return `oklch(0.72 0.12 ${Math.abs(h % 360)})`;
}
function nameToInitials(name) {
  if (!name) return '?';
  const parts = name.trim().split(/\s+/);
  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
  return name.slice(0, 2).toUpperCase();
}

function calendarDays() {
  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);
    arr.push({
      date: ds,
      day: d.toLocaleDateString('en', { weekday: 'short' }),
      num: d.getDate(),
      month: d.toLocaleDateString('en', { month: 'short' }),
      today: i === 0,
    });
  }
  return arr;
}

/* ── Booking Card ─────────────────────────────────── */
function WasherCard({ booking, onStatusChange, onReschedule }) {
  const statusCls = {
    pending: '', 'in-progress': 'wc--progress', completed: 'wc--completed',
  }[booking.status] || '';

  const statusLabel = {
    pending: 'Pending', 'in-progress': 'Washing', completed: 'Complete',
  }[booking.status] || booking.status;

  const statusBadge = {
    pending: 'wc-status--pending', 'in-progress': 'wc-status--progress', completed: 'wc-status--completed',
  }[booking.status] || '';

  return (
    <div className={`wc ${statusCls}`}>
      <div className="wc-header">
        <div className="wc-person">
          <span className="wc-avatar" style={{ background: nameToColor(booking.employee) }}>
            {nameToInitials(booking.employee)}
          </span>
          <span className="wc-person-name">{booking.employee}</span>
        </div>
        <span className={`wc-status ${statusBadge}`}>{statusLabel}</span>
      </div>

      <div className="wc-wash-name">{booking.washTypeName}</div>

      <div className="wc-details">
        <div className="wc-detail">
          <svg className="wc-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
          <span>{CW.fmtDateNice(booking.date)}</span>
        </div>
        <div className="wc-detail">
          <svg className="wc-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17h10M5 13l1.5-5h11L19 13M5 13h14v4H5z"/></svg>
          <span>{booking.isOwnCar ? 'Own car' : "Someone else's car"}</span>
        </div>
        {booking.price > 0 && (
          <div className="wc-detail">
            <span className="wc-detail-label" style={{marginLeft: 22}}>R{booking.price.toFixed(2)} charged</span>
          </div>
        )}
      </div>

      {booking.rescheduledFrom && (
        <div className="wc-reschedule-note">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 105.64-12.36L1 10"/></svg>
          Moved from {CW.fmtDateNice(booking.rescheduledFrom)}
        </div>
      )}

      <div className="wc-actions">
        {booking.status === 'pending' && (
          <React.Fragment>
            <button className="wc-btn wc-btn--start" onClick={() => onStatusChange(booking.id, 'in-progress')}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 6v12M6 12h12"/></svg>
              Start
            </button>
            <button className="wc-btn wc-btn--resched" onClick={() => onReschedule(booking)}>
              Reschedule
            </button>
          </React.Fragment>
        )}
        {booking.status === 'in-progress' && (
          <React.Fragment>
            <button className="wc-btn wc-btn--done" onClick={() => onStatusChange(booking.id, 'completed')}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l6 6 10-10"/></svg>
              Done
            </button>
            <button className="wc-btn wc-btn--undo" onClick={() => onStatusChange(booking.id, 'pending')}>Undo</button>
          </React.Fragment>
        )}
        {booking.status === 'completed' && (
          <React.Fragment>
            <div className="wc-done-label">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l6 6 10-10"/></svg>
              Complete
            </div>
            <button className="wc-btn wc-btn--undo" onClick={() => onStatusChange(booking.id, 'in-progress')}>Undo</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ── Reschedule Modal ─────────────────────────────── */
function RescheduleModal({ booking, onConfirm, onClose }) {
  const [selDate, setSelDate] = useState(null);
  const days = useMemo(() => calendarDays(), []);

  return (
    <div className="w-overlay" onClick={onClose}>
      <div className="w-modal" onClick={e => e.stopPropagation()}>
        <div className="w-modal-title">Reschedule Wash</div>
        <div className="w-modal-sub">
          {booking.employee} — {booking.washTypeName}
          <br />Currently: {CW.fmtDateNice(booking.date)}
        </div>
        <div className="w-modal-cal">
          {days.map(d => {
            const blocked = CW.isBlocked(d.date);
            const full = CW.isDateFull(d.date);
            const isCurrent = d.date === booking.date;
            const off = blocked || full || isCurrent;
            const on = selDate === d.date;
            return (
              <button key={d.date}
                className={`w-modal-day${on ? ' w-modal-day--on' : ''}${off ? ' w-modal-day--off' : ''}`}
                disabled={off}
                onClick={() => setSelDate(d.date)}>
                <span className="w-modal-day-wd">{d.day}</span>
                <span className="w-modal-day-num">{d.num}</span>
                <span className="w-modal-day-mo">{d.month}</span>
              </button>
            );
          })}
        </div>
        <div className="w-modal-acts">
          <button className="w-modal-cancel" onClick={onClose}>Cancel</button>
          <button className="w-modal-confirm" disabled={!selDate}
            onClick={() => { onConfirm(booking.id, selDate); onClose(); }}>
            {selDate ? 'Move to ' + CW.fmtDateNice(selDate) : 'Pick a new day'}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── Block Days View ──────────────────────────────── */
function BlockDaysView() {
  const [, forceUpdate] = useState(0);
  const days = useMemo(() => calendarDays(), []);

  const handleToggle = async (date) => {
    await CW.toggleBlocked(date, 'washer');
    forceUpdate(n => n + 1);
  };

  return (
    <div className="w-days">
      <div className="w-days-title">Manage Days</div>
      <div className="w-days-sub">Tap a day to block or unblock it. Blocked days prevent new bookings.</div>
      <div className="w-days-grid">
        {days.map(d => {
          const blocked = CW.isBlocked(d.date);
          const count = CW.getDateCount(d.date);
          const full = count >= CW.MAX_PER_DAY;
          return (
            <button key={d.date}
              className={`w-day-cell${blocked ? ' w-day-cell--blocked' : ''}${d.today ? ' w-day-cell--today' : ''}`}
              onClick={() => handleToggle(d.date)}>
              <span className="w-day-wd">{d.day}</span>
              <span className="w-day-num">{d.num}</span>
              <span className="w-day-mo">{d.month}</span>
              <span className={`w-day-status${blocked ? ' w-day-status--blocked' : full ? ' w-day-status--full' : ' w-day-status--open'}`}>
                {blocked ? 'Blocked' : full ? 'Full' : count + '/' + CW.MAX_PER_DAY + ' open'}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ── Empty State ──────────────────────────────────── */
function WasherEmpty({ filter }) {
  const msgs = {
    today: { title: 'No washes today', sub: 'Bookings for today will appear here' },
    upcoming: { title: 'No upcoming washes', sub: 'Future bookings will show up here as they come in' },
    completed: { title: 'No completed washes', sub: 'Finished washes will be listed here' },
  };
  const m = msgs[filter] || msgs.today;

  return (
    <div className="w-empty">
      <div className="w-empty-icon">
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
          <path d="M32 52a18 18 0 0018-18c0-10-9-20-18-30-9 10-18 20-18 30a18 18 0 0018 18z" stroke="currentColor" strokeWidth="2.5" fill="none"/>
        </svg>
      </div>
      <h2 className="w-empty-title">{m.title}</h2>
      <p className="w-empty-sub">{m.sub}</p>
    </div>
  );
}

/* ── Main App ─────────────────────────────────────── */
function WasherApp() {
  const [bookings, setBookings] = useState([]);
  const [filter, setFilter] = useState('today');
  const [rescheduleTarget, setRescheduleTarget] = useState(null);
  const [ready, setReady] = useState(CW.isReady());

  const loadBookings = useCallback(() => {
    setBookings(CW.getBookings().filter(b => b.status !== 'cancelled'));
  }, []);

  useEffect(() => {
    let mounted = true;
    CW.init()
      .then(() => {
        if (!mounted) return;
        setReady(true);
        loadBookings();
      })
      .catch((err) => console.error('Car wash load failed:', err));
    const unsub = CW.subscribe(() => {
      if (!mounted) return;
      setReady(CW.isReady());
      loadBookings();
    });
    const iv = setInterval(() => {
      CW.refresh().catch(() => {});
    }, 5000);
    return () => {
      mounted = false;
      unsub();
      clearInterval(iv);
    };
  }, [loadBookings]);

  const handleStatusChange = useCallback(async (id, status) => {
    await CW.updateStatus(id, status);
    loadBookings();
  }, [loadBookings]);

  const handleReschedule = useCallback(async (id, newDate) => {
    await CW.reschedule(id, newDate);
    loadBookings();
  }, [loadBookings]);

  // Filter
  const today = CW.todayStr();
  const filtered = useMemo(() => {
    if (filter === 'today') return bookings.filter(b => b.date === today);
    if (filter === 'upcoming') return bookings.filter(b => b.date >= today && b.status !== 'completed')
      .sort((a, b) => a.date < b.date ? -1 : a.date > b.date ? 1 : 0);
    if (filter === 'completed') return bookings.filter(b => b.status === 'completed')
      .sort((a, b) => (b.completedAt || b.createdAt) < (a.completedAt || a.createdAt) ? -1 : 1);
    return bookings;
  }, [bookings, filter, today]);

  // Group by date for upcoming view
  const grouped = useMemo(() => {
    if (filter !== 'upcoming') return null;
    const groups = {};
    filtered.forEach(b => {
      if (!groups[b.date]) groups[b.date] = [];
      groups[b.date].push(b);
    });
    return groups;
  }, [filtered, filter]);

  // Stats (today only)
  const stats = useMemo(() => {
    const todayBookings = bookings.filter(b => b.date === today);
    return {
      pending: todayBookings.filter(b => b.status === 'pending').length,
      progress: todayBookings.filter(b => b.status === 'in-progress').length,
      done: todayBookings.filter(b => b.status === 'completed').length,
    };
  }, [bookings, today]);

  const displayDate = new Date().toLocaleDateString('en-ZA', {
    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
  });

  const filterTabs = [
    { id: 'today', label: 'Today' },
    { id: 'upcoming', label: 'Upcoming' },
    { id: 'completed', label: 'Completed' },
    { id: 'days', label: 'Days' },
  ];

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

  return (
    <div className="w-app">
      <header className="w-header">
        <div className="w-header-left">
          <img src="uploads/Logo_Transparent.png" className="w-logo-img" alt="" />
          <div className="w-header-titles">
            <h1 className="w-title">Car Wash</h1>
            <span className="w-date">{displayDate}</span>
          </div>
        </div>
        <div className="w-header-right">
          <div className="w-stats">
            <div className="w-stat w-stat--pend">
              <span className="w-stat-num">{stats.pending}</span>
              <span className="w-stat-label">Pending</span>
            </div>
            <div className="w-stat w-stat--prog">
              <span className="w-stat-num">{stats.progress}</span>
              <span className="w-stat-label">Washing</span>
            </div>
            <div className="w-stat w-stat--done">
              <span className="w-stat-num">{stats.done}</span>
              <span className="w-stat-label">Done</span>
            </div>
          </div>
          <div className="w-filter-group">
            {filterTabs.map(f => (
              <button key={f.id}
                className={`w-filter${filter === f.id ? ' w-filter--on' : ''}`}
                onClick={() => setFilter(f.id)}>
                {f.label}
              </button>
            ))}
          </div>
        </div>
      </header>

      {filter === 'days' ? (
        <BlockDaysView />
      ) : filtered.length === 0 ? (
        <WasherEmpty filter={filter} />
      ) : filter === 'upcoming' && grouped ? (
        <div className="w-grid">
          {Object.entries(grouped).map(([date, items]) => (
            <React.Fragment key={date}>
              <div className="w-date-group">
                {CW.fmtDateNice(date)}
                {date === today && <span className="w-date-group-badge" style={{background:'rgba(59,130,246,.15)',color:'var(--blue)'}}>Today</span>}
                <span className="w-date-group-badge" style={{background:'var(--surface-up)',color:'var(--text2)'}}>{items.length} wash{items.length !== 1 ? 'es' : ''}</span>
              </div>
              {items.map(b => (
                <WasherCard key={b.id} booking={b}
                  onStatusChange={handleStatusChange}
                  onReschedule={(bk) => setRescheduleTarget(bk)} />
              ))}
            </React.Fragment>
          ))}
        </div>
      ) : (
        <div className="w-grid">
          {filtered.map(b => (
            <WasherCard key={b.id} booking={b}
              onStatusChange={handleStatusChange}
              onReschedule={(bk) => setRescheduleTarget(bk)} />
          ))}
        </div>
      )}

      {rescheduleTarget && (
        <RescheduleModal
          booking={rescheduleTarget}
          onConfirm={handleReschedule}
          onClose={() => setRescheduleTarget(null)}
        />
      )}

      <a href="index.html" className="w-back-link">&larr; Back to POS</a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WasherApp />);