prayer-app/src/components/CalendarView.tsx

'use client';

import React, { useState, useMemo } from 'react';

interface Prayer {
  id: string;
  date: string;
  text: string;
  prayFor?: string;
  lastPrayedFor?: string;
}

interface CalendarViewProps {
  prayers: Prayer[];
  onDayClick: (date: string) => void;
}

export default function CalendarView({ prayers, onDayClick }: CalendarViewProps) {
  const [currentMonth, setCurrentMonth] = useState(new Date());

  const daysWithEntries = useMemo(() => {
    return new Set(prayers.map(p => p.date));
  }, [prayers]);

  const daysWithPrayedFor = useMemo(() => {
    const dates = new Set<string>();
    prayers.forEach(p => {
      if (p.lastPrayedFor) {
        dates.add(p.lastPrayedFor);
      }
    });
    return dates;
  }, [prayers]);

  const getDaysInMonth = (date: Date) => {
    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (date: Date) => {
    return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
  };

  const daysInMonth = getDaysInMonth(currentMonth);
  const firstDay = getFirstDayOfMonth(currentMonth);
  const prevMonth = () =>
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
  const nextMonth = () =>
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));

  const days = [];
  for (let i = 0; i < firstDay; i++) {
    days.push(null);
  }
  for (let i = 1; i <= daysInMonth; i++) {
    days.push(i);
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
            Haver
          </h1>
          <p className="text-slate-600 dark:text-slate-400">
            Click on days with entries to view them
          </p>
        </div>

        {/* Calendar */}
        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
          {/* Month Navigation */}
          <div className="flex justify-between items-center mb-6">
            <button
              onClick={prevMonth}
              className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
            >
              ← Previous
            </button>
            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
              {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
            </h2>
            <button
              onClick={nextMonth}
              className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
            >
              Next →
            </button>
          </div>

          {/* Day Headers */}
          <div className="grid grid-cols-7 gap-2 mb-4">
            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
              <div key={day} className="text-center font-semibold text-slate-600 dark:text-slate-400 py-2">
                {day}
              </div>
            ))}
          </div>

          {/* Calendar Days */}
          <div className="grid grid-cols-7 gap-2">
            {days.map((day, index) => {
              const dateString =
                day !== null
                  ? `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
                  : null;
              const hasEntry = dateString ? daysWithEntries.has(dateString) : false;
              const hasPrayedFor = dateString ? daysWithPrayedFor.has(dateString) : false;
              const prayerCount = dateString
                ? prayers.filter(p => p.date === dateString).length
                : 0;
              const prayedForCount = dateString
                ? prayers.filter(p => p.lastPrayedFor === dateString).length
                : 0;

              // Determine color based on activity type
              let bgColor = 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600';
              if (hasEntry && hasPrayedFor) {
                // Both activities - purple (combination)
                bgColor = 'bg-purple-500 text-white hover:bg-purple-600 shadow-md';
              } else if (hasEntry) {
                // Only prayer entries - blue
                bgColor = 'bg-blue-500 text-white hover:bg-blue-600 shadow-md';
              } else if (hasPrayedFor) {
                // Only prayed for - green
                bgColor = 'bg-green-500 text-white hover:bg-green-600 shadow-md';
              }

              return (
                <button
                  key={index}
                  onClick={() => dateString && onDayClick(dateString)}
                  disabled={!day}
                  className={`aspect-square rounded-lg font-medium transition-all ${
                    !day
                      ? 'bg-transparent cursor-default'
                      : bgColor
                  }`}
                >
                  <div className="h-full flex flex-col items-center justify-center">
                    {day && (
                      <>
                        <span className="text-lg">{day}</span>
                        {(hasEntry || hasPrayedFor) && (
                          <div className="text-xs mt-1 opacity-90 text-center">
                            {hasEntry && <div>{prayerCount} entry</div>}
                            {hasPrayedFor && <div>{prayedForCount} prayed</div>}
                          </div>
                        )}
                      </>
                    )}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Color Legend */}
        <div className="mt-6 bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-3">Legend</h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-blue-500"></div>
              <span className="text-slate-700 dark:text-slate-300">Prayer Entry</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-green-500"></div>
              <span className="text-slate-700 dark:text-slate-300">Prayed For</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-purple-500"></div>
              <span className="text-slate-700 dark:text-slate-300">Both</span>
            </div>
          </div>
        </div>

        {/* Stats */}
        <div className="mt-8 grid grid-cols-2 gap-4">
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
            <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Total Entries</p>
            <p className="text-3xl font-bold text-slate-900 dark:text-white">{prayers.length}</p>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
            <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Days with Entries</p>
            <p className="text-3xl font-bold text-slate-900 dark:text-white">
              {daysWithEntries.size}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}