// Destination manager — add/remove stops, edit dates
const { useState: useStateDM } = React;

function DestinationManager({ playbook, openCity }) {
  const store = useStore();
  const [adding, setAdding] = useStateDM(false);
  const [label, setLabel] = useStateDM('');
  const [arrival, setArrival] = useStateDM('');
  const [departure, setDeparture] = useStateDM('');

  const addManual = () => {
    if (!label.trim()) return;
    store.addDestination(playbook.id, { label: label.trim(), arrival, departure });
    setLabel(''); setArrival(''); setDeparture(''); setAdding(false);
  };

  const onUpdate = (d, patch) => {
    const arr = playbook.destinations.map(x => x.id === d.id ? { ...x, ...patch } : x);
    store.updatePlaybook(playbook.id, { destinations: arr });
  };

  return (
    <div className="dest-manager">
      <div className="dest-rows">
        {playbook.destinations.map((d, i) => (
          <div key={d.id} className="dest-row">
            <div className="dest-row-num">{String(i + 1).padStart(2, '0')}</div>
            <div className="dest-row-main">
              <div className="dest-row-label">{d.label}</div>
              <div className="dest-row-dates">
                <input type="date" className="settings-input dest-date" value={d.arrival || ''} onChange={e => onUpdate(d, { arrival: e.target.value })}/>
                <span className="muted">→</span>
                <input type="date" className="settings-input dest-date" value={d.departure || ''} onChange={e => onUpdate(d, { departure: e.target.value })}/>
              </div>
            </div>
            <div className="dest-row-actions">
              {d.cityId && <button className="loc-tag-btn" onClick={() => openCity?.(d.cityId)}>View on map</button>}
              <button className="loc-tag-btn" onClick={() => store.removeDestination(playbook.id, d.id)}>Remove</button>
            </div>
          </div>
        ))}
        {!playbook.destinations.length && (
          <div className="muted" style={{ padding: '20px 0' }}>No destinations yet. Click hubs on the map to add them, or add manually below.</div>
        )}
      </div>
      {adding ? (
        <div className="dest-add-form">
          <input className="settings-input" placeholder="Label, e.g. Lisbon, Portugal" value={label} onChange={e => setLabel(e.target.value)}/>
          <input type="date" className="settings-input" value={arrival} onChange={e => setArrival(e.target.value)}/>
          <input type="date" className="settings-input" value={departure} onChange={e => setDeparture(e.target.value)}/>
          <button className="ask-btn" onClick={addManual}>Add</button>
          <button className="loc-tag-btn" onClick={() => setAdding(false)}>Cancel</button>
        </div>
      ) : (
        <button className="ask-btn" onClick={() => setAdding(true)}>+ Add manual stop</button>
      )}
    </div>
  );
}

function GoalManager({ playbook }) {
  const store = useStore();
  const [text, setText] = useStateDM('');
  const [date, setDate] = useStateDM('');
  return (
    <div className="goal-manager">
      <div className="goal-add">
        <input className="settings-input" placeholder="e.g. Renew passport" value={text} onChange={e => setText(e.target.value)}/>
        <input type="date" className="settings-input" value={date} onChange={e => setDate(e.target.value)}/>
        <button className="ask-btn" onClick={() => { if (text.trim()) { store.addGoal(playbook.id, { text: text.trim(), date }); setText(''); setDate(''); } }}>+ Add</button>
      </div>
      <div className="goal-list">
        {playbook.goals.map(g => (
          <div key={g.id} className={`goal-row ${g.status === 'done' ? 'done' : ''}`}>
            <button className="goal-check" onClick={() => store.updateGoal(playbook.id, g.id, { status: g.status === 'done' ? 'open' : 'done' })}>
              {g.status === 'done' ? '✓' : ''}
            </button>
            <div className="goal-text">{g.text}</div>
            {g.date && <div className="goal-date">{g.date}</div>}
            <button className="snip-x" onClick={() => store.deleteGoal(playbook.id, g.id)}>×</button>
          </div>
        ))}
        {!playbook.goals.length && <div className="muted">No goals yet — what's on your TODO?</div>}
      </div>
    </div>
  );
}

window.DestinationManager = DestinationManager;
window.GoalManager = GoalManager;