import { useState, useEffect, useRef } from "react";
import { useTranslation } from 'react-i18next';

export default function DateCalendarPopup({ date, onClose }) {
  const { t } = useTranslation();
  const months = t('calendar.months', { returnObjects: true });
  const days = t('calendar.days', { returnObjects: true });
  const ref = useRef(null);
  const d = new Date(date);
  const [year, setYear] = useState(d.getFullYear());
  const [month, setMonth] = useState(d.getMonth());

  useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [onClose]);

  const firstDay = new Date(year, month, 1).getDay();
  const offset = firstDay === 0 ? 6 : firstDay - 1;
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < offset; i++) cells.push(null);
  for (let i = 1; i <= daysInMonth; i++) cells.push(i);

  const isSameDay = (day) =>
    d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;

  return (
    <div className="f-date-calendar" ref={ref}>
      <div className="f-cal-header">
        <button onClick={() => setMonth(m => m === 0 ? (setYear(y => y - 1), 11) : m - 1)}>‹</button>
        <span>{months[month]} {year}</span>
        <button onClick={() => setMonth(m => m === 11 ? (setYear(y => y + 1), 0) : m + 1)}>›</button>
      </div>
      <div className="f-cal-grid">
        {days.map(d => <div key={d} className="f-cal-day-name">{d}</div>)}
        {cells.map((day, i) =>
          day ? (
            <div key={i}
              className={`f-cal-day${isSameDay(day) ? " f-cal-selected" : ""}`}
            >
              {day}
            </div>
          ) : <div key={i} />
        )}
      </div>
    </div>
  );
}