'use client';

import Link from './account-link';
import {useRef,useState} from 'react';
import {CheckCircle2,TriangleAlert,LoaderCircle,ShieldCheck} from 'lucide-react';
import {Dialog,DialogContent,DialogTitle,DialogDescription} from './ui/dialog';
import {bankRegistrationInput,ibanInputDigits} from '@/lib/bank-registration';
import {bankFromIban,bankFromCard} from '@/lib/iranian-banks';
import {BankLogo} from './bank-logo';
export function BankRegistration({open,onOpenChange,nationalId,onSaved,identityVerified}:{open:boolean;onOpenChange:(open:boolean)=>void;nationalId?:string|null;onSaved:()=>Promise<void>;identityVerified:boolean}){
 const [busy,setBusy]=useState(false),[result,setResult]=useState<{ok:boolean;message:string;code?:string}|null>(null),[error,setError]=useState('');
 const [accountTitle,setAccountTitle]=useState(''),[ibanDigits,setIbanDigits]=useState(''),[card,setCard]=useState(''),[consent,setConsent]=useState(false);
 const lock=useRef(false),attempt=useRef<{key:string;body:string}|null>(null);
 const iban='IR'+ibanDigits,ibanBank=bankFromIban(iban),cardBank=bankFromCard(card),bankName=ibanBank?.name||'';
 function close(){if(lock.current)return;setResult(null);setError('');setAccountTitle('');setIbanDigits('');setCard('');setConsent(false);attempt.current=null;onOpenChange(false)}
 async function submit(){
  if(lock.current)return;setError('');
  const form={account_title:accountTitle,iban,card_number:card,consent},fingerprint=JSON.stringify(form);
  if(!attempt.current||attempt.current.body!==fingerprint)attempt.current={key:crypto.randomUUID(),body:fingerprint};
  const payload={...form,request_key:attempt.current.key};
  try{bankRegistrationInput(payload)}catch(e){setError((e as Error).message);return}
  lock.current=true;setBusy(true);
  try{
   const r=await fetch('/api/dashboard',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'bank_add',payload})});
   const data=await r.json() as {ok?:boolean;error?:string;code?:string};
   if(!r.ok||data.ok!==true){attempt.current=null;setResult({ok:false,code:data.code,message:data.error||'ثبت حساب انجام نشد. دوباره تلاش کنید.'});return}
   setResult({ok:true,message:card?'شماره کارت و شبا مطابقت دارند و مالکیت شبا با کد ملی ثبت‌شده تطبیق داده شد.':'مالکیت شبا با کد ملی ثبت‌شده تطبیق داده شد.'});setCard('');attempt.current=null;await onSaved();
  }catch{setResult({ok:false,message:'پاسخ نهایی دریافت نشد. دوباره تلاش کنید تا وضعیت همان درخواست بررسی شود.'})}
  finally{lock.current=false;setBusy(false)}
 }
 return <Dialog open={open} onOpenChange={v=>{if(!v)close()}}><DialogContent className="planck-modal dashboard-modal" dir="rtl">
  <DialogTitle>{result?result.ok?'حساب بانکی با موفقیت ثبت شد':'حساب بانکی ثبت نشد':'افزودن حساب بانکی'}</DialogTitle>
  <DialogDescription>{result?result.message:'شبا با کد ملی پروفایل بررسی می‌شود. اگر شماره کارت را هم وارد کنید، تعلق کارت به همان شبا بررسی خواهد شد.'}</DialogDescription>
  {result?<div className={'bank-registration-result '+(result.ok?'is-success':'is-error')} role={result.ok?'status':'alert'}>{result.ok?<CheckCircle2 size={44}/>:<TriangleAlert size={44}/>}
    {result.ok&&!identityVerified&&<p>ثبت حساب انجام شد. تأیید نهایی هویت شما همچنان از بخش احراز هویت انجام می‌شود.</p>}
    <div className="dash-modal-actions">{!result.ok&&result.code!=='bank_registration_unavailable'&&<button className="dash-primary" disabled={busy} onClick={()=>setResult(null)}>اصلاح اطلاعات و تلاش دوباره</button>}<button className={result.ok?'dash-primary':'dash-secondary'} disabled={busy} onClick={close}>{result.ok?'متوجه شدم':'بستن'}</button></div>
   </div>:!nationalId?<div className="dash-form"><p>ابتدا کد ملی خود را در مشخصات کاربری ثبت کنید.</p><Link className="dash-primary" href="/account/profile">رفتن به مشخصات کاربری</Link></div>:
   <form className="dash-form" onSubmit={e=>{e.preventDefault();void submit()}}><fieldset disabled={busy} className="bank-registration-fields">
    <label>کد ملی پروفایل<input dir="ltr" readOnly value={nationalId}/></label>
    <label htmlFor="bank-iban">شماره شبا<span className="bank-iban-input" dir="ltr"><span aria-hidden="true">IR</span><input id="bank-iban" value={ibanDigits} onChange={e=>setIbanDigits(ibanInputDigits(e.target.value))} dir="ltr" inputMode="numeric" placeholder="۲۴ رقم شماره شبا" required pattern="[0-9]{24}" maxLength={40} autoComplete="off" aria-describedby="bank-iban-hint"/></span><small id="bank-iban-hint">پیشوند IR ثابت است؛ فقط ۲۴ رقم را وارد کنید یا شبای کامل را بچسبانید.</small></label>
    <div className="bank-issuer-field"><BankLogo iban={iban} name={bankName}/><label>نام بانک<input value={bankName} readOnly placeholder="پس از واردکردن شبا، خودکار نمایش داده می‌شود"/></label></div>
    <label>عنوان حساب <small>(اختیاری)</small><input value={accountTitle} onChange={e=>setAccountTitle(e.target.value)} maxLength={80} autoComplete="off" placeholder="مثلاً حساب شخصی یا حساب پس‌انداز"/></label>
    <label>شماره کارت <small>(اختیاری)</small><input value={card} onChange={e=>setCard(e.target.value)} dir="ltr" inputMode="numeric" maxLength={23} autoComplete="off" placeholder="•••• •••• •••• ••••"/></label>
    {cardBank&&<div className="bank-card-issuer" role="status"><BankLogo card={card}/><span>بانک صادرکننده کارت: {cardBank.name}</span></div>}
    <label className="bank-registration-consent"><input type="checkbox" checked={consent} onChange={e=>setConsent(e.target.checked)} required/><span>تأیید می‌کنم حساب متعلق به من است و اجازه بررسی مالکیت آن را می‌دهم.</span></label>
    {error&&<p className="dash-error" role="alert">{error}</p>}
    <button className="dash-primary" disabled={busy}>{busy?<><LoaderCircle size={18} className="account-spinner"/>در حال بررسی مالکیت…</>:<><ShieldCheck size={18}/>بررسی مالکیت و ثبت حساب</>}</button>
   </fieldset></form>}
 </DialogContent></Dialog>;
}