'use client';

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

interface HomePageProps {
  prayers: Prayer[];
  todayCount: number;
  onStartPraying: () => void;
}

export default function HomePage({ prayers, todayCount, onStartPraying }: HomePageProps) {
  const today = new Date().toISOString().split('T')[0];
  const todayPrayers = prayers.filter(p => p.date === today);
  const recentPrayers = prayers.slice(0, 5);
  const totalPrayers = prayers.length;
  const uniqueDays = new Set(prayers.map(p => p.date)).size;

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-24">
      {/* Header */}
      <div className="max-w-md mx-auto mt-6 mb-8">
        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Prayer Journal</h1>
        <p className="text-slate-600 dark:text-slate-400">
          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
        </p>
      </div>

      {/* Today's Stats */}
      <div className="max-w-md mx-auto mb-8 space-y-3">
        <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
          <div className="text-sm font-semibold text-slate-600 dark:text-slate-400 mb-1">Today's Prayers</div>
          <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{todayCount}</div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Total Prayers</div>
            <div className="text-2xl font-bold text-slate-900 dark:text-white">{totalPrayers}</div>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Days Prayed</div>
            <div className="text-2xl font-bold text-slate-900 dark:text-white">{uniqueDays}</div>
          </div>
        </div>
      </div>

      {/* CTA Button */}
      <div className="max-w-md mx-auto mb-8">
        <button
          onClick={onStartPraying}
          className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 rounded-lg transition-all shadow-md hover:shadow-lg"
        >
          + New Prayer
        </button>
      </div>

      {/* Recent Prayers */}
      {recentPrayers.length > 0 && (
        <div className="max-w-md mx-auto">
          <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Recent Prayers</h2>
          <div className="space-y-3">
            {recentPrayers.map((prayer) => (
              <div key={prayer.id} className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
                {prayer.prayFor && (
                  <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-1 uppercase tracking-wide">
                    {prayer.prayFor}
                  </div>
                )}
                <p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-2">{prayer.text}</p>
                <div className="text-xs text-slate-500 dark:text-slate-500 mt-2">
                  {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Empty State */}
      {prayers.length === 0 && (
        <div className="max-w-md mx-auto text-center py-12">
          <div className="text-4xl mb-3">🙏</div>
          <p className="text-slate-600 dark:text-slate-400 mb-4">Start your prayer journal today</p>
          <p className="text-sm text-slate-500 dark:text-slate-500">
            Create your first prayer entry and begin tracking your spiritual journey.
          </p>
        </div>
      )}
    </div>
  );
}