'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { packagesApi } from '@/lib/api/packages';
import PackageList from '@/components/admin/packages/PackageList';
import PackageForm from '@/components/admin/packages/PackageForm';
import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
import { PlusIcon } from '@heroicons/react/24/outline';

export default function PackagesPage() {
    const { token } = useAuth();
    const [packages, setPackages] = useState<PackageName[]>([]);
    const [selectedPackage, setSelectedPackage] = useState<PackageName | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [isFormVisible, setIsFormVisible] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState<string | null>(null);

    // Load packages on mount
    useEffect(() => {
        if (token) {
            loadPackages();
        }
    }, [token]);

    const loadPackages = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const data = await packagesApi.getAllPackages(token!);
            setPackages(data);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در دریافت لیست پکیج‌ها');
        } finally {
            setIsLoading(false);
        }
    };

    const handleCreate = () => {
        setSelectedPackage(null);
        setIsFormVisible(true);
    };

    const handleEdit = (pkg: PackageName) => {
        setSelectedPackage(pkg);
        setIsFormVisible(true);
    };

    const handleDelete = async (pkg: PackageName) => {
        if (!confirm(`آیا از حذف پکیج "${pkg.title}" اطمینان دارید؟`)) {
            return;
        }

        setIsLoading(true);
        setError(null);
        setSuccess(null);

        try {
            await packagesApi.deletePackage(pkg.name!, token!);
            setSuccess('پکیج با موفقیت حذف شد');
            await loadPackages();
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در حذف پکیج');
        } finally {
            setIsLoading(false);
        }
    };

    const handleSubmit = async (data: CreatePackageData | UpdatePackageData) => {
        setIsLoading(true);
        setError(null);
        setSuccess(null);

        try {
            if (selectedPackage) {
                // Update existing package
                await packagesApi.updatePackage(selectedPackage.name!, data, token!);
                setSuccess('پکیج با موفقیت به‌روزرسانی شد');
            } else {
                // Create new package
                await packagesApi.createPackage(data as CreatePackageData, token!);
                setSuccess('پکیج با موفقیت ایجاد شد');
            }

            await loadPackages();
            setIsFormVisible(false);
            setSelectedPackage(null);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در ذخیره پکیج');
        } finally {
            setIsLoading(false);
        }
    };

    const handleCancel = () => {
        setIsFormVisible(false);
        setSelectedPackage(null);
        setError(null);
        setSuccess(null);
    };

    return (
        <div className="p-6">
            <div className="max-w-7xl mx-auto">
                <div className="flex justify-between items-center mb-6">
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                        مدیریت پکیج‌ها
                    </h1>
                    {!isFormVisible && (
                        <button
                            onClick={handleCreate}
                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
                        >
                            <PlusIcon className="h-5 w-5 ml-2" />
                            پکیج جدید
                        </button>
                    )}
                </div>

                {/* Messages */}
                {error && (
                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                    </div>
                )}

                {success && (
                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                    </div>
                )}

                {/* Form or List */}
                {isFormVisible ? (
                    <PackageForm
                        package={selectedPackage}
                        onSubmit={handleSubmit}
                        onCancel={handleCancel}
                        isLoading={isLoading}
                    />
                ) : (
                    <PackageList
                        packages={packages}
                        onEdit={handleEdit}
                        onDelete={handleDelete}
                        isLoading={isLoading}
                    />
                )}
            </div>
        </div>
    );
}