'use client';

import {useCallback,useEffect,useRef,useState} from 'react';
import {useSearchParams} from 'next/navigation';
import {ArrowLeft,ArrowRight,ArrowDownLeft,ArrowUpLeft,Wallet,History,ChevronLeft,ChevronDown,CreditCard,Landmark,ReceiptText,RefreshCw,LoaderCircle,ShieldCheck,LockKeyhole,Check,CheckCircle2,Copy,Headphones,HelpCircle,Info,Save,Coins,Plus,X} from 'lucide-react';
import type {Locale} from '@/lib/catalog';
import type {DashboardData} from '@/lib/dashboard';
import {dashboardNumber} from '@/lib/dashboard';
import {cashWallet,depositAmountRial} from '@/lib/cash-wallet';
import {rialToToman} from '@/lib/trade';
import {balePayment,type BalePayment,type TomanDepositState,type TomanDepositRequest,type TomanDepositMethodId} from '@/lib/toman-deposit';
import {depositFaq,depositMethodsCopy,tomanDepositCopy} from '@/lib/toman-deposit-copy';
import {useSite} from './site-shell';
import {LocalizedNumberInput} from './localized-number-input';
import {DemoFunding,UsdtFunding} from './wallet-funding';
import {TcarttDeposit} from './tcartt-deposit';
import {isTcarttId,tcarttAvailability,type TcarttAvailability} from '@/lib/tcartt-payment';

const methodOrder:TomanDepositMethodId[]=['gateway','instant_bank','card_transfer','paya','account_transfer','direct_debit'];
const methodIcons={gateway:CreditCard,instant_bank:ArrowDownLeft,card_transfer:CreditCard,paya:ReceiptText,account_transfer:Landmark,direct_debit:RefreshCw};
const quickAmounts=['5000000','10000000','15000000','25000000'];

function DepositDate({value,locale}:{value:string;locale:Locale}){
  return <time dateTime={value}>{Number.isNaN(Date.parse(value))?'—':new Intl.DateTimeFormat(locale,{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Tehran'}).format(new Date(value))}</time>;
}

function CopyValue({value,label,locale}:{value:string;label:string;locale:Locale}){
  const [result,setResult]=useState<'copied'|'error'|null>(null),t=tomanDepositCopy(locale);
  useEffect(()=>{if(result){const timeout=setTimeout(()=>setResult(null),2500);return()=>clearTimeout(timeout)}},[result]);
  return <span className="toman-copy"><bdi>{value}</bdi><button type="button" aria-label={label} onClick={async()=>{try{await navigator.clipboard.writeText(value);setResult('copied')}catch{setResult('error')}}}>{result==='copied'?<Check size={17}/>:<Copy size={17}/>}</button>{result&&<small role="status">{result==='copied'?t.copied:t.copyError}</small>}</span>;
}

/** Deposits are server-persisted requests. This component never changes a balance. */
export function TomanDeposit({data}:{data:DashboardData}){
  const {locale,user,open,customer}=useSite(),t=tomanDepositCopy(locale),methodLabels=depositMethodsCopy(locale);
  const searchParams=useSearchParams(),requestedTab=searchParams?.get('tab');
  const requestedTcarttPayment=searchParams?.get('tcartt_payment'),requestedTcarttRequest=searchParams?.get('tcartt_request');
  const tcarttReturn=useRef(false);tcarttReturn.current=isTcarttId(requestedTcarttPayment)||isTcarttId(requestedTcarttRequest);
  const [tcarttState,setTcarttState]=useState<TcarttAvailability|null>(null),[tcarttError,setTcarttError]=useState(''),[tcarttLocked,setTcarttLocked]=useState(false),[tcarttResume,setTcarttResume]=useState<string|null>(null),[tcarttEngaged,setTcarttEngaged]=useState(false);
  const tcarttController=useRef<AbortController|null>(null);
  const [tab,setTab]=useState<'toman'|'coin'>('toman');
  const [demoLocked,setDemoLocked]=useState(false);
  const [state,setState]=useState<TomanDepositState|null>(null),[loading,setLoading]=useState(true),[loadError,setLoadError]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[authNeeded,setAuthNeeded]=useState(false);
  const [amount,setAmount]=useState(''),[method,setMethod]=useState<TomanDepositMethodId|null>(null),[draft,setDraft]=useState<TomanDepositRequest|null>(null);
  const [busy,setBusy]=useState(false),[moreBusy,setMoreBusy]=useState(false),[cancelId,setCancelId]=useState<string|null>(null),[bankId,setBankId]=useState(''),[destinationId,setDestinationId]=useState(''),[transferReference,setTransferReference]=useState(''),[feedbackScope,setFeedbackScope]=useState<'form'|'history'>('form');
  const [gatewayPayment,setGatewayPayment]=useState<BalePayment|null>(null),[gatewayBusy,setGatewayBusy]=useState(false),[gatewayError,setGatewayError]=useState('');
  const gatewayRequest=useRef<{id:string;amount:string}|null>(null),gatewayChecking=useRef(false),creditedPayment=useRef<string|null>(null);
  const saving=useRef(false),operation=useRef(0),requestId=useRef<string|null>(null),controller=useRef<AbortController|null>(null),requestOwner=useRef(user?.id);
  const amountInput=useRef<HTMLInputElement>(null),historySection=useRef<HTMLElement>(null);
  const loadErrorCopy=useRef(t.loadError);loadErrorCopy.current=t.loadError;
  requestOwner.current=user?.id;
  useEffect(()=>{setTab(requestedTab==='token'||requestedTab==='coin'?'coin':'toman')},[requestedTab]);

  const load=useCallback(async(restoreDraft=false)=>{
    controller.current?.abort();const abort=new AbortController();controller.current=abort;
    const owner=user?.id;
    if(!owner){setLoading(false);setState(null);return}
    setLoading(true);setLoadError('');
    try{
      const response=await fetch('/api/deposits',{cache:'no-store',signal:abort.signal});
      const result=await response.json().catch(()=>null) as (TomanDepositState&{error?:string})|null;
      if(!result)throw new Error(loadErrorCopy.current);
      if(!response.ok){if(response.status===401)setAuthNeeded(true);throw new Error(result.error||loadErrorCopy.current)}
      if(abort.signal.aborted||requestOwner.current!==owner)return;
      setState(result);setAuthNeeded(false);
      if(restoreDraft){
        const saved=result.draft?.status==='draft'?result.draft:null;
        setDraft(saved);requestId.current=saved?.request_id||null;
        setAmount(saved?rialToToman(BigInt(saved.amount_rial)):'');setMethod(tcarttReturn.current?'card_transfer':saved?.method||null);
      }
    }catch(e){if(!abort.signal.aborted&&requestOwner.current===owner)setLoadError(e instanceof Error?e.message:loadErrorCopy.current)}
    finally{if(!abort.signal.aborted&&requestOwner.current===owner)setLoading(false)}
  },[user?.id]);

  useEffect(()=>{
    setState(null);setAmount('');setMethod(null);setDraft(null);setError('');setNotice('');setCancelId(null);setBankId('');setDestinationId('');setTransferReference('');setBusy(false);setMoreBusy(false);setGatewayPayment(null);setGatewayBusy(false);setGatewayError('');gatewayRequest.current=null;gatewayChecking.current=false;creditedPayment.current=null;requestId.current=null;saving.current=false;operation.current++;
    void load(true);return()=>controller.current?.abort();
  },[load]);

  const loadTcartt=useCallback(async()=>{
    tcarttController.current?.abort();const abort=new AbortController();tcarttController.current=abort;
    const owner=user?.id;if(!owner){setTcarttState(null);return}
    setTcarttError('');
    try{
      const response=await fetch('/api/customer/wallet/tcartt',{cache:'no-store',signal:abort.signal});
      const result=await response.json().catch(()=>null) as Record<string,unknown>|null,availability=tcarttAvailability(result);
      if(abort.signal.aborted||requestOwner.current!==owner)return;
      if(!response.ok||!availability)throw new Error(typeof result?.error==='string'?result.error:'');
      setTcarttState(availability);
    }catch(e){if(!abort.signal.aborted&&requestOwner.current===owner){setTcarttState(null);setTcarttError(e instanceof Error?e.message:'')}}
  },[user?.id]);
  useEffect(()=>{setTcarttState(null);setTcarttError('');setTcarttResume(null);setTcarttLocked(false);setTcarttEngaged(false);void loadTcartt();return()=>tcarttController.current?.abort()},[loadTcartt]);
  useEffect(()=>{if(isTcarttId(requestedTcarttPayment)||isTcarttId(requestedTcarttRequest)){setMethod('card_transfer');setTab('toman')}},[requestedTcarttPayment,requestedTcarttRequest]);

  const balance=cashWallet(data.positions),hideBalances=data.preferences?.hide_balances;
  const number=(value:string)=>dashboardNumber(value,locale,0);
  const money=(rial:string)=>hideBalances?'••••••':dashboardNumber(rialToToman(BigInt(rial)),locale,1);
  const amountRial=depositAmountRial(amount),selected=state?.methods.find(item=>item.id===method);
  const dirty=!!draft&&(draft.amount_rial!==amountRial||draft.method!==method);
  const amountValid=!!amountRial&&!!state&&BigInt(amountRial)>=BigInt(state.limits.min_amount_rial)&&BigInt(amountRial)<=BigInt(state.limits.max_amount_rial);
  const selectable=!!state&&!loading&&!loadError&&!authNeeded&&!busy;
  const selectedDestination=selected?.destinations.find(item=>item.id===destinationId);
  const bankAccounts=(state?.bank_accounts||[]).filter(bank=>bank.eligible===true&&(method!=='card_transfer'||bank.card_link_status==='verified'));
  const paymentReady=!!selected?.enabled&&!!selected.destinations.length;
  const gatewayReady=state?.enabled===true&&state.provider==='bale'&&state.gateway?.ready===true;
  const gatewayPending=!!gatewayPayment&&['created','pending'].includes(gatewayPayment.status);
  const gatewayPaymentId=gatewayPayment?.paymentId,customerReload=customer?.reload,userId=user?.id,gatewayFailure=t.loadError;
  const tcarttReady=tcarttState?.ready===true;
  const tcarttSelected=method==='card_transfer'&&(tcarttReady||tcarttState?.configured===true||!!tcarttResume||tcarttReturn.current||tcarttEngaged||tcarttLocked);
  const amountLocked=busy||demoLocked||(method==='gateway'&&gatewayPending)||(method==='card_transfer'&&tcarttLocked);
  const statusText=(status:string)=>({draft:t.draft,submitted:t.submittedStatus,cancelled:t.cancelledStatus,created:t.created,pending:t.pending,credited:t.credited,failed:t.failed,test_paid:t.baleTestPaid,pending_review:t.baleReview}[status]||status);

  const checkGateway=useCallback(async(paymentId:string)=>{
    if(gatewayChecking.current||!userId)return;
    const owner=userId;gatewayChecking.current=true;setGatewayBusy(true);setGatewayError('');
    try{
      const response=await fetch('/api/deposits',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'gateway_status',paymentId})});
      const result=await response.json().catch(()=>null) as Record<string,unknown>|null,payment=balePayment(result);
      if(requestOwner.current!==owner)return;
      if(!response.ok||!payment||payment.paymentId!==paymentId){if(response.status===401)setAuthNeeded(true);throw new Error(typeof result?.error==='string'?result.error:gatewayFailure)}
      setGatewayPayment(payment);
      if(!['created','pending'].includes(payment.status)){
        void load(false);
        if(payment.status==='credited'&&creditedPayment.current!==payment.paymentId){creditedPayment.current=payment.paymentId;void customerReload?.()}
      }
    }catch(e){if(requestOwner.current===owner)setGatewayError(e instanceof Error?e.message:gatewayFailure)}
    finally{if(requestOwner.current===owner){gatewayChecking.current=false;setGatewayBusy(false)}}
  },[userId,load,customerReload,gatewayFailure]);

  useEffect(()=>{
    if(!gatewayPending||!gatewayPaymentId)return;
    const check=()=>{if(document.visibilityState==='visible')void checkGateway(gatewayPaymentId)};
    const timer=setInterval(check,10000);window.addEventListener('focus',check);document.addEventListener('visibilitychange',check);
    return()=>{clearInterval(timer);window.removeEventListener('focus',check);document.removeEventListener('visibilitychange',check)};
  },[gatewayPending,gatewayPaymentId,checkGateway]);

  async function startGateway(){
    if(saving.current||!user||!gatewayReady||!amountValid||gatewayPending||gatewayBusy)return;
    const owner=user.id,operationId=++operation.current;
    saving.current=true;setBusy(true);setGatewayError('');setError('');setNotice('');
    try{
      const normalized=(BigInt(amountRial!)/BigInt(10)).toString();
      if(!gatewayRequest.current||gatewayRequest.current.amount!==normalized)gatewayRequest.current={id:crypto.randomUUID(),amount:normalized};
      const response=await fetch('/api/deposits',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'start_gateway',requestId:gatewayRequest.current.id,amountToman:normalized})});
      const result=await response.json().catch(()=>null) as Record<string,unknown>|null,payment=balePayment(result);
      if(requestOwner.current!==owner)return;
      if(!response.ok||!payment){if(response.status===401)setAuthNeeded(true);throw new Error(typeof result?.error==='string'?result.error:t.saveError)}
      setGatewayPayment(payment);void load(false);
      if(payment.status==='credited'&&creditedPayment.current!==payment.paymentId){creditedPayment.current=payment.paymentId;void customer?.reload()}
    }catch(e){if(requestOwner.current===owner)setGatewayError(e instanceof Error?e.message:t.saveError)}
    finally{if(operation.current===operationId){saving.current=false;if(requestOwner.current===owner)setBusy(false)}}
  }

  function chooseMethod(value:TomanDepositMethodId){
    setMethod(value);setDestinationId('');setBankId('');setTransferReference('');setError('');setNotice('');
    if(value==='gateway'&&gatewayPayment?.amountRial)setAmount(rialToToman(BigInt(gatewayPayment.amountRial)));
  }
  function applyRequest(request:TomanDepositRequest){
    setState(current=>current?{...current,draft:request.status==='draft'?request:current.draft?.request_id===request.request_id?null:current.draft,history:[request,...current.history.filter(row=>row.request_id!==request.request_id)]}:current);
    if(request.status==='draft'){setDraft(request);requestId.current=request.request_id}
    else if(draft?.request_id===request.request_id){setDraft(null);requestId.current=null;setAmount('');setMethod(null)}
  }
  async function mutate(action:'save_draft'|'cancel'|'submit',request?:TomanDepositRequest){
    if(saving.current||!user||!state||loading||loadError)return;
    if(action==='save_draft'&&(!amountValid||!method||method==='gateway')){setError(t.invalidAmount);amountInput.current?.focus();return}
    saving.current=true;setBusy(true);setError('');setNotice('');setFeedbackScope(action==='cancel'?'history':'form');
    const operationId=++operation.current;
    const owner=user.id;
    try{
      if(!requestId.current)requestId.current=crypto.randomUUID();
      const body=action==='save_draft'?{action,request_id:requestId.current,amount_toman:amount,method,version:draft?.version||0}:action==='cancel'?{action,request_id:request?.request_id,version:request?.version}:{action,request_id:draft?.request_id,version:draft?.version,destination_id:destinationId,destination_version:selectedDestination?.version,bank_account_id:bankId,transfer_reference:transferReference};
      const response=await fetch('/api/deposits',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
      const result=await response.json().catch(()=>null) as {request?:TomanDepositRequest;error?:string}|null;
      if(requestOwner.current!==owner)return;
      if(!response.ok||!result?.request){if(response.status===401)setAuthNeeded(true);throw new Error(result?.error||t.saveError)}
      applyRequest(result.request);setCancelId(null);setNotice(action==='save_draft'?t.saved:action==='cancel'?t.cancelled:t.submitted);
      if(action==='submit'){setBankId('');setDestinationId('');setTransferReference('')}
    }catch(e){if(requestOwner.current===owner)setError(e instanceof Error?e.message:t.saveError)}
    finally{if(operation.current===operationId){saving.current=false;if(requestOwner.current===owner)setBusy(false)}}
  }
  async function loadMore(){
    if(!state?.next_cursor||moreBusy)return;
    setMoreBusy(true);setError('');setFeedbackScope('history');const owner=user?.id;
    try{
      const response=await fetch(`/api/deposits?before=${encodeURIComponent(state.next_cursor)}&limit=25`,{cache:'no-store'});
      const result=await response.json().catch(()=>null) as (TomanDepositState&{error?:string})|null;
      if(!response.ok||!result)throw new Error(result?.error||t.loadError);
      if(requestOwner.current!==owner)return;
      setState(current=>current?{...current,history:[...current.history,...result.history.filter(row=>!current.history.some(existing=>existing.request_id===row.request_id))],next_cursor:result.next_cursor,has_more:result.has_more}:current);
    }catch(e){if(requestOwner.current===owner)setError(e instanceof Error?e.message:t.loadError)}
    finally{if(requestOwner.current===owner)setMoreBusy(false)}
  }
  function editRequest(request:TomanDepositRequest){
    setTab('toman');setDraft(request);requestId.current=request.request_id;setAmount(rialToToman(BigInt(request.amount_rial)));setMethod(request.method);setError('');setNotice('');setDestinationId('');setBankId('');setTransferReference('');
    requestAnimationFrame(()=>{amountInput.current?.scrollIntoView({behavior:data.preferences?.reduced_motion?'instant':'smooth',block:'center'});amountInput.current?.focus({preventScroll:true})});
  }
  function showHistory(){historySection.current?.scrollIntoView({behavior:data.preferences?.reduced_motion?'instant':'smooth',block:'start'});historySection.current?.focus({preventScroll:true})}

  return <section className="toman-deposit" dir={locale==='en'?'ltr':'rtl'}>
    <nav className="toman-navigation" aria-label={t.title}>
      <div className="toman-tabs" role="tablist" aria-label={t.method} onKeyDown={event=>{if(['ArrowRight','ArrowLeft','Home','End'].includes(event.key)){event.preventDefault();const nextTab=event.key==='Home'?'toman':event.key==='End'?'coin':tab==='toman'?'coin':'toman';setTab(nextTab);event.currentTarget.querySelector<HTMLButtonElement>(`#${nextTab}-tab`)?.focus()}}}>
        <button id="toman-tab" role="tab" tabIndex={tab==='toman'?0:-1} aria-selected={tab==='toman'} aria-controls="toman-panel" onClick={()=>setTab('toman')}><Wallet size={18}/>{t.toman}</button>
        <button id="coin-tab" role="tab" tabIndex={tab==='coin'?0:-1} aria-selected={tab==='coin'} aria-controls="coin-panel" onClick={()=>setTab('coin')}><Coins size={18}/>{t.coin}</button>
      </div>
      <button type="button" className="toman-history-link" onClick={showHistory}><History size={18}/>{t.history}<ArrowUpLeft size={16}/></button>
    </nav>

    {authNeeded&&<div className="toman-alert is-error" role="alert"><LockKeyhole size={20}/><span>{t.auth}</span><button type="button" onClick={()=>open('login')}>{t.login}</button></div>}
    {loadError&&<div className="toman-alert is-error" role="alert"><Info size={19}/><span>{loadError}</span><button type="button" onClick={()=>void load(true)} disabled={loading}>{t.retry}</button></div>}

    <div id="toman-panel" role="tabpanel" aria-labelledby="toman-tab" hidden={tab!=='toman'}>
      <div className="toman-layout">
        <div className="toman-main">
          <header className="toman-heading"><span className="toman-heading-icon" aria-hidden="true"><Wallet size={27}/><i>+</i></span><div><span className="toman-eyebrow">PLANCK WALLET</span><h2>{t.title}</h2><p>{t.intro}</p></div></header>
          <div className="toman-balance"><span><Wallet size={16}/>{t.available}</span><strong>{hideBalances?'••••••':balance?dashboardNumber(rialToToman(balance.availableRial),locale,1):'—'} <small>{t.currency}</small></strong></div>
          <div className="toman-amount-section">
            <label htmlFor="toman-deposit-amount">{t.amount}<small>{t.currency}</small></label>
            <div className={`toman-amount-field${amount&&!amountValid&&state?' is-invalid':''}`}><LocalizedNumberInput ref={amountInput} id="toman-deposit-amount" aria-label={t.amount} locale={locale} inputMode="numeric" value={amount} onValueChange={value=>{setAmount(value);setNotice('');setError('')}} maxLength={12} disabled={amountLocked} autoComplete="off" aria-invalid={!!amount&&!amountValid&&!!state} aria-describedby="toman-amount-hint"/><span>{t.currency}</span></div>
            <div className="toman-quick-amounts" role="group" aria-label={t.amount}>{quickAmounts.map(value=><button type="button" key={value} disabled={amountLocked} aria-pressed={amount===value} onClick={()=>{setAmount(value);setNotice('');setError('')}}>{number(value)}</button>)}</div>
            <p id="toman-amount-hint" className={`toman-hint${amount&&!amountValid&&state?' is-error':''}`}>{amount&&!amountValid&&state?t.invalidAmount:amountRial?`${number(amountRial)} ${t.rial}`:t.amountHint}</p>
          </div>

          <div className="toman-method-heading"><h3>{t.method}</h3><ShieldCheck size={18}/></div>
          {loading&&!state&&<p className="toman-loading" role="status"><LoaderCircle size={18} className="account-spinner"/>{t.loading}</p>}
          <div className="toman-methods">
            <DemoFunding amountToman={amount} onFunded={()=>void customer.reload()} onLockChange={setDemoLocked}/>
            {methodOrder.map(id=>{
              const Icon=methodIcons[id],item=state?.methods.find(row=>row.id===id),active=method===id,isGateway=id==='gateway',isTcartt=id==='card_transfer';
              return <div key={id} className={`toman-method-wrap${active?' is-selected':''}${isGateway?' is-gateway':''}`}>
                <button type="button" className="toman-method" disabled={isTcartt?(authNeeded||busy||(!selectable&&!tcarttReady&&!tcarttReturn.current&&!tcarttResume)):(isGateway&&!gatewayReady)||!selectable} aria-expanded={active} aria-controls={`toman-method-${id}`} onClick={()=>chooseMethod(id)}>
                  <span className={`toman-method-icon method-${id}`}><Icon size={24}/></span><strong>{methodLabels[id]}{isGateway&&gatewayReady?` · ${t.baleName}`:isTcartt?' · '+(locale==='en'?'Tcartt':locale==='ar'?'تیکارت':'تیکارت'):''}</strong><span className={`toman-method-badge${(isGateway?gatewayReady:isTcartt?tcarttReady||item?.enabled:item?.enabled)?' is-ready':''}`}>{isGateway?(gatewayReady?(state?.gateway?.testMode?t.baleTestBadge:t.configured):t.soon):isTcartt&&tcarttReady?t.configured:item?.enabled?t.configured:t.unconfigured}</span>{isGateway&&!gatewayReady?<LockKeyhole size={17} className="toman-method-arrow"/>:active?<ChevronDown size={19} className="toman-method-arrow"/>:<ChevronLeft size={19} className="toman-method-arrow"/>}
                </button>
                {active&&<div className="toman-method-detail" id={`toman-method-${id}`}>
                  {isGateway?<div className="toman-payment-fields">
                    <p className="toman-draft-note">{t.baleIntro}</p>
                    {(gatewayPayment?.testMode??state?.gateway?.testMode)&&<output className="toman-alert"><Info size={18}/>{t.baleTest}</output>}
                    {!gatewayPayment?<button type="button" className="toman-primary" disabled={!selectable||!gatewayReady||!amountValid||gatewayBusy} onClick={()=>void startGateway()}>{busy?<LoaderCircle size={19} className="account-spinner"/>:<CreditCard size={19}/>}<span>{busy?t.saving:t.baleStart}</span><ArrowUpLeft size={18}/></button>:<>
                      <div className="toman-draft-meta"><span>{t.baleReference}</span><bdi>{gatewayPayment.paymentId.slice(0,8)}</bdi></div>
                      {gatewayPayment.amountRial&&<strong>{money(gatewayPayment.amountRial)} {t.currency}</strong>}
                      {gatewayPending&&gatewayPayment.expiresAt&&<p className="toman-draft-note">{t.baleExpiry} <DepositDate value={gatewayPayment.expiresAt} locale={locale}/></p>}
                      <output className={`toman-alert${gatewayPayment.status==='credited'?' is-success':['failed','cancelled'].includes(gatewayPayment.status)?' is-error':''}`}>{gatewayPayment.status==='credited'?t.balePaid:gatewayPayment.status==='test_paid'?t.baleTestPaid:gatewayPayment.status==='pending_review'?t.baleReview:gatewayPending?t.baleWaiting:t.baleFailed}</output>
                      {gatewayPending&&gatewayPayment.url&&<a className="toman-primary" href={gatewayPayment.url} target="_blank" rel="noopener noreferrer">{t.baleOpen}<ArrowUpLeft size={18}/></a>}
                      {gatewayPending&&<p className="toman-draft-note">{t.baleNoInvoice}</p>}
                      <button type="button" className="toman-submit" disabled={gatewayBusy||busy||authNeeded} onClick={()=>void checkGateway(gatewayPayment.paymentId)}>{gatewayBusy?<LoaderCircle size={18} className="account-spinner"/>:<RefreshCw size={18}/>}<span>{gatewayBusy?t.baleChecking:t.baleCheck}</span></button>
                      {!gatewayPending&&<button type="button" className="toman-bank-link" disabled={gatewayBusy||busy} onClick={()=>{setGatewayPayment(null);setGatewayError('');gatewayRequest.current=null}}>{t.baleNew}<Plus size={16}/></button>}
                    </>}
                    {gatewayError&&<p className="toman-alert is-error" role="alert">{gatewayError}</p>}
                  </div>:isTcartt&&tcarttSelected?<TcarttDeposit key={`${user?.id}:${tcarttResume||requestedTcarttPayment||requestedTcarttRequest||''}`} amountToman={amount} disabled={busy||authNeeded} availability={tcarttState} availabilityError={tcarttError} requestedPaymentId={tcarttResume||requestedTcarttPayment} requestedRequestId={requestedTcarttRequest} onLockChange={setTcarttLocked} onAmountRestore={setAmount} onRefreshAvailability={()=>void loadTcartt()} onAuthRequired={()=>setAuthNeeded(true)} onChanged={payment=>{setTcarttEngaged(true);void load(false);if(payment.status==='credited')void customer?.reload()}}/>:!paymentReady?<div className="toman-connection-note"><span><Info size={18}/></span><div><strong>{t.unavailableTitle}</strong><p>{t.unavailableBody}</p></div></div>:<div className="toman-payment-fields">
                    <label>{t.destination}<select value={destinationId} disabled={busy} onChange={event=>setDestinationId(event.target.value)}><option value="">{t.chooseDestination}</option>{selected?.destinations.map(destination=><option key={destination.id} value={destination.id}>{destination.bank_name} · {destination.account_holder}</option>)}</select></label>
                    {selectedDestination&&<div className="toman-destination"><strong>{selectedDestination.account_holder}</strong>{[selectedDestination.iban,selectedDestination.card_number,selectedDestination.account_number,selectedDestination.deposit_identifier].filter((value):value is string=>!!value).map((value,index)=><CopyValue key={`${index}-${value}`} value={value} label={t.copy} locale={locale}/>)}</div>}
                    <label>{t.bank}<select value={bankId} disabled={busy} onChange={event=>setBankId(event.target.value)}><option value="">{t.chooseBank}</option>{bankAccounts.map(bank=><option key={bank.id} value={bank.id}>{bank.bank_name} · {bank.card_last4||bank.iban.slice(-4)}</option>)}</select></label>
                    <a className="toman-bank-link" href="/account/banks"><CreditCard size={15}/>{t.bankLink}<ArrowLeft size={15}/></a>
                    <label htmlFor="toman-transfer-reference">{t.transferReference}<input id="toman-transfer-reference" value={transferReference} onChange={event=>setTransferReference(event.target.value)} disabled={busy} maxLength={100} autoComplete="off" dir="ltr"/><small>{t.referenceHint}</small></label>
                  </div>}
                </div>}
              </div>;
            })}
          </div>
          <p className="toman-gateway-note"><LockKeyhole size={14}/>{gatewayReady?t.baleActiveNote:t.gatewayNote}</p>

          {method&&method!=='gateway'&&!tcarttSelected&&<div className="toman-draft-actions">
            {draft&&<div className="toman-draft-meta"><span>{dirty?t.unsaved:t.draftId}</span><bdi>{draft.request_id.slice(0,8)}</bdi></div>}
            <button type="button" className="toman-primary" disabled={!selectable||!amountValid||(!!draft&&!dirty)} onClick={()=>void mutate('save_draft')}>{busy?<LoaderCircle size={19} className="account-spinner"/>:<Save size={19}/>}<span>{busy?t.saving:draft?t.update:t.save}</span>{locale==='en'?<ArrowRight size={18}/>:<ArrowLeft size={18}/>}</button>
            <p className="toman-draft-note"><ShieldCheck size={17}/>{t.draftNote}</p>
            {paymentReady&&<><button type="button" className="toman-submit" disabled={!selectable||!draft||dirty||!amountValid||!selectedDestination||!bankId||!transferReference.trim()} onClick={()=>void mutate('submit')}><CheckCircle2 size={18}/>{t.submit}</button><p className="toman-draft-note">{t.submitNote}</p></>}
          </div>}
          {feedbackScope==='form'&&notice&&<div className="toman-alert is-success" role="status"><CheckCircle2 size={20}/><span>{notice}</span></div>}
          {feedbackScope==='form'&&error&&<div className="toman-alert is-error" role="alert"><Info size={19}/><span>{error}</span></div>}
        </div>

        <aside className="toman-aside" aria-labelledby="toman-faq-title"><div className="toman-faq"><header><span className="toman-faq-icon"><HelpCircle size={23}/></span><h3 id="toman-faq-title">{t.faq}</h3></header>{depositFaq(locale).map(({question,answer},index)=><details key={index}><summary><span>{question}</span><Plus size={18}/></summary><p>{answer}</p></details>)}</div><div className="toman-support-card"><span className="toman-support-symbol" aria-hidden="true"><Headphones size={34}/><i><Check size={12}/></i></span><span className="toman-eyebrow">PLANCK SUPPORT</span><h3>{t.help}</h3><p>{t.supportBody}</p><a href="tel:+982182805404"><bdi>{locale==='en'?'02182805404':'02182805404'.replace(/\d/g,d=>(locale==='ar'?'٠١٢٣٤٥٦٧٨٩':'۰۱۲۳۴۵۶۷۸۹')[Number(d)])}</bdi><ArrowUpLeft size={17}/></a></div><p className="toman-bank-reminder"><ShieldCheck size={20}/>{t.ownBank}</p><a className="toman-bank-link" href="/account/banks">{t.bankLink}<ArrowLeft size={16}/></a></aside>
      </div>
    </div>

    <div id="coin-panel" role="tabpanel" aria-labelledby="coin-tab" hidden={tab!=='coin'} className="toman-coin-panel"><UsdtFunding/></div>

    <section id="deposit-history" ref={historySection} tabIndex={-1} className="toman-history" aria-labelledby="toman-history-title"><header><div><span className="toman-history-symbol"><History size={22}/></span><div><h3 id="toman-history-title">{t.history}</h3><p>{t.latest}</p></div></div><button type="button" className="toman-refresh" disabled={loading||busy} onClick={()=>void load(false)} aria-label={t.refresh}><RefreshCw size={18} className={loading?'account-spinner':''}/></button></header>
      {feedbackScope==='history'&&notice&&<div className="toman-alert is-success" role="status"><CheckCircle2 size={20}/><span>{notice}</span></div>}
      {feedbackScope==='history'&&error&&<div className="toman-alert is-error" role="alert"><Info size={19}/><span>{error}</span></div>}
      {loading&&!state?<p className="toman-loading" role="status"><LoaderCircle size={19} className="account-spinner"/>{t.loading}</p>:state?.history.length?<div className="toman-history-list">{state.history.map(row=><article className="toman-history-row" key={row.request_id}><span className={`toman-history-icon status-${row.status}`}><ReceiptText size={21}/></span><div className="toman-history-content"><div><strong>{money(row.amount_rial)} <small>{t.currency}</small></strong><span className={`toman-status status-${row.status}`}>{statusText(row.status)}</span></div><p>{methodLabels[row.method]}<span>·</span><DepositDate value={row.updated_at} locale={locale}/></p><span className="toman-reference">{t.reference} <bdi>{row.request_id}</bdi></span>{cancelId===row.request_id&&<div className="toman-cancel-confirm"><strong>{t.cancelTitle}</strong><p>{t.cancelBody}</p><button type="button" className="toman-cancel-yes" disabled={busy} onClick={()=>void mutate('cancel',row)}>{t.confirmCancel}</button><button type="button" disabled={busy} onClick={()=>setCancelId(null)}>{t.keep}</button></div>}</div>{row.status==='draft'&&<div className="toman-history-actions"><button type="button" disabled={!selectable} onClick={()=>editRequest(row)}>{t.edit}</button><button type="button" disabled={!selectable} onClick={()=>setCancelId(row.request_id)} aria-label={t.cancel}><X size={17}/></button></div>}</article>)}</div>:!loadError&&<div className="toman-empty"><History size={29}/><h4>{t.empty}</h4><p>{t.emptyBody}</p></div>}
      {state?.has_more&&<button type="button" className="toman-more" disabled={moreBusy} onClick={()=>void loadMore()}>{moreBusy?<LoaderCircle className="account-spinner" size={18}/>:<ChevronDown size={18}/>} {locale==='fa'?'نمایش سوابق بیشتر':locale==='ar'?'عرض المزيد':'Show more'}</button>}
      {!!state?.deposits?.length&&<div className="toman-legacy"><h4>{t.legacy}</h4>{state.deposits.map(row=><article key={row.id}><strong>{money(row.amount_rial)} {t.currency}</strong><DepositDate value={row.created_at} locale={locale}/><span className={`toman-status status-${row.status}`}>{statusText(row.status)}</span><bdi>{row.reference||'—'}</bdi>{row.provider==='bale'&&<button type="button" className="toman-bank-link" disabled={gatewayBusy||busy||authNeeded} onClick={()=>{setTab('toman');setMethod('gateway');setGatewayPayment({paymentId:row.id,status:row.status,url:null,testMode:row.test_mode===true,amountRial:row.amount_rial});setAmount(rialToToman(BigInt(row.amount_rial)));void checkGateway(row.id);requestAnimationFrame(()=>amountInput.current?.scrollIntoView({behavior:data.preferences?.reduced_motion?'instant':'smooth',block:'center'}))}}>{t.baleHistoryCheck}<RefreshCw size={15}/></button>}{row.provider==='tcartt'&&<button type="button" className="toman-bank-link" disabled={busy||authNeeded} onClick={()=>{setTab('toman');setMethod('card_transfer');setTcarttResume(row.id);requestAnimationFrame(()=>amountInput.current?.scrollIntoView({behavior:data.preferences?.reduced_motion?'instant':'smooth',block:'center'}))}}>{locale==='fa'?'پیگیری واریز تیکارت':locale==='ar'?'متابعة إيداع تیکارت':'Track Tcartt deposit'}<RefreshCw size={15}/></button>}</article>)}</div>}
      <a className="toman-all-transactions" href="/wallet/transactions">{t.allTransactions}<ArrowLeft size={16}/></a>
    </section>
  </section>;
}