// editor.jsx — Habit editor: add/remove/reorder/edit

const ICONS = ['🌙','☀️','🕌','🌅','🌇','🌆','🌃','🍃','🏃','📖','💧','🧘','📿','✨','🌿','⭐'];

function HabitEditor({ habit, onSave, onDelete, onClose }) {
  const [draft, setDraft] = React.useState(JSON.parse(JSON.stringify(habit)));
  const update = (patch) => setDraft(d => ({ ...d, ...patch }));
  const updateAddon = (i, patch) => setDraft(d => {
    const addons = [...(d.addons || [])];
    addons[i] = { ...addons[i], ...patch };
    return { ...d, addons };
  });
  const addAddon = () => setDraft(d => ({
    ...d,
    addons: [...(d.addons || []), { id: `${d.id}-addon-${Date.now()}`, name: '', points: 10 }],
  }));
  const removeAddon = (i) => setDraft(d => ({
    ...d, addons: d.addons.filter((_, j) => j !== i),
  }));

  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet sheet-tall" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-handle"/>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--ink)', margin: 0, whiteSpace: 'nowrap' }}>
            {habit.id ? 'Edit Habit' : 'Habit Baru'}
          </h3>
          <button className="text-btn" onClick={onClose}>Batal</button>
        </div>

        <div className="form-section">
          <label className="form-label">Ikon</label>
          <div className="icon-picker">
            {ICONS.map(ic => (
              <button key={ic}
                className={`icon-pick ${draft.icon === ic ? 'is-active' : ''}`}
                onClick={() => update({ icon: ic })}>{ic}</button>
            ))}
          </div>
        </div>

        <div className="form-section">
          <label className="form-label">Kelompok</label>
          <input className="form-input" value={draft.group || ''}
            placeholder="mis. Tahajud"
            onChange={(e) => update({ group: e.target.value })}/>
        </div>

        <div className="form-section">
          <label className="form-label">Nama Habit Utama</label>
          <textarea className="form-input form-textarea" value={draft.name || ''}
            placeholder="mis. Sholat Tahajud 4 Rakaat + Witir 3 Rakaat"
            rows={2}
            onChange={(e) => update({ name: e.target.value })}/>
        </div>

        <div className="form-section">
          <label className="form-label">Poin Utama</label>
          <div className="point-stepper">
            <button onClick={() => update({ points: Math.max(10, (draft.points || 0) - 10) })}>−</button>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500 }}>{draft.points}</span>
            <button onClick={() => update({ points: (draft.points || 0) + 10 })}>+</button>
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6 }}>
            Habit utama nilainya besar — fokus untuk terbiasa dulu.
          </div>
        </div>

        <div className="form-section">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <label className="form-label" style={{ margin: 0 }}>Penyempurna</label>
            <button className="text-btn" onClick={addAddon}>+ Tambah</button>
          </div>
          {(draft.addons || []).length === 0 ? (
            <div style={{ fontSize: 13, color: 'var(--muted)', padding: '8px 0' }}>
              Belum ada penyempurna. Add-on nilainya kecil — bisa dilakukan setelah habit utama terbiasa.
            </div>
          ) : (
            <div className="addon-edit-list">
              {(draft.addons || []).map((a, i) => (
                <div key={a.id} className="addon-edit-row">
                  <input className="form-input form-input-sm" value={a.name}
                    placeholder="mis. Baca Quran 3 menit"
                    onChange={(e) => updateAddon(i, { name: e.target.value })}/>
                  <input className="form-input form-input-pts" type="number" min="0" step="5"
                    value={a.points}
                    onChange={(e) => updateAddon(i, { points: Number(e.target.value) || 0 })}/>
                  <button className="icon-btn-sm" onClick={() => removeAddon(i)} aria-label="hapus">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="sheet-actions">
          {habit.id && (
            <button className="btn-danger" onClick={() => {
              if (confirm(`Hapus "${habit.group}"? Riwayat tetap tersimpan.`)) onDelete();
            }}>Hapus Habit</button>
          )}
          <button className="btn-primary" onClick={() => onSave(draft)}
            disabled={!draft.name || !draft.group}>
            Simpan
          </button>
        </div>
      </div>
    </div>
  );
}

function HabitsScreen({ state, setState }) {
  const [editing, setEditing] = React.useState(null); // habit object or 'new'

  const move = (i, dir) => {
    setState(s => {
      const arr = [...s.habits];
      const j = i + dir;
      if (j < 0 || j >= arr.length) return s;
      [arr[i], arr[j]] = [arr[j], arr[i]];
      return { ...s, habits: arr };
    });
  };

  const saveHabit = (draft) => {
    setState(s => {
      if (!draft.id || !s.habits.find(h => h.id === draft.id)) {
        // new
        const newH = { ...draft, id: draft.id || `habit-${Date.now()}` };
        return { ...s, habits: [...s.habits, newH] };
      }
      return { ...s, habits: s.habits.map(h => h.id === draft.id ? draft : h) };
    });
    setEditing(null);
  };
  const deleteHabit = (id) => {
    setState(s => ({ ...s, habits: s.habits.filter(h => h.id !== id) }));
    setEditing(null);
  };

  const totalDailyMax = state.habits.reduce((s, h) =>
    s + h.points + (h.addons || []).reduce((ss, a) => ss + a.points, 0), 0);

  return (
    <div className="screen-body">
      <div style={{ padding: '14px 4px 4px' }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, color: 'var(--ink)', margin: '0 0 4px', letterSpacing: '-0.01em' }}>
          Atur Habit
        </h1>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 12 }}>
          {state.habits.length} habit · target {totalDailyMax} poin / hari
        </div>
      </div>

      <div className="habit-list">
        {state.habits.map((h, i) => {
          const addonTotal = (h.addons || []).reduce((s, a) => s + a.points, 0);
          return (
            <div key={h.id} className="edit-card">
              <div className="edit-card-main">
                <div className="reorder-col">
                  <button className="reorder-btn" disabled={i === 0} onClick={() => move(i, -1)} aria-label="naik">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
                  </button>
                  <button className="reorder-btn" disabled={i === state.habits.length - 1} onClick={() => move(i, 1)} aria-label="turun">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                  </button>
                </div>
                <button className="edit-body" onClick={() => setEditing(h)}>
                  <span className="habit-icon" style={{ fontSize: 22 }}>{h.icon}</span>
                  <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                    <div style={{ fontWeight: 500, color: 'var(--ink)', fontSize: 15 }}>{h.group}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {h.name}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--muted-2)', marginTop: 4 }}>
                      <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{h.points} pts</span>
                      {(h.addons || []).length > 0 && (
                        <span> · {h.addons.length} penyempurna +{addonTotal}</span>
                      )}
                    </div>
                  </div>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muted-2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <button className="add-btn"
        onClick={() => setEditing({ icon: '✨', group: '', name: '', points: 50, addons: [] })}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Tambah Habit
      </button>

      <details className="settings-block">
        <summary>☁️ Backup & Sync Cloud</summary>
        <div style={{ padding: '12px 4px 0' }}>
          <SyncPanel state={state} setState={setState}/>
        </div>
      </details>

      <details className="settings-block">
        <summary>📁 Export Arsip</summary>
        <div style={{ padding: '12px 4px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="btn-secondary" onClick={() => exportToExcel(state)}>
            📊 Export ke Excel (.xlsx)
          </button>
          <button className="btn-secondary" onClick={() => {
            const today = new Date();
            exportPDFReport(new Date(today.getFullYear(), today.getMonth(), 1), state);
          }}>
            📄 Cetak Laporan PDF Bulan Ini
          </button>
        </div>
      </details>

      <details className="settings-block">
        <summary>⚙️ Pengaturan lanjutan</summary>
        <div style={{ padding: '12px 4px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="btn-secondary" onClick={() => {
            if (confirm('Kembalikan ke 11 habit default? Habit kustom Anda akan hilang. Riwayat tetap tersimpan.')) {
              setState(s => ({ ...s, habits: JSON.parse(JSON.stringify(DEFAULT_HABITS)) }));
            }
          }}>Reset Habit ke Default</button>
          <button className="btn-danger" onClick={() => {
            if (confirm('Hapus SEMUA riwayat centang? Habit tetap aman. Tindakan ini tidak bisa dibatalkan.')) {
              setState(s => ({ ...s, checks: {} }));
            }
          }}>Hapus Semua Riwayat</button>
        </div>
      </details>

      {editing && (
        <HabitEditor habit={editing}
          onSave={saveHabit}
          onDelete={() => deleteHabit(editing.id)}
          onClose={() => setEditing(null)}/>
      )}
    </div>
  );
}

Object.assign(window, { HabitsScreen, HabitEditor });