// ─── Detail Modal ─────────────────────────────────────────────────────────────

function BookingDetailModal({ booking: b, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div
      className="detail-modal-overlay"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="detail-modal" role="dialog" aria-modal="true">

        <div className="detail-modal__head">
          <div>
            <div className="detail-modal__title">{b.name}</div>
            <div className="detail-modal__sub" style={{ textTransform: 'capitalize' }}>{b.contact_method}</div>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        <div className="detail-modal__body">
          <div className="detail-modal__row">
            <span className="detail-field__label">Email</span>
            <span className="detail-field__value">{b.email}</span>
          </div>
          <div className="detail-modal__row">
            <span className="detail-field__label">Contact via</span>
            <span className="detail-field__value" style={{ textTransform: 'capitalize' }}>{b.contact_method}</span>
          </div>
          {b.contact_value && (
            <div className="detail-modal__row">
              <span className="detail-field__label">Contact</span>
              <span className="detail-field__value">{b.contact_value}</span>
            </div>
          )}
          {b.preferred_date && (
            <div className="detail-modal__row">
              <span className="detail-field__label">Date</span>
              <span className="detail-field__value">{b.preferred_date}</span>
            </div>
          )}
          {b.preferred_time && (
            <div className="detail-modal__row">
              <span className="detail-field__label">Time</span>
              <span className="detail-field__value">{b.preferred_time}</span>
            </div>
          )}
          {b.notes && (
            <div className="detail-modal__desc">
              <div className="detail-field__label" style={{ marginBottom: 'var(--space-1)' }}>Notes</div>
              <div className="detail-field__value" style={{ whiteSpace: 'pre-wrap', lineHeight: 'var(--lh-normal)' }}>{b.notes}</div>
            </div>
          )}
          <div className="detail-modal__row">
            <span className="detail-field__label">Submitted</span>
            <span className="detail-field__value">{new Date(b.created_at).toLocaleString()}</span>
          </div>
        </div>

        <div className="detail-modal__actions">
          <button className="btn btn--primary" style={{ flex: 1, justifyContent: 'center' }} onClick={onClose}>
            Close
          </button>
        </div>

      </div>
    </div>
  );
}

// ─── Bookings ─────────────────────────────────────────────────────────────────

function Bookings({ bookings }) {
  const [detailId, setDetailId] = React.useState(null);
  const detail = bookings.find(b => b.id === detailId);

  return (
    <div>
      <h1 className="page-title">Bookings</h1>
      <p className="page-subtitle">Call booking requests from the landing page</p>

      <div className="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Method</th>
              <th className="td-hide-mobile">Date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {bookings.length === 0 && (
              <tr>
                <td colSpan="4" className="td-muted" style={{ textAlign: 'center', padding: 'var(--space-8)' }}>
                  No bookings yet
                </td>
              </tr>
            )}
            {bookings.map(b => (
              <tr key={b.id} style={{ cursor: 'pointer' }} onClick={() => setDetailId(b.id)}>
                <td data-label="Name">
                  <div>
                    <div style={{ fontWeight: 'var(--fw-medium)' }}>{b.name}</div>
                    <div className="td-muted" style={{ fontSize: 'var(--fs-caption)' }}>{b.email}</div>
                  </div>
                </td>
                <td data-label="Via">
                  <span className="pill pill--archived" style={{ textTransform: 'capitalize' }}>
                    {b.contact_method}
                  </span>
                </td>
                <td data-label="Date" className="td-muted td-hide-mobile">
                  {new Date(b.created_at).toLocaleDateString()}
                </td>
                <td className="td-action-col" onClick={(e) => { e.stopPropagation(); setDetailId(b.id); }}>
                  <button className="icon-btn" title="View details" tabIndex={-1}>
                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
                      <circle cx="7.5" cy="7.5" r="6" stroke="currentColor" strokeWidth="1.3"/>
                      <path d="M7.5 5v.5M7.5 7v4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
                    </svg>
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {detail && (
        <BookingDetailModal
          booking={detail}
          onClose={() => setDetailId(null)}
        />
      )}
    </div>
  );
}