'use client';

import { useState, useEffect } from 'react';
import Clock from './Clock';

interface Prayer {
  id: string;
  userId: string;
  date: string;
  text: string;
  prayFor?: string;
  answered?: boolean;
  answerDetails?: string;
  prayFrequency?: number; // 1-7 times per week
  lastPrayedFor?: string; // ISO date string
}

interface HomePageProps {
  prayers: Prayer[];
  todayCount: number;
  onStartPraying: () => void;
  onSelectPrayer: (prayer: Prayer) => void;
  userName?: string;
}

export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer, userName }: 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;
  const answeredPrayers = prayers.filter(p => p.answered).length;
  
  // Get greeting based on time of day
  const getGreeting = () => {
    const hour = new Date().getHours();
    if (hour < 12) return 'Good morning';
    if (hour < 18) return 'Good afternoon';
    return 'Good evening';
  };
  
  // Get first name from display name or email
  const getFirstName = () => {
    if (!userName) return 'friend';
    // If it's an email, get the part before @
    if (userName.includes('@')) {
      return userName.split('@')[0];
    }
    // If it's a full name, get first name
    return userName.split(' ')[0];
  };
  
  // Count active prayer requests (not answered)
  const activePrayerCount = prayers.filter(p => !p.answered).length;
  
  // Count how many active prayers were prayed for today
  const prayedTodayCount = prayers.filter(p => !p.answered && p.lastPrayedFor === today).length;
  
  // Calculate actual streak - consecutive days with prayers
  const calculateStreak = () => {
    if (prayers.length === 0) return 0;
    
    // Get all dates where user either created a prayer OR marked something as prayed for
    const activityDates = new Set<string>();
    prayers.forEach(p => {
      activityDates.add(p.date); // Date prayer was created
      if (p.lastPrayedFor) {
        activityDates.add(p.lastPrayedFor); // Date marked as prayed for
      }
    });
    
    const sortedDates = Array.from(activityDates).sort().reverse();
    let streak = 0;
    let checkDate = new Date(today);
    
    for (let i = 0; i < 365; i++) {
      const dateStr = checkDate.toISOString().split('T')[0];
      if (sortedDates.includes(dateStr)) {
        streak++;
      } else if (i === 0) {
        // If today has no activity, streak is broken
        break;
      } else {
        break;
      }
      checkDate.setDate(checkDate.getDate() - 1);
    }
    
    return streak;
  };
  
  const streak = calculateStreak();
  
  // Calculate more stats
  const avgPrayerLength = totalPrayers > 0 
    ? Math.round(prayers.reduce((sum, p) => sum + p.text.length, 0) / totalPrayers)
    : 0;
  
  const answeredPercentage = totalPrayers > 0 
    ? Math.round((answeredPrayers / totalPrayers) * 100)
    : 0;
  
  // Get most prayed for person/topic based on lastPrayedFor clicks
  const prayerForCounts: Record<string, number> = {};
  prayers.forEach(p => {
    if (p.prayFor && p.lastPrayedFor) {
      prayerForCounts[p.prayFor] = (prayerForCounts[p.prayFor] || 0) + 1;
    }
  });
  const mostPrayedFor = Object.entries(prayerForCounts).sort((a, b) => b[1] - a[1])[0];
  
  // Recent answered prayers
  const recentAnswered = prayers.filter(p => p.answered).slice(0, 3);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-4 pb-32">
      <div className="pt-24">
        {/* Animated Background Elements */}
        <div className="fixed inset-0 -z-10">
          <div className="absolute top-20 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl"></div>
          <div className="absolute bottom-20 left-10 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl"></div>
        </div>

        {/* Clock */}
        <div className="max-w-md mx-auto mb-12">
          <div className="text-center">
            <Clock />
          </div>
        </div>

        {/* Header with Personalized Greeting */}
        <div className="max-w-md mx-auto mb-12">
          <h1 className="text-4xl font-bold text-white mb-3">
            {getGreeting()}, {getFirstName()}!
          </h1>
          {activePrayerCount > 0 ? (
            <div className="text-lg text-slate-300">
              <p>
                You have <span className="font-bold text-blue-400">{activePrayerCount}</span> {activePrayerCount === 1 ? 'thing' : 'things'} that need prayer today.
              </p>
              {prayedTodayCount > 0 && (
                <p className="mt-1">
                  You've prayed for <span className="font-bold text-green-400">{prayedTodayCount}</span> of them! 🙏
                </p>
              )}
            </div>
          ) : (
            <p className="text-lg text-slate-300">
              All caught up! Start a new prayer to keep your journey going.
            </p>
          )}
          <p className="text-slate-400 mt-2">
            {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
          </p>
        </div>

        {/* Stats Grid */}
        <div className="max-w-md mx-auto mb-12">
          {/* Today's Prayers - Featured */}
          <div className="mb-4 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-6 shadow-xl border border-blue-500/20 backdrop-blur-lg">
            <div className="flex items-end justify-between">
              <div>
                <div className="text-blue-200 text-sm font-semibold mb-2">Today's Prayers</div>
                <div className="text-5xl font-bold text-white">{todayCount}</div>
              </div>
              <div className="text-4xl opacity-30">📿</div>
            </div>
          </div>

          {/* Main Stats Grid */}
          <div className="grid grid-cols-2 gap-4 mb-8">
            {/* Total Prayers */}
            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
              <div className="text-slate-400 text-xs font-semibold mb-2">Total Prayers</div>
              <div className="text-3xl font-bold text-white">{totalPrayers}</div>
              <div className="text-xs text-slate-500 mt-2">All time</div>
            </div>

            {/* Days Prayed */}
            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
              <div className="text-slate-400 text-xs font-semibold mb-2">Days Prayed</div>
              <div className="text-3xl font-bold text-white">{uniqueDays}</div>
              <div className="text-xs text-slate-500 mt-2">Consistent</div>
            </div>

            {/* Answered Prayers */}
            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
              <div className="text-slate-400 text-xs font-semibold mb-2">✅ Answered</div>
              <div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
              <div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
            </div>

            {/* Streak */}
            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
              <div className="text-slate-400 text-xs font-semibold mb-2">🔥 Streak</div>
              <div className="text-3xl font-bold text-orange-400">{streak}</div>
              <div className="text-xs text-slate-500 mt-2">consecutive days</div>
            </div>
          </div>

          {/* Secondary Stats */}
          <div className="grid grid-cols-2 gap-4 mb-8">
            {/* Avg Prayer Length */}
            <div className="bg-purple-900/20 backdrop-blur-xl rounded-xl p-4 border border-purple-500/30">
              <div className="text-purple-300 text-xs font-semibold mb-2">📊 Avg Length</div>
              <div className="text-2xl font-bold text-purple-200">{avgPrayerLength}</div>
              <div className="text-xs text-purple-400 mt-2">characters</div>
            </div>

            {/* Most Prayed For */}
            <div className="bg-pink-900/20 backdrop-blur-xl rounded-xl p-4 border border-pink-500/30">
              <div className="text-pink-300 text-xs font-semibold mb-2">💝 Most Prayed For</div>
              {mostPrayedFor ? (
                <>
                  <div className="text-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
                  <div className="text-xs text-pink-400 mt-2">{mostPrayedFor[1]} times</div>
                </>
              ) : (
                <>
                  <div className="text-sm font-bold text-pink-200">Start praying!</div>
                  <div className="text-xs text-pink-400 mt-2">Click "Mark Prayed" to build your prayer focus</div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* CTA Button */}
        <div className="max-w-md mx-auto mb-12">
          <button
            onClick={onStartPraying}
            className="w-full bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 hover:from-blue-700 hover:via-blue-600 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 flex items-center justify-center gap-2"
          >
            <span className="text-xl">✍️</span>
            <span>Start New Prayer</span>
          </button>
        </div>

        {/* Things to Pray For - Active Requests */}
        {(() => {
          const pendingPrayers = prayers.filter(p => !p.answered);
          if (pendingPrayers.length > 0) {
            return (
              <div className="max-w-md mx-auto mb-12">
                <h2 className="text-lg font-bold text-amber-400 mb-4 flex items-center gap-2">
                  <span>🙏</span> Things to Pray For
                </h2>
                <div className="bg-amber-900/20 backdrop-blur-xl rounded-xl p-5 border border-amber-500/30 hover:border-amber-400/50 transition-all">
                  <div className="text-3xl font-bold text-amber-300 mb-2">{pendingPrayers.length}</div>
                  <div className="text-sm text-amber-200 mb-4">active prayer requests</div>
                  <button
                    onClick={() => {
                      const fakeEvent = { target: { value: 'praying' } } as any;
                      // Navigate to praying tab by triggering parent
                    }}
                    className="text-xs font-semibold text-amber-300 hover:text-amber-200 transition-colors flex items-center gap-1 group"
                  >
                    <span>View All</span>
                    <span className="group-hover:translate-x-1 transition-transform">→</span>
                  </button>
                </div>
              </div>
            );
          }
          return null;
        })()}

        {/* Recent Prayers */}
        {recentPrayers.length > 0 && (
          <div className="max-w-md mx-auto mb-12">
            <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
              <span>📖</span> Recent Prayers
            </h2>
            <div className="space-y-3">
              {recentPrayers.map((prayer, idx) => (
                <button
                  key={prayer.id}
                  onClick={() => onSelectPrayer(prayer)}
                  className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
                >
                  <div className="flex items-start gap-3">
                    <div className="text-2xl">{prayer.answered ? '✅' : '📝'}</div>
                    <div className="flex-1 min-w-0">
                      {prayer.prayFor && (
                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider">
                          🙏 {prayer.prayFor}
                        </div>
                      )}
                      <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
                      <div className="text-xs text-slate-500 mt-2 flex items-center justify-between">
                        <span>{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
                        <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">Click to edit →</span>
                      </div>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Recent Answered Prayers */}
        {recentAnswered.length > 0 && (
          <div className="max-w-md mx-auto mb-12">
            <h2 className="text-lg font-bold text-green-400 mb-4 flex items-center gap-2">
              <span>✨</span> Recently Answered
            </h2>
            <div className="space-y-3">
              {recentAnswered.map((prayer) => (
                <div
                  key={prayer.id}
                  className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 hover:border-green-400/50 transition-all"
                >
                  <div className="flex items-start gap-3">
                    <div className="text-2xl">✅</div>
                    <div className="flex-1 min-w-0">
                      {prayer.prayFor && (
                        <div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider">
                          🙏 {prayer.prayFor}
                        </div>
                      )}
                      <p className="text-sm text-slate-300 line-clamp-2">{prayer.text}</p>
                      {prayer.answerDetails && (
                        <p className="text-xs text-green-400 mt-2 italic">
                          💬 "{prayer.answerDetails.substring(0, 60)}..."
                        </p>
                      )}
                      <div className="text-xs text-slate-500 mt-2">
                        {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Empty State */}
        {prayers.length === 0 && (
          <div className="max-w-md mx-auto text-center py-12">
            <div className="text-6xl mb-4 animate-bounce">🙏</div>
            <p className="text-white font-semibold mb-2">Start Your Prayer Journey</p>
            <p className="text-slate-400 mb-6">
              Create your first prayer entry and begin tracking your spiritual journey.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}