import React from 'react';
import { FileText, CheckCircle2 } from 'lucide-react';
import { createClient } from '@/lib/supabase/server';

export const revalidate = 0;

export default async function ActivosPage() {
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  let documents: Array<{
    id: string;
    type?: string;
    title?: string;
    content?: string;
    version?: number;
    created_at?: string;
    status?: string;
  }> = [];

  if (user) {
    // Relies on RLS: only documents for the caller's tenant
    const { data, error } = await supabase
      .from('documents')
      .select('id,type,title,content,version,created_at,status')
      .eq('status', 'approved')
      .order('created_at', { ascending: false });
    if (error) {
      console.error('Error fetching documents:', error.message);
    } else {
      documents = data ?? [];
    }
  }

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-white">
          Biblioteca de Activos & Entregables
        </h2>
        <p className="text-sm text-gray-400 mt-1">
          Documentos, copys, calendarios y briefs producidos por los agentes de IA
          y aprobados por el equipo en Slack. Filtrado por tenant (RLS).
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {documents.length === 0 ? (
          <div className="col-span-3 bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
            <FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
            <p className="text-base font-medium text-gray-300">
              No hay activos aprobados todavía.
            </p>
            <p className="text-xs text-gray-400 mt-1">
              Los activos generados por los agentes aparecerán aquí tras ser
              validados en Slack.
            </p>
          </div>
        ) : (
          documents.map((doc) => (
            <div
              key={doc.id}
              className="bg-[#111827] border border-gray-800 rounded-xl p-5 flex flex-col justify-between"
            >
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="uppercase text-[10px] font-bold px-2 py-0.5 rounded bg-gray-800 text-gray-300">
                    {doc.type}
                  </span>
                  <span className="flex items-center gap-1 text-[11px] text-emerald-400">
                    <CheckCircle2 className="w-3 h-3" /> Aprobado
                  </span>
                </div>
                <h4 className="font-bold text-white text-base mb-2">{doc.title}</h4>
                <p className="text-xs text-gray-400 line-clamp-4">{doc.content}</p>
              </div>
              <div className="pt-4 border-t border-gray-800/80 mt-4 text-[11px] text-gray-400 flex justify-between">
                <span>Versión v{doc.version}</span>
                <span>
                  {doc.created_at
                    ? new Date(doc.created_at).toLocaleDateString('es-ES')
                    : '—'}
                </span>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}