import { getReports } from '@/app/actions/moderation';
import ReportActionButtons from '@/components/ReportActionButtons';
import ModerationSuspensionButton from '@/components/ModerationSuspensionButton';
import { Flag, MessageCircle, User, Calendar } from 'lucide-react';

export default async function ModerationPage() {
  const reports = await getReports();

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2 flex items-center gap-3">
            <Flag className="text-red-500" />
            Modération des Messages
        </h1>
        <p className="text-slate-400">Gérer les signalements de contenus inappropriés dans les discussions.</p>
      </div>

      <div className="space-y-6">
        {reports.length === 0 ? (
          <div className="card p-10 text-center text-slate-500">
            Aucun signalement en attente.
          </div>
        ) : (
          reports.map((report) => (
            <div key={report.id} className={`card border-l-4 ${report.status === 'PENDING' ? 'border-red-500' : report.status === 'RESOLVED' ? 'border-green-500' : 'border-slate-600'}`}>
              <div className="flex flex-col md:flex-row gap-6">
                {/* 1. Report Info */}
                <div className="md:w-1/3 space-y-4">
                  <div className="flex items-center gap-2 text-slate-400 text-sm">
                    <Calendar className="w-4 h-4" />
                    {new Date(report.createdAt).toLocaleString('fr-FR')}
                  </div>
                  
                  <div>
                    <div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Signalé par</div>
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 font-bold text-xs">
                        {report.reporter.name.charAt(0)}
                      </div>
                      <div>
                        <div className="text-sm font-bold text-white">{report.reporter.name}</div>
                        <div className="text-xs text-slate-500">{report.reporter.email}</div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Raison invoquée</div>
                    <p className="text-sm text-slate-300 italic">"{report.reason}"</p>
                  </div>

                  <div className="pt-2">
                    <span className={`badge ${
                      report.status === 'PENDING' ? 'badge-pending' : 
                      report.status === 'RESOLVED' ? 'badge-verified' : 
                      'bg-slate-700 text-slate-300'
                    }`}>
                      {report.status === 'PENDING' ? 'En attente' : 
                       report.status === 'RESOLVED' ? 'Résolu' : 
                       'Rejeté'}
                    </span>
                  </div>
                </div>

                {/* 2. Conversation History */}
                <div className="flex-1 bg-slate-900/40 rounded-xl border border-slate-800 flex flex-col overflow-hidden">
                  <div className="bg-slate-800/50 p-3 border-b border-slate-700 flex items-center justify-between">
                    <div className="flex items-center gap-2 text-indigo-400">
                      <MessageCircle className="w-4 h-4" />
                      <span className="text-xs font-bold uppercase tracking-widest text-slate-300">Historique de la discussion</span>
                    </div>
                    {report.message.conversation.business && (
                      <div className="text-[10px] text-slate-500 font-medium">
                        Shop: <span className="text-indigo-400">{report.message.conversation.business.name}</span>
                      </div>
                    )}
                  </div>
                  
                  <div className="flex-1 overflow-y-auto max-h-[400px] p-4 space-y-3 bg-slate-950/20">
                    {report.message.conversation.messages.map((msg: any) => {
                      const isReported = msg.id === report.messageId;
                      const senderName = msg.sender.name;
                      
                      return (
                        <div key={msg.id} className={`flex flex-col ${isReported ? 'bg-red-500/10 border-red-500/30' : 'bg-slate-800/40 border-slate-700/50'} border rounded-lg p-3 transition-colors`}>
                          <div className="flex items-center justify-between mb-1">
                            <span className={`text-[10px] font-bold uppercase tracking-tighter ${isReported ? 'text-red-400' : 'text-slate-400'}`}>
                              {senderName}
                            </span>
                            <span className="text-[9px] text-slate-500">
                              {new Date(msg.createdAt).toLocaleString('fr-FR', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit' })}
                            </span>
                          </div>
                          <div className={`text-sm ${isReported ? 'text-white font-medium' : 'text-slate-300'}`}>
                            {msg.content}
                          </div>
                          {isReported && (
                            <div className="mt-2 text-[9px] flex items-center gap-1 text-red-500 font-bold uppercase">
                              <Flag className="w-3 h-3" />
                              Message Signalé
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>

                  {report.status === 'PENDING' && (
                    <div className="p-4 bg-slate-800/30 border-t border-slate-700">
                      <div className="flex flex-col md:flex-row justify-between gap-4">
                        <div>
                            <div className="mb-3 text-[10px] text-slate-500 font-bold uppercase">Résoudre le signalement</div>
                            <ReportActionButtons reportId={report.id} />
                        </div>
                        <div>
                            <div className="mb-3 text-[10px] text-slate-500 font-bold uppercase">Sanctionner l'auteur</div>
                            <ModerationSuspensionButton 
                                userId={report.message.senderId} 
                                userName={report.message.sender.name}
                                isSuspended={!!report.message.sender.isSuspended}
                            />
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
