import { Alert,Image,ScrollView,StyleSheet,Switch,Text,TextInput,TouchableOpacity,View } from 'react-native';import { router,useLocalSearchParams,useFocusEffect } from 'expo-router';import { useCallback,useMemo,useState } from 'react';import * as ImagePicker from 'expo-image-picker';import * as Location from 'expo-location';import { api } from '../../src/api';import { enqueue } from '../../src/offlineQueue';import { C } from '../../src/theme';import { Btn,Loading,Pill } from '../../components/UI';import SignaturePad from '../../components/SignaturePad';
export default function Execute(){const {id}=useLocalSearchParams<{id:string}>();const [ticket,setTicket]=useState<any>();const [diagnosis,setDiagnosis]=useState('');const [workDone,setWorkDone]=useState('');const [pendingIssue,setPending]=useState('');const [revisit,setRevisit]=useState(false);const [serviceCharge,setServiceCharge]=useState('0');const [collected,setCollected]=useState('0');const [paymentMethod,setPaymentMethod]=useState('Cash');const [signature,setSignature]=useState('');const [rating,setRating]=useState(0);const [photos,setPhotos]=useState<string[]>([]);const [busy,setBusy]=useState(false);const [message,setMessage]=useState('');const [parts,setParts]=useState<{productId:string;name:string;quantity:string;billingType:string}[]>([]);const [products,setProducts]=useState<any[]>([]);
const load=useCallback(async()=>{try{const [t,p]=await Promise.all([api.ticket(id),api.products()]);setTicket(t);setProducts(p);}catch(e){setMessage(e instanceof Error?e.message:'Could not load service report.');}},[id]);useFocusEffect(useCallback(()=>{load();},[load]));const canComplete=diagnosis.trim().length>1&&workDone.trim().length>1;if(!ticket)return <Loading/>;async function start(){setBusy(true);try{let payload:any={};const permission=await Location.requestForegroundPermissionsAsync();if(permission.status==='granted'){const pos=await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.Balanced});payload={latitude:pos.coords.latitude,longitude:pos.coords.longitude,accuracy:pos.coords.accuracy};}await api.start(id,payload);setMessage('Job started and synchronized.');await load();}catch(e){await enqueue('ticket.start',{ticketId:id});setMessage('Internet unavailable. Start action saved securely in offline queue.');}finally{setBusy(false);}}
async function photo(){const p=await ImagePicker.requestCameraPermissionsAsync();if(p.status!=='granted')return setMessage('Camera permission is required to attach service photos.');const r=await ImagePicker.launchCameraAsync({mediaTypes:['images'],quality:.7});if(!r.canceled){const uri=r.assets[0].uri;setPhotos(x=>[...x,uri]);try{await api.upload(id,uri,'service_photo');}catch{setMessage('Photo stored on device view; upload retry is required when connection returns.');}}}
function addPart(){setParts(x=>[...x,{productId:products[0]?.id||'',name:products[0]?.name||'No stock item',quantity:'1',billingType:'warranty'}]);}function updatePart(i:number,k:string,v:string){setParts(x=>x.map((p,n)=>n===i?{...p,[k]:v}:p));}
async function finish(){if(!canComplete)return;setBusy(true);const payload={diagnosis,workDone,pendingIssue,revisitRequired:revisit,serviceCharge:Number(serviceCharge)||0,collectedAmount:Number(collected)||0,paymentMethod,customerSignature:signature,customerRating:rating||undefined,parts:parts.filter(p=>p.productId).map(p=>({productId:p.productId,quantity:Number(p.quantity)||1,billingType:p.billingType}))};try{await api.complete(id,payload);Alert.alert('Service report saved','Ticket, parts stock and owner dashboard are updated.',[{text:'OK',onPress:()=>router.replace('/(tabs)/tickets')}]);}catch(e){await enqueue('ticket.complete',{ticketId:id,...payload});setMessage('Offline queue saved this completion. It will sync when internet returns.');}finally{setBusy(false);}}
return <ScrollView style={s.root} contentContainerStyle={s.pad}><Text style={s.number}>{ticket.ticket_number}</Text><Text style={s.title}>{ticket.customer_name}</Text><Pill value={ticket.status}/>{ticket.status!=='in_progress'?<Btn title={busy?'Starting…':'Start job with location check-in'} onPress={start} disabled={busy}/>:<Text style={s.started}>Job is in progress. Complete the report below.</Text>}<Field label="Diagnosis" value={diagnosis} onChangeText={setDiagnosis} multiline/><Field label="Work performed" value={workDone} onChangeText={setWorkDone} multiline/><Field label="Pending issue / next action" value={pendingIssue} onChangeText={setPending} multiline/><View style={s.switchRow}><View><Text style={s.label}>Revisit required</Text><Text style={s.hint}>Creates a visible pending status for office follow-up.</Text></View><Switch value={revisit} onValueChange={setRevisit}/></View><Text style={s.section}>Parts used</Text>{parts.map((p,i)=><View style={s.part} key={i}><Text style={s.label}>Item</Text><ScrollView horizontal><View style={s.choiceRow}>{products.slice(0,24).map(x=><TouchableOpacity key={x.id} onPress={()=>{updatePart(i,'productId',x.id);updatePart(i,'name',x.name);}} style={[s.choice,p.productId===x.id&&s.choiceActive]}><Text style={[s.choiceText,p.productId===x.id&&{color:'#fff'}]}>{x.sku||x.name}</Text></TouchableOpacity>)}</View></ScrollView><Text style={s.selected}>{p.name}</Text><TextInput keyboardType="decimal-pad" value={p.quantity} onChangeText={v=>updatePart(i,'quantity',v)} style={s.input} placeholder="Quantity"/></View>)}<Btn title="Add parts item" secondary onPress={addPart}/><Text style={s.section}>Service collection</Text><Field label="Service charge" value={serviceCharge} onChangeText={setServiceCharge} keyboardType="decimal-pad"/><Field label="Collected amount" value={collected} onChangeText={setCollected} keyboardType="decimal-pad"/><Field label="Payment method" value={paymentMethod} onChangeText={setPaymentMethod}/><Text style={s.section}>Evidence and customer acceptance</Text><Btn title="Capture service photo" secondary onPress={photo}/>{photos.length?<View style={s.photos}>{photos.map(x=><Image key={x} source={{uri:x}} style={s.photo}/>)}</View>:null}<SignaturePad onChange={setSignature}/><Text style={s.label}>Customer rating</Text><View style={s.stars}>{[1,2,3,4,5].map(n=><TouchableOpacity key={n} onPress={()=>setRating(n)}><Text style={[s.star,n<=rating&&{color:'#F3B21A'}]}>★</Text></TouchableOpacity>)}</View>{message?<Text style={s.message}>{message}</Text>:null}<Btn title={busy?'Saving…':'Complete and synchronize job'} onPress={finish} disabled={!canComplete||busy}/></ScrollView>};function Field(p:any){const {label,multiline,...inputProps}=p;return <View style={s.field}><Text style={s.label}>{label}</Text><TextInput {...inputProps} multiline={multiline} style={[s.input,multiline&&s.multi]} placeholder={label} placeholderTextColor="#94A9B7"/></View>};const s=StyleSheet.create({root:{backgroundColor:C.bg},pad:{padding:16,paddingBottom:35},number:{color:C.blue,fontWeight:'900'},title:{fontSize:22,fontWeight:'900',color:C.navy,marginTop:4},started:{color:C.success,fontWeight:'800',marginTop:13},field:{marginTop:15},label:{fontWeight:'800',color:C.navy,marginBottom:6},input:{backgroundColor:'#fff',borderWidth:1,borderColor:C.line,borderRadius:10,padding:12,color:C.ink},multi:{minHeight:90,textAlignVertical:'top'},switchRow:{marginTop:14,backgroundColor:'#fff',borderWidth:1,borderColor:C.line,borderRadius:12,padding:13,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},hint:{fontSize:12,color:C.muted,maxWidth:260},section:{fontSize:18,fontWeight:'900',color:C.navy,marginTop:22,marginBottom:4},part:{backgroundColor:'#fff',borderWidth:1,borderColor:C.line,borderRadius:12,padding:12,marginTop:8},choiceRow:{flexDirection:'row',gap:6},choice:{borderWidth:1,borderColor:C.line,borderRadius:15,paddingHorizontal:9,paddingVertical:7},choiceActive:{backgroundColor:C.blue,borderColor:C.blue},choiceText:{fontSize:11,color:C.navy,fontWeight:'700'},selected:{color:C.muted,fontSize:12,marginVertical:8},photos:{flexDirection:'row',flexWrap:'wrap',gap:7,marginTop:10},photo:{width:76,height:76,borderRadius:8},stars:{flexDirection:'row',marginBottom:10},star:{fontSize:33,color:'#CDD8DE',marginRight:4},message:{color:C.muted,marginTop:12}});