import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Wallet, Plus, Loader2 } from 'lucide-react';
import { PageContainer, PageTitle } from '@/components/ui/Typography';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { useWalletCredit } from '../core/_hooks';
import { WalletCreditRequest, WalletType } from '../core/_credit-models';
import { formatCurrency } from '@/utils/formatters';
import { persianToEnglish } from '@/utils/numberUtils';

const schema = yup.object({
  user_id: yup.number().required('شناسه کاربر الزامی است').positive('شناسه کاربر باید عدد مثبت باشد'),
  wallet_type: yup.string().oneOf(['rial', 'gold18k'], 'نوع کیف پول نامعتبر است').required('نوع کیف پول الزامی است'),
  amount: yup.number().required('مبلغ الزامی است').positive('مبلغ باید عدد مثبت باشد'),
  reason: yup.string().required('دلیل شارژ الزامی است').min(10, 'دلیل باید حداقل ۱۰ کاراکتر باشد'),
  admin_note: yup.string().optional(),
});

type FormData = yup.InferType<typeof schema>;

const WalletCreditPage = () => {
  const { mutate: creditWallet, isPending } = useWalletCredit();
  const [successData, setSuccessData] = useState<{ new_balance: number; message: string } | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<FormData>({
    resolver: yupResolver(schema),
    defaultValues: {
      wallet_type: 'rial',
    },
  });

  const onSubmit = (data: FormData) => {
    const payload: WalletCreditRequest = {
      user_id: data.user_id,
      wallet_type: data.wallet_type as WalletType,
      amount: data.amount,
      reason: data.reason,
      admin_note: data.admin_note || undefined,
    };

    creditWallet(payload, {
      onSuccess: (response) => {
        setSuccessData({
          new_balance: response.new_balance,
          message: response.message,
        });
        reset();
        setTimeout(() => setSuccessData(null), 5000);
      },
    });
  };

  return (
    <PageContainer>
      <PageTitle>شارژ کیف پول کاربر</PageTitle>

      {successData && (
        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
          <p className="text-green-800 dark:text-green-200 font-medium mb-2">
            {successData.message}
          </p>
          <p className="text-sm text-green-700 dark:text-green-300">
            موجودی جدید: {formatCurrency(successData.new_balance)}
          </p>
        </div>
      )}

      <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                شناسه کاربر <span className="text-red-500">*</span>
              </label>
              <Input
                type="number"
                {...register('user_id', {
                  setValueAs: (value) => (value === '' ? undefined : Number(persianToEnglish(value))),
                })}
                error={errors.user_id?.message}
                placeholder="مثلاً 52"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                نوع کیف پول <span className="text-red-500">*</span>
              </label>
              <select
                {...register('wallet_type')}
                className={`input ${errors.wallet_type ? 'border-red-500' : ''}`}
              >
                <option value="rial">ریال</option>
                <option value="gold18k">طلا ۱۸ عیار</option>
              </select>
              {errors.wallet_type && (
                <p className="text-sm text-red-600 dark:text-red-400 mt-1">
                  {errors.wallet_type.message}
                </p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                مبلغ (تومان) <span className="text-red-500">*</span>
              </label>
              <Input
                type="text"
                {...register('amount', {
                  setValueAs: (value) => (value === '' ? undefined : Number(persianToEnglish(value))),
                })}
                error={errors.amount?.message}
                placeholder="مثلاً 1000000"
                numeric
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              دلیل شارژ <span className="text-red-500">*</span>
            </label>
            <textarea
              {...register('reason')}
              rows={3}
              className={`input resize-none ${errors.reason ? 'border-red-500' : ''}`}
              placeholder="مثلاً: شارژ کیف پول کاربر به علت مرجوع کردن یک سفارش به مبلغ ۱ میلیون"
            />
            {errors.reason && (
              <p className="text-sm text-red-600 dark:text-red-400 mt-1">
                {errors.reason.message}
              </p>
            )}
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              یادداشت ادمین (اختیاری)
            </label>
            <textarea
              {...register('admin_note')}
              rows={2}
              className="input resize-none"
              placeholder="مثلاً: شارژ کیف طلا"
            />
          </div>

          <div className="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <Button
              type="button"
              variant="secondary"
              onClick={() => reset()}
              disabled={isPending}
            >
              پاک کردن
            </Button>
            <Button
              type="submit"
              disabled={isPending}
              loading={isPending}
            >
              <Plus className="h-4 w-4 ml-2" />
              شارژ کیف پول
            </Button>
          </div>
        </form>
      </div>
    </PageContainer>
  );
};

export default WalletCreditPage;
