// Päikeseraja talu — UI components (icons, calendar, modal)

const Icon = ({ name }) => {
  const paths = {
    sauna: <><path d="M4 20 L4 9 L12 4 L20 9 L20 20" /><path d="M9 20 L9 13 L15 13 L15 20" /><path d="M12 8 V11" /></>,
    barrel: <><ellipse cx="12" cy="12" rx="8" ry="5" /><path d="M4 12 V18 a8 5 0 0 0 16 0 V12" /><path d="M9 7 V17 M15 7 V17" /></>,
    bed: <><path d="M3 10 V18 M21 10 V18" /><path d="M3 14 H21" /><path d="M3 10 H21 V14" /><path d="M7 10 V8 a2 2 0 0 1 2 -2 H15 a2 2 0 0 1 2 2 V10" /></>,
    pond: <><path d="M3 14 c3 -2 6 -2 9 0 s6 2 9 0" /><path d="M3 18 c3 -2 6 -2 9 0 s6 2 9 0" /><path d="M3 10 c3 -2 6 -2 9 0 s6 2 9 0" /></>,
    fire: <><path d="M12 21 c-4 0 -7 -3 -7 -7 c0 -3 2 -5 4 -7 c0 3 2 4 3 4 c0 -4 -1 -6 1 -8 c1 4 6 5 6 11 c0 4 -3 7 -7 7 z" /></>,
    kitchen: <><rect x="4" y="3" width="16" height="18" rx="1.5" /><path d="M4 9 H20" /><circle cx="8" cy="6" r="0.5" fill="currentColor" /><circle cx="11" cy="6" r="0.5" fill="currentColor" /><path d="M8 13 H16 M8 17 H13" /></>,
    ball: <><circle cx="12" cy="12" r="9" /><path d="M3 12 c4 -2 14 -2 18 0" /><path d="M12 3 c-2 4 -2 14 0 18" /><path d="M5 6 c4 4 10 4 14 0" /></>,
    trail: <><path d="M5 21 c2 -4 4 -7 4 -10 c0 -4 6 -4 6 -8" /><circle cx="9" cy="11" r="1" /><circle cx="13" cy="6" r="1" /><circle cx="6" cy="18" r="1" /></>,
    terrace: <><path d="M3 10 L12 4 L21 10" /><path d="M5 10 V21 H19 V10" /><path d="M5 14 H19 M5 18 H19" /></>,
    car: <><path d="M3 14 V18 H21 V14 L19 9 H5 Z" /><circle cx="7" cy="18" r="1.5" /><circle cx="17" cy="18" r="1.5" /></>,
    wifi: <><path d="M2 9 c5 -5 15 -5 20 0" /><path d="M5 13 c4 -4 10 -4 14 0" /><path d="M8 17 c2 -2 6 -2 8 0" /><circle cx="12" cy="20" r="0.8" fill="currentColor" /></>,
    privacy: <><path d="M12 3 L4 7 V12 c0 5 4 8 8 9 c4 -1 8 -4 8 -9 V7 Z" /><path d="M9 12 L11 14 L15 10" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7 V12 L15 14" /></>,
    paw: <><circle cx="6" cy="11" r="1.6" /><circle cx="10" cy="7" r="1.6" /><circle cx="14" cy="7" r="1.6" /><circle cx="18" cy="11" r="1.6" /><path d="M8 16 c0 -3 2 -4 4 -4 s4 1 4 4 c0 2 -2 3 -4 3 s-4 -1 -4 -3 z" /></>,
    smoke: <><circle cx="12" cy="12" r="9" /><path d="M6 6 L18 18" /></>,
    star: <><path d="M12 3 L14.5 9 L21 9.6 L16 13.8 L17.5 20 L12 16.7 L6.5 20 L8 13.8 L3 9.6 L9.5 9 Z" /></>,
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
};

// ---------- Calendar ----------
function Calendar({ t, selected, onSelect, bookedSet }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const [view, setView] = React.useState({ y: today.getFullYear(), m: today.getMonth() });
  const monthName = t.booking.months[view.m];
  const firstDay = new Date(view.y, view.m, 1);
  const lastDay = new Date(view.y, view.m + 1, 0);
  const startWeekday = (firstDay.getDay() + 6) % 7; // monday=0
  const daysCount = lastDay.getDate();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysCount; d++) cells.push(d);

  const ymd = (d) => {
    const dt = new Date(view.y, view.m, d);
    return dt.toISOString().slice(0,10);
  };

  const prev = () => setView((v) => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 });
  const next = () => setView((v) => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 });

  const inRange = (key) => {
    if (!selected.from || !selected.to) return false;
    return key > selected.from && key < selected.to;
  };
  const isSelected = (key) => key === selected.from || key === selected.to;
  const isPast = (d) => new Date(view.y, view.m, d) < today;

  return (
    <div className="calendar">
      <div className="cal-head">
        <h3>{monthName} {view.y}</h3>
        <div className="cal-nav">
          <button onClick={prev} aria-label="previous">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M15 6 L9 12 L15 18"/></svg>
          </button>
          <button onClick={next} aria-label="next">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9 6 L15 12 L9 18"/></svg>
          </button>
        </div>
      </div>
      <div className="cal-grid">
        {t.booking.dow.map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (d == null) return <div key={i} className="cal-day empty" />;
          const key = ymd(d);
          const past = isPast(d);
          const booked = bookedSet.has(key);
          const sel = isSelected(key);
          const range = inRange(key);
          const todayDot = (new Date(view.y, view.m, d)).toDateString() === today.toDateString();
          let cls = 'cal-day';
          if (past) cls += ' past';
          else if (booked) cls += ' booked';
          else cls += ' available';
          if (sel) cls += ' selected';
          else if (range) cls += ' in-range';
          if (todayDot) cls += ' today';
          return (
            <div
              key={i}
              className={cls}
              onClick={() => { if (!past && !booked) onSelect(key); }}
            >
              {d}
            </div>
          );
        })}
      </div>
      <div className="cal-legend">
        <span><span className="cal-dot av"></span>{t.booking.legend.available}</span>
        <span><span className="cal-dot bk"></span>{t.booking.legend.booked}</span>
        <span><span className="cal-dot sl"></span>{t.booking.legend.selected}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Calendar });