// Services — the catalog of tutoring packages + subjects INLEARN offers.
// Packages feed the deal drawer (window.PRICING). Fully manageable (add / edit / delete).

function ServicesView({ packages, setPackages, subjects, setSubjects }) {
  const [tab, setTab] = useState('packages');
  return (
    <div className="px-7 py-6 max-w-[1200px] mx-auto">
      <div className="mb-5">
        <h2 className="text-lg font-semibold text-slate-900">Services</h2>
        <p className="text-xs text-slate-500 mt-0.5">The tutoring packages and subjects INLEARN offers. Packages here populate the package picker on every deal.</p>
      </div>

      <div className="border-b border-slate-200 mb-5">
        <div className="flex gap-1">
          {[
            { id: 'packages', label: 'Investment Packages', icon: <Icon.Box size={14}/> },
            { id: 'subjects', label: 'Subjects / Modules', icon: <Icon.Book size={14}/> },
          ].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)}
              className={`inline-flex items-center gap-2 px-3.5 py-2.5 text-[13px] font-medium -mb-px border-b-2 transition-colors ${
                tab === t.id ? 'border-slate-900 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}>
              {t.icon} {t.label}
            </button>
          ))}
        </div>
      </div>

      {tab === 'packages' && <PackagesManager packages={packages} setPackages={setPackages}/>}
      {tab === 'subjects' && <SubjectsManager subjects={subjects} setSubjects={setSubjects}/>}
    </div>
  );
}
window.ServicesView = ServicesView;

// ---------- Packages ----------
function PackagesManager({ packages, setPackages }) {
  const [ConfirmEl, confirm] = useConfirm();
  const [editing, setEditing] = useState(null);   // `${segment}:${index}` or `new:${segment}`
  const [form, setForm] = useState({ name: '', hours: '', desc: '', format: 'Private', pricing: [] });
  const [formatFilter, setFormatFilter] = useState('Private');

  const segments = [
    { key: 'HighSchool', label: 'High School', tone: 'sky' },
    { key: 'University', label: 'University/College', tone: 'violet' },
  ];

  const startNew = (seg) => { setForm({ name: '', hours: '', desc: '', format: formatFilter, pricing: [] }); setEditing(`new:${seg}`); };
  const startEdit = (seg, i, pkg) => { setForm({ name: pkg.name, hours: pkg.hours, desc: pkg.desc, format: pkg.format || 'Private', pricing: (pkg.pricing || []).map(p => ({ ...p })) }); setEditing(`${seg}:${i}`); };
  const cancel = () => setEditing(null);

  const save = () => {
    const [seg, idx] = editing.split(':');
    const pricing = (form.pricing || []).filter(p => p.grade && p.price !== '' && p.price != null).map(p => ({ grade: p.grade, price: parseInt(p.price, 10) || 0 }));
    const clean = { name: form.name.trim(), format: form.format || formatFilter, hours: form.hours.trim(), desc: form.desc.trim(), pricing };
    if (!clean.name) return;
    setPackages(prev => {
      const next = { ...prev, HighSchool: [...prev.HighSchool], University: [...prev.University] };
      if (seg === 'new') {
        next[idx] = [...next[idx], clean];
      } else {
        next[seg] = [...next[seg]]; next[seg][parseInt(idx,10)] = clean;
      }
      return next;
    });
    setEditing(null);
  };

  const remove = (seg, i, pkg) => confirm({
    title: 'Delete package?',
    body: <span>Are you sure you want to permanently delete the <strong>{pkg.name}</strong> {(pkg.format || 'Private')} package ({seg === 'HighSchool' ? 'High School' : 'University'})? Deals already using it keep their saved price. This cannot be undone.</span>,
    confirmLabel: 'Delete package', tone: 'danger',
    onConfirm: () => setPackages(prev => ({ ...prev, [seg]: prev[seg].filter((_, idx) => idx !== i) })),
  });

  const inputCls = "w-full h-9 px-3 text-sm bg-white border border-slate-200 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-slate-300 text-slate-900";

  return (
    <div className="space-y-6">
      {ConfirmEl}
      {/* Format toggle */}
      <div className="inline-flex items-center p-0.5 bg-slate-100 rounded-lg">
        {[
          { id: 'Private', label: 'Private Investment Packages', sub: '1-on-1' },
          { id: 'Semi-Private', label: 'Semi-Private Packages', sub: 'Group of 3' },
        ].map(f => (
          <button key={f.id} onClick={() => { setFormatFilter(f.id); setEditing(null); }}
            className={`h-8 px-3 text-[12px] font-semibold rounded-md transition-all inline-flex items-center gap-1.5 ${
              formatFilter === f.id ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
            }`}>
            <Icon.Users size={13}/>
            {f.label}
            <span className={`text-[10px] px-1.5 h-4 inline-flex items-center rounded font-medium ${formatFilter === f.id ? 'bg-slate-100 text-slate-500' : 'bg-slate-200 text-slate-500'}`}>{f.sub}</span>
          </button>
        ))}
      </div>
      {formatFilter === 'Semi-Private' && (
        <div className="flex items-center gap-2 -mt-3 text-[12px] text-slate-500"><Icon.Alert size={13} className="text-amber-500"/> Semi-Private lessons are capped at 3 students per group.</div>
      )}

      {segments.map(seg => {
        const entries = packages[seg.key].map((pkg, i) => ({ pkg, i })).filter(({ pkg }) => (pkg.format || 'Private') === formatFilter);
        return (
        <div key={seg.key}>
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className={`w-2 h-2 rounded-full ${seg.tone === 'sky' ? 'bg-sky-500' : 'bg-violet-500'}`}/>
              <h3 className="text-sm font-semibold text-slate-900">{seg.label} · {formatFilter}</h3>
              <span className="text-xs text-slate-500 tabular-nums">({entries.length})</span>
            </div>
            <Button size="sm" variant="secondary" icon={<Icon.Plus size={13}/>} onClick={() => startNew(seg.key)}>Add package</Button>
          </div>

          {editing === `new:${seg.key}` && (
            <div className="mb-3"><PackageEditor form={form} setForm={setForm} inputCls={inputCls} onSave={save} onCancel={cancel} segment={seg.key} isNew/></div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            {entries.map(({ pkg, i }) => (
              editing === `${seg.key}:${i}` ? (
                <div key={i} className="md:col-span-2 lg:col-span-3"><PackageEditor form={form} setForm={setForm} inputCls={inputCls} onSave={save} onCancel={cancel} segment={seg.key}/></div>
              ) : (
                <div key={i} className="bg-white border border-slate-200 rounded-xl p-4 hover:border-slate-300 transition-colors flex flex-col">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm font-semibold text-slate-900">{pkg.name}</span>
                    <span className="text-[10px] px-1.5 py-0.5 bg-slate-100 text-slate-500 rounded font-medium">{pkg.hours}</span>
                  </div>
                  {(() => { const r = packagePriceRange(pkg); return (
                    <div className="text-lg font-semibold text-slate-900 tabular-nums">
                      {r ? (r.min === r.max ? fmtZAR(r.min) : `${fmtZAR(r.min)} – ${fmtZAR(r.max)}`) : <span className="text-slate-400 text-sm font-normal">No prices set</span>}
                      {r && <span className="text-[11px] font-normal text-slate-500">/mo</span>}
                    </div>
                  ); })()}
                  <div className="text-[12px] text-slate-600 mt-1.5">{pkg.desc}</div>
                  {/* Per-grade price list */}
                  <div className="mt-2.5 space-y-1 flex-1">
                    {(pkg.pricing || []).map(p => (
                      <div key={p.grade} className="flex items-center justify-between text-[12px]">
                        <span className="text-slate-500 inline-flex items-center gap-1"><Icon.School size={11} className="text-slate-400"/>{p.grade}</span>
                        <span className="text-slate-800 font-medium tabular-nums">{fmtZAR(p.price)}</span>
                      </div>
                    ))}
                    {(!pkg.pricing || pkg.pricing.length === 0) && <div className="text-[11px] text-slate-400 italic">No grade prices yet</div>}
                  </div>
                  <div className="flex items-center gap-1 border-t border-slate-100 pt-2.5 mt-3">
                    <button onClick={() => startEdit(seg.key, i, pkg)} className="h-7 px-2 inline-flex items-center gap-1.5 text-[11px] font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded">
                      <Icon.Settings size={12}/> Edit
                    </button>
                    <div className="flex-1"/>
                    <button onClick={() => remove(seg.key, i, pkg)} title="Delete" className="h-7 w-7 inline-flex items-center justify-center text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded">
                      <Icon.Trash size={12}/>
                    </button>
                  </div>
                </div>
              )
            ))}
            {entries.length === 0 && editing !== `new:${seg.key}` && (
              <div className="text-[12px] text-slate-400 italic py-4">No {formatFilter.toLowerCase()} packages for {seg.label} yet.</div>
            )}
          </div>
        </div>
        );
      })}
    </div>
  );
}

function PackageEditor({ form, setForm, inputCls, onSave, onCancel, isNew, segment }) {
  const groupKey = segment === 'University' ? 'University' : 'High School';
  const gradeOptions = (window.GRADE_OPTIONS && window.GRADE_OPTIONS[groupKey]) || [];
  const usedGrades = (form.pricing || []).map(p => p.grade);

  const setRow = (i, key, val) => setForm({ ...form, pricing: form.pricing.map((p, idx) => idx === i ? { ...p, [key]: val } : p) });
  const addRow = () => {
    const nextGrade = gradeOptions.find(g => !usedGrades.includes(g)) || '';
    setForm({ ...form, pricing: [...(form.pricing || []), { grade: nextGrade, price: '' }] });
  };
  const removeRow = (i) => setForm({ ...form, pricing: form.pricing.filter((_, idx) => idx !== i) });

  return (
    <div className="bg-white border border-indigo-300 ring-2 ring-indigo-100 rounded-xl p-4">
      <div className="text-[11px] font-semibold uppercase tracking-wider text-indigo-900 mb-3">{isNew ? 'New package' : 'Edit package'} · {form.format}</div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mb-1">Name</label>
          <input className={inputCls} value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="e.g. Bronze" autoFocus/>
        </div>
        <div>
          <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mb-1">Hours</label>
          <input className={inputCls} value={form.hours} onChange={e => setForm({...form, hours: e.target.value})} placeholder="4 hrs/week"/>
        </div>
        <div className="col-span-2">
          <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mb-1">Short description</label>
          <input className={inputCls} value={form.desc} onChange={e => setForm({...form, desc: e.target.value})} placeholder="Exam prep"/>
        </div>
      </div>

      {/* Per-grade pricing */}
      <div className="mt-4">
        <div className="flex items-center justify-between mb-1.5">
          <label className="text-[10px] text-slate-500 font-semibold uppercase tracking-wider">Price per {segment === 'University' ? 'year of study' : 'grade'}</label>
          <button type="button" onClick={addRow} className="text-[11px] font-semibold text-indigo-600 hover:text-indigo-700 inline-flex items-center gap-1"><Icon.Plus size={12}/> Add grade price</button>
        </div>
        <div className="space-y-1.5">
          {(form.pricing || []).map((p, i) => (
            <div key={i} className="flex items-center gap-2">
              <select className={inputCls + ' flex-1'} value={p.grade} onChange={e => setRow(i, 'grade', e.target.value)}>
                <option value="">Select grade…</option>
                {gradeOptions.map(g => (
                  <option key={g} value={g} disabled={usedGrades.includes(g) && g !== p.grade}>{g}</option>
                ))}
              </select>
              <div className="relative w-32">
                <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[12px] text-slate-400">R</span>
                <input className={inputCls + ' pl-6'} type="number" value={p.price} onChange={e => setRow(i, 'price', e.target.value)} placeholder="0"/>
              </div>
              <button type="button" onClick={() => removeRow(i)} title="Remove" className="h-8 w-8 inline-flex items-center justify-center text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded"><Icon.X size={13}/></button>
            </div>
          ))}
          {(form.pricing || []).length === 0 && (
            <div className="text-[11px] text-slate-400 italic py-1">No grade prices yet — add one so this package shows up for that grade.</div>
          )}
        </div>
      </div>

      <div className="flex items-center justify-end gap-1.5 mt-3 border-t border-slate-100 pt-2.5">
        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
        <Button size="sm" variant="brand" icon={<Icon.Check size={12}/>} onClick={onSave} disabled={!form.name.trim()}>{isNew ? 'Add package' : 'Save'}</Button>
      </div>
    </div>
  );
}

// ---------- Subjects ----------
// Grade picker — pick multiple grades (Grade 8–12) and/or university years per subject.
function GradePicker({ value, onChange }) {
  const toggle = (g) => onChange(value.includes(g) ? value.filter(x => x !== g) : [...value, g]);
  const toggleGroup = (groupGrades, allOn) =>
    onChange(allOn ? value.filter(g => !groupGrades.includes(g)) : [...new Set([...value, ...groupGrades])]);
  return (
    <div className="space-y-2.5">
      {Object.entries(GRADE_OPTIONS).map(([group, grades]) => {
        const allOn = grades.every(g => value.includes(g));
        return (
          <div key={group}>
            <div className="flex items-center justify-between mb-1">
              <span className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">{group}</span>
              <button type="button" onClick={() => toggleGroup(grades, allOn)} className="text-[10px] font-medium text-indigo-600 hover:text-indigo-700">{allOn ? 'Clear' : 'Select all'}</button>
            </div>
            <div className="flex flex-wrap gap-1.5">
              {grades.map(g => {
                const on = value.includes(g);
                return (
                  <button key={g} type="button" onClick={() => toggle(g)}
                    className={`h-7 px-2 text-[11px] rounded-md border transition-colors ${on ? 'bg-indigo-50 text-indigo-700 border-indigo-200 font-medium' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}`}>{g}</button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function SubjectsManager({ subjects, setSubjects }) {
  const [ConfirmEl, confirm] = useConfirm();
  const [name, setName] = useState('');
  const [desc, setDesc] = useState('');
  const [grades, setGrades] = useState([]);
  const [editing, setEditing] = useState(null);
  const [editForm, setEditForm] = useState({ name: '', desc: '', grades: [] });

  const active = subjects.filter(s => !s.archived);
  const inputCls = "w-full h-9 px-3 text-sm bg-white border border-slate-200 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-slate-300 text-slate-900 placeholder:text-slate-400";

  // group a subject's grades into HS / University for display
  const splitGrades = (gradeList = []) => ({
    'High School': gradeList.filter(g => GRADE_OPTIONS['High School'].includes(g)),
    'University':  gradeList.filter(g => GRADE_OPTIONS['University'].includes(g)),
  });

  const add = () => {
    if (!name.trim()) return;
    setSubjects([...subjects, { id: 'sub-' + Date.now(), name: name.trim(), desc: desc.trim(), grades, archived: false }]);
    setName(''); setDesc(''); setGrades([]);
  };
  const startEdit = (s) => { setEditing(s.id); setEditForm({ name: s.name, desc: s.desc || '', grades: s.grades || [] }); };
  const saveEdit = () => {
    if (!editForm.name.trim()) return;
    setSubjects(subjects.map(s => s.id === editing ? { ...s, name: editForm.name.trim(), desc: editForm.desc.trim(), grades: editForm.grades } : s));
    setEditing(null);
  };
  const remove = (s) => confirm({
    title: 'Delete subject?',
    body: <span>Are you sure you want to permanently delete <strong>{s.name}</strong> from your services? This cannot be undone.</span>,
    confirmLabel: 'Delete subject', tone: 'danger',
    onConfirm: () => setSubjects(subjects.filter(x => x.id !== s.id)),
  });

  return (
    <div className="grid grid-cols-1 lg:grid-cols-[340px_1fr] gap-5">
      {ConfirmEl}
      {/* Create */}
      <div className="bg-white border border-slate-200 rounded-xl p-5 h-fit lg:sticky lg:top-20">
        <div className="text-[11px] text-slate-500 font-semibold uppercase tracking-wider mb-3">Add subject / module</div>
        <label className="text-[11px] text-slate-500 font-medium block mb-1">Name</label>
        <input className={inputCls} value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Physical Sciences"/>
        <label className="text-[11px] text-slate-500 font-medium block mt-3 mb-1">Description</label>
        <textarea rows={3} className={inputCls + ' h-auto py-2 resize-none'} value={desc} onChange={e => setDesc(e.target.value)} placeholder="What this covers"/>
        <label className="text-[11px] text-slate-500 font-medium block mt-3 mb-1.5">Grades / years offered</label>
        <GradePicker value={grades} onChange={setGrades}/>
        <Button variant="brand" size="md" className="w-full mt-4" icon={<Icon.Plus size={14}/>} onClick={add} disabled={!name.trim()}>Add subject</Button>
      </div>

      {/* List */}
      <div className="space-y-3">
        {active.length === 0 && (
          <div className="bg-white border border-dashed border-slate-200 rounded-xl p-10 text-center text-sm text-slate-500">No subjects yet. Add one on the left.</div>
        )}
        {active.map(s => (
          editing === s.id ? (
            <div key={s.id} className="bg-white border border-indigo-300 ring-2 ring-indigo-100 rounded-xl p-4">
              <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mb-1">Name</label>
              <input className={inputCls} value={editForm.name} onChange={e => setEditForm({...editForm, name: e.target.value})} autoFocus/>
              <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mt-2.5 mb-1">Description</label>
              <textarea rows={2} className={inputCls + ' h-auto py-1.5 resize-none'} value={editForm.desc} onChange={e => setEditForm({...editForm, desc: e.target.value})}/>
              <label className="text-[10px] text-slate-500 font-medium uppercase tracking-wider block mt-2.5 mb-1.5">Grades / years offered</label>
              <GradePicker value={editForm.grades} onChange={(g) => setEditForm({...editForm, grades: g})}/>
              <div className="flex items-center justify-end gap-1.5 mt-3 border-t border-slate-100 pt-2.5">
                <Button size="sm" variant="ghost" onClick={() => setEditing(null)}>Cancel</Button>
                <Button size="sm" variant="brand" icon={<Icon.Check size={12}/>} onClick={saveEdit} disabled={!editForm.name.trim()}>Save</Button>
              </div>
            </div>
          ) : (
            <div key={s.id} className="bg-white border border-slate-200 rounded-xl p-4 hover:border-slate-300 transition-colors">
              <div className="flex items-start justify-between gap-2">
                <div className="flex items-center gap-2 min-w-0">
                  <SubjectChip subject={s.name}/>
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  <button onClick={() => startEdit(s)} className="h-7 px-2 inline-flex items-center gap-1.5 text-[11px] font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded"><Icon.Settings size={12}/> Edit</button>
                  <button onClick={() => remove(s)} title="Delete" className="h-7 w-7 inline-flex items-center justify-center text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded"><Icon.Trash size={12}/></button>
                </div>
              </div>
              {s.desc && <p className="text-[12.5px] text-slate-600 mt-2 leading-relaxed">{s.desc}</p>}
              {/* Grades grouped */}
              <div className="mt-3 space-y-1.5">
                {Object.entries(splitGrades(s.grades)).map(([group, gs]) => (
                  gs.length > 0 && (
                    <div key={group} className="flex items-center gap-2 flex-wrap">
                      <span className="text-[10px] text-slate-400 font-medium uppercase tracking-wider w-20 shrink-0">{group}</span>
                      <div className="flex flex-wrap gap-1">
                        {gs.map(g => <span key={g} className="text-[10px] px-1.5 py-0.5 bg-slate-100 text-slate-600 rounded font-medium">{g}</span>)}
                      </div>
                    </div>
                  )
                ))}
                {(!s.grades || s.grades.length === 0) && <span className="text-[11px] text-slate-400 italic">No grades assigned</span>}
              </div>
            </div>
          )
        ))}
      </div>
    </div>
  );
}