// src/features/admin/ui/admin-instructors-modals-add.jsx
//
// The "Add a new instructor" modal — admin-driven instructor signup
// (mirrors the public become-instructor.jsx form so admin-created and
// self-signup teachers have the same row shape). Split off from
// admin-instructors-modals.jsx so the parent stays under the 400 LOC
// budget.
//
// Public: window.AIAddModal.
//
// Reads from window: AddressAutosuggest, MagicLinkPostCreate (both
// published by admin-instructors-modals.jsx, which loads first).

const { AddressAutosuggest, MagicLinkPostCreate } = window;

// ── Add Instructor Modal ─────────────────────────────────────────────────────
const AIAddModal = ({ onClose }) => {
  const data = window.useAdminData();
  // Field set deliberately mirrors the public become-instructor.jsx form so
  // admin-created and self-signup teachers end up with the same row shape.
  // bio + experience are optional here but get prompted so admin can fill
  // them at create time instead of waiting for the teacher to log in.
  const [form, setForm] = React.useState({
    name:'', email:'', topics:['Piano'], rate:80,
    bio:'', experience:5, specialties:'',
    address:'', city:'', state:'', zip:'', phone:'', note:'',
  });
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [created, setCreated] = React.useState(null);
  const set = (k,v) => setForm(f=>({...f,[k]:v}));

  const fld = { width:'100%', padding:'12px 14px', borderRadius:8, border:'1.5px solid oklch(88% 0.015 265)', fontSize:16, minHeight:44, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(22% 0.06 265)', background:'#fff', outline:'none', boxSizing:'border-box' };
  const lbl = { display:'block', fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(52% 0.04 265)', marginBottom:5 };

  const SUBJECTS = ['Piano','Guitar','Violin','Vocals','Drums','Bass','Saxophone','Cello','Flute','Ukulele','Trumpet',
    'Drawing','Painting','Photography','Watercolor','Ballet','Contemporary Dance','Hip Hop','Salsa','Ballroom',
    'Golf','Tennis','Basketball','Swimming','Soccer','Yoga','Fitness Training','Martial Arts','Boxing',
    'Acting','Improv','Musical Theater'];

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!form.name.trim() || !form.email.trim()) { setError('Name and email are required.'); return; }
    setBusy(true); setError('');
    const studio = (form.address.trim() || form.city.trim() || form.phone.trim() || form.note.trim())
      ? { address: form.address.trim(), city: form.city.trim(), state: form.state.trim().toUpperCase(),
          zip: form.zip.trim(), phone: form.phone.trim(), note: form.note.trim() }
      : null;
    if (!form.topics || form.topics.length === 0) { setError('Pick at least one topic.'); setBusy(false); return; }
    try {
      const res = await data.createInstructor({
        name: form.name.trim(), email: form.email.trim(),
        topics: form.topics, subject: form.topics[0],
        rate: form.rate, studio,
        bio: form.bio, experience: form.experience,
        specialties: form.specialties,
      });
      setCreated(res);
    } catch (err) {
      setError(window.friendlyError(err, 'Could not add instructor'));
    } finally {
      setBusy(false);
    }
  };

  const toggleTopic = (t) => set('topics', form.topics.includes(t)
    ? form.topics.filter(x => x !== t)
    : [...form.topics, t]);

  if (created) return <MagicLinkPostCreate name={created.instructor.name} email={created.email} onClose={onClose} />;

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(10,12,24,0.4)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:9000 }} onClick={onClose}>
      <div style={{ background:'#fff', borderRadius:16, padding:'28px', width:480, maxHeight:'90vh', overflowY:'auto', boxShadow:'0 20px 60px rgba(0,0,0,0.2)', fontFamily:"'Plus Jakarta Sans', sans-serif" }} onClick={e=>e.stopPropagation()}>
        <div style={{ fontWeight:700, fontSize:16, color:'oklch(18% 0.03 265)', marginBottom:20 }}>Add instructor</div>
        <form onSubmit={handleSubmit}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14 }}>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Full name *</label>
              <input value={form.name} onChange={e=>set('name',e.target.value)} placeholder="Jane Smith" required style={fld} />
            </div>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Email * (login)</label>
              <input type="email" value={form.email} onChange={e=>set('email',e.target.value)} placeholder="instructor@example.com" required style={fld} />
              <div style={{ fontSize:11, color:'oklch(58% 0.03 265)', marginTop:4 }}>They log in via a magic-link sent to this email — no password needed.</div>
            </div>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Topics taught * <span style={{ fontWeight:500, color:'oklch(60% 0.03 265)', textTransform:'none', letterSpacing:0 }}>· tap to add/remove (first one is the primary)</span></label>
              <div style={{ display:'flex', flexWrap:'wrap', gap:6, padding:'10px', border:'1.5px solid oklch(88% 0.015 265)', borderRadius:8, background:'oklch(99% 0.003 60)', maxHeight:160, overflowY:'auto' }}>
                {SUBJECTS.map(s => {
                  const on = form.topics.includes(s);
                  return (
                    <button key={s} type="button" onClick={()=>toggleTopic(s)}
                      style={{ padding:'5px 11px', borderRadius:14, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif",
                        background: on ? 'oklch(22% 0.06 265)' : '#fff',
                        color: on ? '#fff' : 'oklch(40% 0.04 265)',
                        border: on ? '1.5px solid oklch(22% 0.06 265)' : '1.5px solid oklch(88% 0.02 265)' }}>
                      {on ? '✓ ' : ''}{s}
                    </button>
                  );
                })}
              </div>
              {form.topics.length > 0 && (
                <div style={{ fontSize:11, color:'oklch(56% 0.03 265)', marginTop:6 }}>
                  Selected: {form.topics.join(', ')}
                </div>
              )}
            </div>
            <div>
              <label style={lbl}>Rate ($/hr) *</label>
              <input type="number" value={form.rate} onChange={e=>set('rate',e.target.value)} min={0} required style={fld} />
            </div>
            <div>
              <label style={lbl}>Years experience</label>
              <input type="number" value={form.experience} onChange={e=>set('experience',e.target.value)} min={0} max={80} style={fld} />
            </div>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Specialties (comma-separated, up to 5)</label>
              <input value={form.specialties} onChange={e=>set('specialties',e.target.value)} placeholder="Classical, Jazz, Beginner-Friendly" style={fld} />
            </div>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Short bio</label>
              <textarea value={form.bio} onChange={e=>set('bio',e.target.value)} rows={3}
                placeholder="Tell students about background, teaching style, etc. Can be filled later by the teacher."
                style={{ ...fld, minHeight:80, resize:'vertical', lineHeight:1.55 }} />
            </div>
          </div>

          <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.07em', color:'oklch(52% 0.04 265)', marginBottom:12, paddingTop:12, borderTop:'1px solid oklch(92% 0.01 265)' }}>Studio address (optional)</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:20 }}>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Street address</label>
              <AddressAutosuggest
                value={form.address}
                onChange={(v) => set('address', v)}
                onPick={(parts) => {
                  set('address', parts.road);
                  if (parts.city)  set('city',  parts.city);
                  if (parts.state) set('state', parts.state.toUpperCase());
                  if (parts.zip)   set('zip',   parts.zip);
                }}
                placeholder="Start typing an address…"
                style={fld}
              />
            </div>
            <div>
              <label style={lbl}>City</label>
              <input value={form.city} onChange={e=>set('city',e.target.value)} placeholder="New York" style={fld} />
            </div>
            <div>
              <label style={lbl}>State</label>
              <input value={form.state} onChange={e=>set('state',e.target.value.toUpperCase())} placeholder="NY" maxLength={2} style={fld} />
            </div>
            <div>
              <label style={lbl}>ZIP</label>
              <input value={form.zip} onChange={e=>set('zip',e.target.value)} placeholder="10023" style={fld} />
            </div>
            <div>
              <label style={lbl}>Phone</label>
              <input type="tel" inputMode="tel" autoComplete="tel" value={form.phone} onChange={e=>set('phone',e.target.value)} placeholder="(212) 555-0100" style={fld} />
            </div>
            <div style={{ gridColumn:'1/-1' }}>
              <label style={lbl}>Note for students</label>
              <input value={form.note} onChange={e=>set('note',e.target.value)} placeholder="Suite 3B · Ring bell on arrival" style={fld} />
            </div>
          </div>

          {error && <div style={{ background:'oklch(95% 0.06 25)', color:'oklch(40% 0.15 25)', padding:'9px 12px', borderRadius:8, fontSize:12, marginBottom:12 }}>{error}</div>}

          <div style={{ display:'flex', gap:10 }}>
            <button type="submit" disabled={busy} style={{ flex:1, background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:9, padding:'12px 0', fontWeight:600, fontSize:14, cursor:busy?'wait':'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", opacity:busy?0.7:1 }}>
              {busy ? 'Creating…' : 'Add instructor'}
            </button>
            <button type="button" onClick={onClose} style={{ padding:'12px 18px', background:'oklch(95% 0.01 265)', border:'none', borderRadius:9, fontSize:14, cursor:'pointer', color:'oklch(45% 0.04 265)', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Cancel</button>
          </div>
        </form>
      </div>
    </div>
  );
};

window.AIAddModal = AIAddModal;