import React from 'react';
import { Wallet, Loader2 } from 'lucide-react';
import { PageContainer } from '@/components/ui/Typography';
import { PageHeader } from '@/components/layout/PageHeader';
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
import { formatDateTime } from '@/utils/formatters';
import { useWalletStatus, useUpdateWalletStatus } from '../core/_hooks';
import { WalletStatus, WALLET_LABELS } from '../core/_models';

const WalletListPage = () => {
  const { data, isLoading, error } = useWalletStatus();
  const { mutate: updateStatus, isPending } = useUpdateWalletStatus();

  const handleToggle = (wallet: WalletStatus, newStatus: boolean) => {
    updateStatus({
      wallet_type: wallet.wallet_type,
      status: newStatus,
    });
  };

  if (isLoading) {
    return (
      <PageContainer>
        <div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
          <div>
            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48 mb-2 animate-pulse"></div>
            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-64 animate-pulse"></div>
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
          <div className="p-6">
            <div className="space-y-4">
              {[...Array(3)].map((_, i) => (
                <div
                  key={i}
                  className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg animate-pulse"
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-3">
                      <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
                      <div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
                    </div>
                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-48 mt-2"></div>
                  </div>
                  <div className="h-6 w-11 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </PageContainer>
    );
  }

  if (error) {
    return (
      <PageContainer>
        <div className="text-center py-12">
          <p className="text-red-600 dark:text-red-400">
            خطا در بارگذاری وضعیت کیف‌های پول
          </p>
        </div>
      </PageContainer>
    );
  }

  const statuses = data?.statuses || [];

  return (
    <PageContainer>
      <PageHeader
        title="مدیریت کیف پول"
        subtitle="فعال یا غیرفعال کردن کیف‌های پول"
        icon={Wallet}
      />

      <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
        <div className="p-6">
          <div className="space-y-4">
            {statuses.map((wallet) => (
              <div
                key={wallet.wallet_type}
                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
              >
                <div className="flex-1">
                  <div className="flex items-center gap-3">
                    <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
                      {WALLET_LABELS[wallet.wallet_type]}
                    </h3>
                    <span
                      className={`px-2 py-1 rounded-md text-xs font-medium ${
                        wallet.is_active
                          ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200'
                          : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200'
                      }`}
                    >
                      {wallet.is_active ? 'فعال' : 'غیرفعال'}
                    </span>
                  </div>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    آخرین به‌روزرسانی: {formatDateTime(wallet.updated_at)}
                  </p>
                </div>
                <div className="flex items-center gap-4">
                  {isPending ? (
                    <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
                  ) : (
                    <ToggleSwitch
                      checked={wallet.is_active}
                      onChange={(checked) => handleToggle(wallet, checked)}
                    />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PageContainer>
  );
};

export default WalletListPage;







