frontend/app/dashboard/prayer/page.tsx

'use client';

import { useState } from 'react';
import { Heart, Plus, Clock, CheckCircle, Sparkles, Users, Lock, Globe, ChevronRight } from 'lucide-react';

const prayerCategories = [
  { name: 'Personal', icon: Lock, count: 12, color: 'purple' },
  { name: 'Family', icon: Heart, count: 8, color: 'rose' },
  { name: 'Community', icon: Users, count: 5, color: 'blue' },
  { name: 'World', icon: Globe, count: 3, color: 'emerald' },
];

const recentPrayers = [
  { title: 'Guidance for career decision', category: 'Personal', date: 'Today', answered: false },
  { title: 'Healing for mom\'s health', category: 'Family', date: 'Yesterday', answered: false },
  { title: 'Peace in our community', category: 'Community', date: 'Dec 19', answered: false },
  { title: 'Found a new job!', category: 'Personal', date: 'Dec 15', answered: true },
  { title: 'Safe travels for dad', category: 'Family', date: 'Dec 10', answered: true },
];

const colorClasses: Record<string, { bg: string; border: string; text: string }> = {
  purple: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400' },
  rose: { bg: 'bg-rose-500/10', border: 'border-rose-500/30', text: 'text-rose-400' },
  blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400' },
  emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400' },
};

export default function PrayerPage() {
  const [activeTab, setActiveTab] = useState<'active' | 'answered'>('active');

  const activePrayers = recentPrayers.filter((p) => !p.answered);
  const answeredPrayers = recentPrayers.filter((p) => p.answered);

  return (
    <div className="flex-1 overflow-y-auto">
      {/* Header */}
      <div className="sticky top-0 z-10 bg-[#0a0a0a]/90 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-4xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-rose-500/10 border border-rose-500/30 flex items-center justify-center">
                <Heart className="w-5 h-5 text-rose-400" />
              </div>
              <div>
                <h1 className="text-xl font-semibold text-white">Prayer</h1>
                <p className="text-sm text-neutral-500">Track your prayers with the Healer Agent</p>
              </div>
            </div>
            <button className="flex items-center gap-2 px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-medium transition-colors">
              <Plus className="w-4 h-4" />
              New Prayer
            </button>
          </div>

          {/* Tabs */}
          <div className="flex gap-2">
            <button
              onClick={() => setActiveTab('active')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
                activeTab === 'active'
                  ? 'bg-white/10 text-white'
                  : 'text-neutral-400 hover:text-white hover:bg-white/5'
              }`}
            >
              <Clock className="w-4 h-4" />
              Active ({activePrayers.length})
            </button>
            <button
              onClick={() => setActiveTab('answered')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
                activeTab === 'answered'
                  ? 'bg-white/10 text-white'
                  : 'text-neutral-400 hover:text-white hover:bg-white/5'
              }`}
            >
              <CheckCircle className="w-4 h-4" />
              Answered ({answeredPrayers.length})
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-6 py-8">
        {/* Categories */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
          {prayerCategories.map((category) => {
            const colors = colorClasses[category.color];
            return (
              <button
                key={category.name}
                className={`p-4 rounded-xl ${colors.bg} border ${colors.border} hover:brightness-110 transition-all text-left`}
              >
                <category.icon className={`w-5 h-5 ${colors.text} mb-2`} />
                <div className="text-white font-medium">{category.name}</div>
                <div className="text-neutral-500 text-sm">{category.count} prayers</div>
              </button>
            );
          })}
        </div>

        {/* Prayer List */}
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-white mb-4">
            {activeTab === 'active' ? 'Active Prayers' : 'Answered Prayers'}
          </h2>
          <div className="space-y-3">
            {(activeTab === 'active' ? activePrayers : answeredPrayers).map((prayer, i) => (
              <button
                key={i}
                className="w-full p-4 rounded-xl bg-white/[0.02] border border-white/10 hover:border-rose-500/30 transition-all text-left group"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      {prayer.answered ? (
                        <CheckCircle className="w-4 h-4 text-emerald-400" />
                      ) : (
                        <Clock className="w-4 h-4 text-amber-400" />
                      )}
                      <span className="text-xs text-neutral-500">{prayer.date}</span>
                      <span className={`text-xs px-2 py-0.5 rounded-full ${
                        colorClasses[prayerCategories.find((c) => c.name === prayer.category)?.color || 'purple'].bg
                      } ${
                        colorClasses[prayerCategories.find((c) => c.name === prayer.category)?.color || 'purple'].text
                      }`}>
                        {prayer.category}
                      </span>
                    </div>
                    <h3 className="text-white font-medium">{prayer.title}</h3>
                  </div>
                  <ChevronRight className="w-5 h-5 text-neutral-500 group-hover:text-rose-400 transition-colors" />
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* AI Suggestion */}
        <div className="p-6 rounded-2xl bg-gradient-to-br from-rose-500/10 to-purple-500/10 border border-rose-500/20">
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-xl bg-rose-500/20 border border-rose-500/30 flex items-center justify-center shrink-0">
              <Sparkles className="w-6 h-6 text-rose-400" />
            </div>
            <div>
              <h3 className="text-white font-semibold mb-1">Healer Suggestion</h3>
              <p className="text-neutral-400 text-sm leading-relaxed">
                You can ask me to pray with you, help you process difficult emotions,
                or provide Scripture-based encouragement for what you're going through.
              </p>
              <button className="mt-3 text-rose-400 hover:text-rose-300 text-sm font-medium transition-colors">
                Talk to Healer Agent →
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}