import React from 'react';
import { FileText, CheckCircle2 } from 'lucide-react';

export const revalidate = 0;

export default async function ActivosPage() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://supabase.4ventures.es';
  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';

  let documents: any[] = [];
  try {
    const res = await fetch(`${supabaseUrl}/rest/v1/documents?select=*&order=created_at.desc`, {
      headers: {
        apikey: anonKey,
        Authorization: `Bearer ${anonKey}`
      },
      cache: 'no-store'
    });
    if (res.ok) {
      documents = await res.json();
    }
  } catch (e) {
    console.error('Error fetching documents:', e);
  }

  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.
        </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>{new Date(doc.created_at).toLocaleDateString('es-ES')}</span>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}