'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { usersApi } from '@/lib/api/users';
import { packagesApi } from '@/lib/api/packages';
import UserSearch from '@/components/admin/users/UserSearch';
import UserInfo from '@/components/admin/users/UserInfo';
import UserProducts from '@/components/admin/users/UserProducts';
import UserEditForm from '@/components/admin/users/UserEditForm';
import PackageSelector from '@/components/admin/users/PackageSelector';
import PageHeader from '@/components/admin/PageHeader';
import StepIndicator from '@/components/admin/StepIndicator';
import ConfirmDialog from '@/components/admin/ConfirmDialog';
import { showToast } from '@/components/Toast';
import { User, Product, UpdateUserProfileData } from '@/types/user';
import { PackageName } from '@/types/package';
import { formatPrice, getProductTypeLabel } from '@/lib/utils';
import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';

export default function UsersPage() {
    const { token } = useAuth();
    const [user, setUser] = useState<User | null>(null);
    const [products, setProducts] = useState<Product[]>([]);
    const [packages, setPackages] = useState<PackageName[]>([]);
    const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [isEditing, setIsEditing] = useState(false);

    useEffect(() => {
        if (token) {
            loadPackages();
        }
    }, [token]);

    useEffect(() => {
        if (token && selectedPackage) {
            loadProducts(selectedPackage);
        }
    }, [selectedPackage, token]);

    const loadPackages = async () => {
        try {
            const data = await packagesApi.getAllPackages(token!);
            setPackages(data);
            if (data.length > 0 && !selectedPackage) {
                setSelectedPackage(data[0].name!);
            }
        } catch (err) {
            console.error('Failed to load packages:', err);
            setError('خطا در دریافت لیست پکیج‌ها');
        }
    };

    const loadProducts = async (packageName: string) => {
        try {
            const data = await usersApi.getProductsByPackage(packageName, token!);
            setProducts(data);
        } catch (err) {
            console.error('Failed to load products:', err);
            setError('خطا در دریافت محصولات');
        }
    };

    const handleSearch = async (searchTerm: string) => {
        if (!selectedPackage) {
            setError('لطفا ابتدا یک پکیج انتخاب کنید');
            return;
        }

        setIsLoading(true);
        setError(null);
        setUser(null);

        try {
            const userData = await usersApi.getUserStatus(searchTerm, selectedPackage, token!);
            setUser(userData);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در دریافت اطلاعات کاربر');
        } finally {
            setIsLoading(false);
        }
    };

    const handleSubscribe = async (productId: number) => {
        if (!user) return;
        const identifier = user.email || user.mobile;
        if (!identifier) {
            setError('کاربر فاقد ایمیل یا شماره موبایل است');
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            await usersApi.subscribeUser(identifier, productId, token!);
            showToast('success', 'اشتراک با موفقیت اضافه شد');
            if (selectedPackage) {
                const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
                setUser(userData);
            }
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در افزودن اشتراک');
        } finally {
            setIsLoading(false);
        }
    };

    const handleUnsubscribe = async (productId: number) => {
        if (!user) return;
        const identifier = user.email || user.mobile;
        if (!identifier) {
            setError('کاربر فاقد ایمیل یا شماره موبایل است');
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            await usersApi.unsubscribeUser(identifier, productId, token!);
            showToast('success', 'اشتراک با موفقیت لغو شد');
            if (selectedPackage) {
                const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
                setUser(userData);
            }
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در لغو اشتراک');
        } finally {
            setIsLoading(false);
        }
    };

    const handleEditSubmit = async (data: UpdateUserProfileData) => {
        if (!user) return;
        const identifier = user.email || user.mobile;
        if (!identifier) {
            setError('کاربر فاقد ایمیل یا شماره موبایل است');
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            await usersApi.updateUserProfile(identifier, data, token!);
            showToast('success', 'اطلاعات کاربر با موفقیت به‌روزرسانی شد');
            setIsEditing(false);
            const newIdentifier = data.email || data.mobile || identifier;
            if (selectedPackage) {
                const userData = await usersApi.getUserStatus(newIdentifier, selectedPackage, token!);
                setUser(userData);
            }
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در به‌روزرسانی اطلاعات کاربر');
        } finally {
            setIsLoading(false);
        }
    };

    const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);

    const handleDeleteUser = () => {
        if (!user) return;
        const identifier = user.email || user.mobile;
        if (!identifier) {
            setError('کاربر فاقد ایمیل یا شماره موبایل است');
            return;
        }

        setIsDeleteConfirmOpen(true);
    };

    const confirmDeleteUser = async () => {
        if (!user) return;
        const identifier = user.email || user.mobile;
        if (!identifier) return;

        setIsLoading(true);
        setError(null);

        try {
            await usersApi.deleteUser(identifier, token!);
            showToast('success', 'کاربر با موفقیت حذف شد');
            setUser(null);
            setIsDeleteConfirmOpen(false);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در حذف کاربر');
        } finally {
            setIsLoading(false);
        }
    };

    const handlePackageChange = (packageName: string) => {
        setSelectedPackage(packageName);
        setUser(null);
        setError(null);
    };

    const availableProducts = products;

    // Compute step indicator state
    const steps = [
        { label: 'انتخاب پکیج', isCompleted: !!selectedPackage, isCurrent: !selectedPackage },
        { label: 'جستجوی کاربر', isCompleted: !!user, isCurrent: !!selectedPackage && !user },
        { label: 'پروفایل کاربر', isCompleted: false, isCurrent: !!user },
    ];

    return (
        <div className="p-4 sm:p-8">
            <div className="max-w-7xl mx-auto">
                <PageHeader title="مدیریت کاربران" subtitle="پکیج را انتخاب کنید، کاربر را جستجو کنید و مدیریت کنید" />

                {/* Step Indicator */}
                <div className="mb-6 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-5">
                    <StepIndicator steps={steps} />
                </div>

                {token && (
                    <PackageSelector
                        token={token}
                        selectedPackage={selectedPackage}
                        onPackageChange={handlePackageChange}
                        isLoading={isLoading}
                    />
                )}

                {selectedPackage && (
                    <UserSearch onSearch={handleSearch} isLoading={isLoading} />
                )}

                {error && (
                    <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
                        <svg className="h-5 w-5 text-red-500 dark:text-red-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                        </svg>
                        <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
                        <button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600 dark:hover:text-red-300">
                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                )}

                {!selectedPackage && packages.length === 0 && (
                    <div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800">
                        <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="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
                            </svg>
                        </div>
                        <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
                    </div>
                )}

                {selectedPackage && products.length > 0 && !user && (
                    <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
                        <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">
                                محصولات موجود در پکیج {selectedPackage}
                            </h3>
                        </div>
                        <div className="p-5">
                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                {products.map((product) => (
                                    <div
                                        key={product.id}
                                        className="border border-gray-200 dark:border-gray-800 rounded-xl p-4 bg-gray-50 dark:bg-gray-800/60 hover:bg-white dark:hover:bg-gray-800 transition-colors"
                                    >
                                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {product.title || 'محصول'}
                                        </p>
                                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            قیمت: {formatPrice(product.price)} تومان
                                        </p>
                                        <p className="text-xs text-gray-500 dark:text-gray-400">
                                            نوع: {getProductTypeLabel(product.type)}
                                        </p>
                                    </div>
                                ))}
                            </div>
                            <p className="mt-4 text-sm text-gray-400 dark:text-gray-500 text-center">
                                برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
                            </p>
                        </div>
                    </div>
                )}

                {user && (
                    <>
                        <UserInfo user={user} />
                        <div className="flex justify-end gap-2 mb-6 -mt-2">
                            <button
                                onClick={() => setIsEditing(true)}
                                disabled={isLoading}
                                className="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
                            >
                                <PencilSquareIcon className="h-4 w-4" />
                                ویرایش اطلاعات
                            </button>
                            <button
                                onClick={handleDeleteUser}
                                disabled={isLoading}
                                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
                            >
                                <TrashIcon className="h-4 w-4" />
                                حذف کاربر
                            </button>
                        </div>
                    </>
                )}

                {user && selectedPackage && (
                    <UserProducts
                        products={user.products || []}
                        availableProducts={availableProducts}
                        onSubscribe={handleSubscribe}
                        onUnsubscribe={handleUnsubscribe}
                        isLoading={isLoading}
                        selectedPackage={selectedPackage}
                    />
                )}

                {user && isEditing && (
                    <UserEditForm
                        user={user}
                        onSubmit={handleEditSubmit}
                        onCancel={() => setIsEditing(false)}
                        isLoading={isLoading}
                    />
                )}

                <ConfirmDialog
                    open={isDeleteConfirmOpen && !!user}
                    title="حذف کاربر"
                    message="آیا از حذف این کاربر اطمینان دارید؟ این عملیات قابل بازگشت نیست."
                    confirmLabel="حذف کاربر"
                    isLoading={isLoading}
                    onConfirm={confirmDeleteUser}
                    onCancel={() => setIsDeleteConfirmOpen(false)}
                />
            </div>
        </div>
    );
}