// review-form.jsx — Modal for students to write a review after a completed booking.

const ReviewFormModal = ({ booking, instructor, onClose, onSubmitted }) => {
  const auth = window.useAuth();
  const [rating, setRating] = React.useState(5);
  const [text, setText] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async () => {
    setError(null);
    if (!auth.user) { setError('Please sign in to leave a review.'); return; }
    setBusy(true);
    try {
      const { error } = await window.supa.from('reviews').upsert({
        instructor_id: instructor.id,
        student_id: auth.user.id,
        booking_id: booking?.id || null,
        rating: Number(rating),
        text: text.trim() || null,
      }, { onConflict: 'instructor_id,student_id,booking_id' });
      if (error) { setError(error.message); return; }
      onSubmitted && onSubmitted();
      onClose();
    } finally {
      setBusy(false);
    }
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(15,20,40,0.55)', backdropFilter: 'blur(6px)',
      zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 460, background: '#fff', borderRadius: 18, padding: 32,
        boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
        fontFamily: "'Plus Jakarta Sans', sans-serif",
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 6 }}>Leave a review</div>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 600, color: 'oklch(22% 0.06 265)' }}>
              How was your lesson with {instructor.full_name?.split(' ')[0]}?
            </h2>
          </div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'oklch(55% 0.03 265)', fontSize: 24 }}>×</button>
        </div>

        <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
          {[1,2,3,4,5].map(n => (
            <button key={n} onClick={() => setRating(n)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: 0,
            }}>
              <svg width={36} height={36} viewBox="0 0 16 16">
                <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z"
                  fill={n <= rating ? 'oklch(72% 0.17 80)' : 'oklch(88% 0.015 60)'} />
              </svg>
            </button>
          ))}
        </div>

        <textarea value={text} onChange={e => setText(e.target.value)}
          placeholder="What did you like? Tip: mention teaching style, communication, and what you learned."
          style={{
            width: '100%', minHeight: 110, padding: '12px 14px',
            border: '1.5px solid oklch(88% 0.01 265)', borderRadius: 10,
            fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 14,
            resize: 'vertical', outline: 'none', lineHeight: 1.55,
          }} />

        {error && <div style={{ background: 'oklch(96% 0.03 25)', color: 'oklch(40% 0.15 25)', padding: '10px 14px', borderRadius: 8, fontSize: 13, marginTop: 12 }}>{error}</div>}

        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button onClick={onClose} style={{
            flex: 1, background: 'transparent', color: 'oklch(22% 0.06 265)',
            border: '1.5px solid oklch(82% 0.04 265)', borderRadius: 10, padding: '12px 0',
            fontWeight: 600, fontSize: 14, cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>Cancel</button>
          <button onClick={submit} disabled={busy} style={{
            flex: 2, background: 'oklch(22% 0.06 265)', color: '#fff',
            border: 'none', borderRadius: 10, padding: '12px 0',
            fontWeight: 700, fontSize: 14,
            cursor: busy ? 'wait' : 'pointer', opacity: busy ? 0.7 : 1,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>{busy ? 'Submitting…' : 'Submit review'}</button>
        </div>
      </div>
    </div>
  );
};

window.ReviewFormModal = ReviewFormModal;