'use client';

import React from 'react';
import { Document } from '@/lib/api-docs';
import {
    DocumentTextIcon,
    PencilSquareIcon,
    TrashIcon,
    CalendarIcon
} from "@heroicons/react/24/outline";
import { format, parseISO } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import { Card } from "@/components/ui";

interface DocumentListProps {
    documents: Document[];
    onEdit: (doc: Document) => void;
    onDelete: (id: string) => void;
}

export default function DocumentList({ documents, onEdit, onDelete }: DocumentListProps) {
    if (documents.length === 0) {
        return (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-12 text-center">
                <DocumentTextIcon className="w-12 h-12 text-zinc-300 mx-auto mb-4" />
                <h3 className="text-lg font-bold text-zinc-900 dark:text-white">Nenhum documento ainda</h3>
                <p className="text-zinc-500 max-w-xs mx-auto mt-2">
                    Comece criando seu primeiro documento de texto para sua agência.
                </p>
            </div>
        );
    }

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {documents.map((doc) => (
                <Card
                    key={doc.id}
                    className="group hover:shadow-xl transition-all border-2 border-transparent hover:border-brand-500/20"
                >
                    <div className="flex flex-col h-full">
                        <div className="flex justify-between items-start mb-4">
                            <div className="p-3 bg-brand-50 dark:bg-brand-500/10 rounded-xl">
                                <DocumentTextIcon className="w-6 h-6 text-brand-600 dark:text-brand-400" />
                            </div>
                            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-all">
                                <button
                                    onClick={() => onEdit(doc)}
                                    className="p-2 text-zinc-400 hover:text-brand-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
                                >
                                    <PencilSquareIcon className="w-4 h-4" />
                                </button>
                                <button
                                    onClick={() => onDelete(doc.id)}
                                    className="p-2 text-zinc-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-colors"
                                >
                                    <TrashIcon className="w-4 h-4" />
                                </button>
                            </div>
                        </div>

                        <h3 className="text-base font-bold text-zinc-900 dark:text-white mb-2 line-clamp-1">
                            {doc.title || 'Documento sem título'}
                        </h3>

                        <p className="text-sm text-zinc-500 line-clamp-3 mb-6 flex-1">
                            {doc.content ? doc.content.replace(/<[^>]*>/g, '').substring(0, 150) : 'Sem conteúdo...'}
                        </p>

                        <div className="flex items-center gap-2 pt-4 border-t border-zinc-100 dark:border-zinc-800">
                            <CalendarIcon className="w-3.5 h-3.5 text-zinc-400" />
                            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">
                                {format(parseISO(doc.updated_at), "dd 'de' MMMM", { locale: ptBR })}
                            </span>
                            {doc.status === 'draft' && (
                                <span className="ml-auto text-[10px] font-black uppercase tracking-widest text-amber-500 bg-amber-50 dark:bg-amber-500/10 px-2 py-0.5 rounded-full">
                                    Rascunho
                                </span>
                            )}
                        </div>
                    </div>
                </Card>
            ))}
        </div>
    );
}