// frontend/components/calendar/EvPopover.tsx — 이벤트 상세 팝오버
"use client";
import { Icon } from "@/components/Icon";
import { fmt } from "@/lib/calendar/time";
import type { CalEvent, Calendar } from "@/lib/calendar/types";

export function EvPopover({
  ev,
  x,
  y,
  cal,
  onClose,
  onMeet,
}: {
  ev: CalEvent;
  x: number;
  y: number;
  cal: Calendar;
  onClose: () => void;
  onMeet: (ev: CalEvent) => void;
}) {
  let left = x;
  let top = y;
  if (typeof window !== "undefined") {
    if (left + 300 > window.innerWidth - 12) left = window.innerWidth - 312;
    if (top + 280 > window.innerHeight - 12) top = window.innerHeight - 292;
  }
  return (
    <>
      <div className="dp-backdrop" onClick={onClose} />
      <div className={"epop tint-" + cal.tone} style={{ left: left + "px", top: top + "px" }}>
        <div className="epop-bar" />
        <div className="epop-title">{ev.title}</div>
        <div className="epop-row">
          <Icon name="clock" /> {fmt(ev.start)} – {fmt(ev.end)}
        </div>
        <div className="epop-row">
          <Icon name="cal" />{" "}
          <span className="epop-cat">
            <span className="pdot" /> {cal.name}
          </span>
        </div>
        {ev.loc && (
          <div className="epop-row">
            <Icon name="pin" /> {ev.loc}
          </div>
        )}
        {ev.people.length > 0 && (
          <div className="epop-row">
            <Icon name="users" /> {ev.people.join(", ")}
          </div>
        )}
        {ev.note && <div className="epop-note">{ev.note}</div>}
        {ev.actions.length > 0 && (
          <div className="epop-actions">
            <div className="epa-head">
              <Icon name="spark" />
              내가 맡기로 한 일<span className="n">{ev.actions.length}</span>
            </div>
            {ev.actions.map((a, i) => (
              <div className="epa-row" key={i}>
                <span className="epa-check">
                  <Icon name="tick" w={3} />
                </span>
                <span className="epa-text">{a.text}</span>
                <span className="epa-who">{a.when}</span>
              </div>
            ))}
            <button className="epa-add">
              <Icon name="check" />내 작업에 추가
            </button>
          </div>
        )}
        {ev.has_meeting && (
          <button className="meet-open" onClick={() => onMeet(ev)}>
            <Icon name="spark" />
            {ev.meet_label}
          </button>
        )}
        <div className="epop-acts">
          <button className="edit">
            <Icon name="pen" /> 편집
          </button>
          <button className="del" aria-label="삭제">
            <Icon name="trash" />
          </button>
        </div>
      </div>
    </>
  );
}
