// Playbook list view + detail entry.
const { useState: useStatePB, useEffect: useEffectPB, useMemo: useMemoPB } = React;

function PlaybooksView({ openCity }) {
  const store = useStore();
  const user = store.getCurrentUser();
  const [openId, setOpenId] = useStatePB(null);

  useEffectPB(() => {
    // auto-open most recent if exists & none selected
    if (!openId && user) {
      const arr = store.getPlaybooks();
      if (arr.length) setOpenId(arr[0].id);
    }
  }, [user?.id]);

  if (!user) return (
    <div className="page-empty">
      <div className="empty-icon">◉</div>
      <div className="empty-title">Sign in to start planning</div>
      <div className="empty-sub">Playbooks let you collect every flight, stay, contact and TODO into a single timeline — automatically organized by Claude.</div>
    </div>
  );

  const playbooks = store.getPlaybooks();
  const open = playbooks.find(p => p.id === openId);

  return (
    <div className="playbooks-view">
      <PlaybookSidebar
        playbooks={playbooks}
        openId={openId}
        onOpen={setOpenId}
        onCreate={() => {
          const pb = store.createPlaybook(`Trip ${playbooks.length + 1}`);
          setOpenId(pb.id);
        }}
      />
      {open ? (
        <PlaybookDetail playbook={open} openCity={openCity}/>
      ) : (
        <div className="page-empty side-empty">
          <div className="empty-icon">📔</div>
          <div className="empty-title">No playbook open</div>
          <div className="empty-sub">Create one to start clipping research.</div>
        </div>
      )}
    </div>
  );
}

function PlaybookSidebar({ playbooks, openId, onOpen, onCreate }) {
  return (
    <div className="pb-sidebar">
      <div className="pb-sidebar-head">
        <div className="loc-kicker">PLAYBOOKS</div>
        <button className="pb-new" onClick={onCreate}>+ New</button>
      </div>
      <div className="pb-list">
        {playbooks.map(pb => (
          <button key={pb.id} className={`pb-list-item ${pb.id === openId ? 'on' : ''}`}
            onClick={() => onOpen(pb.id)}>
            <div className="pb-list-title">{pb.title}</div>
            <div className="pb-list-meta">
              {pb.destinations.length} {pb.destinations.length === 1 ? 'place' : 'places'} ·
              {' '}{pb.snips.length} {pb.snips.length === 1 ? 'snip' : 'snips'}
            </div>
            <div className="pb-list-dests">
              {pb.destinations.slice(0, 3).map(d => d.label).join(' → ') || <em>no destinations</em>}
            </div>
          </button>
        ))}
        {!playbooks.length && (
          <div className="pb-empty-mini">No playbooks yet. Hit + New.</div>
        )}
      </div>
    </div>
  );
}

window.PlaybooksView = PlaybooksView;