'use client';
import {BankRegistration} from './bank-registration';
import {CustomerProfilePanels} from './customer-profile-panels';
import {BankLogo} from './bank-logo';
import {bankFromIban} from '@/lib/iranian-banks';
import {verificationPresentation} from '@/lib/identity-presentation';
import {useVerificationClock} from './use-verification-clock';
import {WalletDashboard} from './wallet-dashboard';
import {WalletAddressManagement} from './wallet-address-management';
import {WalletWithdrawalPage} from './wallet-withdrawal-page';
import {FundingHistory,WithdrawalRequest} from './funding-review';
import {TomanDeposit} from './toman-deposit';
import {LocalizedNumberInput} from './localized-number-input';
import {ReferralDashboard} from './referral-dashboard';
import {CustomerInbox} from './customer-inbox';
import {useEffect,useState,type ReactNode} from 'react';
import {Globe2,Sun,Moon,Wallet,ShieldCheck,CreditCard,BellRing,Code2,ArrowUpRight,ArrowDownLeft,History,Coins,HandCoins,ChevronLeft,Plus,Check,Copy,Eye,EyeOff,Search,Inbox,LockKeyhole,Mail,Smartphone,Monitor,ArrowLeft,RefreshCw,Trash2,Pin,CheckCircle2} from 'lucide-react';
import {ProfilePhotoEditor} from './user-avatar';
import {useSite} from './site-shell';
import Link from './account-link';
import {useDashboardCatalog} from './dashboard-catalog-context';
import {DashboardLoading} from './dashboard-loading';
import {Tabs,TabsList,TabsTrigger,TabsContent} from './ui/tabs';
import {Switch} from './ui/switch';
import {Dialog,DialogContent,DialogTitle,DialogDescription} from './ui/dialog';
import {Select,SelectTrigger,SelectValue,SelectContent,SelectItem} from './ui/select';
import {defaultPreferences,decimalUnits,unitsDecimal,dashboardNumber,type DashboardArea,type DashboardData,type Preferences} from '@/lib/dashboard';
import {dashboardLabel} from '@/lib/dashboard-copy';
import {localized,type Catalog} from '@/lib/catalog';
import {latinDigits} from '@/lib/auth-input';

function useWords(){const {locale}=useSite();return (key:string)=>dashboardLabel(key,locale)}
function Panel({title,action,children,className=''}:{title?:string;action?:ReactNode;children:ReactNode;className?:string}){return <section className={`dash-card ${className}`}>{(title||action)&&<div className="dash-card-heading"><h2>{title}</h2>{action}</div>}{children}</section>}
function Empty({icon=<Inbox size={30}/>,title='هنوز موردی ثبت نشده است',description,action}:{icon?:ReactNode;title?:string;description?:string;action?:ReactNode}){return <div className="dash-empty"><span>{icon}</span><h3>{title}</h3>{description&&<p>{description}</p>}{action}</div>}
function State({value}:{value:string}){const t=useWords();return <span className={`dash-status status-${value}`}>{t(value)}</span>}
function DateText({value}:{value?:string|null}){const {locale}=useSite();return <>{value&&!Number.isNaN(Date.parse(value))?new Intl.DateTimeFormat(locale,{dateStyle:'medium'}).format(new Date(value)):'—'}</>}
function CopyButton({value}:{value:string}){const [copied,setCopied]=useState(false),[error,setError]=useState(false),t=useWords();useEffect(()=>{if(!copied)return;const timer=setTimeout(()=>setCopied(false),2500);return()=>clearTimeout(timer)},[copied]);return <span className="dash-copy-wrap"><button className="dash-icon-button" aria-label={t('copy')} onClick={async()=>{try{await navigator.clipboard.writeText(value);setCopied(true);setError(false)}catch{setError(true)}}}>{copied?<Check size={16}/>:<Copy size={16}/>}</button>{(copied||error)&&<small role="status">{copied?t('copied'):'کپی نشد؛ متن را انتخاب کنید.'}</small>}</span>}

export function CustomerDashboard({area,section}:{area:DashboardArea;section:string}){const catalog=useDashboardCatalog(),{user}=useSite();return <DashboardBody key={`${user?.id||'guest'}/${area}/${section}`} catalog={catalog} area={area} section={section}/>;}
function DashboardBody({catalog,area,section}:{catalog:Catalog;area:DashboardArea;section:string}){
 const {user,customer,open,locale,theme,toggleTheme,themeSaving}=useSite(),t=useWords();
 const [notice,setNotice]=useState(''),[mutationError,setMutationError]=useState(''),[busy,setBusy]=useState(false);
 const [modal,setModal]=useState<'bank'|'alert'|'recovery'|null>(null),[confirm,setConfirm]=useState<{action:string;id:string;title:string}|null>(null);
 const [bankTab,setBankTab]=useState('cards'),[projectId,setProjectId]=useState(''),[alertDirection,setAlertDirection]=useState('above'),[alertAmount,setAlertAmount]=useState('');
 const data=customer.data,prefs={...defaultPreferences,...data?.preferences};
 const verificationNow=useVerificationClock(data?.account.verification_mode==='temporary'?data.account.temporary_expires_at:null,customer.reload);
 const verification=verificationPresentation({...data?.account,status:data?.account.verification_status||'unverified',level:data?.account.account_level},locale,verificationNow);

 async function mutate(action:string,payload:Record<string,unknown>){setBusy(true);setNotice('');setMutationError('');try{await customer.save(action,payload);setNotice(t('saved'));setModal(null);setConfirm(null);return true}catch(e){setMutationError((e as Error).message);return false}finally{setBusy(false)}}
 const savePref=(payload:Partial<Preferences>)=>mutate('preferences',{theme,...payload});
 if(!user)return null;
 const fullName=[data?.account.first_name,data?.account.last_name].filter(Boolean).join(' ')||user.name||user.username||t('personal');
 return <div className="dashboard-page-content">
    {notice&&<div className="dash-notice" role="status"><CheckCircle2 size={18}/>{notice}</div>}{mutationError&&<p className="dash-error" role="alert">{mutationError}</p>}{customer.error&&<div className="dash-error" role="alert">{customer.error}<button onClick={()=>void customer.reload()}><RefreshCw size={16}/>{t('retry')}</button></div>}
    {!data?<DashboardLoading locale={locale} active={customer.status==='loading'}/>:<>
     {area==='account'&&section==='profile'&&<CustomerProfilePanels access={user.access} account={data.account} user={user} locale={locale} verification={verification} hasBankOwnership={data.banks.some(b=>!!b.ownership_checked_at)} avatar={<ProfilePhotoEditor key={user.id} name={fullName} userId={user.id} path={data.account.avatar_path} locale={locale} onChanged={customer.reload}/>} busy={busy} onSave={payload=>mutate('profile',payload)} onAddEmail={()=>open('login')}/>}
     {area==='account'&&section==='profile'&&<FundingHistory compact/>}
     {area==='account'&&section==='banks'&&<><Panel title="کارت‌ها و حساب‌های بانکی" action={<button className="dash-primary" onClick={()=>{setMutationError('');setModal('bank')}}><Plus size={18}/>افزودن حساب</button>}><Tabs value={bankTab} onValueChange={v=>setBankTab(String(v))} className="dash-tabs"><TabsList variant="line"><TabsTrigger value="cards">کارت بانکی</TabsTrigger><TabsTrigger value="iban">شماره شبا</TabsTrigger><TabsTrigger value="direct">پرداخت مستقیم</TabsTrigger></TabsList>{['cards','iban'].map(tab=><TabsContent key={tab} value={tab}>{data.banks.length?<div className="dash-bank-grid">{data.banks.map(bank=><article className="dash-bank-card" key={bank.id}><header><BankLogo iban={bank.iban} name={bank.bank_name}/><div><strong>{bank.account_title||bankFromIban(bank.iban)?.name||bank.bank_name}</strong>{bank.account_title&&<small>{bankFromIban(bank.iban)?.name||bank.bank_name}</small>}{bank.ownership_checked_at?<span className="dash-status status-verified">شبا با کد ملی تطبیق دارد</span>:<State value={bank.status}/>}<small>{bank.card_last4&&(bank.card_link_status==='verified'?'کارت و شبا تطبیق دارند':'کارت هنوز با شبا تطبیق داده نشده است')}</small></div>{bank.is_primary&&<Pin size={17}/>}</header><b dir="ltr">{tab==='iban'?bank.iban:bank.card_last4?'•••• •••• •••• '+bank.card_last4:'چهار رقم پایانی ثبت نشده'}</b><footer><button disabled={busy||bank.is_primary} onClick={()=>void mutate('bank_primary',{id:bank.id})}>{bank.is_primary?'حساب پیش‌فرض':'انتخاب پیش‌فرض'}</button><button className="dash-danger" aria-label={`حذف ${bank.account_title||bank.bank_name}`} onClick={()=>setConfirm({action:'bank_remove',id:bank.id,title:'حذف حساب بانکی'})}><Trash2 size={16}/></button></footer></article>)}</div>:<Empty icon={<CreditCard size={30}/>} title="اولین حساب بانکی خود را اضافه کنید" description="پس از تطبیق شبا با کد ملی، حساب به فهرست اضافه می‌شود."/>}</TabsContent>)}<TabsContent value="direct"><Empty icon={<LockKeyhole size={30}/>} title="پرداخت مستقیم هنوز فعال نیست" description="فعال‌سازی این بخش به اتصال سرویس بانکی نیاز دارد."/></TabsContent></Tabs></Panel><WalletAddressManagement wallets={data.wallets}/></>}
     {user.access&&(!user.access.trading_enabled||!user.access.withdrawals_enabled)&&<Panel title="دسترسی‌های حساب"><p className="dash-note">{!user.access.trading_enabled&&'معامله برای حساب شما غیرفعال است. '}{!user.access.withdrawals_enabled&&'برداشت برای حساب شما غیرفعال است. '}موجودی و سوابق شما همچنان قابل مشاهده است.</p>{user.access.reason&&<p>پیام مدیریت: {user.access.reason}</p>}<Link className="dash-secondary" href="/account/notifications">مشاهده پیام‌های مدیریت</Link></Panel>}
     {area==='account'&&section==='security'&&<><Panel title="روش‌های ورود به حساب"><div className="dash-info-row"><span><Smartphone size={21}/>رمز یک‌بارمصرف موبایل</span><strong dir="ltr">{user.phone||'شماره موبایل ثبت نشده'}</strong></div><div className="dash-info-row"><span><Mail size={21}/>ایمیل و رمز عبور</span><strong dir="ltr">{user.email||'ایمیل ثبت نشده'}</strong></div><div className="dash-info-row"><span><ShieldCheck size={21}/>اپلیکیشن رمزساز</span><small className="dash-chip">{t('soon')}</small></div></Panel><Panel><div className="dash-info-row"><div><strong>رمز عبور</strong><p>لینک تعیین رمز جدید به ایمیل حساب ارسال می‌شود.</p></div><button className="dash-secondary" onClick={()=>{setMutationError('');setModal('recovery')}} disabled={!user.email}>تغییر رمز عبور</button></div></Panel><Panel title="دستگاه‌های متصل">{data.sessions.length?<div className="dash-table-scroll"><table><thead><tr><th>دستگاه</th><th>آخرین اتصال</th><th>IP</th></tr></thead><tbody>{data.sessions.map(s=><tr key={s.id}><td><Monitor size={18}/>{s.device_label}</td><td><DateText value={s.last_seen_at}/></td><td dir="ltr">{s.ip_address||'—'}</td></tr>)}</tbody></table></div>:<Empty icon={<Monitor size={29}/>} title="گزارش دستگاه‌ها هنوز در دسترس نیست" description="اطلاعات این بخش با فعال‌شدن ثبت نشست‌ها نمایش داده می‌شود."/>}</Panel></>}
     {area==='account'&&section==='settings'&&<><Panel title="مدیریت پیام‌ها"><Setting title="اطلاع‌رسانی با ایمیل" description="ترجیح شما ذخیره می‌شود و پس از فعال‌شدن ارسال اعلان‌ها اعمال خواهد شد." checked={prefs.email_notifications} disabled={busy} onChange={v=>void savePref({email_notifications:v})}/></Panel><Panel title="مدیریت معامله‌ها"><Setting title="دریافت تأیید برای ثبت سفارش" checked={prefs.confirm_orders} disabled={busy} onChange={v=>void savePref({confirm_orders:v})}/><Setting title="دریافت تأیید برای لغو سفارش" checked={prefs.confirm_cancellations} disabled={busy} onChange={v=>void savePref({confirm_cancellations:v})}/><p className="dash-note">این ترجیحات هنگام فعال‌شدن معامله‌ها در جریان سفارش اعمال می‌شوند.</p></Panel><Panel title="نمایش و حریم خصوصی"><Setting title="پنهان‌کردن موجودی دارایی‌ها" checked={prefs.hide_balances} disabled={busy} onChange={v=>void savePref({hide_balances:v})}/><Setting title="کاهش حرکت و انیمیشن" checked={prefs.reduced_motion} disabled={busy} onChange={v=>void savePref({reduced_motion:v})}/><div className="dash-info-row"><span>واحد نمایش ارزش دارایی</span><Currency value={prefs.currency} disabled={busy} onChange={v=>void savePref({currency:v})}/></div><div className="dash-info-row"><span>تم نمایش</span><button className="dash-secondary" disabled={themeSaving} onClick={toggleTheme}>{theme==='dark'?<Moon size={17}/>:<Sun size={17}/>} {theme==='dark'?'تیره':'روشن'}</button></div><div className="dash-info-row"><span><Globe2 size={19}/>زبان نمایش</span><button className="dash-secondary" onClick={()=>open('language')}>{locale==='fa'?'فارسی':locale==='en'?'English':'العربية'}<ChevronLeft size={16}/></button></div></Panel></>}
     {area==='account'&&section==='alerts'&&<Panel title="هشدارهای قیمت شما" action={<button className="dash-primary" disabled={!catalog.projects.length} onClick={()=>{setMutationError('');setProjectId(catalog.projects[0]?.id||'');setAlertAmount('');setModal('alert')}}><Plus size={18}/>هشدار جدید</button>}><p className="dash-note">هشدارها ذخیره می‌شوند و تا فعال‌شدن سرویس اطلاع‌رسانی در وضعیت متوقف باقی می‌مانند.</p>{data.alerts.length?<div className="dash-records">{data.alerts.map(a=><div className="dash-record" key={a.id}><span className="dash-record-icon"><BellRing size={22}/></span><div><strong>{localized(a.project_title,locale)}</strong><p>{a.direction==='above'?'بیشتر از':'کمتر از'} {dashboardNumber((BigInt(a.target_price_rial)/BigInt(10)).toString(),locale,0)} تومان</p></div><State value={a.status}/><button className="dash-icon-button dash-danger" aria-label="حذف هشدار" onClick={()=>setConfirm({action:'alert_remove',id:a.id,title:'حذف هشدار قیمت'})}><Trash2 size={17}/></button></div>)}</div>:<Empty icon={<BellRing size={32}/>} title="قیمت دلخواهتان را دنبال کنید" description={catalog.projects.length?'برای یکی از پروژه‌ها قیمت هدف مشخص کنید.':'پس از انتشار اولین پروژه، می‌توانید هشدار قیمت بسازید.'}/>}</Panel>}
     {area==='account'&&section==='referrals'&&<ReferralDashboard/>}
     {area==='account'&&section==='api'&&<Panel title="کلیدهای دسترسی API" action={<button className="dash-secondary" disabled><Plus size={17}/>ساخت کلید · به‌زودی</button>}><p className="dash-note"><LockKeyhole size={16}/>کلیدهای دسترسی محرمانه‌اند؛ از ارسال آن‌ها برای دیگران خودداری کنید.</p>{data.api_keys.length?data.api_keys.map(k=><article className="dash-api-card" key={k.id}><div><strong>{k.label}</strong><code dir="ltr">{k.key_prefix}••••••••</code></div><div>{k.scopes.map(scope=><span className="dash-chip" key={scope}>{scope==='read'?'خواندن':'معامله'}</span>)}</div><footer><span>انقضا: <DateText value={k.expires_at}/></span><button className="dash-danger" disabled={!!k.revoked_at||busy} onClick={()=>setConfirm({action:'api_revoke',id:k.id,title:'لغو دسترسی کلید API'})}>{k.revoked_at?'لغوشده':'لغو دسترسی'}</button></footer></article>):<Empty icon={<Code2 size={32}/>} title="کلید API فعالی ندارید" description="ساخت کلید پس از آماده‌شدن سرویس دسترسی برنامه‌ها فعال می‌شود."/>}</Panel>}
     {area==='account'&&section==='notifications'&&<CustomerInbox data={data} locale={locale} save={customer.save} reload={customer.reload}/>}
     {area==='wallet'&&['overview','assets'].includes(section)&&<WalletDashboard data={data} prefs={prefs} busy={busy} savePref={savePref} onAddBank={()=>{setMutationError('');setModal('bank')}}/>}
     {area==='wallet'&&['transactions','orders'].includes(section)&&<HistoryPanel data={data} orders={section==='orders'}/>}
     {area==='wallet'&&section==='deposit'&&<TomanDeposit data={data}/>}
     {area==='wallet'&&section==='withdraw'&&<Transfers/>}
     {area==='wallet'&&['credit','instant-credit','staking'].includes(section)&&<FinancePositions data={data} section={section}/>}
    </>}
  <BankRegistration key={user.id} open={modal==='bank'} onOpenChange={v=>{if(!v)setModal(null)}} nationalId={data?.account.national_id} identityVerified={verification.verified} onSaved={customer.reload}/>
  <Dialog open={!!modal&&modal!=='bank'} onOpenChange={v=>{if(!v&&!busy){setModal(null);setMutationError('')}}}><DialogContent className="planck-modal dashboard-modal" dir={locale==='en'?'ltr':'rtl'}><DialogTitle>{modal==='bank'?'افزودن حساب بانکی':modal==='alert'?'هشدار قیمت جدید':'تغییر رمز عبور'}</DialogTitle><DialogDescription>{modal==='bank'?'شماره شبا باید متعلق به خود شما باشد. تأیید مالکیت جداگانه انجام می‌شود.':modal==='alert'?'پروژه و قیمت هدف را انتخاب کنید. هشدار تا فعال‌سازی ارسال، متوقف می‌ماند.':'لینک بازیابی را در همین مرورگر باز کنید.'}</DialogDescription>
   {modal==='alert'&&<form className="dash-form" onSubmit={e=>{e.preventDefault();const f=new FormData(e.currentTarget),amount=latinDigits(String(f.get('price')||'')).replace(/[,٬\s]/g,'');if(!/^\d{1,28}$/.test(amount)||BigInt(amount)<=BigInt(0)){setMutationError('قیمت معتبر وارد کنید.');return}void mutate('alert_add',{project_id:projectId,direction:alertDirection,target_price_rial:(BigInt(amount)*BigInt(10)).toString()})}}><label>پروژه<Select value={projectId} onValueChange={v=>setProjectId(String(v))} items={catalog.projects.map(p=>({value:p.id,label:localized(p.title,locale)}))}><SelectTrigger><SelectValue/></SelectTrigger><SelectContent>{catalog.projects.map(p=><SelectItem value={p.id} key={p.id}>{localized(p.title,locale)}</SelectItem>)}</SelectContent></Select></label><label>زمان اعلام<Select value={alertDirection} onValueChange={v=>setAlertDirection(String(v))} items={[{value:'above',label:'قیمت بیشتر شود از'},{value:'below',label:'قیمت کمتر شود از'}]}><SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem value="above">قیمت بیشتر شود از</SelectItem><SelectItem value="below">قیمت کمتر شود از</SelectItem></SelectContent></Select></label><label htmlFor="price-alert-amount">قیمت هر واحد <small>(تومان)</small><LocalizedNumberInput id="price-alert-amount" name="price" locale={locale} value={alertAmount} onValueChange={setAlertAmount} inputMode="numeric" dir="ltr" autoComplete="off" required maxLength={28}/></label><button className="dash-primary" disabled={busy}>ذخیره هشدار</button></form>}
   {modal==='recovery'&&<form className="dash-form" onSubmit={async e=>{e.preventDefault();setBusy(true);setMutationError('');try{const r=await fetch('/api/auth/recovery',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'request',email:user.email})});const result=await r.json() as {error?:string;message:string};if(!r.ok)throw new Error(result.error);setNotice(result.message);setModal(null)}catch(e){setMutationError((e as Error).message)}finally{setBusy(false)}}}><label>ایمیل حساب<input readOnly dir="ltr" value={user.email||''}/></label><button className="dash-primary" disabled={busy||!user.email}>{busy?'در حال ارسال…':'ارسال لینک بازیابی'}</button></form>}
   {mutationError&&<p className="dash-error" role="alert">{mutationError}</p>}
  </DialogContent></Dialog>
  <Dialog open={!!confirm} onOpenChange={v=>{if(!v&&!busy)setConfirm(null)}}><DialogContent className="planck-modal dashboard-modal"><DialogTitle>{confirm?.title}</DialogTitle><DialogDescription>این مورد از دسترس حساب شما خارج خواهد شد.</DialogDescription><div className="dash-modal-actions"><button className="dash-secondary" disabled={busy} onClick={()=>setConfirm(null)}>{t('cancel')}</button><button className="dash-primary dash-destructive" disabled={busy} onClick={()=>confirm&&void mutate(confirm.action,{id:confirm.id})}>تأیید</button></div>{mutationError&&<p role="alert" className="dash-error">{mutationError}</p>}</DialogContent></Dialog>
 </div>;
}
function Setting({title,description,checked,onChange,disabled}:{title:string;description?:string;checked:boolean;disabled:boolean;onChange:(value:boolean)=>void}){return <div className="dash-setting"><div><strong>{title}</strong>{description&&<p>{description}</p>}</div><Switch checked={checked} onCheckedChange={onChange} disabled={disabled} aria-label={title}/></div>}
function Currency({value,onChange,disabled}:{value:'TMN'|'USDT';onChange:(v:'TMN'|'USDT')=>void;disabled:boolean}){return <Tabs value={value} onValueChange={v=>onChange(v as 'TMN'|'USDT')} className="dash-currency"><TabsList aria-label="واحد نمایش"><TabsTrigger disabled={disabled} value="TMN">تومان</TabsTrigger><TabsTrigger disabled={disabled} value="USDT">تتر</TabsTrigger></TabsList></Tabs>}
function HistoryPanel({data,orders}:{data:DashboardData;orders:boolean}){
 const {locale}=useSite(),t=useWords(),[filter,setFilter]=useState('all');
 const rows=orders?data.orders:data.transactions,filtered=rows.filter(row=>filter==='all'||row.status===filter);
 return <>{!orders&&<FundingHistory/>}<Panel title={t(orders?'orders':'transactions')}><Tabs className="dash-tabs" value={filter} onValueChange={v=>setFilter(String(v))}><TabsList variant="line"><TabsTrigger value="all">همه</TabsTrigger><TabsTrigger value="pending">در انتظار</TabsTrigger><TabsTrigger value={orders?'filled':'confirmed'}>تأییدشده</TabsTrigger><TabsTrigger value="rejected">ردشده</TabsTrigger></TabsList></Tabs><div className="dash-table-scroll"><table><thead><tr><th>تاریخ</th><th>نوع</th><th>{orders?'تعداد واحد':'دارایی'}</th><th>{orders?'قیمت واحد (تومان)':'مقدار'}</th><th>وضعیت</th><th>شماره پیگیری</th></tr></thead><tbody>{filtered.map(row=><tr key={row.id}><td><DateText value={row.created_at}/></td><td>{t('side' in row?row.side:row.kind==='withdrawal'?'withdraw':row.kind)}</td><td>{'quantity' in row?dashboardNumber(row.quantity,locale,8):row.asset_symbol}</td><td>{'unit_price_rial' in row?dashboardNumber((BigInt(row.unit_price_rial)/BigInt(10)).toString(),locale,0):dashboardNumber(row.amount,locale,8)}</td><td><State value={row.status}/></td><td><span className="dash-reference" dir="ltr">{row.reference}</span><CopyButton value={row.reference}/></td></tr>)}</tbody></table></div>{!filtered.length&&<Empty icon={<History size={30}/>} title="سابقه‌ای برای نمایش وجود ندارد" description="سوابق ثبت‌شده با وضعیت و شماره پیگیری در این بخش نگهداری می‌شوند."/>}<p className="dash-note">نمایش ۱۰۰ سابقه اخیر</p></Panel></>;
}
function Transfers(){return <WalletWithdrawalPage/>}
function FinancePositions({data,section}:{data:DashboardData;section:string}){const {locale}=useSite(),t=useWords(),staking=section==='staking',credits=data.credits.filter(c=>c.kind===(section==='credit'?'trading':'instant'));return <><Panel className="dash-finance-intro"><span className="dash-feature-icon">{staking?<Coins size={35}/>:<HandCoins size={35}/>}</span><h2>{t(section)} پلانک</h2><p>{staking?'طرح‌های فعال استیکینگ و پاداش ثبت‌شده شما در این بخش نمایش داده می‌شود.':'وضعیت اعتبار، مانده تعهد و تاریخ سررسید در این بخش در دسترس خواهد بود.'}</p><span className="dash-chip">فعال‌سازی طرح جدید · به‌زودی</span></Panel><Panel title={staking?'موقعیت‌های استیکینگ':'اعتبارهای شما'}>{staking?data.staking.length?data.staking.map(s=><div className="dash-info-row" key={s.id}><strong>{s.asset_symbol}</strong><span>{dashboardNumber(s.quantity,locale,8)} واحد</span><span>پاداش: {dashboardNumber(s.accrued_reward,locale,8)}</span><State value={s.status}/></div>):<Empty icon={<Coins size={28}/>} title="موقعیت استیکینگ ثبت نشده است"/>:credits.length?credits.map(c=><div className="dash-info-row" key={c.id}><div><strong>{dashboardNumber((BigInt(c.principal_rial)/BigInt(10)).toString(),locale,0)} تومان</strong><p>مانده: {dashboardNumber((BigInt(c.outstanding_rial)/BigInt(10)).toString(),locale,0)} تومان</p></div><span>سررسید: <DateText value={c.due_at}/></span><State value={c.status}/></div>):<Empty icon={<HandCoins size={28}/>} title="اعتبار فعالی ثبت نشده است"/>}</Panel></>}