'use client';

import { Product } from '@/types/product';
import { getProductTypeLabel, PRODUCT_TYPES } from '@/types/product';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { formatDate, formatPrice } from '@/lib/utils';

interface ProductListProps {
    products: Product[];
    packageName: string;
    onEdit: (product: Product) => void;
    onDelete: (product: Product) => void;
    isLoading: boolean;
}

export default function ProductList({ products, packageName, onEdit, onDelete, isLoading }: ProductListProps) {
    if (isLoading) {
        return (
            <div className="flex justify-center items-center py-12">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
            </div>
        );
    }

    if (!products || products.length === 0) {
        return (
            <div className="text-center py-12 bg-white rounded-lg shadow">
                <p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p>
            </div>
        );
    }

    return (
        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
            <div className="px-4 py-5 sm:px-6">
                <h3 className="text-lg leading-6 font-medium text-gray-900">
                    محصولات پکیج {packageName}
                </h3>
            </div>
            <ul className="divide-y divide-gray-200">
                {products.map((product) => (
                    <li key={product.id} className="px-6 py-4 hover:bg-gray-50">
                        <div className="flex items-center justify-between">
                            <div className="flex-1 min-w-0">
                                <div className="flex items-center justify-between">
                                    <p className="text-sm font-medium text-indigo-600 truncate">
                                        {product.title || 'بدون عنوان'}
                                    </p>
                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {getProductTypeLabel(product.type)}
                                    </span>
                                </div>
                                <div className="mt-2">
                                    <p className="text-sm text-gray-900">
                                        قیمت: {formatPrice(product.price)} تومان
                                    </p>
                                    {product.descriptions && product.descriptions.length > 0 && (
                                        <div className="mt-2">
                                            <p className="text-xs text-gray-500 mb-1">ویژگی‌ها:</p>
                                            <ul className="list-disc list-inside text-xs text-gray-600 pr-4">
                                                {product.descriptions.map((desc, index) => (
                                                    <li key={index}>{desc}</li>
                                                ))}
                                            </ul>
                                        </div>
                                    )}
                                </div>
                                <div className="mt-2 text-xs text-gray-500">
                                    آخرین به‌روزرسانی: {formatDate(product.updated_at)}
                                </div>
                            </div>
                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
                                <button
                                    onClick={() => onEdit(product)}
                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
                                >
                                    <PencilIcon className="h-5 w-5" />
                                </button>
                                <button
                                    onClick={() => onDelete(product)}
                                    className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
                                >
                                    <TrashIcon className="h-5 w-5" />
                                </button>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}