/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · component: calendar-page · genre: editorial · theme: Atelier (Dark & Light) · studied-DNA: https://inihaus.de */
import React, { useState } from 'react';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, ArrowRight, MapPin, Clock, Layers } from 'lucide-react';

export default function CalendarPage({ events, onSelectEvent, branding }) {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedCalendarEvent, setSelectedCalendarEvent] = useState(null);

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

  const monthNames = [
    'JANUAR', 'FEBRUAR', 'MÄRZ', 'APRIL', 'MAI', 'JUNI',
    'JULI', 'AUGUST', 'SEPTEMBER', 'OKTOBER', 'NOVEMBER', 'DEZEMBER'
  ];

  const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
  const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
  const todayMonth = () => setCurrentDate(new Date());

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

  const formatDateString = (day) => {
    const mStr = String(month + 1).padStart(2, '0');
    const dStr = String(day).padStart(2, '0');
    return `${year}-${mStr}-${dStr}`;
  };

  const getEventsForDay = (day) => {
    const dateStr = formatDateString(day);
    return events.filter((evt) => dateStr >= evt.start_date && dateStr <= evt.end_date);
  };

  const primaryColor = branding?.primary_color || 'var(--brand-primary)';

  return (
    <div className="space-y-6 max-w-5xl mx-auto animate-in fade-in duration-200">
      {/* Calendar Masthead Bar */}
      <div className="hallmark-panel rounded-sm p-6 sm:p-8 border border-grid flex flex-col sm:flex-row sm:items-center justify-between gap-4 font-mono">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-sm bg-subtle text-main border border-grid flex items-center justify-center font-bold">
            <CalendarIcon className="w-4 h-4 text-amber-500" />
          </div>
          <div>
            <h2 className="font-serif text-3xl sm:text-4xl font-bold uppercase tracking-tight text-main leading-none">
              {monthNames[month]} {year}
            </h2>
            <p className="text-[10px] text-muted uppercase tracking-widest mt-1">
              — INITIATIVE E.V. TERMIN- & SCHICHTÜBERSICHT —
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={todayMonth}
            className="px-3.5 py-1.5 rounded-sm text-xs font-mono font-bold bg-surface hover:bg-surface-hover text-main border border-grid transition"
          >
            [ HEUTE ]
          </button>
          <button
            onClick={prevMonth}
            className="p-1.5 rounded-sm text-muted hover:text-main bg-surface border border-grid transition"
            title="Vorheriger Monat"
          >
            <ChevronLeft className="w-4 h-4" />
          </button>
          <button
            onClick={nextMonth}
            className="p-1.5 rounded-sm text-muted hover:text-main bg-surface border border-grid transition"
            title="Nächster Monat"
          >
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Calendar Grid Container */}
      <div className="hallmark-panel rounded-sm border border-grid overflow-hidden">
        {/* Days Header */}
        <div className="grid grid-cols-7 bg-subtle border-b border-grid text-center text-xs font-mono text-muted font-bold py-3 uppercase">
          <div>MO</div><div>DI</div><div>MI</div><div>DO</div><div>FR</div><div>SA</div><div>SO</div>
        </div>

        {/* Days Cells */}
        <div className="grid grid-cols-7 auto-rows-fr divide-x divide-y divide-grid bg-surface text-xs font-mono">
          {Array.from({ length: startOffset }).map((_, i) => (
            <div key={`offset-${i}`} className="min-h-[100px] sm:min-h-[110px] p-2 bg-subtle/50 text-muted opacity-30"></div>
          ))}

          {Array.from({ length: daysInMonth }).map((_, i) => {
            const dayNum = i + 1;
            const dayEvents = getEventsForDay(dayNum);
            const isToday =
              new Date().getFullYear() === year &&
              new Date().getMonth() === month &&
              new Date().getDate() === dayNum;

            return (
              <div
                key={`day-${dayNum}`}
                className={`min-h-[100px] sm:min-h-[110px] p-2 flex flex-col justify-between transition ${
                  isToday ? 'bg-surface-hover/80 font-bold' : 'hover:bg-surface-hover/50'
                }`}
              >
                <div className="flex items-center justify-between mb-1">
                  <span
                    className={`w-5 h-5 rounded-sm flex items-center justify-center font-mono text-xs ${
                      isToday
                        ? 'bg-main text-paper font-bold shadow-sm'
                        : 'text-muted'
                    }`}
                  >
                    {dayNum}
                  </span>
                  {dayEvents.length > 0 && (
                    <span className="text-[9px] font-mono text-muted">
                      {dayEvents.length} {dayEvents.length === 1 ? 'Event' : 'Events'}
                    </span>
                  )}
                </div>

                <div className="space-y-1.5 overflow-y-auto max-h-[70px] no-scrollbar">
                  {dayEvents.map((evt) => {
                    const isSelected = selectedCalendarEvent?.id === evt.id;
                    return (
                      <button
                        key={`evt-${evt.id}`}
                        onClick={() => setSelectedCalendarEvent(evt)}
                        style={{
                          backgroundColor: isSelected ? primaryColor : `${primaryColor}15`,
                          borderColor: `${primaryColor}40`,
                          color: isSelected ? '#ffffff' : primaryColor
                        }}
                        className={`w-full text-left px-2 py-1 rounded-sm text-[10px] font-mono font-bold border truncate block hover:brightness-110 transition shadow-sm ${
                          evt.is_active === false ? 'opacity-50 line-through' : ''
                        }`}
                      >
                        {evt.title}
                      </button>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Selected Event Detail Drawer */}
      {selectedCalendarEvent && (
        <div className="hallmark-panel rounded-sm p-6 border border-grid flex flex-col sm:flex-row sm:items-center justify-between gap-4 font-mono animate-in fade-in duration-200">
          <div className="space-y-2">
            <div className="flex flex-wrap items-center gap-2 text-xs text-muted">
              <span className="flex items-center gap-1 bg-subtle px-2 py-0.5 rounded-sm border border-grid font-bold text-main">
                <Clock className="w-3 h-3 text-muted" />
                {new Date(selectedCalendarEvent.start_date).toLocaleDateString('de-DE')} — {new Date(selectedCalendarEvent.end_date).toLocaleDateString('de-DE')}
              </span>
              {selectedCalendarEvent.location && (
                <span className="flex items-center gap-1 text-muted">
                  <MapPin className="w-3 h-3" />
                  {selectedCalendarEvent.location}
                </span>
              )}
            </div>

            <h3 className="font-serif text-2xl font-bold uppercase text-main">
              {selectedCalendarEvent.title}
            </h3>

            {selectedCalendarEvent.description && (
              <p className="text-xs font-sans text-muted max-w-xl">
                {selectedCalendarEvent.description}
              </p>
            )}
          </div>

          <div className="flex items-center gap-2 shrink-0">
            <button
              onClick={() => onSelectEvent(selectedCalendarEvent.id)}
              style={{ backgroundColor: primaryColor }}
              className="px-5 py-2 rounded-sm text-xs font-mono font-bold text-white transition flex items-center gap-1.5 hover:brightness-110 shadow-sm"
            >
              SCHICHTPLAN ÖFFNEN <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}