import { Database } from '@/types_db'
import Link from 'next/link'
import { Book, Clock, Download } from 'lucide-react'

type Deck = Database['public']['Tables']['decks']['Row']

export default function DeckList({ decks }: { decks: Deck[] }) {
    if (decks.length === 0) {
        return (
            <div className="text-center py-12 border border-dashed border-gray-800 rounded-lg bg-surface-dark/50">
                <h3 className="mt-2 text-sm font-semibold text-gray-200">No decks found</h3>
                <p className="mt-1 text-sm text-gray-400">Get started by creating a new deck.</p>
                <div className="mt-6">
                    {/* Action to create deck could go here in future */}
                    <button className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-900 bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        Create Deck
                    </button>
                </div>
            </div>
        )
    }

    return (
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {decks.map((deck) => (
                <div
                    key={deck.id}
                    className="relative group bg-surface-dark border border-gray-800 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 hover:shadow-glow"
                >
                    <div className="h-32 bg-gray-900 relative">
                        {deck.cover_image_url ? (
                            <img
                                src={deck.cover_image_url}
                                alt={deck.title || 'Deck cover'}
                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                            />
                        ) : (
                            <div
                                className="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center"
                                style={{ background: deck.gradient || undefined }}
                            >
                                <Book className="h-10 w-10 text-gray-600" />
                            </div>
                        )}
                    </div>

                    <div className="p-5">
                        <h3 className="text-lg font-bold text-white mb-2 line-clamp-1">
                            {deck.title || 'Untitled Deck'}
                        </h3>
                        <p className="text-gray-400 text-sm mb-4 line-clamp-2 min-h-[40px]">
                            {deck.description || 'No description provided.'}
                        </p>

                        <div className="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-800">
                            <div className="flex items-center gap-1">
                                <Download size={14} />
                                <span>{deck.downloads || 0}</span>
                            </div>
                            {deck.last_studied_at && (
                                <div className="flex items-center gap-1">
                                    <Clock size={14} />
                                    <span>{new Date(deck.last_studied_at).toLocaleDateString()}</span>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}