// src/features/instructor/ui/instructor-schedule-banners.jsx
//
// The strip of status banners that sits between the dashboard header
// and the lesson list:
//   1. Verification banner (request / in-progress / rejected)
//   2. Submitted-in-review confirmation strip
//   3. Signup-progress pending / rejected strips (v32 funnel)
//   4. Persistent availability nudge
//
// Split off from instructor-schedule-list.jsx to keep both files
// under the 400 LOC budget.
//
// Public: window.InstructorScheduleBanners.

const InstructorScheduleBanners = ({
  verification, bannerDismissed, onDismissBanner, onGoVerify,
  signupProgress, setPage,
  availMap, onAvailClick,
  termsPending, onOpenTerms,
}) => (
  <React.Fragment>
    {/* T&C agreement banner — shown when admin has published a terms_versions
        row newer than this teacher's latest terms_agreements.agreed_at.
        Click "Read & Agree" → modal renders the body + records the
        agreement. Banner stays until the agreement is recorded. */}
    {termsPending && window.TeacherTermsBanner && (
      <window.TeacherTermsBanner pending={termsPending} onOpen={onOpenTerms} />
    )}

    {/* Verification banner — shown when the admin has requested verification
        and the tutor hasn't submitted yet. Dismissable per session via
        [Later] (sessionStorage), reappears next login. */}
    {verification && ['requested','in_progress','rejected'].includes(verification.status) && !bannerDismissed && (() => {
      const requested = verification.requested_fields || [];
      const done = ['identity','gov_id','address','bank'].filter(k => verification[`${k}_completed_at`] && requested.includes(k)).length;
      const isRejected = verification.status === 'rejected';
      return (
        <div style={{
          background: isRejected ? 'oklch(96% 0.04 25)' : 'oklch(20% 0.07 265)',
          borderBottom: isRejected ? '1px solid oklch(85% 0.08 25)' : 'none',
          color: isRejected ? 'oklch(40% 0.15 25)' : '#fff',
          padding:'12px clamp(14px, 4vw, 24px)', display:'flex', alignItems:'center', gap:14, flexWrap:'wrap', cursor:'default',
        }}>
          <span style={{ fontSize:18 }}>{isRejected ? '⚠️' : '🔒'}</span>
          <div style={{ flex:1, minWidth:200 }}>
            <div style={{ fontSize:13, fontWeight:700 }}>
              {isRejected
                ? 'A small fix is needed on your verification.'
                : 'Verify your account to start receiving payouts.'}
            </div>
            <div style={{ fontSize:12, opacity:0.75, marginTop:2 }}>
              {isRejected
                ? (verification.rejection_reason || 'Please update the requested information and resubmit.')
                : (done > 0 ? `${done} of ${requested.length} sections complete · takes about 4 minutes` : 'Takes about 4 minutes · your info is encrypted with AES-256')}
            </div>
          </div>
          <button onClick={onGoVerify}
            style={{ background: isRejected ? '#fff' : 'oklch(72% 0.17 80)', color: isRejected ? 'oklch(40% 0.15 25)' : 'oklch(18% 0.06 265)', border: isRejected ? '1px solid oklch(88% 0.06 25)' : 'none', borderRadius:8, padding:'8px 16px', fontSize:13, fontWeight:700, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", whiteSpace:'nowrap' }}>
            {isRejected ? 'Fix & resubmit →' : 'Verify now →'}
          </button>
          <button onClick={onDismissBanner}
            style={{ background:'transparent', border:'none', color: isRejected ? 'oklch(40% 0.15 25)' : 'rgba(255,255,255,0.7)', fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>
            Later
          </button>
        </div>
      );
    })()}

    {/* "Submitted, in review" — non-dismissable confirmation strip. */}
    {verification?.status === 'submitted' && (
      <div style={{ background:'oklch(97% 0.025 80)', borderBottom:'1px solid oklch(86% 0.08 80)', padding:'10px clamp(14px, 4vw, 24px)', display:'flex', alignItems:'center', gap:12, color:'oklch(32% 0.1 80)', fontSize:13, fontWeight:600 }}>
        <span style={{ fontSize:16 }}>⏳</span>
        <span style={{ flex:1 }}>Your verification is in review. We'll email you within 1–2 business days.</span>
      </div>
    )}

    {/* v32 — signup-progress banners (front-door funnel) */}
    {signupProgress?.review_status === 'pending_review' && (
      <div style={{ background:'oklch(97% 0.025 80)', borderBottom:'1px solid oklch(86% 0.08 80)', padding:'10px clamp(14px, 4vw, 24px)', display:'flex', alignItems:'center', gap:12, color:'oklch(32% 0.1 80)', fontSize:13, fontWeight:600 }}>
        <span style={{ fontSize:16 }}>⏳</span>
        <span style={{ flex:1 }}>Your profile is in review. We'll email you within 3–5 business days once it's approved.</span>
      </div>
    )}
    {signupProgress?.review_status === 'rejected' && (
      <div style={{ background:'oklch(97% 0.03 25)', borderBottom:'1px solid oklch(88% 0.07 25)', padding:'12px clamp(14px, 4vw, 24px)', display:'flex', alignItems:'flex-start', gap:12, color:'oklch(38% 0.16 25)', fontSize:13 }}>
        <span style={{ fontSize:16, lineHeight:1.2 }}>⚠️</span>
        <div style={{ flex:1, lineHeight:1.55 }}>
          <strong style={{ fontWeight:700 }}>A small fix is needed on your profile.</strong>
          {signupProgress.rejection_reason && (
            <div style={{ marginTop:3, fontWeight:500 }}>{signupProgress.rejection_reason}</div>
          )}
          <button onClick={() => setPage && setPage('become-instructor')} style={{ background:'oklch(50% 0.18 25)', color:'#fff', border:'none', borderRadius:6, padding:'7px 14px', fontSize:12, fontWeight:700, cursor:'pointer', marginTop:8 }}>Edit and resubmit →</button>
        </div>
      </div>
    )}

    {/* Persistent availability nudge — sits right under the header so the
        teacher always sees it. Click → opens the availability modal.
        We count enabled days as a quick proxy for "have they actually
        set anything" — empty/0 days = bright red banner, otherwise a
        softer reminder. Joe explicitly wanted this always-visible
        (not dismissable) so we can't lose track of teachers who let
        their availability drift stale. */}
    {(() => {
      const enabledDays = Object.values(availMap || {}).filter(arr => (arr || []).length > 0).length;
      const empty = enabledDays === 0;
      return (
        <div onClick={onAvailClick} style={{
          background: empty ? 'oklch(96% 0.07 25)' : 'oklch(98% 0.04 80)',
          borderBottom: '1px solid ' + (empty ? 'oklch(85% 0.09 25)' : 'oklch(86% 0.08 80)'),
          padding:'10px clamp(14px, 4vw, 24px)', display:'flex', alignItems:'center', gap:12, cursor:'pointer',
          color: empty ? 'oklch(34% 0.12 25)' : 'oklch(34% 0.14 75)', fontSize:13, fontWeight:600,
        }}>
          <span style={{ fontSize:16 }}>{empty ? '⚠️' : '🗓️'}</span>
          <span style={{ flex:1 }}>
            {empty
              ? 'Your availability is empty — students can\'t book until you add open times.'
              : `You currently have ${enabledDays} day${enabledDays===1?'':'s'} marked open. Keep this updated weekly so students can book.`}
          </span>
          <span style={{ background:'#fff', border:'1px solid currentColor', borderRadius:7, padding:'5px 12px', fontSize:12, fontWeight:700 }}>
            Update availability →
          </span>
        </div>
      );
    })()}
  </React.Fragment>
);

window.InstructorScheduleBanners = InstructorScheduleBanners;