'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-16">
                <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
            </div>
        );
    }

    if (!products || products.length === 0) {
        return (
            <div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
                <div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
                    <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                    </svg>
                </div>
                <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ محصولی برای پکیج {packageName} یافت نشد</p>
            </div>
        );
    }

    return (
        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                    محصولات پکیج {packageName}
                </h3>
            </div>
            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                {products.map((product) => (
                    <li key={product.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
                        <div className="flex items-start justify-between gap-4">
                            <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-2 flex-wrap">
                                    <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                        {product.title || 'بدون عنوان'}
                                    </p>
                                    {product.is_best_seller && (
                                        <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
                                            پرفروش
                                        </span>
                                    )}
                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                        {getProductTypeLabel(product.type)}
                                    </span>
                                    <span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                        #{product.sort_order ?? 0}
                                    </span>
                                </div>
                                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                                    <span className="font-medium text-gray-900 dark:text-gray-100">{formatPrice(product.price)} تومان</span>
                                    {product.discounted_price && <span>تخفیف: {product.discounted_price}</span>}
                                    {product.daily_price && <span>روزانه: {product.daily_price}</span>}
                                    {product.discount && <span>{product.discount}</span>}
                                </div>
                                {product.descriptions && product.descriptions.length > 0 && (
                                    <div className="mt-2 flex flex-wrap gap-1.5">
                                        {product.descriptions.map((desc, index) => (
                                            <span key={index} className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">
                                                {desc}
                                            </span>
                                        ))}
                                    </div>
                                )}
                                <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
                                    {formatDate(product.updated_at)}
                                </p>
                            </div>
                            <div className="flex items-center gap-1 flex-shrink-0">
                                <button
                                    onClick={() => onEdit(product)}
                                    className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                                >
                                    <PencilIcon className="h-4 w-4" />
                                </button>
                                <button
                                    onClick={() => onDelete(product)}
                                    className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                                >
                                    <TrashIcon className="h-4 w-4" />
                                </button>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}
