'use client';

import { useMemo } from 'react';
import { useI18n } from './I18nProvider';

type MonthView = {
  label: string;
  days: { label: string; date: string; blocked: boolean; isFiller: boolean }[];
};

function buildMonths(monthCount: number, blocked: Set<string>): MonthView[] {
  const months: MonthView[] = [];
  const base = new Date();
  base.setUTCDate(1);

  for (let i = 0; i < monthCount; i += 1) {
    const monthDate = new Date(base);
    monthDate.setUTCMonth(base.getUTCMonth() + i);
    const year = monthDate.getUTCFullYear();
    const month = monthDate.getUTCMonth();
    const label = monthDate.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });

    const firstDay = new Date(Date.UTC(year, month, 1));
    const startWeekday = firstDay.getUTCDay(); // 0=Sun
    const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();

    const days: MonthView['days'] = [];
    for (let f = 0; f < startWeekday; f += 1) {
      days.push({ label: '', date: '', blocked: false, isFiller: true });
    }
    for (let d = 1; d <= daysInMonth; d += 1) {
      const date = new Date(Date.UTC(year, month, d));
      const iso = date.toISOString().slice(0, 10);
      days.push({ label: String(d), date: iso, blocked: blocked.has(iso), isFiller: false });
    }

    months.push({ label, days });
  }

  return months;
}

export default function AvailabilityCalendar({
  blockedDates,
  months = 2,
  disabled = false,
}: {
  blockedDates: string[];
  months?: number;
  disabled?: boolean;
}) {
  const { t } = useI18n();
  const blockedSet = useMemo(() => new Set(blockedDates), [blockedDates]);
  const monthViews = useMemo(() => buildMonths(months, blockedSet), [months, blockedSet]);

  return (
    <div style={{ display: 'grid', gap: 16, opacity: disabled ? 0.45 : 1 }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
        <span className="badge secondary">{t('availabilityLegendBooked')}</span>
      </div>
      <div style={{ display: 'grid', gap: 12, gridTemplateColumns: `repeat(${months}, minmax(180px, 1fr))` }}>
        {monthViews.map((month) => (
          <div key={month.label} className="panel" style={{ padding: 12 }}>
            <div style={{ fontWeight: 600, marginBottom: 8 }}>{month.label}</div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(7, 1fr)',
                gap: 6,
                fontSize: 12,
                textAlign: 'center',
              }}
            >
              {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d) => (
                <div key={d} style={{ color: '#94a3b8', fontWeight: 600 }}>
                  {d}
                </div>
              ))}
              {month.days.map((day, idx) => (
                <div
                  key={`${month.label}-${idx}`}
                  style={{
                    height: 32,
                    borderRadius: 8,
                    background: day.isFiller ? 'transparent' : day.blocked ? 'rgba(248,113,113,0.2)' : 'rgba(148,163,184,0.1)',
                    color: day.isFiller ? 'transparent' : day.blocked ? '#ef4444' : '#e2e8f0',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  aria-label={day.date ? `${day.date}${day.blocked ? ' (booked)' : ''}` : undefined}
                >
                  {day.label}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}