// Thin strip under the top bar while reading a plan: which plan and day, one dot
// per chapter of today's reading (filled = read, ringed = the chapter on screen),
// and the translation. Tapping it opens the plan sheet. When you've wandered off
// today's chapters (e.g. following a cross-reference) it offers a way back.
export default function PlanStrip({ info, translation, inPlan, notice, onOpen, onJoin, onDot, onBackToDay }) {
  if (!info && !notice) return null;
  return (
    <div className="mx-auto flex max-w-2xl flex-col gap-1 px-3 pt-2 font-sans">
      {notice && <p className="rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-xs text-[var(--r-accent)]">{notice}</p>}
      {info && (
        <div className="rounded-xl bg-[var(--r-bar)] px-3 py-2 text-xs text-[var(--r-sub)]">
          <button type="button" onClick={inPlan ? onOpen : onJoin} className="flex w-full items-center justify-between gap-3 text-left">
            <span className="truncate font-medium text-[var(--r-text)]">{info.plan.title} · Day {info.dayIndex + 1}</span>
            <span className="shrink-0">{inPlan ? translation : 'Open plan'}</span>
          </button>
          {inPlan && info.position === 0 && (
            <button type="button" onClick={onBackToDay} className="mt-1.5 rounded-full border border-[var(--r-line)] px-3 py-1 text-[11px] text-[var(--r-accent)] hover:bg-black/5">
              Back to today’s reading
            </button>
          )}
          {inPlan && info.position > 0 && (
            <div className="mt-1.5 flex items-center gap-1.5">
              {info.refs.map((r, i) => {
                const key = `${r.book}.${r.chapter}`;
                const read = info.readSet.has(key);
                const current = i + 1 === info.position;
                return (
                  <button key={key} type="button" onClick={() => onDot(r)} aria-label={`Go to chapter ${r.chapter}`}
                    className={`h-2.5 w-2.5 rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'} ${current ? 'ring-2 ring-[var(--r-line)]' : ''}`} />
                );
              })}
              <span className="ml-auto">{info.done ? 'Day read' : `${info.position} of ${info.total}`}</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}