Offline and Local Recovery

'use client';
import {useEffect,useRef,useState,type CSSProperties} from 'react';
import {Button,Textarea} from '@mobtranslate/ui';
const draftKey='mt-styleguide-offline-draft-v1',cacheName='mt-styleguide-public-fixture-v1',resource='/fixtures/governed-records.json';
type Entry={revision:number;text:string;savedAt:number};
type Envelope={version:1;entries:Entry[]};
const action:CSSProperties={minHeight:44,height:'auto',minWidth:0,maxWidth:'100%',whiteSpace:'normal',overflowWrap:'anywhere'};
function stored():Envelope{
  const raw=localStorage.getItem(draftKey);if(raw===null)return {version:1,entries:[]};
  const value:unknown=JSON.parse(raw);if(!value||typeof value!=='object'||!('version'in value)||value.version!==1||!('entries'in value)||!Array.isArray(value.entries)||!value.entries.every((entry,index)=>entry&&typeof entry==='object'&&entry.revision===index+1&&typeof entry.text==='string'&&Number.isFinite(entry.savedAt)))throw Error('Stored draft format is invalid; existing bytes were preserved.');
  return value as Envelope;
}
export function OfflineDraftExample(){
  const [draft,setDraft]=useState('English-only local offline draft.'),[savedText,setSavedText]=useState<string|null>(null),[revision,setRevision]=useState(0),[backup,setBackup]=useState<string|null>(null),[busy,setBusy]=useState(false),[online,setOnline]=useState(true),[message,setMessage]=useState('No saved draft inspected yet.'),[resourceMessage,setResourceMessage]=useState('No public resource loaded.'),[titles,setTitles]=useState<string[]>([]),[rtl,setRtl]=useState(false);
  const base=useRef(0),live=useRef(false),saveAbort=useRef<AbortController|null>(null),abort=useRef<AbortController|null>(null),epoch=useRef(0);
  useEffect(()=>{live.current=true;function connection(){setOnline(navigator.onLine);}connection();try{const last=stored().entries.at(-1);if(last){base.current=last.revision;setRevision(last.revision);setDraft(last.text);setSavedText(last.text);setMessage(`Restored stored draft revision ${last.revision}.`);}else setMessage('No stored draft yet; current editor is local only.');}catch(error){setMessage(error instanceof Error?error.message:'Browser storage is unavailable.');}const changed=(event:StorageEvent)=>{if(event.key===draftKey)setMessage('Another tab changed stored draft data. Your editor remains; restore a snapshot before attempting a conflicting save.');};window.addEventListener('online',connection);window.addEventListener('offline',connection);window.addEventListener('storage',changed);return()=>{live.current=false;epoch.current++;abort.current?.abort();saveAbort.current?.abort();window.removeEventListener('online',connection);window.removeEventListener('offline',connection);window.removeEventListener('storage',changed);};},[]);
  async function save(){if(busy)return;const text=draft;const saving=new AbortController();saveAbort.current=saving;setBusy(true);setMessage('Waiting for the browser save lock; the current editor remains editable.');try{if(!navigator.locks)throw Error('Cross-tab locks unavailable; draft retained without saving.');await navigator.locks.request(draftKey,{signal:saving.signal},()=>{if(!live.current||saving.signal.aborted)return;const previous=stored();const last=previous.entries.at(-1)?.revision??0;if(last!==base.current)throw Error('Stored draft changed in another tab. Local editor retained; restore the latest snapshot to reconcile.');const entry={revision:last+1,text,savedAt:Date.now()};const next:Envelope={version:1,entries:[...previous.entries,entry]};localStorage.setItem(draftKey,JSON.stringify(next));const readback=stored().entries.at(-1);if(readback?.revision!==entry.revision||readback.text!==entry.text)throw Error('Stored draft readback did not match; editor retained.');if(live.current){base.current=entry.revision;setRevision(entry.revision);setSavedText(text);setMessage(`Saved and read back browser draft revision ${entry.revision}; ${next.entries.length} ${next.entries.length===1?'snapshot':'snapshots'} retained.`);}});}catch(error){if(live.current)setMessage(error instanceof DOMException&&error.name==='AbortError'?'Waiting browser save cancelled; editor retained.':error instanceof Error?error.message:'Browser save failed; editor retained.');}finally{if(live.current)setBusy(false);}}
  function restore(){try{const last=stored().entries.at(-1);if(!last){setMessage('No stored snapshot to restore; editor retained.');return;}if(draft!==last.text)setBackup(draft);base.current=last.revision;setRevision(last.revision);setSavedText(last.text);setDraft(last.text);setMessage(`Restored revision ${last.revision}. Any displaced editor text is retained in the previous-editor copy below.`);}catch(error){setMessage(error instanceof Error?error.message:'Browser restore failed; editor retained.');}}
  async function load(from:'network'|'cache'){
    abort.current?.abort();const controller=new AbortController();abort.current=controller;const identity=++epoch.current;setResourceMessage(from==='network'?'Loading public fixture over HTTP; prior loaded content remains.':'Reading explicitly cached public fixture; prior loaded content remains.');
    try{const response=from==='network'?await fetch(resource,{signal:controller.signal,cache:'no-store'}):await (await caches.open(cacheName)).match(resource);if(!response)throw Error('No cached public fixture. Load and cache it while a request can succeed.');if(!response.ok)throw Error(`Public fixture returned HTTP ${response.status}.`);const data:unknown=await response.json();if(!Array.isArray(data)||!data.every(row=>row&&typeof row.title==='string'))throw Error('Public fixture shape is invalid.');if(controller.signal.aborted||identity!==epoch.current||!live.current)return;setTitles(data.map(row=>row.title));const stamp=response.headers.get('x-styleguide-saved-at');setResourceMessage(`Loaded ${data.length} public fixture titles from ${from}. ${from==='cache'?`Cached client timestamp: ${stamp??'unknown'}. This is a snapshot, not current source authority.`:'No private access or language review is inferred.'}`);}catch(error){if(controller.signal.aborted||identity!==epoch.current||!live.current)return;setResourceMessage(`${error instanceof Error?error.message:'Resource load failed.'} Previous loaded titles and draft remain.`);}
  }
  async function cache(){abort.current?.abort();const controller=new AbortController();abort.current=controller;const identity=++epoch.current;setResourceMessage('Fetching public bytes for the explicit cache operation; prior data remains.');try{const response=await fetch(resource,{cache:'no-store',signal:controller.signal});if(!response.ok)throw Error(`Cache request returned HTTP ${response.status}.`);const bytes=await response.arrayBuffer();if(controller.signal.aborted||identity!==epoch.current||!live.current)return;const saved=new Response(bytes,{status:200,headers:{'content-type':'application/json','x-styleguide-saved-at':new Date().toISOString()}});const store=await caches.open(cacheName);await store.put(resource,saved);const readback=await store.match(resource);if(!readback||!(await readback.arrayBuffer()).byteLength)throw Error('Cached resource readback missing.');if(live.current&&identity===epoch.current&&!controller.signal.aborted)setResourceMessage('Public fixture cached and read back. This caches its bytes only; no page shell or confidential record was saved.');}catch(error){if(live.current&&identity===epoch.current&&!controller.signal.aborted)setResourceMessage(`${error instanceof Error?error.message:'Cache unavailable.'} Existing draft and loaded titles remain.`);}}
  return <div data-offline-lab lang="en" dir={rtl?'rtl':'ltr'} className="space-y-4" style={{overflowWrap:'anywhere'}}>
    <p dir="auto">Browser storage for an owned English-only draft and an explicitly public fixture. This does not install a service worker, cache the whole site, authorize private access or queue a server write.</p>
    <p dir="auto" data-offline-connection>Browser connection hint: {online?'online':'offline'}. Actual request outcomes, not this hint, decide whether a load succeeded.</p>
    <label htmlFor="offline-owned-draft" className="block">Owned local browser draft</label><Textarea id="offline-owned-draft" dir="auto" value={draft} onChange={event=>setDraft(event.target.value)} />
    <p dir="auto" data-offline-revision>Last observed stored revision: {revision}. Editor {draft===savedText?'matches that saved snapshot':'has unsaved changes'}.</p>
    <div className="flex flex-wrap gap-3"><Button style={action} type="button" disabled={busy} onClick={()=>void save()}>Save browser draft snapshot</Button><Button style={action} type="button" variant="outline" disabled={busy} onClick={restore}>Restore latest browser snapshot</Button>{backup!==null&&<Button style={action} type="button" variant="outline" onClick={()=>{const current=draft;setDraft(backup);setBackup(current);setMessage('Previous editor copy restored; stored history remains unchanged.');}}>Restore previous editor copy</Button>}</div>
    {busy&&<Button style={action} type="button" variant="outline" onClick={()=>saveAbort.current?.abort()}>Cancel waiting browser save</Button>}<p role="status" dir="auto" data-offline-draft-status>{message}</p>
    <div className="flex flex-wrap gap-3"><Button style={action} type="button" variant="outline" onClick={()=>void load('network')}>Load public fixture over network</Button><Button style={action} type="button" variant="outline" onClick={()=>void cache()}>Cache public fixture bytes</Button><Button style={action} type="button" variant="outline" onClick={()=>void load('cache')}>Read cached public fixture</Button><Button style={action} type="button" variant="outline" onClick={()=>{epoch.current++;abort.current?.abort();setResourceMessage('Public resource request cancelled; prior content and draft remain. A cache write already started may finish; cancellation does not delete saved bytes.');}}>Cancel public resource load</Button><Button style={action} type="button" variant="outline" aria-pressed={rtl} onClick={()=>setRtl(value=>!value)}>Use RTL offline layout</Button></div>
    <p role="status" dir="auto" data-offline-resource-status>{resourceMessage}</p><ul className="guidance-list" data-offline-titles>{titles.map(title=><li dir="auto" key={title}>{title}</li>)}</ul>
    <p dir="auto">Snapshots remain in this browser origin until browser policy/user action removes them. Versioned history preserves prior stored drafts; cross-tab locks serialize cooperating saves and stale revisions reject replacement. Browser eviction, disabled storage, quota failure and real authenticated synchronization require their own handling. No background synchronization or durable backend completion is claimed.</p>
  </div>;
}