'use client';

import React from 'react';
import { HandHeart, Sparkles, CheckCircle2, Target } from 'lucide-react';

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
  prayedDates?: string[]; // Array of dates when prayed for
}

interface ThingsToPrayForProps {
  prayers: Prayer[];
  onEdit: (prayer: Prayer) => void;
  onMarkPrayed: (prayerId: string) => void;
}

export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: ThingsToPrayForProps) {
  // Filter for unanswered prayers
  const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) => 
    new Date(b.date).getTime() - new Date(a.date).getTime()
  );

  // Group by prayer for (people/topics)
  const groupedByTopic: Record<string, Prayer[]> = {};
  thingsToPrayFor.forEach(prayer => {
    const topic = prayer.prayFor || 'Other Concerns';
    if (!groupedByTopic[topic]) {
      groupedByTopic[topic] = [];
    }
    groupedByTopic[topic].push(prayer);
  });

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

      <div className="max-w-2xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <img src="/icon-192x192.png" alt="Haver icon" className="w-12 h-12 mx-auto mb-3 rounded" />
          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
            <span className="inline-flex items-center gap-2 justify-center">
              <HandHeart className="w-7 h-7 text-blue-400" />
              Things to Pray For
            </span>
          </h1>
          <p className="text-slate-400 text-lg">
            {thingsToPrayFor.length} active {thingsToPrayFor.length === 1 ? 'prayer request' : 'prayer requests'}
          </p>
        </div>

        {thingsToPrayFor.length === 0 ? (
            <div className="text-center py-12">
            <Sparkles className="w-12 h-12 mb-4 text-blue-400 animate-pulse mx-auto" />
            <p className="text-white font-semibold mb-2">All Caught Up!</p>
            <p className="text-slate-400">
              You've marked all your prayers as answered. Praise God for His faithfulness!
            </p>
          </div>
        ) : (
          <div className="space-y-8">
            {Object.entries(groupedByTopic).map(([topic, prayersByTopic]) => (
              <div key={topic}>
                <div className="flex items-center gap-2 mb-4">
                  <div className="h-1 flex-1 bg-gradient-to-r from-blue-500/50 to-transparent rounded"></div>
                  <h2 className="text-xl font-bold text-blue-400 px-4 inline-flex items-center gap-2">
                    <Target className="w-5 h-5" /> {topic}
                  </h2>
                  <div className="h-1 flex-1 bg-gradient-to-l from-blue-500/50 to-transparent rounded"></div>
                </div>
                <div className="space-y-3">
                  {prayersByTopic.map((prayer, idx) => {
                    const daysAgo = Math.floor(
                      (new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
                    );
                    const today = new Date().toISOString().split('T')[0];
                    const prayedToday = prayer.prayedDates?.includes(today) || prayer.lastPrayedFor === today;
                    
                    return (
                      <div
                        key={prayer.id}
                        className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 transition-all hover:shadow-xl hover:bg-slate-800/80"
                      >
                        <div className="flex items-start gap-3">
                          <HandHeart className="w-7 h-7 text-blue-400 mt-0.5" />
                          <div className="flex-1 min-w-0">
                            <p className="text-base text-slate-200 line-clamp-3 mb-3">
                              {prayer.text}
                            </p>
                            <div className="flex items-center justify-between gap-3">
                              <span className="text-xs text-slate-500">
                                {daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
                              </span>
                              <div className="flex items-center gap-2">
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    onMarkPrayed(prayer.id);
                                  }}
                                  disabled={prayedToday}
                                  className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
                                    prayedToday
                                      ? 'bg-green-900/40 text-green-300 border border-green-500/30 cursor-not-allowed'
                                      : 'bg-blue-900/40 text-blue-300 border border-blue-500/30 hover:bg-blue-900/60 hover:border-blue-400/50'
                                  }`}
                                >
                                  {prayedToday ? (
                                    <span className="inline-flex items-center gap-1.5">
                                      <CheckCircle2 className="w-4 h-4" /> Prayed Today
                                    </span>
                                  ) : (
                                    <span className="inline-flex items-center gap-1.5">
                                      <HandHeart className="w-4 h-4" /> Mark Prayed
                                    </span>
                                  )}
                                </button>
                                <button
                                  onClick={() => onEdit(prayer)}
                                  className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-700/50 text-slate-300 border border-slate-600/50 hover:bg-slate-700/80 hover:border-slate-500/50 transition-all"
                                >
                                  Edit
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}