'use client';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Anchor, Compass, Crosshair, Shield, Wind, Coins, Volume2, VolumeX, CircleHelp, Maximize2, LogIn, Skull, Flag, ChevronRight, Ship as ShipIcon, X, Waves, Swords, Navigation, Check, Trophy, Minus, Plus, Hammer, ArrowUpRight, Sparkles, Heart, CircleDot } from 'lucide-react';
import { createWorld, makeShip, advanceWorld, applyAction, distance, inPort, isOnline, level, speed, range, upgradeCost, navigable, PORT, MAP, type Ship, type World, type Action } from '../lib/engine';
import {SeaChat} from './sea-chat';
import {VoyagePanel} from './voyage-panel';
import {seaFor,content,setupContent} from '../lib/content';
import {useRealtime,type RealtimeResponse} from './use-realtime';
import { FleetShop } from './shop';
import EmailAuth from './email-auth';
import {modelFor} from '../lib/fleet';
import { Gem,Store,Settings } from 'lucide-react';
import { render, renderMinimap, unproject, drawShip, type Camera } from '../lib/render';

type GameResponse = { error?: string; message?: string; me: string; world: World };
type Panel = 'none'|'harbor'|'ship'|'ranks'|'help'|'account'|'shop'|'voyage';
const fmt=(v:number)=>Math.floor(v).toLocaleString('tr-TR');
export function ShipArt({ship,large=false}:{ship:Ship;large?:boolean}){
  const ref=useRef<HTMLCanvasElement>(null);
  useEffect(()=>{const c=ref.current;if(!c)return;const ctx=c.getContext('2d')!;let frame=0,last=0;const draw=(time:number)=>{frame=requestAnimationFrame(draw);if(document.hidden||time-last<65)return;last=time;ctx.clearRect(0,0,c.width,c.height);ctx.save();ctx.translate(c.width/2,c.height*.65);drawShip(ctx,{...ship,angle:-.85},time,large?1.55:.95,true);ctx.restore();};frame=requestAnimationFrame(draw);return()=>cancelAnimationFrame(frame);},[ship,large]);
  return <canvas ref={ref} width={large?450:240} height={large?330:180} className={large?'large-ship-art':'ship-art'} aria-label={modelFor(ship).name}/>;
}
export default function Game({signedIn,signInPath,phpApi='',csrf='',isAdmin=false,adminPath='/admin',realtime=false}:{signedIn:boolean;signInPath:string;phpApi?:string;csrf?:string;isAdmin?:boolean;adminPath?:string;realtime?:boolean}){
  const endpoint=phpApi?phpApi+'?route=game':'/api/game';
  const storeEndpoint=phpApi?phpApi+'?route=store':'/api/store';
  const [world,setWorld]=useState<World>(()=>{const w=createWorld(1700000000000);w.ships.demo=makeShip('demo','Albatros',w.now);return w;});
  const worldRef=useRef(world);const [me,setMe]=useState('demo');const meRef=useRef('demo');
  const [live,setLive]=useState(false);const liveRef=useRef(false);const [selected,setSelected]=useState<string|null>(null);const selectedRef=useRef<string|null>(null);
  const [panel,setPanel]=useState<Panel>('none');const [name,setName]=useState('');const [busy,setBusy]=useState(false);
  const [status,setStatus]=useState<'demo'|'connecting'|'online'|'offline'>('demo');
  const [toast,setToast]=useState('');const toastTimer=useRef<ReturnType<typeof setTimeout>|null>(null);
  const [sound,setSound]=useState(false);const soundRef=useRef(false);const audioRef=useRef<AudioContext|null>(null);
  const [auto,setAuto]=useState(false);const autoRef=useRef(false);const [tab,setTab]=useState<'missions'|'log'>('missions');
  const [clock,setClock]=useState(1700000000000);const [zoom,setZoom]=useState(.85);const zoomRef=useRef(.85);
  const camera=useRef<Camera>({x:1400,y:1090,zoom:.85});const canvas=useRef<HTMLCanvasElement>(null);const mini=useRef<HTMLCanvasElement>(null);
  const viewport=useRef({w:1400,h:900});const offset=useRef(0);const received=useRef(0);const activeRequest=useRef(false);
  const actionQueue=useRef<Promise<unknown>>(Promise.resolve());const lastEvent=useRef(0);const autoLast=useRef(0);
  const drag=useRef<{x:number;y:number;moved:boolean}|null>(null);const hover=useRef<{x:number;y:number}|null>(null);
  const message=useCallback((text:string)=>{setToast(text);if(toastTimer.current)clearTimeout(toastTimer.current);toastTimer.current=setTimeout(()=>setToast(''),4500);},[]);
  const playSound=useCallback((kind:string)=>{
    if(!soundRef.current)return;
    try{const a=audioRef.current??new AudioContext();audioRef.current=a;if(a.state==='suspended')void a.resume();const osc=a.createOscillator(),gain=a.createGain();osc.connect(gain);gain.connect(a.destination);const t=a.currentTime;osc.type=kind==='shot'?'sawtooth':'sine';osc.frequency.setValueAtTime(kind==='shot'?100:640,t);osc.frequency.exponentialRampToValueAtTime(kind==='shot'?25:900,t+.18);gain.gain.setValueAtTime(kind==='shot'?.08:.04,t);gain.gain.exponentialRampToValueAtTime(.001,t+.25);osc.start();osc.stop(t+.27);}catch{/* Sound is optional. */}
  },[]);
  const accept=useCallback((w:World,id:string)=>{
    if(!w.content)w.content=worldRef.current.content;setupContent(w);
    const oldLevel=worldRef.current.ships[id]?level(worldRef.current.ships[id]):0;if(oldLevel&&w.ships[id]&&level(w.ships[id])>oldLevel){message('Seviye atladın! Yeni seviye: '+level(w.ships[id]));playSound('loot');}
    if(liveRef.current&&w.revision<worldRef.current.revision)return;
    for(const e of w.events){if(e.id>lastEvent.current){if(e.type==='shot'&&(e.from===id||e.to===id))playSound('shot');if(['loot','quest','upgrade'].includes(e.type)&&e.from===id){message(e.text);playSound('loot');}}}
    lastEvent.current=w.sequence;worldRef.current=w;meRef.current=id;setWorld(w);setMe(id);offset.current=Date.now()-w.now;received.current=performance.now();
  },[message,playSound]);
  const socketSnapshot=useCallback((d:RealtimeResponse)=>{accept(d.world,d.me);setStatus('online');},[accept]);
  const socket=useRealtime(!!phpApi&&live&&realtime,phpApi,csrf,socketSnapshot);
  const send=useCallback((action:Action,quiet=false):Promise<boolean>=>{
    if(!liveRef.current&&action.type!=='register'){
      const w=worldRef.current;try{advanceWorld(w,Date.now());const msg=applyAction(w,meRef.current,{...action,nonce:crypto.randomUUID()});accept({...w},meRef.current);if(msg)message(msg);return Promise.resolve(true);}catch(e){if(!quiet)message(e instanceof Error?e.message:'Komut uygulanamadı.');return Promise.resolve(false);}
    }
    const run=async()=>{
      if(action.type==='pulse'&&socket.request.current)return true;
      activeRequest.current=true;
      try{
        const command={...action,nonce:crypto.randomUUID(),contentRevision:worldRef.current.contentRevision};
        let d:GameResponse;
        if(socket.request.current&&action.type!=='register')d=await socket.request.current(command);
        else {const r=await fetch(endpoint,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},body:JSON.stringify(command),signal:AbortSignal.timeout(8000)});d=await r.json() as GameResponse;if(!r.ok)throw new Error(d.error||'Sunucu yanıt vermedi.');}
        if(action.type==='register'){liveRef.current=true;setLive(true);lastEvent.current=d.world.sequence;}
        accept(d.world,d.me);setStatus('online');if(d.message&&!quiet)message(d.message);return true;
      }catch(e){if(!quiet)message(e instanceof Error?e.message:'Bağlantı kesildi.');if(action.type==='pulse')setStatus('offline');return false;}
      finally{activeRequest.current=false;}
    };
    const result=actionQueue.current.then(run,run);actionQueue.current=result;return result;
  },[accept,message,endpoint,csrf,socket.request]);
  useEffect(()=>{
    const w=createWorld(Date.now());w.ships.demo=makeShip('demo','Albatros',w.now);accept(w,'demo');
    if(signedIn){setStatus('connecting');fetch(endpoint).then(r=>{if(!r.ok)throw new Error();return r.json() as Promise<GameResponse>;}).then(d=>{if(d.me&&d.world){liveRef.current=true;setLive(true);lastEvent.current=d.world.sequence;accept(d.world,d.me);setStatus('online');void send({type:'pulse'},true);}else setStatus('demo');}).catch(()=>{setStatus('demo');message('Kayıtlara bağlanılamadı. Deneme seferi açık.');});}
    const interval=setInterval(()=>{
      if(document.hidden)return;
      if(liveRef.current){if(!activeRequest.current)void send({type:'pulse'},true);}
      else {const w=worldRef.current;advanceWorld(w,Date.now());w.ships.demo.lastSeen=Date.now();accept({...w},'demo');}
    },800);
    const tick=setInterval(()=>setClock(Date.now()-offset.current),100);
    return()=>{clearInterval(interval);clearInterval(tick);if(toastTimer.current)clearTimeout(toastTimer.current);};
  },[signedIn,accept,message,send,endpoint]);
  useEffect(()=>{meRef.current=me;selectedRef.current=selected;autoRef.current=auto;soundRef.current=sound;zoomRef.current=zoom;},[me,selected,auto,sound,zoom]);
  useEffect(()=>{
    if(!auto)return;
    const timer=setInterval(()=>{const s=worldRef.current.ships[meRef.current],t=worldRef.current.ships[selectedRef.current??''];if(s&&t&&t.hp>0&&s.hp>0&&distance(s,t)<=range(s)&&!inPort(s)&&!inPort(t)&&Date.now()-autoLast.current>2000){autoLast.current=Date.now();void send({type:'attack',target:t.id},true);}},200);
    return()=>clearInterval(timer);
  },[auto,send]);
  useEffect(()=>{
    const key=(e:KeyboardEvent)=>{if((e.target as HTMLElement)?.matches('input,textarea,select'))return;if(e.key==='Escape'){setPanel('none');return;}if(panel!=='none')return;
      if(e.code==='Space'||e.key==='1'){e.preventDefault();void send({type:'attack',target:selectedRef.current??''});}
      else if(e.key.toLowerCase()==='r'||e.key==='2')void send({type:'repair'});
      else if(e.key.toLowerCase()==='w'||e.key==='3')void send({type:'boost'});
      else if(e.key.toLowerCase()==='p')setPanel('harbor');
    };window.addEventListener('keydown',key);return()=>window.removeEventListener('keydown',key);
  },[panel,send]);
  useEffect(()=>{
    const el=canvas.current;if(!el)return;let frame=0,last=0;const drawn:Record<string,{x:number;y:number;angle:number;mapId:string}>={};
    const resize=()=>{const box=el.getBoundingClientRect();const dpr=Math.min(window.devicePixelRatio||1,window.innerWidth<700?1.5:2);el.width=box.width*dpr;el.height=box.height*dpr;viewport.current={w:box.width,h:box.height};};resize();
    const ro=new ResizeObserver(resize);ro.observe(el);
    const loop=(time:number)=>{
      frame=requestAnimationFrame(loop);if(document.hidden||time-last<(viewport.current.w<700?33:16))return;last=time;
      const ctx=el.getContext('2d');if(!ctx)return;const {w,h}=viewport.current,dpr=el.width/w;ctx.setTransform(dpr,0,0,dpr,0,0);
      const source=worldRef.current;const self=source.ships[meRef.current];
      // Interpolate only the drawing; actions and damage remain server-owned.
      const elapsed=Math.min(.85,(performance.now()-received.current)/1000);
      const visual={...source,now:source.now+elapsed*1000,ships:{...source.ships}};
      for(const s of Object.values(source.ships)){if(s.mapId!==self?.mapId)continue;let x=s.x,y=s.y;if(s.destination&&s.hp>0){const d=distance(s,s.destination),step=Math.min(d,speed(s,source.now)*elapsed);if(d>0){const p={x:s.x+(s.destination.x-s.x)/d*step,y:s.y+(s.destination.y-s.y)/d*step};if(navigable(p,s)){x=p.x;y=p.y;}}}let v=drawn[s.id];if(!v||v.mapId!==s.mapId||Math.hypot(v.x-x,v.y-y)>600)v={x,y,angle:s.angle,mapId:s.mapId};else{v.x+=(x-v.x)*.24;v.y+=(y-v.y)*.24;let delta=((s.angle-v.angle+Math.PI*3)%(Math.PI*2))-Math.PI;v.angle+=delta*.15;}drawn[s.id]=v;visual.ships[s.id]={...s,...v};}
      const pos=visual.ships[meRef.current]??self;
      if(pos){const targetX=pos.x+(w>900?70:0);const targetY=pos.y-20;camera.current.x+=(targetX-camera.current.x)*.035;camera.current.y+=(targetY-camera.current.y)*.035;}
      const z=zoomRef.current*(w<700?.72:1);camera.current.zoom+=(z-camera.current.zoom)*.08;
      render(ctx,visual,{width:w,height:h,camera:camera.current,me:meRef.current,selected:selectedRef.current,now:Date.now(),hover:hover.current,quality:w>650});
      const m=mini.current;if(m){const mc=m.getContext('2d');if(mc)renderMinimap(mc,visual,meRef.current,selectedRef.current,m.width,m.height);}
    };frame=requestAnimationFrame(loop);return()=>{cancelAnimationFrame(frame);ro.disconnect();};
  },[]);
  const ship=world.ships[me]??world.ships.demo??makeShip('demo','Albatros',world.now);
  const target=world.ships[selected??''];const harbor=inPort(ship);const online=Object.values(world.ships).filter(s=>!s.bot&&isOnline(s,world.now)).length;
  const reload=Math.max(0,(ship.reload??1900)-(clock-ship.lastFire)),hp=ship.hp/ship.maxHp*100;
  const mission=content(world).quests.find(q=>{const period=q.repeat==='daily'?86400000:q.repeat==='weekly'?604800000:0,last=ship.claimed?.[q.id];return q.status==='sale'&&q.minLevel<=level(ship)&&(!q.requires||ship.claimed?.[q.requires]!==undefined)&&(last===undefined||period>0&&Math.floor(last/period)!==Math.floor(world.now/period));});
  const missionProgress=mission?Math.max(0,(mission.kind==='kills'?(mission.target?ship.npcKills?.[mission.target]??0:ship.kills):mission.kind==='crates'?ship.crates:mission.kind==='explore'?Number(ship.explored?.includes(mission.target)):mission.kind==='level'?level(ship):mission.kind==='upgrade'?ship.cannon+ship.hull+ship.sails+Object.values(ship.equipmentLevels??{}).reduce((n,v)=>n+v,0):ship.earnedGold??0)-(ship.questBaseline?.[mission.id]??0)):0;
  const missionDone=!!mission&&missionProgress>=mission.count;
  const attack=()=>{if(!target){message('Önce haritadaki bir korsan gemisini seç.');return;}void send({type:'attack',target:target.id});};
  const mapClick=(x:number,y:number)=>{
    const c=canvas.current;if(!c)return;const r=c.getBoundingClientRect();const {w,h}=viewport.current;const p=unproject({x:x-r.left,y:y-r.top},camera.current,w,h);
    const hit=Object.values(worldRef.current.ships).filter(s=>s.mapId===worldRef.current.ships[meRef.current]?.mapId&&s.id!==meRef.current&&s.hp>0&&isOnline(s,worldRef.current.now)).sort((a,b)=>distance(a,p)-distance(b,p)).find(s=>distance({x:s.x,y:s.y-45},p)<100);
    if(hit){setSelected(hit.id);selectedRef.current=hit.id;playSound('click');return;}
    void send({type:'move',x:p.x,y:p.y});
  };
  const sailHome=()=>{void send({type:'move',x:seaFor(ship).portX+30,y:seaFor(ship).portY+50});setPanel('none');message('Rota Karayel Limanı. Güvenli sularda gövden kendiliğinden onarılır.');};
  const register=async(e:React.FormEvent)=>{e.preventDefault();setBusy(true);const ok=await send({type:'register',name});setBusy(false);if(ok){setPanel('none');message('Hoş geldin kaptan. İlerlemen hesabına kaydediliyor.');}};
  const toggleSound=()=>{setSound(v=>{soundRef.current=!v;if(!v){try{audioRef.current??=new AudioContext();void audioRef.current.resume();}catch{/* optional */}}return !v;});};
  const fullscreen=()=>{if(!document.fullscreenElement){document.documentElement.requestFullscreen?.().catch(()=>message('Bu tarayıcı tam ekranı desteklemiyor.'));}else void document.exitFullscreen();};
  return <main className="game-shell">
    <header className="topbar">
      <a className="brand" href={phpApi?'./':'/'} aria-label="Karayel ana ekran"><span className="brand-seal"><Anchor size={27}/></span><span><strong>KARAYEL</strong><small>A Ç I K &nbsp; D E N İ Z L E R</small></span></a>
      <div className="edition"><span>ALFA</span><small>SEFER 01</small></div>
      <div className="resources"><div className="resource"><span className="coin-icon"><Coins size={19}/></span><div><strong>{fmt(ship.gold)}</strong><small>ALTIN</small></div></div><button className="resource diamond-resource" onClick={()=>setPanel('shop')}><Gem size={18}/><div><strong>{fmt(ship.diamonds??0)}</strong><small>ELMAS</small></div></button></div>
      <div className="header-actions"><button className="icon-button sound-button" onClick={toggleSound} aria-label={sound?'Sesi kapat':'Sesi aç'} title={sound?'Sesi kapat':'Sesi aç'}>{sound?<Volume2/>:<VolumeX/>}</button><button className="icon-button help-button" onClick={()=>setPanel('help')} aria-label="Nasıl oynanır?" title="Nasıl oynanır?"><CircleHelp/></button><span className="header-divider"/><button className="account-button" onClick={()=>setPanel('account')}><span className="avatar"><Anchor size={17}/></span><span>{live?ship.name:'Kaptan ol'}<small>{live?`SEVİYE ${level(ship)} · KAPTAN`:'SEFERİNİ KAYDET'}</small></span><ChevronRight size={15}/></button></div>
    </header>
    <section className="sea-stage" aria-label="Açık deniz oyun alanı">
      <canvas ref={canvas} className="sea-canvas" aria-label="Denizde bir noktaya dokunarak yelken aç. Bir korsan gemisine dokunarak hedef seç." onPointerDown={e=>{drag.current={x:e.clientX,y:e.clientY,moved:false};}} onPointerMove={e=>{if(drag.current&&Math.hypot(e.clientX-drag.current.x,e.clientY-drag.current.y)>15)drag.current.moved=true;}} onPointerUp={e=>{if(drag.current&&!drag.current.moved&&panel==='none')mapClick(e.clientX,e.clientY);drag.current=null;}} onWheel={e=>setZoom(v=>Math.max(.5,Math.min(1.35,v-e.deltaY*.0005)))}/>
      <div className="region-banner"><span className="region-rule"/><div><small>{ship.mapId??'sea-1'} &nbsp; / &nbsp; {seaFor(ship).pvp?'PvP':'PvE'}</small><h1>{seaFor(ship).name}</h1><p><span className={harbor?'status-dot':'gold-dot'}/>{harbor?'GÜVENLİ LİMAN':'RÜZGÂR SENİNLE'}</p></div><span className="region-rule"/></div>
      <aside className="voyage-panel glass-panel">
        <div className="panel-tabs"><button className={tab==='missions'?'active':''} onClick={()=>setTab('missions')}>GÖREVLER</button><button className={tab==='log'?'active':''} onClick={()=>setTab('log')}>SEYİR DEFTERİ</button></div>
        {tab==='missions'?<div className="mission-body"><div className="eyebrow"><Flag size={12}/> KAPTANIN YOLCULUĞU</div><h2>{mission?.name??'Yeni ufuklara hazır.'}</h2><p>{mission?.description??'Görevlerini tamamladın. Atlası açarak yeni denizlere yelken aç.'}</p>{mission&&<><div className="mission-count"><span>Görev ilerlemesi</span><b>{Math.min(missionProgress,mission.count)}<em> / {mission.count}</em></b></div><div className="thin-progress"><i style={{width:`${Math.min(100,missionProgress/mission.count*100)}%`}}/></div><div className="mission-reward"><span><Coins size={13}/> {mission.gold}</span><span><Sparkles size={12}/> {mission.xp} XP</span><button disabled={!missionDone} onClick={()=>void send({type:'claimQuest',kind:mission.id})}>{missionDone?'Ödülü al':'ÖDÜL'}</button></div></>}</div>:<div className="log-body"><small>SON DENİZ HABERLERİ</small>{world.events.length?world.events.slice(-6).reverse().map(e=><p key={e.id}><span>•</span>{e.text}</p>):<p><span>•</span>Karayel Limanı geride kaldı. İlk rotanı çiz, kaptan.</p>}</div>}
      </aside>
      <aside className="chart-panel glass-panel"><div className="chart-title"><span><Compass size={14}/> DENİZ HARİTASI</span><span className="map-coord">01 : 01</span></div><div className="minimap-wrap"><canvas ref={mini} width={240} height={158} aria-label="Deniz haritası; rota çizmek için dokun" onClick={e=>{const r=e.currentTarget.getBoundingClientRect();void send({type:'move',x:(e.clientX-r.left)/r.width*seaFor(ship).width,y:(e.clientY-r.top)/r.height*seaFor(ship).height});}}/><span className="map-north">N</span><span className="map-frame tl"/><span className="map-frame tr"/><span className="map-frame bl"/><span className="map-frame br"/></div><div className="chart-bottom"><span><i className={status==='online'?'status-dot':'gold-dot'}/>{live?`${online} kaptan denizde`:'Deneme seferi'}</span><span>{Math.round(ship.x)} · {Math.round(ship.y)}</span></div><button className={`pvp-button ${ship.pvp?'pvp-active':''}`} onClick={()=>void send({type:'pvp'})}><Swords size={14}/><span>PvP {ship.pvp?'açık':'kapalı'}</span><span className="toggle"><i/></span></button></aside>
      {target&&target.hp>0&&<div className="target-card glass-panel"><span className="target-icon">{target.bot?<Skull size={21}/>:<Swords size={21}/>}</span><div><small>{target.bot?(target.rageAt!==undefined?(target.rageAt>clock?'ÖFKE HAZIRLIĞI · UZAKLAŞ':'ÖFKE EVRESİ · GÜÇLÜ SALVO'):'KORSAN GEMİSİ'):target.pvp?'RAKİP KAPTAN':'DOST KAPTAN'}</small><strong>{target.name}</strong><div className="target-hp"><i style={{width:`${target.hp/target.maxHp*100}%`}}/></div></div><span className="target-numbers">{fmt(target.hp)}{(target.shield??0)>0&&<small>Kalkan: {fmt(target.shield!)}</small>}<small>{Math.round(distance(ship,target))} m</small></span><button className="close-target" aria-label="Hedefi kaldır" onClick={()=>{setSelected(null);setAuto(false);}}><X size={14}/></button></div>}
      {world.settings?.announcement&&<div className="announcement">{world.settings.announcement}</div>}
      <div className="sea-label"><Waves size={14}/><span>{live?status==='offline'?'Bağlantı yeniden deneniyor…':'İlerlemen otomatik kaydediliyor':'Deneme seferi · İlerleme kaydedilmez'}</span></div>
      <div className="map-tools"><button aria-label="Uzaklaştır" title="Uzaklaştır" onClick={()=>setZoom(v=>Math.max(.5,v-.12))}><Minus size={15}/></button><span>{Math.round(zoom*100)}%</span><button aria-label="Yakınlaştır" title="Yakınlaştır" onClick={()=>setZoom(v=>Math.min(1.35,v+.12))}><Plus size={15}/></button><button className="mobile-help" onClick={()=>setPanel('help')} aria-label="Nasıl oynanır?"><CircleHelp size={15}/></button><button className="fullscreen-button" aria-label="Tam ekran" title="Tam ekran" onClick={fullscreen}><Maximize2 size={15}/></button></div>
      <div className="ship-status glass-panel"><div className="ship-status-heading"><span className="ship-badge"><ShipIcon size={23}/></span><div><small>{content(world).levels.find(l=>l.level===level(ship))?.name??'KAPTAN'}</small><strong>{live?ship.name:'Albatros'}</strong></div><span className="level-badge">{level(ship)}<small>SV.</small></span></div><div className="hull-label"><span><Shield size={12}/> Gövde sağlamlığı</span><b>{fmt(ship.hp)} <em>/ {fmt(ship.maxHp)}</em></b></div><div className={`health-bar ${hp<30?'low':''}`}><i style={{width:`${hp}%`}}/></div><div className="ship-footer"><span><Wind size={12}/>{ship.boostUntil>clock?'TAM YOL':modelFor(ship).class.toUpperCase()}</span><button onClick={()=>setPanel('ship')}>Gemim <ArrowUpRight size={12}/></button></div></div>
      <div className="combat-controls"><div className="control-hint">{ship.hp<=0?'Gemin battı. Limanda yeniden hazırlanıyorsun.':target?distance(ship,target)>range(ship)?`Hedefe yaklaş; topların menzili ${range(ship)} metre.`:'Hedef kilitlendi. Toplar emrini bekliyor.':'Bir korsan gemisi seç. İlk zaferinle denize iz bırak.'}</div><div className="action-dock"><button className={`fire-button ${target?'armed':''}`} onClick={attack} disabled={reload>0||ship.hp<=0}><kbd>1</kbd><Crosshair size={26}/><span>{reload>0?`${(reload/1000).toFixed(1)} sn`:'ATEŞ ET'}<small>TOP SALVOSU</small></span><span className="fire-chevron"><ChevronRight size={18}/></span></button><button className="ability" onClick={()=>void send({type:'repair'})} disabled={ship.repairReady>clock||ship.hp<=0} title={`60 altına ${ship.repairPower??350} can onar (R)`}><kbd>2</kbd><Hammer size={24}/><span>{ship.repairReady>clock?`${Math.ceil((ship.repairReady-clock)/1000)} sn`:'Tamir'}</span></button><button className="ability" onClick={()=>void send({type:'boost'})} disabled={ship.boostReady>clock||ship.hp<=0} title="4,5 saniye hızlan (W)"><kbd>3</kbd><Wind size={27}/><span>{ship.boostReady>clock?`${Math.ceil((ship.boostReady-clock)/1000)} sn`:'Tam yol'}</span></button><span className="dock-divider"/><button className={`auto-fire ${auto?'enabled':''}`} onClick={()=>{if(!target){message('Otomatik atış için önce bir hedef seç.');return;}setAuto(v=>!v);}} title="Seçili hedefe otomatik ateş"><CircleDot size={23}/><span>Oto. atış</span><i/></button></div><div className="keyboard-hint"><span><span className="mouse-symbol"/> Denize tıkla: hareket</span><i>·</i><span><kbd>SPACE</kbd> Ateş</span><i>·</i><span><kbd>R</kbd> Tamir</span></div></div>
      <nav className="bottom-nav" aria-label="Oyun menüsü"><div className="nav-links"><button className={panel==='none'?'nav-active':''} onClick={()=>setPanel('none')}><Compass size={18}/><span>Açık deniz</span><i/></button><button className={panel==='harbor'?'nav-active':''} onClick={()=>setPanel('harbor')}><Anchor size={19}/><span>Liman</span></button><button className={panel==='ship'?'nav-active':''} onClick={()=>setPanel('ship')}><ShipIcon size={19}/><span>Gemim</span></button><button className={panel==='shop'?'nav-active':''} onClick={()=>setPanel('shop')}><Store size={18}/><span>Tersane</span></button><button className={panel==='ranks'?'nav-active':''} onClick={()=>setPanel('ranks')}><Trophy size={17}/><span>Sıralama</span></button></div><div className="connection-status"><i className={status==='online'?'status-dot':'gold-dot'}/><span>{live?status==='offline'?'BAĞLANTI KESİLDİ':socket.connected?'CANLI / WEBSOCKET':'CANLI / HTTP':'KEŞİF MODU'}</span><b>v0.3</b></div></nav>
      {toast&&<div className="toast" role="status"><Compass size={18}/>{toast}<button aria-label="Bildirimi kapat" onClick={()=>setToast('')}><X size={14}/></button></div>}
      <SeaChat world={world} send={send}/><div className="voyage-hud"><strong>{seaFor(ship).name} · Sv. {level(ship)}</strong><progress max={ship.rules?.xpStep??500} value={ship.xp%(ship.rules?.xpStep??500)}/><span>{Math.round(ship.destination?speed(ship,clock):0)} / {Math.round(ship.maxSpeed??modelFor(ship).speed)} hız · {ship.activeCannons??20} aktif top</span><div><button onClick={()=>setPanel('voyage')}>Donanım / Atlas / Görevler →</button></div></div>
      {ship.hp<=0&&panel==='none'&&<div className="sunk-overlay"><Anchor size={37}/><h2>Her kaptan yeniden yelken açar.</h2><p>Gemin limanda hazırlanıyor. {Math.max(0,Math.ceil((ship.deadUntil-clock)/1000))} saniye…</p></div>}
      {panel!=='none'&&<div className="modal-backdrop" onClick={()=>setPanel('none')}><section className={`modal ${panel==='voyage'?'shop-modal':panel==='shop'?'shop-modal':panel==='harbor'?'harbor-modal':''}`} onClick={e=>e.stopPropagation()} aria-modal="true" role="dialog" aria-labelledby="modal-title"><button className="modal-close" onClick={()=>setPanel('none')} aria-label="Pencereyi kapat"><X size={21}/></button>
        {panel==='voyage'&&<VoyagePanel world={world} ship={ship} send={send}/>}
        {panel==='shop'&&<FleetShop ship={ship} world={world} send={send} message={message} storeEndpoint={storeEndpoint} csrf={csrf} live={live}/>}
        {panel==='account'&&<><span className="modal-emblem"><Anchor size={32}/></span><div className="eyebrow">DENİZLER ADINI HATIRLASIN</div><h2 id="modal-title">{live?`Kaptan ${ship.name}`:'Kendi efsaneni yaz.'}</h2><p className="modal-intro">{live?'Kaptanın, altının ve gemi geliştirmelerin hesabına bağlı. Başka bir cihazda da seferine devam edebilirsin.':'Kaptanını oluştur, gemini geliştir ve her seferine kaldığın yerden devam et.'}</p>{live?<><div className="account-stats"><div><strong>{level(ship)}</strong><span>Seviye</span></div><div><strong>{ship.kills}</strong><span>Korsan zaferi</span></div><div><strong>{ship.pvpKills}</strong><span>PvP zaferi</span></div></div><div className="saved-note"><Check size={16}/> Hesabına kaydediliyor</div>{isAdmin&&<a className="gold-button full" href={adminPath}><Settings size={15}/> Yönetim paneli</a>}{phpApi?<button className="subtle-link" onClick={async()=>{await fetch(phpApi+'?route=auth',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},body:JSON.stringify({type:'logout'})});location.reload();}}>Hesaptan çıkış yap</button>:<a className="subtle-link" href="/signout-with-chatgpt?return_to=%2F" target="_top">Hesaptan çıkış yap</a>}</>:phpApi?<EmailAuth endpoint={phpApi+'?route=auth'} csrf={csrf}/>:signedIn?<form onSubmit={register}><label htmlFor="captain-name">Kaptan adın</label><input id="captain-name" autoFocus minLength={3} maxLength={18} placeholder="Örn. Kaptan Alphan" value={name} onChange={e=>setName(e.target.value)} required/><p className="form-note">3–18 karakter. Bu ad diğer kaptanlara görünür.</p><button className="gold-button full" disabled={busy}>{busy?'Gemin hazırlanıyor…':'Kaptanımı oluştur'}<ArrowUpRight size={18}/></button><p className="form-note">Yeni kaptanın 1.250 altınla başlar. Deneme seferindeki ilerleme aktarılmaz.</p></form>:<><a href={signInPath} target="_top" className="gold-button full"><LogIn size={18}/> ChatGPT ile giriş yap</a><p className="form-note">Girişten sonra kaptan adını seçeceksin. Şifre oluşturmana gerek yok.</p><button className="text-button" onClick={()=>setPanel('none')}>Şimdilik deneme seferine devam et <ChevronRight size={14}/></button></>}</>}
        {panel==='harbor'&&<><div className="eyebrow"><Anchor size={14}/> KARAYEL LİMANI</div><h2 id="modal-title">Bir sonraki sefere hazırlan.</h2><p className="modal-intro">{harbor?'Güvenli sulardasın. Gövden kendiliğinden onarılıyor. Altınlarını yeni donanımlara dönüştür.':'Geliştirme yapmak için limana yanaş. Liman çevresinde savaş olmaz ve gövden kendiliğinden onarılır.'}</p><div className="harbor-ship"><ShipArt ship={ship} large/><span>{ship.name}<small>{modelFor(ship).class.toLocaleUpperCase('tr')}</small></span><div className="harbor-location"><span className={harbor?'status-dot':'gold-dot'}/>{harbor?'LİMANA YANAŞILDI':`${Math.round(distance(ship,PORT))} m MESAFE`}</div></div><div className="upgrade-list">{([{key:'cannon',title:'Güçlendirilmiş toplar',desc:'+28 salvo hasarı',icon:Crosshair},{key:'hull',title:'Meşe gövde kaplaması',desc:'+250 azami gövde',icon:Shield},{key:'sails',title:'Usta işi yelkenler',desc:'+14 seyir hızı',icon:Wind}] as const).map(item=><div className="upgrade-row" key={item.key}><span className="upgrade-icon"><item.icon size={23}/></span><div><strong>{item.title}</strong><small>{item.desc} <i>·</i> Seviye {ship[item.key]} / 5</small></div><button disabled={!harbor||ship[item.key]>=5||ship.gold<upgradeCost(ship,item.key)} onClick={()=>void send({type:'upgrade',kind:item.key})}>{ship[item.key]>=5?<Check size={16}/>:<><Coins size={14}/>{fmt(upgradeCost(ship,item.key))}</>}</button></div>)}</div>{!harbor&&<button className="gold-button full" onClick={sailHome}><Navigation size={17}/> Limana rota çiz</button>}</>}
        {panel==='ship'&&<><div className="eyebrow"><ShipIcon size={14}/> KAPTANIN GEMİSİ</div><h2 id="modal-title">{ship.name}</h2><p className="modal-intro">{modelFor(ship).description}</p><div className="ship-showcase"><ShipArt ship={ship} large/><span className="ship-class">{modelFor(ship).class.toLocaleUpperCase('tr')}</span></div><div className="spec-grid"><div><Shield/><small>AZAMİ GÖVDE</small><strong>{fmt(ship.maxHp)}</strong></div><div><Crosshair/><small>SALVO HASARI</small><strong>{Math.round((ship.salvo??0)+ship.cannon*28)}</strong></div><div><Wind/><small>SEYİR HIZI</small><strong>{Math.round(speed(ship,clock))}</strong></div><div><Compass/><small>TOP MENZİLİ</small><strong>{range(ship)} <em>m</em></strong></div></div><button className="gold-button full" onClick={()=>setPanel('harbor')}><Hammer size={17}/> Limanda geliştir</button></>}
        {panel==='ranks'&&<><div className="eyebrow"><Trophy size={14}/> DENİZLERİN KAPTANLARI</div><h2 id="modal-title">Aynı deniz. Farklı efsaneler.</h2><p className="modal-intro">Bu denizdeki aktif kaptanlar, deneyim puanına göre sıralanır. {live?'':'Deneme seferinde yalnızca sen varsın.'}</p><div className="ranking-table"><div className="ranking-head"><span>KAPTAN</span><span>ZAFER</span><span>DENEYİM</span></div>{Object.values(world.ships).filter(s=>!s.bot&&(isOnline(s,world.now)||s.id===me)).sort((a,b)=>b.xp-a.xp).map((s,i)=><div className={`ranking-row ${s.id===me?'you':''}`} key={s.id}><span><b>{String(i+1).padStart(2,'0')}</b><Anchor size={17}/><strong>{s.name}{s.id===me&&<small>SEN</small>}</strong></span><span>{s.kills+s.pvpKills}</span><span>{fmt(s.xp)} XP</span></div>)}</div><div className="empty-sea"><Waves size={23}/><p>Her efsane ilk seferle başlar.</p><small>Gerçek kaptanlar, gerçek zaferler.</small></div></>}
        {panel==='help'&&<><div className="eyebrow"><Compass size={14}/> KAPTAN REHBERİ</div><h2 id="modal-title">Dümen sende.</h2><p className="modal-intro">Bu denizleri öğrenmek için birkaç küçük ipucu yeterli.</p><div className="help-list"><div><Navigation/><section><strong>Rotanı çiz</strong><p>Denizde bir noktaya tıkla ya da dokun. Minik harita üzerinden de rota çizebilirsin. Adaların çevresinden yol al.</p></section></div><div><Crosshair/><section><strong>Hedef seç, ateş et</strong><p>Kırmızı yelkenli korsan gemisini seç. 630 metreye yaklaş, Ateş Et veya boşluk tuşuna bas. Oto. atış seçili hedefe tekrar ateş eder.</p></section></div><div><Hammer/><section><strong>Gemini koru</strong><p>R / Tamir: 60 altına 350 can. Son hasardan 8 saniye sonra kullanılabilir. W / Tam yol: 4,5 saniyelik hız artışı.</p></section></div><div><Anchor/><section><strong>Altın kazan, limanda geliştir</strong><p>Korsanları batır, sandıklara yaklaş, görev ödüllerini al. Limanda toplarını, gövdeni ve yelkenlerini güçlendir.</p></section></div><div><Swords/><section><strong>Diğer kaptanlarla savaş</strong><p>İki kaptan da aynı denizde PvP modunu açtığında düello yapabilir. Liman güvenlidir. PvP modunu değiştirmek için 15 saniye savaştan uzak kal.</p></section></div></div><button className="gold-button full" onClick={()=>setPanel('none')}>Yelkenleri aç <ArrowUpRight size={17}/></button>{!phpApi&&<a className="guide-link" href="/kurulum">PHP sunucu kurulum rehberi →</a>}</>}
      </section></div>}
    </section>
  </main>;
}