// Admin panel screens

const AdminLayout = ({ current, onNav, children, density='comfy', dark=true }) => {
  const groups = [
    {label:'GENEL', items:[
      ['admin-dashboard','Kontrol Paneli','home'],
    ]},
    {label:'KATALOG', items:[
      ['admin-listings','Aktiviteler','compass', 248],
      ['admin-hotels','Oteller','home', 36],
      ['admin-categories','Kategoriler','tag'],
      ['admin-destinations','Destinasyonlar','pin'],
      ['admin-filters','Filtreler','filter'],
    ]},
    {label:'OTEL OPERASYON', items:[
      ['admin-room-types','Oda Tipleri','grid', 124],
      ['admin-rateplans','Rate Planlar','tag', 18],
      ['admin-rateplan-calendar','Fiyat Takvimi','calendar-days'],
      ['admin-cancellation-policies','İptal Politikaları','shield', 4],
    ]},
    {label:'REZERVASYON & FİNANS', items:[
      ['admin-bookings','Rezervasyonlar','calendar', 1820],
      ['admin-transactions','İşlemler','dollar'],
      ['admin-payouts','Tedarikçi Ödemeleri','wallet'],
      ['admin-promos','Promosyonlar','gift'],
    ]},
    {label:'TOPLULUK', items:[
      ['admin-users','Müşteriler','users', 14280],
      ['admin-suppliers','Tedarikçiler','shield', 42],
      ['admin-reviews','Yorum Moderasyonu','star', 8],
    ]},
    {label:'PAZARLAMA', items:[
      ['admin-blogs','Blog Yazıları','file'],
      ['admin-blog-cats','Blog Kategorileri','tag'],
    ]},
    {label:'SİSTEM', items:[
      ['admin-settings','Ayarlar','settings'],
    ]},
  ];

  const titleOf = (key) => {
    for (const g of groups) for (const it of g.items) if (it[0]===key) return it[1];
    return '';
  };

  return <div className={`dm-${density} ${dark?'dm-dark':''}`} style={{minHeight:'100vh', background:'var(--color-surface)', color:'var(--color-ink)'}}>
    <div style={{display:'grid', gridTemplateColumns:'240px 1fr', minHeight:'100vh'}}>
      <aside style={{background:'var(--color-surface-raised)', borderRight:'1px solid var(--color-line)', padding:'20px 12px', position:'sticky', top:0, height:'100vh', overflowY:'auto'}}>
        <button onClick={()=>onNav('home')} style={{display:'flex', alignItems:'center', gap:10, padding:'6px 10px', border:0, background:'transparent', marginBottom:16, cursor:'default'}}>
          <Logo size={56}/><div style={{fontSize:10, fontWeight:700, color:'var(--color-accent-500)', letterSpacing:'.08em'}}>ADMIN</div>
        </button>

        {groups.map(g => <div key={g.label} style={{marginBottom:14}}>
          <div style={{padding:'8px 10px 4px', fontSize:10, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.12em'}}>{g.label}</div>
          {g.items.map(([key, label, icon, count]) => <button key={key} onClick={()=>onNav(key)}
            style={{width:'100%', display:'flex', alignItems:'center', gap:10, padding:'7px 10px', border:0, textAlign:'left',
              background: current===key ? 'var(--color-accent-500)' : 'transparent',
              color: current===key ? '#fff' : 'var(--color-ink-dim)',
              borderRadius:'var(--r-md)', fontSize:12.5, fontWeight: current===key ? 700 : 500, cursor:'default'}}>
            <Icon name={icon} size={14}/>
            <span style={{flex:1}}>{label}</span>
            {count && <span style={{fontSize:10, fontWeight:700, padding:'1px 6px', borderRadius:'var(--r-pill)',
              background: current===key ? 'rgba(255,255,255,.2)' : 'var(--color-surface-sunken)',
              color: current===key ? '#fff' : 'var(--color-ink-dim)'}} className="tnum">{count.toLocaleString('tr-TR')}</span>}
          </button>)}
        </div>)}
      </aside>

      <main style={{minWidth:0}}>
        <div style={{padding:'14px 28px', borderBottom:'1px solid var(--color-line)', display:'flex', alignItems:'center', gap:16, background:'var(--color-surface-raised)', position:'sticky', top:0, zIndex:10}}>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:'var(--color-ink-low)'}}>Admin / {titleOf(current)}</div>
            <div style={{fontSize:16, fontWeight:700}}>{titleOf(current)}</div>
          </div>
          <Btn variant="ghost" icon="bell"/>
          <Btn variant="ghost" size="sm">Yardım</Btn>
          <Avatar name="Admin User" size={32}/>
        </div>
        <div style={{padding:'24px 28px'}}>{children}</div>
      </main>
    </div>
  </div>;
};

const AdminDashboard = () => (
  <div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:20}}>
      {[
        ['GMV (30g)','1.84M ₺','+18%','up','var(--color-brand-500)'],
        ['Rezervasyon','3.820','+12%','up','var(--color-info)'],
        ['Aktif Müşteri','14.280','+8%','up','var(--color-success-deep)'],
        ['Aktif Tedarikçi','42','+3','up','var(--color-warn-deep)'],
        ['Ort. Puan','4.72','-0.02','down','var(--color-accent-500)'],
      ].map(([l,v,d,t,c]) => <div key={l} className="card" style={{padding:18}}>
        <div style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.06em'}}>{l}</div>
        <div className="tnum" style={{fontSize:26, fontWeight:800, marginTop:8, letterSpacing:'-0.03em'}}>{v}</div>
        <div style={{display:'flex', alignItems:'center', gap:8, marginTop:8}}>
          <span style={{fontSize:11, fontWeight:700, color: t==='up'?'var(--color-success-deep)':'var(--color-danger-deep)'}}>{t==='up'?'↑':'↓'} {d}</span>
          <Sparkline values={genSpark(i=>20+Math.sin(i*0.7)*6+i*0.8+Math.random()*2)} color={c}/>
        </div>
      </div>)}
    </div>

    {/* Vertical breakdown: Activity vs Hotel */}
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:20}}>
      <div className="card" style={{padding:20, borderLeft:'4px solid var(--color-brand-500)'}}>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
          <div style={{width:32, height:32, borderRadius:'var(--r-md)', background:'var(--color-brand-50)', color:'var(--color-brand-600)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="compass" size={16}/></div>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>Tur & Aktivite</div>
            <div style={{fontSize:11, color:'var(--color-ink-dim)'}}>248 aktivite · 28 tedarikçi</div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14}}>
          {[['GMV','1.12M ₺'],['Rezervasyon','2.840'],['Dönüşüm','%4.2'],['Ort. Sepet','1.250 ₺']].map(([l,v]) =>
            <div key={l}>
              <div style={{fontSize:10, color:'var(--color-ink-low)', textTransform:'uppercase', letterSpacing:'.06em', fontWeight:600}}>{l}</div>
              <div className="tnum" style={{fontSize:18, fontWeight:700, marginTop:4}}>{v}</div>
            </div>)}
        </div>
      </div>
      <div className="card" style={{padding:20, borderLeft:'4px solid var(--color-info)'}}>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
          <div style={{width:32, height:32, borderRadius:'var(--r-md)', background:'var(--color-info-soft)', color:'var(--color-info-deep)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="home" size={16}/></div>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>Konaklama</div>
            <div style={{fontSize:11, color:'var(--color-ink-dim)'}}>36 otel · 14 tedarikçi</div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14}}>
          {[['GMV','720K ₺'],['Rezervasyon','980'],['Doluluk','%68'],['ADR','4.620 ₺']].map(([l,v]) =>
            <div key={l}>
              <div style={{fontSize:10, color:'var(--color-ink-low)', textTransform:'uppercase', letterSpacing:'.06em', fontWeight:600}}>{l}</div>
              <div className="tnum" style={{fontSize:18, fontWeight:700, marginTop:4}}>{v}</div>
            </div>)}
        </div>
      </div>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:20, marginBottom:20}}>
      <div className="card" style={{padding:24}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:18}}>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>GMV Trendi</div>
            <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>Son 90 gün · günlük</div>
          </div>
          <Segmented options={['30g','90g','1y']} value="90g" onChange={()=>{}}/>
        </div>
        <BarChart data={genSpark(i=>30+Math.sin(i*0.2)*15+i*0.4+Math.random()*5, 60)} height={200}/>
      </div>

      <div className="card" style={{padding:20}}>
        <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>Kategori Dağılımı (GMV)</div>
        {CATEGORIES.slice(0,6).map((c,i) => <div key={c.slug} style={{padding:'7px 0'}}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:5}}>
            <span style={{fontWeight:600}}>{c.name}</span>
            <span className="tnum" style={{color:'var(--color-ink-dim)'}}>{(25-i*3)}%</span>
          </div>
          <div style={{height:6, background:'var(--color-surface-sunken)', borderRadius:3, overflow:'hidden'}}>
            <div style={{width:`${25-i*3}%`, height:'100%', background:`oklch(66% 0.18 ${14 + i*40})`}}/>
          </div>
        </div>)}
      </div>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
      <div className="card" style={{padding:20}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:14}}>
          <div style={{fontSize:14, fontWeight:700}}>Son Rezervasyonlar</div>
          <Btn variant="link">Tümü →</Btn>
        </div>
        {BOOKINGS.slice(0,5).map(b => <div key={b.id} style={{padding:'10px 0', borderTop:'1px solid var(--color-line-soft)', display:'flex', alignItems:'center', gap:12}}>
          <Avatar name={b.customer} size={32}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:13, fontWeight:600}}>{b.customer}</div>
            <div style={{fontSize:11, color:'var(--color-ink-low)'}}><span className="mono">{b.ref}</span> · {b.travelDate}</div>
          </div>
          <div className="tnum" style={{fontSize:13, fontWeight:700}}>{b.total.toLocaleString('tr-TR')} ₺</div>
          <StatusPill status={b.status}/>
        </div>)}
      </div>

      <div className="card" style={{padding:20}}>
        <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>Sistem Sağlığı</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
          {[
            ['API Latency','84ms','success'],
            ['Uptime (7d)','99.98%','success'],
            ['Başarısız Ödeme','0.8%','warn'],
            ['Cevap Süresi','2.4s','success'],
          ].map(([l,v,s]) => <div key={l} style={{padding:12, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
            <div style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:600}}>{l}</div>
            <div className="tnum" style={{fontSize:20, fontWeight:700, marginTop:4}}>{v}</div>
            <Pill tone={s}>{s==='success'?'Normal':'Dikkat'}</Pill>
          </div>)}
        </div>
      </div>
    </div>
  </div>
);

// Generic CRUD listing page
const AdminCrudPage = ({ title, columns, rows, filters, toolbar, hasSearch=true, bulkActions }) => {
  const [selected, setSelected] = React.useState([]);
  const [q, setQ] = React.useState('');
  const allSelected = selected.length === rows.length;
  const toggle = (id) => setSelected(s => s.includes(id)?s.filter(x=>x!==id):[...s,id]);

  return <div>
    {(filters || toolbar) && <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:16, flexWrap:'wrap'}}>
      {hasSearch && <div style={{position:'relative', width:280}}>
        <Icon name="search" size={14} style={{position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:'var(--color-ink-low)'}}/>
        <Input value={q} onChange={e=>setQ(e.target.value)} placeholder={`${title} ara...`} style={{paddingLeft:34}}/>
      </div>}
      {filters}
      <div style={{marginLeft:'auto', display:'flex', gap:8}}>{toolbar}</div>
    </div>}

    {selected.length > 0 && <div style={{padding:'10px 14px', background:'var(--color-brand-50)', borderRadius:'var(--r-md)', marginBottom:12, display:'flex', alignItems:'center', gap:12}}>
      <span style={{fontSize:13, fontWeight:700, color:'var(--color-brand-700)'}}>{selected.length} seçildi</span>
      {(bulkActions || [<Btn key="a" variant="ghost" size="sm">Yayınla</Btn>, <Btn key="b" variant="ghost" size="sm">Arşivle</Btn>, <Btn key="c" variant="ghost" size="sm" icon="trash">Sil</Btn>])}
    </div>}

    <Table
      columns={[
        {key:'sel', head:<input type="checkbox" checked={allSelected} onChange={()=>setSelected(allSelected?[]:rows.map(r=>r._id))} style={{accentColor:'var(--color-brand-500)'}}/>, width:36},
        ...columns,
      ]}
      rows={rows.map(r => ({
        sel: <input type="checkbox" checked={selected.includes(r._id)} onChange={()=>toggle(r._id)} style={{accentColor:'var(--color-brand-500)'}}/>,
        ...r,
      }))}
    />

    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:14, fontSize:12, color:'var(--color-ink-dim)'}}>
      <div>1–{rows.length} / {rows.length * 17}</div>
      <div style={{display:'flex', gap:4}}>
        {[1,2,3,'…',17].map((p,i) => <button key={i} style={{padding:'5px 10px', border:'1px solid var(--color-line)', borderRadius:6, background: p===1?'var(--color-brand-500)':'var(--color-surface-raised)', color:p===1?'#fff':'var(--color-ink)', fontWeight:600, fontSize:12, cursor:'default'}}>{p}</button>)}
      </div>
    </div>
  </div>;
};

const AdminListings = () => <AdminCrudPage
  title="Aktivite"
  filters={<>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Kategoriler'},...CATEGORIES.map(c=>({value:c.slug,label:c.name}))]} style={{width:'auto'}}/>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Destinasyonlar'},...DESTINATIONS.map(d=>({value:d.slug,label:d.name}))]} style={{width:'auto'}}/>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Durumlar'},{value:'p',label:'Yayında'},{value:'d',label:'Taslak'},{value:'r',label:'İnceleme'}]} style={{width:'auto'}}/>
  </>}
  toolbar={<>
    <Btn variant="secondary" size="sm" icon="download">Dışa Aktar</Btn>
    <Btn variant="primary" size="sm" icon="plus">Yeni</Btn>
  </>}
  columns={[
    {key:'title', head:'Aktivite'},
    {key:'supplier', head:'Tedarikçi', width:160},
    {key:'cat', head:'Kategori', width:120},
    {key:'price', head:'Fiyat', width:100, align:'right'},
    {key:'rating', head:'Puan', width:110},
    {key:'status', head:'Durum', width:120},
    {key:'actions', head:'', width:80},
  ]}
  rows={LISTINGS.map(l => ({
    _id: l.id,
    title: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{width:32, height:32, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
        <img src={l.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      <div>
        <div style={{fontWeight:600}}>{l.title}</div>
        <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{l.dest}</div>
      </div>
    </div>,
    supplier: <span style={{fontSize:13}}>Boğaz Denizcilik</span>,
    cat: l.cat,
    price: <span className="tnum" style={{fontWeight:600}}>{l.price.toLocaleString('tr-TR')} ₺</span>,
    rating: <Stars value={l.rating} size={11} showValue/>,
    status: <StatusPill status={l.status||'Published'}/>,
    actions: <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
      <Btn variant="ghost" size="sm" icon="edit"/>
      <Btn variant="ghost" size="sm" icon="more"/>
    </div>,
  }))}
/>;

const AdminCategories = () => <AdminCrudPage
  title="Kategori"
  toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Kategori</Btn>}
  columns={[
    {key:'name', head:'Ad'},
    {key:'slug', head:'Slug', width:160},
    {key:'count', head:'Aktivite', width:100, align:'right'},
    {key:'status', head:'Durum', width:120},
    {key:'actions', head:'', width:80},
  ]}
  rows={CATEGORIES.map(c => ({
    _id: c.slug,
    name: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{width:32, height:32, borderRadius:'var(--r-sm)', background:'var(--color-brand-50)', color:'var(--color-brand-600)', display:'flex', alignItems:'center', justifyContent:'center'}}>
        <Icon name={c.icon} size={16}/>
      </div>
      <strong>{c.name}</strong>
    </div>,
    slug: <span className="mono" style={{fontSize:12}}>{c.slug}</span>,
    count: <span className="tnum">{c.count}</span>,
    status: <Pill tone="success">Aktif</Pill>,
    actions: <Btn variant="ghost" size="sm" icon="edit"/>,
  }))}
/>;

const AdminDestinations = () => <AdminCrudPage
  title="Destinasyon"
  toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Destinasyon</Btn>}
  columns={[
    {key:'name', head:'Ad'},
    {key:'region', head:'Bölge', width:140},
    {key:'count', head:'Aktivite', width:100, align:'right'},
    {key:'status', head:'Durum', width:120},
    {key:'actions', head:'', width:80},
  ]}
  rows={DESTINATIONS.map(d => ({
    _id: d.slug,
    name: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{width:40, height:40, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
        <img src={d.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      <div>
        <div style={{fontWeight:600}}>{d.name}</div>
        <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{d.tagline}</div>
      </div>
    </div>,
    region: d.region || 'Marmara',
    count: <span className="tnum">{d.count}</span>,
    status: <Pill tone="success">Aktif</Pill>,
    actions: <Btn variant="ghost" size="sm" icon="edit"/>,
  }))}
/>;

const AdminFilters = () => <div>
  <div style={{marginBottom:20, fontSize:14, color:'var(--color-ink-dim)'}}>Site genelinde listeleme filtrelerini yönet. Her filtre, aktivite detay sayfasındaki sorgu parametrelerine karşılık gelir.</div>
  <div style={{display:'grid', gap:14}}>
    {[
      {n:'Fiyat Aralığı', type:'range', vals:'500–10.000 ₺'},
      {n:'Süre', type:'multi-select', vals:'1–3 saat, Yarım gün, Tam gün, Çok günlük'},
      {n:'Dil', type:'multi-select', vals:'Türkçe, İngilizce, Arapça, Rusça'},
      {n:'Grup Tipi', type:'multi-select', vals:'Solo, Çift, Aile, Grup, Kurumsal'},
      {n:'Puan', type:'slider', vals:'3.0 – 5.0'},
      {n:'Anında Onay', type:'toggle', vals:'Açık/Kapalı'},
    ].map(f => <div key={f.n} className="card" style={{padding:16, display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:16, alignItems:'center'}}>
      <Icon name="filter" size={16} style={{color:'var(--color-brand-600)'}}/>
      <div>
        <div style={{fontSize:14, fontWeight:700}}>{f.n}</div>
        <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:2}}>{f.vals}</div>
      </div>
      <Pill>{f.type}</Pill>
      <div style={{display:'flex', gap:4}}>
        <Btn variant="ghost" size="sm" icon="edit"/>
        <Btn variant="ghost" size="sm" icon="more"/>
      </div>
    </div>)}
  </div>
</div>;

const AdminBookings = () => {
  const hotelData = window.HOTEL_DATA;
  const hotelBookings = hotelData ? [
    {id:'h-501', ref:'HTL-2026-0512', customer:'Eren Kaplan', listing:hotelData.hotels[0]?.title, supplier:'Marin Hotel', date:'12 May → 15 May', nights:3, total:18450, status:'Confirmed', vertical:'hotel'},
    {id:'h-502', ref:'HTL-2026-0498', customer:'Sofia Vermeer', listing:hotelData.hotels[1]?.title, supplier:'Le Petit Bodrum', date:'04 Haz → 07 Haz', nights:3, total:24600, status:'Confirmed', vertical:'hotel'},
    {id:'h-503', ref:'HTL-2026-0476', customer:'Murat Demir', listing:hotelData.hotels[2]?.title, supplier:'Casa Antalya', date:'02 May → 05 May', nights:3, total:9870, status:'Pending', vertical:'hotel'},
    {id:'h-504', ref:'HTL-2026-0461', customer:'Ela Yılmaz', listing:hotelData.hotels[0]?.title, supplier:'Marin Hotel', date:'22 Nis → 24 Nis', nights:2, total:11200, status:'Confirmed', vertical:'hotel'},
  ] : [];
  const activityRows = BOOKINGS.map(b => {
    const l = LISTINGS.find(x=>x.id===b.listingId);
    return {
      _id: b.id,
      ref: <span className="mono" style={{fontSize:12, fontWeight:600}}>{b.ref}</span>,
      vertical: <Pill tone="default"><Icon name="compass" size={11} style={{marginRight:4}}/>Aktivite</Pill>,
      customer: <div style={{display:'flex', alignItems:'center', gap:8}}><Avatar name={b.customer} size={24}/><span>{b.customer}</span></div>,
      activity: <span style={{fontSize:13}}>{l?.title}</span>,
      supplier: 'Boğaz Denizcilik',
      date: b.travelDate,
      total: <span className="tnum" style={{fontWeight:600}}>{b.total.toLocaleString('tr-TR')} ₺</span>,
      status: <StatusPill status={b.status}/>,
    };
  });
  const hotelRows = hotelBookings.map(b => ({
    _id: b.id,
    ref: <span className="mono" style={{fontSize:12, fontWeight:600}}>{b.ref}</span>,
    vertical: <Pill tone="info"><Icon name="home" size={11} style={{marginRight:4}}/>Otel</Pill>,
    customer: <div style={{display:'flex', alignItems:'center', gap:8}}><Avatar name={b.customer} size={24}/><span>{b.customer}</span></div>,
    activity: <span style={{fontSize:13}}>{b.listing} <span style={{color:'var(--color-ink-low)', fontSize:11}}>· {b.nights} gece</span></span>,
    supplier: b.supplier,
    date: b.date,
    total: <span className="tnum" style={{fontWeight:600}}>{b.total.toLocaleString('tr-TR')} ₺</span>,
    status: <StatusPill status={b.status}/>,
  }));
  return <AdminCrudPage
    title="Rezervasyon"
    filters={<>
      <Segmented options={['Tümü','Aktivite','Otel']} value="Tümü" onChange={()=>{}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Durumlar'},{value:'c',label:'Onaylı'},{value:'p',label:'Beklemede'},{value:'x',label:'İptal'}]} style={{width:'auto'}}/>
      <Input type="date" style={{width:160}}/>
    </>}
    toolbar={<Btn variant="secondary" size="sm" icon="download">CSV</Btn>}
    columns={[
      {key:'ref', head:'Ref', width:140},
      {key:'vertical', head:'Tip', width:110},
      {key:'customer', head:'Misafir'},
      {key:'activity', head:'Liste'},
      {key:'supplier', head:'Tedarikçi', width:160},
      {key:'date', head:'Tarih', width:140},
      {key:'total', head:'Toplam', width:110, align:'right'},
      {key:'status', head:'Durum', width:130},
    ]}
    rows={[...hotelRows, ...activityRows]}
  />;
};

const AdminUsers = () => <AdminCrudPage
  title="Müşteri"
  filters={<>
    <Segmented options={['Tümü','VIP','Yeni','Pasif']} value="Tümü" onChange={()=>{}}/>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Durum: Tümü'},{value:'a',label:'Aktif'},{value:'b',label:'Askıda'}]} style={{width:'auto'}}/>
  </>}
  toolbar={<>
    <Btn variant="secondary" size="sm" icon="download">Dışa Aktar</Btn>
    <Btn variant="primary" size="sm" icon="plus">Müşteri Ekle</Btn>
  </>}
  columns={[
    {key:'user', head:'Müşteri'},
    {key:'joined', head:'Kayıt', width:110},
    {key:'bookings', head:'Rez.', width:70, align:'right'},
    {key:'spend', head:'Toplam Harcama', width:140, align:'right'},
    {key:'last', head:'Son Aktivite', width:130},
    {key:'status', head:'Durum', width:100},
    {key:'actions', head:'', width:80},
  ]}
  rows={USERS.filter(u=>u.role!=='Admin').map((u,i) => ({
    _id: u.id,
    user: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <Avatar src={u.avatar} name={u.name} size={32}/>
      <div>
        <div style={{fontWeight:600}}>{u.name}</div>
        <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{u.email}</div>
      </div>
    </div>,
    joined: u.joined,
    bookings: <span className="tnum">{u.bookings}</span>,
    spend: <span className="tnum" style={{fontWeight:600}}>{u.spend.toLocaleString('tr-TR')} ₺</span>,
    last: <span style={{fontSize:12, color:'var(--color-ink-dim)'}}>{['2 saat önce','1 gün önce','3 gün önce','1 hafta önce'][i%4]}</span>,
    status: <Pill tone={u.status==='Aktif'?'success':'danger'}>{u.status}</Pill>,
    actions: <Btn variant="ghost" size="sm" icon="more"/>,
  }))}
/>;

const AdminSuppliers = () => {
  // Otel tedarikçilerini de ekle (HOTEL_DATA'dan türet)
  const hotelData = window.HOTEL_DATA;
  const hotelSuppliers = hotelData ? hotelData.hotels.slice(0,4).map((h,i) => ({
    id: 'hot-' + h.id,
    name: h.title.split(' ').slice(0,2).join(' ') + ' Operasyon',
    logo: h.hero,
    category: h.location,
    type: 'hotel',
    listings: (hotelData.roomTypes||[]).filter(r=>r.hotelId===h.id).length || 4,
    rating: h.rating || 4.7,
    revenue: 180000 + i*42000,
    commission: 18,
    status: i===3 ? 'Beklemede' : 'Onaylı',
  })) : [];
  const allSuppliers = [
    ...SUPPLIERS.map(s => ({...s, type:'activity'})),
    ...hotelSuppliers,
  ];
  return <AdminCrudPage
    title="Tedarikçi"
    filters={<>
      <Segmented options={['Tümü','Tur & Aktivite','Otel']} value="Tümü" onChange={()=>{}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Durum: Tümü'},{value:'a',label:'Onaylı'},{value:'p',label:'Beklemede'},{value:'r',label:'Reddedildi'}]} style={{width:'auto'}}/>
    </>}
    toolbar={<>
      <Btn variant="secondary" size="sm" icon="download">Rapor</Btn>
      <Btn variant="primary" size="sm" icon="plus">Yeni Tedarikçi</Btn>
    </>}
    columns={[
      {key:'name', head:'Tedarikçi'},
      {key:'type', head:'Tip', width:120},
      {key:'listings', head:'Liste', width:80, align:'right'},
      {key:'rating', head:'Puan', width:120},
      {key:'revenue', head:'Gelir (30g)', width:130, align:'right'},
      {key:'commission', head:'Komisyon', width:100, align:'right'},
      {key:'status', head:'Durum', width:120},
      {key:'actions', head:'', width:80},
    ]}
    rows={allSuppliers.map(s => ({
      _id: s.id,
      name: <div style={{display:'flex', alignItems:'center', gap:10}}>
        <Avatar src={s.logo} name={s.name} size={36}/>
        <div>
          <div style={{fontWeight:600}}>{s.name}</div>
          <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{s.category}</div>
        </div>
      </div>,
      type: <Pill tone={s.type==='hotel'?'info':'default'}>
        <Icon name={s.type==='hotel'?'home':'compass'} size={11} style={{marginRight:4}}/>
        {s.type==='hotel'?'Otel':'Tur & Aktivite'}
      </Pill>,
      listings: <span className="tnum">{s.listings}</span>,
      rating: <Stars value={s.rating} size={11} showValue/>,
      revenue: <span className="tnum" style={{fontWeight:600}}>{s.revenue.toLocaleString('tr-TR')} ₺</span>,
      commission: <span className="tnum">{s.commission}%</span>,
      status: <Pill tone={s.status==='Onaylı'?'success':s.status==='Beklemede'?'warn':'danger'}>{s.status}</Pill>,
      actions: <Btn variant="ghost" size="sm" icon="more"/>,
    }))}
  />;
};

const AdminReviews = () => <AdminCrudPage
  title="Yorum"
  filters={<>
    <Segmented options={['Tümü','Bekleyen','Onaylı','Bayraklı']} value="Tümü" onChange={()=>{}}/>
  </>}
  columns={[
    {key:'user', head:'Kullanıcı', width:180},
    {key:'listing', head:'Aktivite'},
    {key:'rating', head:'Puan', width:110},
    {key:'comment', head:'Yorum'},
    {key:'date', head:'Tarih', width:100},
    {key:'status', head:'Durum', width:120},
  ]}
  rows={REVIEWS.map(r => ({
    _id: r.id,
    user: <div style={{display:'flex', alignItems:'center', gap:8}}><Avatar src={r.avatar} name={r.user} size={28}/><span>{r.user}</span></div>,
    listing: <span style={{fontSize:13}}>{r.listing||'Gün batımı Boğaz turu'}</span>,
    rating: <Stars value={r.rating} size={11}/>,
    comment: <span style={{fontSize:13, color:'var(--color-ink-dim)', display:'-webkit-box', WebkitLineClamp:1, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{r.comment}</span>,
    date: r.date,
    status: <Pill tone={r.flagged?'danger':'success'}>{r.flagged?'Bayraklı':'Onaylı'}</Pill>,
  }))}
/>;

const AdminBlogs = () => <AdminCrudPage
  title="Yazı"
  filters={<Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Kategoriler'},{value:'g',label:'Rehber'},{value:'t',label:'Tavsiye'}]} style={{width:'auto'}}/>}
  toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Yazı</Btn>}
  columns={[
    {key:'title', head:'Başlık'},
    {key:'author', head:'Yazar', width:150},
    {key:'cat', head:'Kategori', width:120},
    {key:'views', head:'Okuma', width:90, align:'right'},
    {key:'date', head:'Tarih', width:110},
    {key:'status', head:'Durum', width:100},
    {key:'actions', head:'', width:80},
  ]}
  rows={BLOGS.map(b => ({
    _id: b.id,
    title: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{width:40, height:28, borderRadius:4, overflow:'hidden', flexShrink:0}}><img src={b.cover} style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
      <span style={{fontWeight:600}}>{b.title}</span>
    </div>,
    author: b.author,
    cat: b.cat,
    views: <span className="tnum">{(b.views||1420).toLocaleString('tr-TR')}</span>,
    date: b.date,
    status: <Pill tone="success">Yayında</Pill>,
    actions: <Btn variant="ghost" size="sm" icon="edit"/>,
  }))}
/>;

const AdminBlogCats = () => <AdminCrudPage
  title="Blog Kategorisi"
  toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni</Btn>}
  columns={[
    {key:'name', head:'Kategori'},
    {key:'slug', head:'Slug', width:140},
    {key:'posts', head:'Yazı', width:80, align:'right'},
    {key:'status', head:'Durum', width:100},
  ]}
  rows={[
    {n:'Rehber', s:'rehber', p:42}, {n:'Tavsiye', s:'tavsiye', p:28}, {n:'Gastronomi', s:'gastronomi', p:18},
    {n:'Keşif', s:'kesif', p:24}, {n:'Doğa', s:'doga', p:14}, {n:'Kültür', s:'kultur', p:21},
  ].map((x,i) => ({
    _id: i,
    name: <strong>{x.n}</strong>,
    slug: <span className="mono" style={{fontSize:12}}>{x.s}</span>,
    posts: <span className="tnum">{x.p}</span>,
    status: <Pill tone="success">Aktif</Pill>,
  }))}
/>;

const AdminSettings = () => <div style={{maxWidth:720}}>
  <Segmented options={['Genel','Ödeme','E-posta','Entegrasyonlar','Güvenlik']} value="Genel" onChange={()=>{}}/>
  <div className="card" style={{padding:28, marginTop:20}}>
    <h4>Site Ayarları</h4>
    <div style={{display:'grid', gap:18, marginTop:20}}>
      <Field label="Site Adı"><Input defaultValue="Vagoonya"/></Field>
      <Field label="Site Açıklaması"><TextArea rows={2} defaultValue="Türkiye'nin her köşesinden yerel deneyimler."/></Field>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
        <Field label="Varsayılan Para Birimi"><Select value="TRY" onChange={()=>{}} options={[{value:'TRY',label:'TRY - Türk Lirası'},{value:'USD',label:'USD - Dolar'},{value:'EUR',label:'EUR - Euro'}]}/></Field>
        <Field label="Varsayılan Dil"><Select value="tr" onChange={()=>{}} options={[{value:'tr',label:'Türkçe'},{value:'en',label:'English'},{value:'ar',label:'Arapça'}]}/></Field>
      </div>
      <Field label="Komisyon Oranı"><Input defaultValue="10" type="number"/></Field>
      <div style={{padding:16, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>Bakım Modu</div>
            <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>Etkinleştirildiğinde site kullanıcılara kapatılır.</div>
          </div>
          <label style={{position:'relative', width:44, height:24, display:'block', cursor:'default'}}>
            <input type="checkbox" style={{opacity:0, width:0, height:0}}/>
            <span style={{position:'absolute', inset:0, background:'var(--color-line-strong)', borderRadius:12}}></span>
            <span style={{position:'absolute', left:2, top:2, width:20, height:20, background:'#fff', borderRadius:'50%', boxShadow:'0 1px 3px rgba(0,0,0,.2)'}}></span>
          </label>
        </div>
      </div>
    </div>
    <div style={{display:'flex', justifyContent:'flex-end', gap:10, marginTop:24, paddingTop:20, borderTop:'1px solid var(--color-line)'}}>
      <Btn variant="ghost">Vazgeç</Btn>
      <Btn variant="primary">Kaydet</Btn>
    </div>
  </div>
</div>;

const AdminTransactions = () => <AdminCrudPage
  title="İşlem"
  filters={<>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Durumlar'},{value:'s',label:'Başarılı'},{value:'f',label:'Başarısız'},{value:'r',label:'İade'}]} style={{width:'auto'}}/>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Yöntemler'},{value:'c',label:'Kart'},{value:'t',label:'Havale'},{value:'w',label:'Cüzdan'}]} style={{width:'auto'}}/>
  </>}
  columns={[
    {key:'id', label:'TX-ID', render:r=><span className="mono" style={{fontSize:12}}>{r.id}</span>},
    {key:'date', label:'Tarih', render:r=><span className="tnum" style={{fontSize:13}}>{r.date}</span>},
    {key:'booking', label:'Rezervasyon', render:r=><a className="mono" style={{fontSize:12, color:'var(--color-info-deep)'}}>{r.booking}</a>},
    {key:'user', label:'Kullanıcı', render:r=><div style={{fontSize:13, fontWeight:600}}>{r.user}</div>},
    {key:'method', label:'Yöntem', render:r=><Pill tone="neutral">{r.method}</Pill>},
    {key:'amount', label:'Tutar', align:'right', render:r=><span className="tnum" style={{fontSize:14, fontWeight:700}}>{r.amount}</span>},
    {key:'fee', label:'Komisyon', align:'right', render:r=><span className="tnum" style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.fee}</span>},
    {key:'status', label:'Durum', render:r=><StatusPill status={r.status}/>},
  ]}
  rows={[
    {id:'#TX-50283', date:'2 May, 14:22', booking:'#VGN-5032', user:'Ayşe K.', method:'Kart', amount:'3.200 ₺', fee:'320 ₺', status:'success'},
    {id:'#TX-50282', date:'2 May, 13:48', booking:'#VGN-5031', user:'Tom B.', method:'Kart', amount:'1.800 ₺', fee:'180 ₺', status:'success'},
    {id:'#TX-50281', date:'2 May, 11:05', booking:'#VGN-5030', user:'Lara M.', method:'Havale', amount:'8.400 ₺', fee:'840 ₺', status:'pending'},
    {id:'#TX-50280', date:'2 May, 09:41', booking:'#VGN-5029', user:'Deniz S.', method:'Kart', amount:'2.100 ₺', fee:'210 ₺', status:'success'},
    {id:'#TX-50279', date:'1 May, 23:18', booking:'#VGN-5028', user:'Marco R.', method:'Kart', amount:'950 ₺', fee:'95 ₺', status:'refunded'},
    {id:'#TX-50278', date:'1 May, 20:02', booking:'#VGN-5027', user:'Elif Y.', method:'Cüzdan', amount:'4.600 ₺', fee:'460 ₺', status:'success'},
    {id:'#TX-50277', date:'1 May, 17:36', booking:'#VGN-5026', user:'Jonas F.', method:'Kart', amount:'5.200 ₺', fee:'520 ₺', status:'failed'},
  ]}
/>;

const AdminPayouts = () => <div>
  <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:24}}>
    {[['Bekleyen','142.820 ₺','18 tedarikçi'],['Bu Ay Havale','2.48M ₺','%94 başarı'],['Ortalama','18.420 ₺','tedarikçi başına'],['Sonraki Batch','15 May','Cuma 18:00']].map(([l,v,d]) =>
      <div key={l} className="card" style={{padding:18}}>
        <div style={{fontSize:11, letterSpacing:'.1em', color:'var(--color-ink-low)', textTransform:'uppercase', fontWeight:700}}>{l}</div>
        <div style={{fontSize:24, fontWeight:800, marginTop:6}} className="tnum">{v}</div>
        <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{d}</div>
      </div>)}
  </div>
  <AdminCrudPage
    title="Havale"
    toolbar={<><Btn variant="secondary" size="sm" icon="download">Dışa aktar</Btn><Btn variant="primary" size="sm" icon="check">Batch Onayla</Btn></>}
    filters={<Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Durumlar'},{value:'p',label:'Bekliyor'},{value:'a',label:'Onaylı'},{value:'s',label:'Gönderildi'},{value:'f',label:'Başarısız'}]} style={{width:'auto'}}/>}
    columns={[
      {key:'id', label:'Havale', render:r=><span className="mono" style={{fontSize:12}}>{r.id}</span>},
      {key:'supplier', label:'Tedarikçi', render:r=><div style={{fontSize:13, fontWeight:600}}>{r.supplier}</div>},
      {key:'period', label:'Dönem', render:r=><span style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.period}</span>},
      {key:'bookings', label:'Rez.', align:'right', render:r=><span className="tnum" style={{fontSize:13}}>{r.bookings}</span>},
      {key:'gross', label:'Brüt', align:'right', render:r=><span className="tnum" style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.gross}</span>},
      {key:'fee', label:'Komisyon', align:'right', render:r=><span className="tnum" style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.fee}</span>},
      {key:'net', label:'Net', align:'right', render:r=><span className="tnum" style={{fontSize:14, fontWeight:700}}>{r.net}</span>},
      {key:'status', label:'Durum', render:r=><StatusPill status={r.status}/>},
    ]}
    rows={[
      {id:'#PO-4021', supplier:'Boğaz Denizcilik', period:'Nis 2026', bookings:48, gross:'182.400 ₺', fee:'18.240 ₺', net:'164.160 ₺', status:'pending'},
      {id:'#PO-4020', supplier:'Kapadokya Balon', period:'Nis 2026', bookings:32, gross:'124.800 ₺', fee:'12.480 ₺', net:'112.320 ₺', status:'approved'},
      {id:'#PO-4019', supplier:'Istanbul Walking Tours', period:'Nis 2026', bookings:67, gross:'84.200 ₺', fee:'8.420 ₺', net:'75.780 ₺', status:'sent'},
      {id:'#PO-4018', supplier:'Fethiye Paragliding', period:'Nis 2026', bookings:41, gross:'96.700 ₺', fee:'9.670 ₺', net:'87.030 ₺', status:'pending'},
      {id:'#PO-4017', supplier:'Antalya Yacht', period:'Nis 2026', bookings:23, gross:'68.400 ₺', fee:'6.840 ₺', net:'61.560 ₺', status:'failed'},
      {id:'#PO-4016', supplier:'Pamukkale Gezi', period:'Nis 2026', bookings:38, gross:'57.000 ₺', fee:'5.700 ₺', net:'51.300 ₺', status:'approved'},
    ]}
  />
</div>;

const AdminPromos = () => <AdminCrudPage
  title="Promosyon"
  toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Kupon</Btn>}
  filters={<>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Durumlar'},{value:'a',label:'Aktif'},{value:'e',label:'Süresi Dolmuş'},{value:'d',label:'Taslak'}]} style={{width:'auto'}}/>
    <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm Tipler'},{value:'p',label:'Yüzde'},{value:'f',label:'Sabit'},{value:'s',label:'Kargo'}]} style={{width:'auto'}}/>
  </>}
  columns={[
    {key:'code', label:'Kod', render:r=><span className="mono" style={{fontSize:13, fontWeight:700, background:'var(--color-brand-50)', color:'var(--color-brand-700)', padding:'4px 10px', borderRadius:6}}>{r.code}</span>},
    {key:'name', label:'Kampanya', render:r=><div style={{fontSize:13, fontWeight:600}}>{r.name}</div>},
    {key:'discount', label:'İndirim', render:r=><span className="tnum" style={{fontSize:14, fontWeight:700, color:'var(--color-brand-600)'}}>{r.discount}</span>},
    {key:'used', label:'Kullanım', align:'right', render:r=><span className="tnum" style={{fontSize:13}}>{r.used} / {r.limit}</span>},
    {key:'period', label:'Geçerlilik', render:r=><span style={{fontSize:12, color:'var(--color-ink-dim)'}}>{r.period}</span>},
    {key:'revenue', label:'Etkilenen Gelir', align:'right', render:r=><span className="tnum" style={{fontSize:13, fontWeight:600}}>{r.revenue}</span>},
    {key:'status', label:'Durum', render:r=><StatusPill status={r.status}/>},
  ]}
  rows={[
    {code:'BAHAR24', name:'İlkbahar Kampanyası', discount:'%15', used:428, limit:1000, period:'1 Mar - 31 May', revenue:'248K ₺', status:'active'},
    {code:'FIRST50', name:'İlk Üye İndirimi', discount:'50 ₺', used:1248, limit:'∞', period:'Sürekli', revenue:'62K ₺', status:'active'},
    {code:'SUMMER26', name:'Yaz Fırsatı', discount:'%20', used:0, limit:500, period:'1 Haz - 31 Ağu', revenue:'—', status:'draft'},
    {code:'WEEKEND', name:'Hafta Sonu', discount:'%10', used:183, limit:300, period:'Her hafta sonu', revenue:'48K ₺', status:'active'},
    {code:'WINTER23', name:'Kış Kampanyası 2023', discount:'%25', used:892, limit:1000, period:'1 Ara 2023 - 28 Şub 2024', revenue:'184K ₺', status:'expired'},
    {code:'VIP100', name:'VIP Üye Hediyesi', discount:'100 ₺', used:67, limit:200, period:'Sürekli', revenue:'38K ₺', status:'active'},
    {code:'LASTMIN', name:'Son Dakika', discount:'%30', used:42, limit:100, period:'Sürekli', revenue:'28K ₺', status:'active'},
  ]}
/>;

Object.assign(window, { AdminLayout, AdminDashboard, AdminListings, AdminCategories, AdminFilters, AdminDestinations, AdminBookings, AdminUsers, AdminSuppliers, AdminReviews, AdminBlogs, AdminBlogCats, AdminSettings, AdminTransactions, AdminPayouts, AdminPromos });