import { prisma } from '@/lib/prisma';
import Link from 'next/link';
import { Plus, BookOpen, Mic2, Trash2, Edit } from 'lucide-react';
import DeleteBlogButton from '@/components/DeleteBlogButton';
import DeleteInterviewButton from '@/components/DeleteInterviewButton';

async function getData() {
  const posts = await prisma.blogPost.findMany({ orderBy: { createdAt: 'desc' } });
  const interviews = await prisma.interview.findMany({ orderBy: { createdAt: 'desc' } });
  return { posts, interviews };
}

export default async function BlogCMSPage() {
  const { posts, interviews } = await getData();

  return (
    <div>
      <div className="flex justify-between items-end mb-8">
        <div>
          <h1 className="text-3xl font-bold text-white mb-2">CMS Blog & Interviews</h1>
          <p className="text-slate-400">Gérez le contenu éditorial de la plateforme.</p>
        </div>
        <div className="flex gap-4">
          <Link href="/blog/new" className="btn-verify flex items-center gap-2">
            <Plus className="w-4 h-4" />
            Nouvel Article
          </Link>
          <Link href="/interview/new" className="btn-verify bg-indigo-600 flex items-center gap-2">
            <Plus className="w-4 h-4" />
            Nouvelle Interview
          </Link>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-8">
        {/* Blog Posts Section */}
        <div className="card">
          <div className="flex items-center gap-2 mb-6">
            <BookOpen className="text-indigo-400 w-5 h-5" />
            <h2 className="text-xl font-bold text-white">Articles de Blog ({posts.length})</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Titre</th>
                  <th>Auteur</th>
                  <th>Date</th>
                  <th className="text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                {posts.map((post) => (
                  <tr key={post.id}>
                    <td>
                      <div className="font-medium text-white">{post.title}</div>
                      <div className="text-xs text-slate-500 truncate max-w-xs">{post.excerpt}</div>
                    </td>
                    <td className="text-sm text-slate-300">{post.author}</td>
                    <td className="text-sm text-slate-500">{new Date(post.createdAt).toLocaleDateString('fr-FR')}</td>
                    <td className="text-right">
                      <div className="flex justify-end gap-2">
                        <Link href={`/blog/edit/${post.id}`} className="p-2 text-slate-400 hover:text-indigo-400">
                          <Edit className="w-5 h-5" />
                        </Link>
                        <DeleteBlogButton id={post.id} />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Interviews Section */}
        <div className="card">
          <div className="flex items-center gap-2 mb-6">
            <Mic2 className="text-emerald-400 w-5 h-5" />
            <h2 className="text-xl font-bold text-white">Interviews ({interviews.length})</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Interviewé</th>
                  <th>Entreprise / Rôle</th>
                  <th>Type</th>
                  <th className="text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                {interviews.map((interview) => (
                  <tr key={interview.id}>
                    <td>
                      <div className="font-medium text-white">{interview.guestName}</div>
                      <div className="text-xs text-slate-500 truncate max-w-xs">{interview.title}</div>
                    </td>
                    <td>
                      <div className="text-sm text-slate-300">{interview.companyName}</div>
                      <div className="text-xs text-slate-500">{interview.role}</div>
                    </td>
                    <td>
                      <span className={`badge ${interview.type === 'VIDEO' ? 'badge-verified' : 'badge-pending'}`}>
                        {interview.type}
                      </span>
                    </td>
                    <td className="text-right">
                      <div className="flex justify-end gap-2">
                        <Link href={`/interview/edit/${interview.id}`} className="p-2 text-slate-400 hover:text-emerald-400">
                          <Edit className="w-5 h-5" />
                        </Link>
                        <DeleteInterviewButton id={interview.id} />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}
