// Shared UI components

function Avatar({ person, size = 36 }) {
  if (!person) return null;
  return (
    <div className="avatar" style={{
      background: person.color,
      width: size, height: size,
      fontSize: size * 0.38,
    }}>
      {person.name[0]}
    </div>
  );
}

function PersonChip({ person, compact }) {
  if (!person) return null;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: compact ? "2px 8px 2px 3px" : "3px 10px 3px 3px",
      background: "white",
      border: `1px solid ${person.color}33`,
      borderRadius: 999,
      fontSize: compact ? 12 : 13,
      fontWeight: 600,
      color: person.color,
    }}>
      <span style={{
        width: compact ? 18 : 22, height: compact ? 18 : 22,
        borderRadius: "50%",
        background: person.color,
        color: "white",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        fontSize: compact ? 10 : 12, fontWeight: 700,
      }}>{person.name[0]}</span>
      {person.name}
    </span>
  );
}

function useNow(intervalMs = 1000) {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setNow(new Date()), intervalMs);
    return () => clearInterval(t);
  }, [intervalMs]);
  return now;
}

function Confetti({ trigger }) {
  const [pieces, setPieces] = React.useState([]);
  React.useEffect(() => {
    if (!trigger) return;
    const colors = ["#1a5490","#f4c430","#c76b4a","#7ba05b","#c13584","#ffffff"];
    const newPieces = [];
    for (let i = 0; i < 40; i++) {
      newPieces.push({
        id: trigger + "-" + i,
        left: Math.random() * 100,
        color: colors[Math.floor(Math.random() * colors.length)],
        duration: 1 + Math.random() * 1.5,
        delay: Math.random() * 0.3,
        rotate: Math.random() * 360,
        shape: Math.random() > 0.5 ? "50%" : "2px",
      });
    }
    setPieces(newPieces);
    const t = setTimeout(() => setPieces([]), 3000);
    return () => clearTimeout(t);
  }, [trigger]);
  return (
    <>
      {pieces.map(p => (
        <div key={p.id} className="confetti-piece" style={{
          left: p.left + "vw",
          top: "-20px",
          background: p.color,
          borderRadius: p.shape,
          animation: `confettiFall ${p.duration}s ${p.delay}s ease-in forwards`,
          transform: `rotate(${p.rotate}deg)`,
        }} />
      ))}
    </>
  );
}

function Checkbox({ done, onClick, color }) {
  return (
    <div
      className={"check" + (done ? " done" : "")}
      onClick={onClick}
      style={done && color ? { background: color, borderColor: color } : {}}
      role="button"
      aria-checked={done}
    >
      {done && (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M3 8.5L6.5 12L13 4.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </div>
  );
}

function SantoriniScene() {
  return (
    <svg viewBox="0 0 200 80" style={{ width: "100%", display: "block" }}>
      {/* zee */}
      <rect x="0" y="55" width="200" height="25" fill="#4a90bf"/>
      <path d="M0 55 Q 10 52, 20 55 T 40 55 T 60 55 T 80 55 T 100 55 T 120 55 T 140 55 T 160 55 T 180 55 T 200 55 L 200 80 L 0 80 Z" fill="#1a5490" opacity="0.3"/>
      {/* huisjes */}
      <rect x="10" y="35" width="20" height="22" fill="#fff"/>
      <path d="M8 35 L 20 28 L 32 35 Z" fill="#1a5490"/>
      <rect x="35" y="30" width="18" height="27" fill="#fff"/>
      <circle cx="44" cy="30" r="5" fill="#1a5490"/>
      <rect x="58" y="38" width="16" height="19" fill="#fff"/>
      <path d="M56 38 L 66 32 L 76 38 Z" fill="#1a5490"/>
      <rect x="80" y="32" width="22" height="25" fill="#fff"/>
      <circle cx="91" cy="32" r="5" fill="#1a5490"/>
      <rect x="107" y="40" width="14" height="17" fill="#fff"/>
      <rect x="125" y="34" width="20" height="23" fill="#fff"/>
      <path d="M123 34 L 135 27 L 147 34 Z" fill="#1a5490"/>
      <rect x="150" y="38" width="18" height="19" fill="#fff"/>
      <circle cx="159" cy="38" r="4" fill="#1a5490"/>
      <rect x="172" y="34" width="20" height="23" fill="#fff"/>
      <path d="M170 34 L 182 28 L 194 34 Z" fill="#1a5490"/>
      {/* zon */}
      <circle cx="165" cy="15" r="9" fill="#f4c430"/>
    </svg>
  );
}

Object.assign(window, { Avatar, PersonChip, useNow, Confetti, Checkbox, SantoriniScene });