'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { api, apiPaths } from '@/lib/api';
import { useAuthGuard } from '@/lib/useAuthGuard';
import { useI18n } from '@/lib/i18n/context';
import { numberLocale } from '@/lib/i18n/utils';
type WalletData = {
  balance?: number;
  available_balance?: number;
};

type WalletChargeRequestItem = {
  id: number;
  request_number: string;
  amount: number;
  sender_name?: string;
  company_name?: string | null;
  destination_bank?: string;
  bank_name?: string;
  notes?: string | null;
  receipt_url?: string | null;
  status: string;
  status_code?: string;
  rejection_reason?: string | null;
  balance_before?: number | null;
  balance_after?: number | null;
  created_at?: string;
  reviewed_at?: string | null;
};

const BANK_SLUGS = ['al_ahli', 'rajhi', 'riyad', 'sabb', 'bsf'] as const;

/** القيمة العربية المرسلة للـ API (ثابتة كما في النظام السابق) */
const BANK_VALUE_AR: Record<(typeof BANK_SLUGS)[number], string> = {
  al_ahli: 'البنك الأهلي السعودي',
  rajhi: 'بنك الراجحي',
  riyad: 'بنك الرياض',
  sabb: 'بنك ساب',
  bsf: 'البنك السعودي الفرنسي',
};

export default function WalletPage() {
  const { checked, authenticated } = useAuthGuard();
  const { t, isRtl, locale } = useI18n();
  const nloc = numberLocale(locale);

  const [balance, setBalance] = useState<number | null>(null);
  const [history, setHistory] = useState<WalletChargeRequestItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [showRechargeForm, setShowRechargeForm] = useState(false);
  const [selectedBankSlug, setSelectedBankSlug] = useState<(typeof BANK_SLUGS)[number] | ''>('');
  const [amount, setAmount] = useState('');
  const [senderName, setSenderName] = useState('');
  const [companyName, setCompanyName] = useState('');
  const [notes, setNotes] = useState('');
  const [receipt, setReceipt] = useState<File | null>(null);
  const [sending, setSending] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);
  const [error, setError] = useState('');
  const [selectedReceipt, setSelectedReceipt] = useState<string | null>(null);

  const backIcon = isRtl ? 'ri-arrow-right-line' : 'ri-arrow-left-line';
  const historyChevron = isRtl ? 'ri-arrow-left-line' : 'ri-arrow-right-line';

  const fetchWallet = async () => {
    setLoading(true);
    const [walletRes, requestsRes] = await Promise.all([
      api.get<WalletData>(apiPaths.user.wallet),
      api.get<WalletChargeRequestItem[]>(apiPaths.user.walletChargeRequests),
    ]);
    if (walletRes.key === 'success' && walletRes.data) {
      const d = walletRes.data as WalletData;
      setBalance(d.available_balance ?? d.balance ?? 0);
    }
    if (requestsRes.key === 'success') {
      const raw = requestsRes.data;
      setHistory(Array.isArray(raw) ? raw : []);
    }
    setLoading(false);
  };

  useEffect(() => {
    if (!authenticated) return;
    fetchWallet();
  }, [authenticated]);

  if (!checked) return null;
  if (!authenticated) return null;

  const handleReceiptUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) setReceipt(e.target.files[0]);
  };

  const handleSubmitRecharge = async () => {
    if (!amount || !senderName || !selectedBankSlug) {
      setError(t('walletPage.validationError'));
      return;
    }
    setError('');
    setSending(true);
    try {
      const formData = new FormData();
      formData.append('amount', amount);
      formData.append('sender_name', senderName);
      formData.append('bank_name', BANK_VALUE_AR[selectedBankSlug]);
      if (companyName) formData.append('company_name', companyName);
      if (notes) formData.append('notes', notes);
      if (receipt) formData.append('receipt_image', receipt);

      const res = await api.postForm<{ id: number }>(apiPaths.user.walletChargeRequests, formData);
      if (res.key === 'success') {
        setShowSuccess(true);
        setShowRechargeForm(false);
        setAmount('');
        setSenderName('');
        setCompanyName('');
        setSelectedBankSlug('');
        setNotes('');
        setReceipt(null);
        fetchWallet();
        setTimeout(() => setShowSuccess(false), 3000);
      } else {
        setError(res.msg || t('walletPage.errorGeneric'));
      }
    } catch {
      setError(t('walletPage.errorNetwork'));
    } finally {
      setSending(false);
    }
  };

  const getStatusColor = (status?: string) => {
    switch (status) {
      case 'completed':
      case 'approved':
        return 'bg-green-100 text-green-700';
      case 'pending':
        return 'bg-yellow-100 text-yellow-700';
      case 'rejected':
        return 'bg-red-100 text-red-700';
      default:
        return 'bg-gray-100 text-gray-700';
    }
  };

  const getStatusLabel = (status?: string) => {
    switch (status) {
      case 'completed':
      case 'approved':
        return t('walletPage.statusApproved');
      case 'pending':
        return t('walletPage.statusPending');
      case 'rejected':
        return t('walletPage.statusRejected');
      default:
        return status || '—';
    }
  };

  const bankLabel = (item: WalletChargeRequestItem) =>
    item.destination_bank || item.bank_name || '';

  return (
    <div
      dir={isRtl ? 'rtl' : 'ltr'}
      className="flex flex-col flex-1 bg-gradient-to-br from-blue-50 via-white to-gray-50"
    >
      {showSuccess && (
        <div className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-50 border border-green-200 text-green-800 px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2">
          <i className="ri-check-line text-xl" aria-hidden />
          <span className="font-semibold whitespace-nowrap">{t('walletPage.successSent')}</span>
        </div>
      )}

      {selectedReceipt && (
        <div
          className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
          onClick={() => setSelectedReceipt(null)}
          role="presentation"
        >
          <div className="relative max-w-4xl w-full">
            <button
              type="button"
              onClick={() => setSelectedReceipt(null)}
              className="absolute top-4 end-4 w-10 h-10 bg-white rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors cursor-pointer shadow"
              aria-label={t('common.cancel')}
            >
              <i className="ri-close-line text-2xl text-gray-700" aria-hidden />
            </button>
            <img src={selectedReceipt} alt={t('walletPage.receiptAlt')} className="w-full h-auto rounded-lg" />
          </div>
        </div>
      )}

      {showRechargeForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-xl">
            <div className="flex items-center justify-between mb-6 gap-3">
              <h3 className="text-2xl font-bold text-gray-900">{t('walletPage.modalTitle')}</h3>
              <button
                type="button"
                onClick={() => setShowRechargeForm(false)}
                className="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer shrink-0"
                aria-label={t('common.cancel')}
              >
                <i className="ri-close-line text-xl" aria-hidden />
              </button>
            </div>
            <div className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    {t('walletPage.senderName')} <span className="text-red-500">{t('walletPage.requiredStar')}</span>
                  </label>
                  <input
                    type="text"
                    value={senderName}
                    onChange={(e) => setSenderName(e.target.value)}
                    placeholder={t('walletPage.senderNamePh')}
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    {t('walletPage.companyName')}
                  </label>
                  <input
                    type="text"
                    value={companyName}
                    onChange={(e) => setCompanyName(e.target.value)}
                    placeholder={t('walletPage.companyNamePh')}
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    {t('walletPage.bankLabel')} <span className="text-red-500">{t('walletPage.requiredStar')}</span>
                  </label>
                  <select
                    value={selectedBankSlug}
                    onChange={(e) =>
                      setSelectedBankSlug((e.target.value || '') as (typeof BANK_SLUGS)[number] | '')
                    }
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
                  >
                    <option value="">{t('walletPage.bankPlaceholder')}</option>
                    {BANK_SLUGS.map((slug) => (
                      <option key={slug} value={slug}>
                        {t(`walletPage.banks.${slug}`)}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    {t('walletPage.amountLabel')} ({t('common.sar')}){' '}
                    <span className="text-red-500">{t('walletPage.requiredStar')}</span>
                  </label>
                  <input
                    type="number"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    placeholder={t('walletPage.amountPh')}
                    min="1"
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  {t('walletPage.receiptLabel')}
                </label>
                <label className="flex items-center justify-center w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
                  <div className="text-center">
                    <i className="ri-image-add-line text-2xl text-gray-400 mb-1" aria-hidden />
                    <p className="text-sm text-gray-600">
                      {receipt ? receipt.name : t('walletPage.receiptPick')}
                    </p>
                  </div>
                  <input type="file" accept="image/*" onChange={handleReceiptUpload} className="hidden" />
                </label>
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">{t('walletPage.notesLabel')}</label>
                <textarea
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  placeholder={t('walletPage.notesPh')}
                  rows={2}
                  className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                />
              </div>
              {error && <p className="text-red-600 text-sm bg-red-50 p-3 rounded-lg">{error}</p>}
              <button
                type="button"
                onClick={handleSubmitRecharge}
                disabled={sending}
                className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap font-semibold disabled:opacity-70"
              >
                {sending ? t('walletPage.sending') : t('walletPage.submit')}
              </button>
            </div>
          </div>
        </div>
      )}

      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
        <div className="flex items-center justify-between gap-4 mb-8 flex-wrap">
          <div className="flex items-center gap-4 min-w-0">
            <Link
              href="/profile"
              className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer shrink-0"
              aria-label={t('common.back')}
            >
              <i className={`${backIcon} text-xl text-gray-700`} aria-hidden />
            </Link>
            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 truncate">{t('walletPage.title')}</h1>
          </div>
          <Link
            href="/wallet-history"
            className="text-blue-600 hover:text-blue-800 font-semibold text-sm flex items-center gap-1 shrink-0"
          >
            <span>{t('walletPage.fullRechargeHistory')}</span>
            <i className={historyChevron} aria-hidden />
          </Link>
        </div>

        <div className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl shadow-lg p-6 sm:p-8 mb-8 text-white">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div className="min-w-0">
              <p className="text-blue-100 mb-2">{t('walletPage.currentBalance')}</p>
              {loading ? (
                <div className="w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin mt-2" />
              ) : (
                <h2 className="text-4xl sm:text-5xl font-bold tabular-nums">
                  {(balance ?? 0).toLocaleString(nloc)}{' '}
                  <span className="text-xl sm:text-2xl font-semibold">{t('common.sar')}</span>
                </h2>
              )}
            </div>
            <button
              type="button"
              onClick={() => setShowRechargeForm(true)}
              className="bg-white text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer whitespace-nowrap font-semibold flex items-center gap-2 shrink-0"
            >
              <i className="ri-add-line w-5 h-5 flex items-center justify-center" aria-hidden />
              <span>{t('walletPage.topUp')}</span>
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-6">{t('walletPage.rechargeRequests')}</h2>
          {loading ? (
            <div className="flex justify-center py-8">
              <div className="w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
            </div>
          ) : history.length === 0 ? (
            <div className="text-center py-12 text-gray-500">
              <i className="ri-wallet-3-line text-5xl text-gray-300 mb-3 block" aria-hidden />
              <p>{t('walletPage.emptyHistory')}</p>
            </div>
          ) : (
            <div className="space-y-4">
              {history.map((item) => (
                <div
                  key={item.id}
                  className="border border-gray-100 rounded-lg p-5 hover:border-blue-200 transition-colors"
                >
                  <div className="flex items-start justify-between mb-3 gap-4 flex-wrap">
                    <div className="flex-1 min-w-[200px]">
                      <div className="flex items-center gap-3 mb-1 flex-wrap">
                        <h3 className="text-lg font-bold text-gray-900">
                          {item.request_number || `#${item.id}`}
                        </h3>
                        <span
                          className={`px-3 py-1 rounded-full text-sm font-semibold ${getStatusColor(
                            item.status,
                          )}`}
                        >
                          {getStatusLabel(item.status)}
                        </span>
                      </div>
                      {item.sender_name && (
                        <p className="text-sm text-gray-600">
                          {t('walletPage.senderPrefix')} {item.sender_name}
                        </p>
                      )}
                      {bankLabel(item) && (
                        <p className="text-sm text-gray-600">
                          {t('walletPage.bankToPrefix')} {bankLabel(item)}
                        </p>
                      )}
                      {item.company_name && (
                        <p className="text-sm text-gray-600">
                          {t('walletPage.companyPrefix')} {item.company_name}
                        </p>
                      )}
                      {item.created_at && (
                        <p className="text-sm text-gray-500">
                          {new Date(item.created_at).toLocaleString(nloc)}
                        </p>
                      )}
                      {(item.status === 'completed' || item.status === 'approved') &&
                        item.balance_before != null &&
                        item.balance_after != null && (
                          <p className="text-sm text-gray-700 mt-2">
                            {t('walletPage.balanceLineCompleted', {
                              before: item.balance_before.toLocaleString(nloc),
                              after: item.balance_after.toLocaleString(nloc),
                              currency: t('common.sar'),
                            })}
                          </p>
                        )}
                    </div>
                    <div className="text-start shrink-0">
                      <p className="text-2xl font-bold text-blue-600 tabular-nums">
                        {Number(item.amount).toLocaleString(nloc)} {t('common.sar')}
                      </p>
                    </div>
                  </div>
                  {item.rejection_reason && (
                    <div className="bg-red-50 border border-red-100 rounded p-3 mb-3 text-sm text-red-700">
                      <strong>{t('walletPage.rejectionPrefix')}</strong> {item.rejection_reason}
                    </div>
                  )}
                  {item.receipt_url && (
                    <button
                      type="button"
                      onClick={() => setSelectedReceipt(item.receipt_url!)}
                      className="flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors cursor-pointer font-semibold"
                    >
                      <i className="ri-image-line w-5 h-5 flex items-center justify-center" aria-hidden />
                      <span>{t('walletPage.viewReceipt')}</span>
                    </button>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}