import React from 'react';
import { router } from '@inertiajs/react';
import { Badge, Button, Card, Input } from '../../components/ui';
import { MapPin, Navigation, ShoppingCart, Camera, RefreshCw, Search, CheckCircle2, Clock3 } from 'lucide-react';

type Customer={id:number;code?:string;name:string;phone?:string;address?:string;latitude:number;longitude:number;distance_m?:number};
type Product={id:number;code?:string;name:string;price:number;stock:number};

export default function Mobile({customers=[],todayVisits=[],products=[],radius=100,user}:any){
 const [gps,setGps]=React.useState<{lat:number;lng:number;accuracy:number}|null>(null); const [nearby,setNearby]=React.useState<Customer[]>([]); const [loadingGps,setLoadingGps]=React.useState(false); const [q,setQ]=React.useState(''); const [selected,setSelected]=React.useState<Customer|null>(null); const [cart,setCart]=React.useState<Record<number,number>>({}); const [showOrder,setShowOrder]=React.useState(false); const [photo,setPhoto]=React.useState<File|null>(null);
 const locate=()=>{setLoadingGps(true); if(!navigator.geolocation){alert('Perangkat tidak mendukung GPS.');setLoadingGps(false);return;} navigator.geolocation.getCurrentPosition(pos=>{const g={lat:pos.coords.latitude,lng:pos.coords.longitude,accuracy:pos.coords.accuracy};setGps(g); fetch('/sales/nearby',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')||''},body:JSON.stringify({latitude:g.lat,longitude:g.lng})}).then(r=>r.json()).then(setNearby).finally(()=>setLoadingGps(false));},()=>{alert('Lokasi tidak dapat diakses. Aktifkan GPS dan permission browser.');setLoadingGps(false)},{enableHighAccuracy:true,timeout:15000,maximumAge:0});};
 const visible=(nearby.length?nearby:customers).filter((c:Customer)=>c.name.toLowerCase().includes(q.toLowerCase())||c.code?.toLowerCase().includes(q.toLowerCase()));
 const checkIn=(c:Customer)=>{setSelected(c); if(!gps){locate();return;} const fd=new FormData(); fd.append('customer_id',String(c.id));fd.append('customer_name',c.name);fd.append('sales_name',user?.name||'Sales MINANGA');fd.append('latitude',String(gps.lat));fd.append('longitude',String(gps.lng));fd.append('gps_accuracy',String(gps.accuracy));fd.append('status','Visited');if(photo)fd.append('photo',photo);router.post('/visits/check-in',fd,{forceFormData:true});};
 const total=Object.entries(cart).reduce((sum,[id,qty])=>{const p=products.find((x:Product)=>x.id===Number(id));return sum+(p?.price||0)*(qty as number)},0);
 const submitOrder=()=>{if(!selected||total<=0)return;router.post('/sales/quick-order',{customer_id:selected.id,items:Object.entries(cart).filter(([,qty])=>(qty as number)>0).map(([product_id,qty])=>({product_id:Number(product_id),qty}))},{onSuccess:()=>{setCart({});setShowOrder(false);}})};
 return <div className="min-h-screen bg-slate-50 pb-24 md:hidden"><div className="sticky top-0 z-30 bg-[#071f32] px-5 pb-5 pt-6 text-white"><div className="flex items-center justify-between"><div><div className="text-xs text-white/60">MINANGA FIELD APP</div><h1 className="mt-1 text-xl font-black">Halo, {user?.name?.split(' ')[0]||'Sales'} 👋</h1></div><div className="grid h-10 w-10 place-items-center rounded-full bg-white/10 font-bold">{user?.name?.[0]||'M'}</div></div><div className="mt-5 grid grid-cols-3 gap-2"><div className="rounded-2xl bg-white/10 p-3"><div className="text-[10px] text-white/60">Visit Hari Ini</div><div className="mt-1 text-xl font-black">{todayVisits.length}</div></div><div className="rounded-2xl bg-white/10 p-3"><div className="text-[10px] text-white/60">GPS</div><div className="mt-1 text-sm font-bold">{gps?'Aktif':'Belum aktif'}</div></div><div className="rounded-2xl bg-white/10 p-3"><div className="text-[10px] text-white/60">Radius</div><div className="mt-1 text-sm font-bold">{radius} m</div></div></div></div>
 <main className="space-y-4 p-4"><Button onClick={locate} disabled={loadingGps} className="h-12 w-full gap-2 rounded-2xl">{loadingGps?<><RefreshCw size={18} className="animate-spin"/> Mencari lokasi...</>:<><Navigation size={18}/> {gps?'Refresh Lokasi GPS':'Aktifkan GPS'}</>}</Button>{gps&&<div className="rounded-2xl border border-emerald-100 bg-emerald-50 p-3 text-xs text-emerald-800"><div className="font-bold">GPS aktif</div><div className="mt-1">{gps.lat.toFixed(6)}, {gps.lng.toFixed(6)} · akurasi ±{Math.round(gps.accuracy)} m</div></div>}
 <div className="relative"><Search className="absolute left-3 top-3 text-slate-400" size={18}/><Input value={q} onChange={e=>setQ(e.target.value)} className="h-11 pl-10" placeholder="Cari customer..."/></div>
 <div className="flex items-center justify-between"><h2 className="font-black text-slate-900">Customer Terdekat</h2><span className="text-xs text-slate-400">{visible.length} customer</span></div>
 <div className="space-y-3">{visible.map(c=><Card key={c.id} className="p-4"><div className="flex gap-3"><div className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-emerald-50 text-emerald-600"><MapPin size={20}/></div><div className="min-w-0 flex-1"><div className="font-bold">{c.name}</div><div className="mt-1 truncate text-xs text-slate-500">{c.address||'Alamat belum tersedia'}</div>{c.distance_m!=null&&<div className="mt-2 text-xs font-semibold text-emerald-600">{c.distance_m<1000?`${c.distance_m} m`:`${(c.distance_m/1000).toFixed(1)} km`} dari lokasi Anda</div>}<div className="mt-3 flex gap-2"><Button size="sm" className="flex-1 gap-1" onClick={()=>checkIn(c)}><CheckCircle2 size={14}/> Check-in</Button><Button size="sm" variant="outline" onClick={()=>{setSelected(c);setShowOrder(true)}}><ShoppingCart size={14}/></Button></div></div></div></Card>)}</div>
 <Card className="p-4"><div className="flex items-center justify-between"><div><div className="font-bold">Bukti Visit</div><div className="mt-1 text-xs text-slate-400">Foto dapat dilampirkan saat check-in.</div></div><Camera size={20} className="text-slate-400"/></div><input className="mt-3 w-full text-xs" type="file" accept="image/*" capture="environment" onChange={e=>setPhoto(e.target.files?.[0]||null)}/></Card>
 </main>{showOrder&&selected&&<div className="fixed inset-0 z-50 flex items-end bg-slate-950/40"><div className="w-full rounded-t-3xl bg-white p-5 shadow-2xl"><div className="flex items-center justify-between"><div><div className="text-xs text-slate-400">Quick Order</div><h3 className="font-black">{selected.name}</h3></div><button onClick={()=>setShowOrder(false)} className="text-sm text-slate-400">Tutup</button></div><div className="mt-4 max-h-[45vh] space-y-2 overflow-auto">{products.map((p:Product)=><div key={p.id} className="flex items-center justify-between rounded-xl border p-3"><div><div className="text-sm font-bold">{p.name}</div><div className="text-xs text-slate-400">Rp {Number(p.price).toLocaleString('id-ID')} · stok {p.stock}</div></div><div className="flex items-center gap-2"><button className="h-8 w-8 rounded-lg bg-slate-100" onClick={()=>setCart(x=>({...x,[p.id]:Math.max(0,(x[p.id]||0)-1)}))}>−</button><span className="w-5 text-center text-sm font-bold">{cart[p.id]||0}</span><button className="h-8 w-8 rounded-lg bg-emerald-50 text-emerald-700" onClick={()=>setCart(x=>({...x,[p.id]:(x[p.id]||0)+1}))}>+</button></div></div>)}</div><div className="mt-4 flex items-center justify-between border-t pt-4"><div><div className="text-xs text-slate-400">Total</div><div className="text-xl font-black">Rp {total.toLocaleString('id-ID')}</div></div><Button disabled={total<=0} onClick={submitOrder} className="h-12 px-6">Kirim Order</Button></div></div></div>}
 <nav className="fixed bottom-0 left-0 right-0 z-40 grid grid-cols-3 border-t bg-white/95 p-2 backdrop-blur"><a href="/sales/mobile" className="grid place-items-center rounded-xl bg-emerald-50 py-2 text-emerald-700"><MapPin size={19}/><span className="text-[10px] font-bold">Visit</span></a><a href="/orders" className="grid place-items-center py-2 text-slate-400"><ShoppingCart size={19}/><span className="text-[10px] font-bold">Order</span></a><a href="/" className="grid place-items-center py-2 text-slate-400"><Clock3 size={19}/><span className="text-[10px] font-bold">Dashboard</span></a></nav></div>
}