'use client';
import {useEffect,useRef,useState} from 'react';
import {Wallet,ShieldCheck,QrCode,ExternalLink,LoaderCircle,Check,ArrowUpRight} from 'lucide-react';
import {Dialog,DialogContent,DialogTitle,DialogDescription} from './ui/dialog';
import {useSite} from './site-shell';
import {discoverWallets,connectAndLink,type WalletOption,type WalletProvider} from '@/lib/public-wallet';
import {walletCopy} from '@/lib/wallet-copy';
export function PublicWalletConnect({className='dash-secondary'}:{className?:string}){
 const {user,locale,open:openAccount,customer}=useSite(),c=walletCopy(locale);
 const [opened,setOpened]=useState(false),[wallets,setWallets]=useState<WalletOption[]>([]),[projectId,setProjectId]=useState<string|null>(null),[stage,setStage]=useState(''),[error,setError]=useState(''),[qr,setQr]=useState(''),[saved,setSaved]=useState('');
 const attempt=useRef(0),wc=useRef<WalletProvider|null>(null),subject=useRef(user?.id);subject.current=user?.id;
 const linked=customer.data?.wallets.filter(w=>w.wallet_type==='public'&&w.verified_at)||[];
 const cancel=()=>{attempt.current++;const p=wc.current;wc.current=null;if(p)void p.disconnect?.().catch(()=>{});setStage('');setQr('')};
 useEffect(()=>{if(!opened)return;const dispose=discoverWallets(window,setWallets);const abort=new AbortController();void fetch('/api/wallet-connect',{signal:abort.signal,cache:'no-store'}).then(r=>r.ok?r.json() as Promise<{projectId?:string}>:null).then(data=>setProjectId(data?.projectId||null)).catch(()=>{});return()=>{dispose();abort.abort();attempt.current++;const p=wc.current;wc.current=null;if(p)void p.disconnect?.().catch(()=>{})}},[opened]);
 useEffect(()=>{setOpened(false);setSaved('');setError('')},[user?.id]);
 const post=async(body:unknown)=>{const response=await fetch('/api/wallet-connect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const value=await response.json() as {error?:string};if(!response.ok)throw new Error(value.error||'wallet_unavailable');return value};
 const begin=async(option?:WalletOption)=>{
  if(!user||stage)return;const id=++attempt.current,userId=user.id;const active=()=>attempt.current===id&&subject.current===userId;
  setError('');setSaved('');setStage('connect');setQr('');
  let provider:WalletProvider|undefined=option?.provider;
  try{
   if(!provider){
    if(!projectId)throw new Error('wallet_unavailable');
    const {EthereumProvider}=await import('@walletconnect/ethereum-provider');if(!active())return;
    const mobile=await EthereumProvider.init({projectId,metadata:{name:'Planck Marketplace',description:'Connect your wallet to your Planck account',url:window.location.origin,icons:[window.location.origin+'/favicon.svg']},showQrModal:false,methods:[],events:[],optionalChains:[1,137,56,42161,8453],optionalMethods:['personal_sign'],optionalEvents:['accountsChanged','chainChanged'],disableProviderPing:true});
    if(!active()){await mobile.disconnect().catch(()=>{});return}wc.current=mobile as unknown as WalletProvider;
    mobile.on('display_uri',async(uri:string)=>{try{if(!active())return;const QR=await import('qrcode');const data=await QR.toDataURL(uri,{width:320,margin:2,errorCorrectionLevel:'M'});if(active())setQr(data)}catch{if(active()){setError(c.error);cancel()}}});
    await mobile.connect();if(!active()){await mobile.disconnect().catch(()=>{});return}setQr('');provider=mobile as unknown as WalletProvider;
   }
   const result=await connectAndLink(provider,{label:option?.name||'WalletConnect',userId,origin:window.location.origin,active,stage:setStage,post});
   if(active()){setSaved(result.address);setStage('');setQr('');void customer.reload()}
  }catch(e){if(!active())return;const value=e as {code?:number;message?:string};const msg=value.message||'';setError(value.code===4001?c.rejected:value.code===-32002?c.busy:msg in c?String(c[msg as keyof typeof c]):msg==='wallet_unavailable'?c.unavailable:c.error);setStage('');setQr('');const p=wc.current;wc.current=null;if(p)void p.disconnect?.().catch(()=>{})}
 };
 return <><button type="button" className={className} onClick={()=>{if(!user){openAccount('login');return}setError('');setSaved('');setStage('');setOpened(true)}}><Wallet size={17}/>{linked.length?c.manage:c.connect}<ArrowUpRight size={13}/></button>
  <Dialog open={opened} onOpenChange={v=>{if(!v)cancel();setOpened(v)}}><DialogContent className="public-wallet-dialog" dir={locale==='en'?'ltr':'rtl'}><div className="wallet-dialog-heading"><span><Wallet size={25}/></span><div><DialogTitle>{c.title}</DialogTitle><DialogDescription>{c.description}</DialogDescription></div></div>
   {saved?<div className="wallet-linked-success"><span><Check size={30}/></span><h3>{c.success}</h3><code dir="ltr">{saved}</code><p>{c.successBody}</p><button className="wallet-primary" onClick={()=>{cancel();setOpened(false)}}>{c.done}</button></div>:<>
    <p className="wallet-scope">{c.scope}</p>
    {!stage&&<><div className="wallet-provider-list">{wallets.map(w=><button type="button" onClick={()=>void begin(w)} key={w.id}><span className={'wallet-provider-symbol '+w.kind}><Wallet size={23}/></span><span><strong dir="ltr">{w.name}</strong><small>{c.installed}</small></span><ArrowUpRight size={18}/></button>)}</div>{!wallets.length&&<div className="wallet-no-extension"><p>{c.none}</p><div><a href="https://metamask.io/download" target="_blank" rel="noopener noreferrer">MetaMask <ExternalLink size={13}/></a><a href="https://trustwallet.com/download" target="_blank" rel="noopener noreferrer">Trust Wallet <ExternalLink size={13}/></a></div></div>}
    <button className="wallet-qr-option" type="button" onClick={()=>void begin()} disabled={!projectId}><span className="wallet-provider-symbol qr"><QrCode size={24}/></span><span><strong>{c.qr}</strong><small>{projectId?c.qrBody:c.qrPending}</small></span><ArrowUpRight size={18}/></button></>}
    {stage&&<div className="wallet-progress" role="status"><LoaderCircle className="wallet-spinner" size={25}/><p>{stage==='sign'?c.signStage:stage==='save'?c.saveStage:c.connectStage}</p>{qr&&<><img src={qr} alt={c.qr} width={280} height={280}/><small>{c.scan}</small></>}<button type="button" onClick={cancel}>{c.cancel}</button></div>}
    {error&&<p className="wallet-link-error" role="alert">{error}</p>}
    <p className="wallet-signing-note"><ShieldCheck size={18}/>{c.safe}</p>
    {!stage&&linked.length>0&&<div className="wallet-verified-list"><h4>{c.saved}</h4>{linked.map(w=><div key={w.id}><Check size={14}/><code dir="ltr">{w.address.slice(0,8)}…{w.address.slice(-6)}</code><small>{w.label}</small></div>)}</div>}
   </>}
  </DialogContent></Dialog>
 </>;
}