'use client';
import { useEffect,useState } from 'react';
import { Coins,Gem,Check,Anchor,ArrowUpRight,Shield,Wind,Crosshair,Package,AlertCircle } from 'lucide-react';
import {content} from '../lib/content';
import { FLEET,modelFor,priceFor } from '../lib/fleet';
import { type Ship,type World,type Action } from '../lib/engine';
import { ShipArt } from './game';
export const DEFAULT_PACKS=[{id:'p100',name:'Kaptanın Kesesi',diamonds:100,price:9900},{id:'p500',name:'Korsan Hazinesi',diamonds:500,price:39900},{id:'p1200',name:'Kraliyet Sandığı',diamonds:1200,price:79900}];
export function FleetShop({ship,world,send,message,storeEndpoint,csrf,live}:{ship:Ship;world:World;send:(a:Action)=>Promise<boolean>;message:(s:string)=>void;storeEndpoint:string;csrf:string;live:boolean}){
 const [filter,setFilter]=useState('gold'),[focus,setFocus]=useState('albatros'),[loading,setLoading]=useState(false),[confirm,setConfirm]=useState<string|null>(null);
 const [store,setStore]=useState<{packages:typeof DEFAULT_PACKS;transferEnabled:boolean;paytrEnabled?:boolean;paytrTestMode?:boolean;bankInfo:string;orders:{id:string;diamonds:number;amount:number;status:string}[]}>({packages:DEFAULT_PACKS,transferEnabled:false,bankInfo:'',orders:[]});
 useEffect(()=>{if(filter==='diamonds')fetch(storeEndpoint).then(r=>r.json()).then(d=>setStore(d as typeof store)).catch(()=>message('Elmas paketlerine ulaşılamadı.'));},[filter,storeEndpoint,message]);
 const [billing,setBilling]=useState({billingName:'',billingAddress:'',billingPhone:''}),[checkoutUrl,setCheckoutUrl]=useState(''),[paymentMethod,setPaymentMethod]=useState('card');
 const card=!!store.paytrEnabled&&paymentMethod==='card';
 const fleet=content(world).ships.filter(m=>m.status==='sale'||ship.owned.includes(m.id));
 const selected=fleet.find(m=>m.id===focus)??FLEET[3];
 const buy=async(id:string)=>{setLoading(true);await send({type:'buyShip',kind:id});setConfirm(null);setLoading(false);};
 const order=async(id:string)=>{if(!live){message('Sipariş oluşturmak için önce giriş yap.');return;}setLoading(true);try{const r=await fetch(storeEndpoint,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},body:JSON.stringify({type:card?'checkout':'order',packageId:id,nonce:crypto.randomUUID(),...billing})});const d=await r.json() as {error?:string;message?:string;checkoutUrl?:string};if(!r.ok)throw new Error(d.error);if(d.checkoutUrl&&/^https:\/\/www\.paytr\.com\/odeme\/guvenli\/[a-zA-Z0-9_-]+$/.test(d.checkoutUrl))setCheckoutUrl(d.checkoutUrl);message(d.message??'Ödeme formu hazır.');const v=await fetch(storeEndpoint);setStore(await v.json() as typeof store);}catch(e){message(e instanceof Error?e.message:'Sipariş oluşturulamadı.');}setLoading(false);setConfirm(null);};
 return <>{checkoutUrl&&<div className="checkout-panel"><button className="text-button" onClick={()=>setCheckoutUrl('')}>Ödeme formunu kapat</button><iframe src={checkoutUrl} title="PayTR güvenli ödeme" allow="payment"/></div>}<div className="eyebrow"><Anchor size={14}/> KARAYEL TERSANESİ</div><h2 id="modal-title">Ufkun ötesinde bir gemi.</h2><p className="modal-intro">Altınla filonu büyüt. Elmasla kendine ait bir iz bırak.</p><div className="shop-wallet"><span><Coins size={15}/> {ship.gold.toLocaleString('tr-TR')} altın</span><span><Gem size={15}/> {(ship.diamonds??0).toLocaleString('tr-TR')} elmas</span></div><div className="shop-tabs"><button className={filter==='gold'?'selected':''} onClick={()=>{setFilter('gold');setFocus('albatros');}}><Coins size={15}/> Altın gemileri</button><button className={filter==='premium'?'selected':''} onClick={()=>{setFilter('premium');setFocus('eclipse');}}><Gem size={15}/> Efsanevi tasarımlar</button><button className={filter==='diamonds'?'selected':''} onClick={()=>setFilter('diamonds')}>Elmas al</button></div>
 {filter!=='diamonds'?<><div className={`fleet-hero ${selected.currency==='diamonds'?'premium':''}`} style={{'--ship-accent':selected.accent} as React.CSSProperties}><ShipArt ship={{...ship,model:selected.id,spec:selected}} large/><div><small>{selected.class.toLocaleUpperCase('tr')}</small><h3>{selected.name}</h3><p>{selected.description}</p><div className="fleet-stats"><span><Shield size={13}/>{selected.hp}</span><span><Crosshair size={13}/>{selected.capacity} top</span><span><Wind size={13}/>{selected.speed}</span></div></div></div><div className="fleet-grid">{fleet.filter(m=>filter==='gold'?m.currency==='gold':m.currency==='diamonds').map(m=>{const owned=(ship.owned??['albatros']).includes(m.id);return <article key={m.id} className={`fleet-card ${focus===m.id?'focused':''}`}><button className="ship-preview" onClick={()=>setFocus(m.id)} aria-label={`${m.name} tasarımını incele`}><ShipArt ship={{...ship,model:m.id,spec:m}}/><span>{m.currency==='diamonds'?'EFSANEVİ':'FİLO'}</span></button><h3>{m.name}</h3><p>{m.class}</p><button className={owned?'owned-button':'gold-button'} disabled={loading||ship.model===m.id} onClick={()=>owned?void send({type:'equipShip',kind:m.id}):setConfirm(m.id)}>{ship.model===m.id?<><Check size={14}/> Kuşanıldı</>:owned?<><Anchor size={14}/> Limanda kuşan</>:<>{m.currency==='gold'?<Coins size={14}/>:<Gem size={14}/>} {priceFor(world,m.id).toLocaleString('tr-TR')}</>}</button></article>;})}</div><p className="shop-note">Gemilerin özelliklerini karşılaştır; donanım ve topçu kapasitesi savaş gücünü belirler. Satın alınan gemi kalıcı olarak filona eklenir. Gemi değişimi limanda yapılır.</p></>:<><div className="payment-notice"><AlertCircle size={20}/><div><strong>{store.paytrEnabled?store.paytrTestMode?'PayTR test ödemesi':'PayTR ile güvenli ödeme':store.transferEnabled?'Havale ile elmas yükle':'Ödeme bağlantısı henüz açılmadı'}</strong><p>{store.paytrEnabled?'Kart bilgilerin PayTR ödeme formunda işlenir. Elmas yalnız doğrulanmış başarılı bildirimle yüklenir. Test siparişleri elmas yüklemez.':store.transferEnabled?'Siparişini oluştur; banka ödemen yönetici tarafından doğrulandıktan sonra elmasın yüklenir. Kart bilgisi burada alınmaz.':'Aşağıdaki paketler düzenlenebilir başlangıç fiyatlarıdır. Bu ekrandan para çekilmez veya otomatik elmas yüklenmez.'}</p></div></div>{store.paytrEnabled&&store.transferEnabled&&<label>Ödeme yöntemi<select value={paymentMethod} onChange={e=>setPaymentMethod(e.target.value)}><option value="card">PayTR</option><option value="transfer">Banka havalesi</option></select></label>}{store.transferEnabled&&!card&&<pre className="bank-info">{store.bankInfo}</pre>}<div className="diamond-packs">{store.packages.map((p,i)=><article key={p.id}><div className={`gem-stack gem-stack-${i}`}><Gem size={34+i*8}/></div><small>{p.name}</small><h3>{p.diamonds.toLocaleString('tr-TR')} <em>elmas</em></h3><button className="gold-button" disabled={!(store.transferEnabled||store.paytrEnabled)||loading} onClick={()=>setConfirm(p.id)}>{(p.price/100).toLocaleString('tr-TR',{style:'currency',currency:'TRY'})}</button></article>)}</div>{store.orders?.length>0&&<div className="orders-list"><h3>Siparişlerin</h3>{store.orders.slice(0,10).map(o=><p key={o.id}><span>{o.id.slice(0,8)} · {o.diamonds} elmas</span><strong>{({pending:'Onay bekliyor',awaiting:'Ödeme bekliyor',test_paid:'Test başarılı',approved:'Yüklendi',rejected:'Reddedildi',refunded:'İade edildi',refund_pending:'İade doğrulanıyor'} as Record<string,string>)[o.status]??o.status}</strong></p>)}</div>}</>}
 {confirm&&<div className="purchase-confirm"><strong>{filter==='diamonds'?card?'Güvenli ödemeye geçilsin mi?':'Havale siparişi oluşturulsun mu?':`${fleet.find(m=>m.id===confirm)?.name} · ${priceFor(world,confirm).toLocaleString('tr-TR')} ${fleet.find(m=>m.id===confirm)?.currency==='gold'?'altın':'elmas'}`}</strong><p>{filter==='diamonds'?card?'Elmas, sağlayıcının başarılı bildirimi doğrulandığında yüklenir. Test modunda bakiye değişmez.':'Elmas, ödeme doğrulanıp admin onayı verildiğinde yüklenir.':'Fiyat bakiyenden düşülür. Satın alma geri alınamaz.'}</p>{filter==='diamonds'&&card&&<div className="billing-fields"><label>Ad soyad<input autoComplete="billing name" maxLength={60} value={billing.billingName} onChange={e=>setBilling({...billing,billingName:e.target.value})}/></label><label>Telefon<input type="tel" autoComplete="billing tel" maxLength={20} value={billing.billingPhone} onChange={e=>setBilling({...billing,billingPhone:e.target.value})}/></label><label>Adres<textarea autoComplete="billing street-address" maxLength={400} value={billing.billingAddress} onChange={e=>setBilling({...billing,billingAddress:e.target.value})}/></label><small>Bu bilgiler ödeme için PayTR ile paylaşılır. Kart bilgilerini bu alanlara yazma.</small></div>}<div><button onClick={()=>setConfirm(null)}>Vazgeç</button><button className="gold-button" disabled={loading} onClick={()=>filter==='diamonds'?void order(confirm):void buy(confirm)}>{loading?'İşleniyor…':'Onayla'}<Check size={14}/></button></div></div>}
 </>;
}