import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Package, Plus, Search, Filter, Eye, Edit, Trash2, Grid, List } from 'lucide-react';
import { Table } from '../components/ui/Table';
import { Button } from '../components/ui/Button';
import { Pagination } from '../components/ui/Pagination';
import { PermissionWrapper } from '../components/common/PermissionWrapper';
import { TableColumn } from '../types';
import { PageContainer, PageTitle, StatValue } from '../components/ui/Typography';

const allProducts = [
    { id: 1, name: 'لپ‌تاپ ایسوس', category: 'کامپیوتر', price: '۲۵,۰۰۰,۰۰۰', stock: 15, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۵' },
    { id: 2, name: 'گوشی سامسونگ گلکسی', category: 'موبایل', price: '۱۸,۰۰۰,۰۰۰', stock: 8, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۴' },
    { id: 3, name: 'هدفون بی‌سیم', category: 'لوازم جانبی', price: '۲,۵۰۰,۰۰۰', stock: 0, status: 'ناموجود', createdAt: '۱۴۰۲/۰۸/۱۳' },
    { id: 4, name: 'کیبورد گیمینگ', category: 'لوازم جانبی', price: '۳,۲۰۰,۰۰۰', stock: 25, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۲' },
    { id: 5, name: 'مانیتور ۲۴ اینچ', category: 'نمایشگر', price: '۱۲,۰۰۰,۰۰۰', stock: 5, status: 'کم موجود', createdAt: '۱۴۰۲/۰۸/۱۱' },
    { id: 6, name: 'ماوس بی‌سیم', category: 'لوازم جانبی', price: '۱,۸۰۰,۰۰۰', stock: 30, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۰' },
    { id: 7, name: 'تبلت آیپد', category: 'تبلت', price: '۳۵,۰۰۰,۰۰۰', stock: 3, status: 'کم موجود', createdAt: '۱۴۰۲/۰۸/۰۹' },
    { id: 8, name: 'هارد اکسترنال', category: 'ذخیره‌سازی', price: '۴,۵۰۰,۰۰۰', stock: 12, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۰۸' },
];

const Products = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 6;

    const columns: TableColumn[] = [
        { key: 'name', label: 'نام محصول', sortable: true },
        { key: 'category', label: 'دسته‌بندی', sortable: true },
        { key: 'price', label: 'قیمت', sortable: true },
        {
            key: 'stock',
            label: 'موجودی',
            render: (value) => (
                <span className={`font-medium ${value === 0 ? 'text-red-600 dark:text-red-400' :
                    value < 10 ? 'text-yellow-600 dark:text-yellow-400' :
                        'text-green-600 dark:text-green-400'
                    }`}>
                    {value}
                </span>
            )
        },
        {
            key: 'status',
            label: 'وضعیت',
            render: (value) => (
                <span className={`px-2 py-1 rounded-full text-xs font-medium ${value === 'موجود'
                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                    : value === 'کم موجود'
                        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                        : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                    }`}>
                    {value}
                </span>
            )
        },
        { key: 'createdAt', label: 'تاریخ افزودن', sortable: true },
        {
            key: 'actions',
            label: 'عملیات',
            render: (_, row) => (
                <div className="flex space-x-2">
                    <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => handleEditProduct(row)}
                    >
                        ویرایش
                    </Button>
                    <PermissionWrapper permission={22}>
                        <Button
                            size="sm"
                            variant="danger"
                            onClick={() => handleDeleteProduct(row.id)}
                        >
                            حذف
                        </Button>
                    </PermissionWrapper>
                </div>
            )
        }
    ];

    const filteredProducts = allProducts.filter((product: any) =>
        product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        product.category.toLowerCase().includes(searchTerm.toLowerCase())
    );

    const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const paginatedProducts = filteredProducts.slice(startIndex, startIndex + itemsPerPage);

    const handleAddProduct = () => {
        console.log('Adding new product');
    };

    const handleEditProduct = (product: any) => {
        console.log('Editing product:', product);
    };

    const handleDeleteProduct = (productId: number) => {
        if (confirm('آیا از حذف این محصول اطمینان دارید؟')) {
            console.log('Deleting product:', productId);
        }
    };

    return (
        <PageContainer>
            <PageTitle>مدیریت محصولات</PageTitle>
            <p className="text-gray-600 dark:text-gray-400 mt-1">
                {filteredProducts.length} محصول یافت شد
            </p>

            <div className="flex items-center space-x-4">
                <Button variant="secondary">
                    <Filter className="h-4 w-4 ml-2" />
                    فیلتر
                </Button>
                <PermissionWrapper permission={25}>
                    <Button onClick={handleAddProduct}>
                        <Plus className="h-4 w-4 ml-2" />
                        افزودن محصول
                    </Button>
                </PermissionWrapper>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <Package className="h-8 w-8 text-blue-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل محصولات</p>
                            <StatValue>{allProducts.length}</StatValue>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <Package className="h-8 w-8 text-green-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">محصولات موجود</p>
                            <StatValue>
                                {allProducts.filter(p => p.status === 'موجود').length}
                            </StatValue>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <Package className="h-8 w-8 text-red-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">محصولات ناموجود</p>
                            <StatValue>
                                {allProducts.filter(p => p.status === 'ناموجود').length}
                            </StatValue>
                        </div>
                    </div>
                </div>
            </div>

            <div className="card p-6">
                <div className="mb-6">
                    <div className="relative">
                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <Search className="h-5 w-5 text-gray-400" />
                        </div>
                        <input
                            type="text"
                            placeholder="جستجو در محصولات..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="input pr-10 max-w-md"
                        />
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
                    <Table
                        columns={columns}
                        data={paginatedProducts}
                        loading={false}
                    />
                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        onPageChange={setCurrentPage}
                        itemsPerPage={itemsPerPage}
                        totalItems={filteredProducts.length}
                    />
                </div>
            </div>
        </PageContainer>
    );
};

export default Products; 