const { useState, useEffect, useRef, useMemo } = React;
dayjs.extend(window.dayjs_plugin_relativeTime);

const CATEGORY_LIST = ['pothole','streetlight','signage','trash','drainage','other'];
const SEVERITIES = ['high','medium','low'];
const STATUSES = ['submitted','in_progress','fixed'];
const BACKEND_BASE = "http://192.168.100.59:8000";

const SEVERITY_COLOR = { high:'#D32F2F', medium:'#F57C00', low:'#388E3C' };
const STATUS_COLOR = { submitted:'#1976D2', in_progress:'#7B1FA2', fixed:'#455A64' };

function fetchJSON(path){ return fetch(path).then(r=>r.json()); }

// Fetch tickets from backend
async function fetchTickets(){
  const res = await fetch(`${BACKEND_BASE}/api/tickets`);
  if(!res.ok) throw new Error('Failed to fetch tickets');
  const data = await res.json();
  return data;
}

// Normalize API data to expected format
function normalizeReportData(report) {
  // Already normalized demo format (has location.lat)
  if (report.location && report.location.lat !== undefined) {
    return {
      id: report.id || report.ticket_id || report.ticketId,
      category: report.category || 'other',
      severity: report.severity || 'low',
      status: report.status || 'submitted',
      notes: report.notes || report.description || '',
      location: report.location,
      createdAt: report.createdAt || report.created_at,
      updatedAt: report.updatedAt || report.updated_at,
      userId: report.userId || report.user_id,
      userName: report.userName || report.user_name || null,
      address: report.address || null,
      image_url: report.image_url || report.imagePath || report.image_path || null
    };
  }

  // Convert backend API format to the app format
  return {
    id: report.id || report.ticket_id || report.ticketId,
    category: report.category || 'other',
    severity: report.severity || 'low',
    status: report.status || 'submitted',
    notes: report.description || report.notes || '',
    location: {
      lat: (report.latitude !== undefined ? report.latitude : (report.lat !== undefined ? report.lat : null)),
      lng: (report.longitude !== undefined ? report.longitude : (report.lng !== undefined ? report.lng : null))
    },
    createdAt: report.created_at || report.createdAt,
    updatedAt: report.updated_at || report.updatedAt,
    userId: report.user_id || report.userId,
    userName: report.user_name || report.userName || null,
    address: report.address || null,
    image_url: report.image_url || report.image_path || report.imagePath || null
  };
}

function useI18n(initialLang='en'){
  const [lang,setLang] = useState(localStorage.getItem('lang') || initialLang);
  const [map,setMap] = useState({en:null,ms:null});
  useEffect(()=>{
    Promise.all([fetchJSON('./i18n/en.json'), fetchJSON('./i18n/ms.json')])
      .then(([en,ms])=> setMap({en,ms}))
      .catch(err=> console.error('i18n load',err));
  },[]);
  const t = (key)=> (map[lang] && map[lang][key]) || (map['en'] && map['en'][key]) || key;
  useEffect(()=> localStorage.setItem('lang',lang),[lang]);
  return {lang,setLang,t,i18nMap:map};
}

function App(){
  const {lang,setLang,t,i18nMap} = useI18n();

  const [rawData,setRawData] = useState([]);
  const [loading,setLoading] = useState(true);

  const defaultFrom = dayjs().subtract(30,'day').format('YYYY-MM-DD');
  const defaultTo = dayjs().format('YYYY-MM-DD');

  // form state
  const [formCategories,setFormCategories] = useState(new Set(CATEGORY_LIST));
  const [formSeverities,setFormSeverities] = useState(new Set(SEVERITIES));
  const [formStatuses,setFormStatuses] = useState(new Set(STATUSES));
  const [formFrom,setFormFrom] = useState(defaultFrom);
  const [formTo,setFormTo] = useState(defaultTo);

  // applied filters
  const [appliedFilters,setAppliedFilters] = useState({
    categories:new Set(CATEGORY_LIST),
    severities:new Set(SEVERITIES),
    statuses:new Set(STATUSES),
    from:defaultFrom,
    to:defaultTo
  });

  const [filtered,setFiltered] = useState([]);

  const [selected,setSelected] = useState(null);

  const mapRef = useRef(null);
  const markersRef = useRef(null);
  const heatRef = useRef(null);
  const mapContainerRef = useRef(null);

  const [heatEnabled,setHeatEnabled] = useState(false);

  // simple toast container for non-blocking errors / retry actions
  const toastContainerRef = useRef(null);
  useEffect(()=> {
    const c = document.createElement('div');
    c.style.position = 'fixed';
    c.style.right = '12px';
    c.style.bottom = '12px';
    c.style.zIndex = 9999;
    toastContainerRef.current = c;
    document.body.appendChild(c);
    return ()=> { if(c.parentNode) c.parentNode.removeChild(c); };
  }, []);

  const showToast = (msg, actionLabel, action) => {
    const c = toastContainerRef.current;
    if(!c) { console.warn(msg); return; }
    const el = document.createElement('div');
    el.style.background = '#111';
    el.style.color = '#fff';
    el.style.padding = '8px 12px';
    el.style.marginTop = '8px';
    el.style.borderRadius = '6px';
    el.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
    el.style.display = 'flex';
    el.style.alignItems = 'center';
    el.textContent = msg;
    if(actionLabel && action){
      const btn = document.createElement('button');
      btn.textContent = actionLabel;
      btn.style.marginLeft = '12px';
      btn.style.background = 'transparent';
      btn.style.color = '#4FC3F7';
      btn.style.border = 'none';
      btn.style.cursor = 'pointer';
      btn.onclick = ()=> { action(); if(el.parentNode) el.parentNode.removeChild(el); };
      el.appendChild(btn);
    }
    c.appendChild(el);
    setTimeout(()=> { if(el.parentNode) el.parentNode.removeChild(el); }, 8000);
  };

  const PLACEHOLDER_SRC = 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="120" height="90"><rect width="100%" height="100%" fill="#e5e7eb"/><text x="50%" y="50%" dy=".3em" font-size="12" text-anchor="middle" fill="#6b7280">No image</text></svg>');

  useEffect(()=>{
    setLoading(true);
    fetchTickets()
      .then(data => {
        console.log('Loaded data from backend:', (Array.isArray(data) ? data.length : 0), 'reports');
        const normalizedData = (data || []).map(normalizeReportData);
        setRawData(normalizedData);
        setLoading(false);
      })
      .catch(err => {
        console.warn('Failed to load tickets from backend:', err);
        showToast('Failed to load tickets from backend.');
        setRawData([]);
        setLoading(false);
      });
  },[]);

  useEffect(()=>{
    // init map once
    const map = L.map('map', { center:[3.1390,101.6869], zoom:12, preferCanvas:true });
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom:19,
      attribution:'© OpenStreetMap'
    }).addTo(map);
    mapRef.current = map;
    markersRef.current = L.markerClusterGroup();
    map.addLayer(markersRef.current);
    return ()=> { map.remove(); mapRef.current=null; markersRef.current=null; };
  },[]);

  // compute filtered when rawData or appliedFilters change
  useEffect(()=>{
    if(!rawData) return;
    const from = dayjs(appliedFilters.from).startOf('day');
    const to = dayjs(appliedFilters.to).endOf('day');
    const out = rawData.filter(r=>{
      if(!r || !r.createdAt) return false;
      const created = dayjs(r.createdAt);
      if(created.isBefore(from) || created.isAfter(to)) return false;
      if(!appliedFilters.categories.has(r.category)) return false;
      if(!appliedFilters.severities.has(r.severity)) return false;
      if(!appliedFilters.statuses.has(r.status)) return false;
      return true;
    });
    setFiltered(out);
  },[rawData, appliedFilters]);

  // update markers and heatmap when filtered changes
  useEffect(()=>{
    const map = mapRef.current;
    const markersLayer = markersRef.current;
    if(!map || !markersLayer) return;
    markersLayer.clearLayers();
    if(filtered.length === 0){
      // remove heat if present
      if(heatRef.current){ heatRef.current.remove(); heatRef.current = null; }
      map.setView([3.1390,101.6869],12);
      const container = document.querySelector('.map-panel');
      if(container) container.classList.add('no-reports');
      return;
    } else {
      const container = document.querySelector('.map-panel');
      if(container) container.classList.remove('no-reports');
    }

    const bounds = [];
    filtered.forEach(r=>{
      if(!r.location) return;
      const lat = r.location.lat;
      const lng = r.location.lng;
      bounds.push([lat,lng]);
      const color = SEVERITY_COLOR[r.severity] || '#333';
      const icon = L.divIcon({
        className: 'custom-marker',
        html: `<div style="width:18px;height:18px;border-radius:50%;background:${color};border:2px solid #fff;"></div>`,
        iconSize:[22,22],
        iconAnchor:[11,11]
      });
      const marker = L.marker([lat,lng], { icon });
      marker.on('click', ()=> {
        setSelected(r);
      });
      marker.bindPopup(`<strong>${r.category}</strong><br/>${r.notes || ''}`);
      markersLayer.addLayer(marker);
    });

    try{
      const boundsObj = L.latLngBounds(bounds);
      if(bounds.length === 1){
        map.setView(bounds[0],14);
      } else {
        map.fitBounds(boundsObj.pad(0.1));
      }
    }catch(e){
      map.setView([3.1390,101.6869],12);
    }

    // heatmap
    if(heatEnabled){
      const heatPoints = filtered.map(r=> [r.location.lat, r.location.lng, 0.6]);
      if(heatRef.current){
        heatRef.current.setLatLngs(heatPoints);
      } else {
        heatRef.current = L.heatLayer(heatPoints, {radius:25,blur:15,maxZoom:17}).addTo(map);
      }
    } else {
      if(heatRef.current){ heatRef.current.remove(); heatRef.current = null; }
    }
  },[filtered, heatEnabled]);

  const applyFilters = ()=> {
    setAppliedFilters({
      categories: new Set(formCategories),
      severities: new Set(formSeverities),
      statuses: new Set(formStatuses),
      from: formFrom,
      to: formTo
    });
  };

  const resetFilters = ()=> {
    const cats = new Set(CATEGORY_LIST);
    const sevs = new Set(SEVERITIES);
    const stats = new Set(STATUSES);
    setFormCategories(cats);
    setFormSeverities(sevs);
    setFormStatuses(stats);
    setFormFrom(defaultFrom);
    setFormTo(defaultTo);
    setAppliedFilters({
      categories: cats,
      severities: sevs,
      statuses: stats,
      from:defaultFrom,
      to:defaultTo
    });
  };

  // helper toggle functions
  const toggleSet = (setState, currentSet, val) => {
    const s = new Set(currentSet);
    if(s.has(val)) s.delete(val); else s.add(val);
    setState(s);
  };

  // sorted queue
  const sortedQueue = useMemo(()=>{
    const order = { high:0, medium:1, low:2 };
    return [...filtered].sort((a,b)=>{
      const sa = order[a.severity] ?? 3;
      const sb = order[b.severity] ?? 3;
      if(sa !== sb) return sa - sb;
      return dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf();
    });
  },[filtered]);

  const availableStatuses = useMemo(()=>{
    const s = new Set(STATUSES);
    rawData.forEach(r=>{ if(r && r.status) s.add(r.status); });
    return Array.from(s);
  }, [rawData]);

const updateTicketStatus = async (reportId, newStatus) => {
  try {
    const res = await fetch(`${BACKEND_BASE}/api/tickets/${reportId}/status`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: newStatus })
    });
    if (res.ok) {
      // Prefer using returned updated ticket if provided
      let updated = null;
      try { updated = await res.json(); } catch(e){ updated = null; }
      if (updated) {
        const normalized = normalizeReportData(updated);
        setRawData(prev => prev.map(r => r.id === reportId ? normalized : r));
        if (selected && selected.id === reportId) setSelected(normalized);
      } else {
        // No body returned - update local state
        setRawData(prev=> prev.map(r=> r.id === reportId ? {...r, status: newStatus, updatedAt: new Date().toISOString()} : r));
        if(selected && selected.id === reportId) setSelected(prev => ({...prev, status: newStatus, updatedAt: new Date().toISOString()}));
      }
      showToast('Status updated');
      return true;
    } else {
      const text = await res.text().catch(()=> '');
      console.warn('Status update failed', text);
      showToast('Failed to update status', 'Retry', ()=> updateTicketStatus(reportId, newStatus));
      return false;
    }
  } catch (err) {
    console.error('Error updating status:', err);
    showToast('Failed to update status', 'Retry', ()=> updateTicketStatus(reportId, newStatus));
    return false;
  }
};

const cycleStatus = async (reportId) => {
  const currentReport = rawData.find(r => r.id === reportId);
  if (!currentReport) return;
  const idx = availableStatuses.indexOf(currentReport.status);
  const nextStatus = availableStatuses[(idx + 1) % availableStatuses.length] || STATUSES[(STATUSES.indexOf(currentReport.status) + 1) % STATUSES.length];
  await updateTicketStatus(reportId, nextStatus);
};

  const openInMaps = (r)=>{
    const lat = r.location.lat;
    const lng = r.location.lng;
    window.open(`https://www.google.com/maps/search/?api=1&query=${lat},${lng}`, '_blank');
  };

  const navigateToLocation = (r) => {
    const map = mapRef.current;
    if (!map || !r.location) return;

    const { lat, lng } = r.location;
    const currentZoom = map.getZoom();
    const targetZoom = 20; // Maximum zoom level for focusing on a specific location

    // First zoom out a bit for animation effect, then zoom to target
    map.flyTo([lat, lng], targetZoom, {
      animate: true,
      duration: 1.5,
      easeLinearity: 0.25
    });

    // Also set the selected item to show details
    setSelected(r);
  };

  return (
    <div className="app-root">
      <header className="header">
        <div className="brand">{t('dashboard.brand') || 'FixMate'}</div>
        <div className="lang-toggle">
          <label style={{fontSize:12, color:'#374151'}}>{t('label.language') || 'Language'}</label>
          <select value={lang} onChange={e=>setLang(e.target.value)}>
            <option value="en">EN</option>
            <option value="ms">BM</option>
          </select>
        </div>
      </header>

      <div className="container">
        <div className="main">
          <aside className="panel filters">
            <h3>{t('dashboard.filters') || 'Filters'}</h3>

            <div className="filter-group">
              <div className="row space-between"><strong>{t('filter.category') || 'Category'}</strong></div>
              <div className="checkbox-row" aria-label="categories">
                {CATEGORY_LIST.map(cat=>(
                  <label key={cat} style={{display:'flex',alignItems:'center',gap:8}}>
                    <input type="checkbox"
                      checked={formCategories.has(cat)}
                      onChange={()=> toggleSet(setFormCategories, formCategories, cat)}
                    />
                    <span style={{textTransform:'capitalize'}}>{t(`category.${cat}`) || cat}</span>
                  </label>
                ))}
              </div>
            </div>

            <div className="filter-group">
              <div className="row space-between"><strong>{t('filter.severity') || 'Severity'}</strong></div>
              <div className="multi-select">
                {SEVERITIES.map(s=>(
                  <button key={s} className={`chip severity-${s}`} onClick={()=> toggleSet(setFormSeverities, formSeverities, s)} aria-pressed={formSeverities.has(s)}>
                    {t(`severity.${s}`) || s}
                  </button>
                ))}
              </div>
            </div>

            <div className="filter-group">
              <div className="row space-between"><strong>{t('filter.status') || 'Status'}</strong></div>
              <div className="multi-select">
                {STATUSES.map(s=>(
                  <button key={s} className={`chip status-${s}`} onClick={()=> toggleSet(setFormStatuses, formStatuses, s)} aria-pressed={formStatuses.has(s)}>
                    {t(`status.${s}`) || s}
                  </button>
                ))}
              </div>
            </div>

            <div className="filter-group">
              <div className="row space-between"><strong>{t('filter.dateRange') || 'Date Range'}</strong></div>
              <div style={{display:'flex',gap:8,marginTop:8}}>
                <div style={{display:'flex',flexDirection:'column'}}>
                  <label style={{fontSize:12}}>{t('filter.dateFrom') || 'From'}</label>
                  <input type="date" value={formFrom} onChange={e=>setFormFrom(e.target.value)} />
                </div>
                <div style={{display:'flex',flexDirection:'column'}}>
                  <label style={{fontSize:12}}>{t('filter.dateTo') || 'To'}</label>
                  <input type="date" value={formTo} onChange={e=>setFormTo(e.target.value)} />
                </div>
              </div>
            </div>

            <div style={{display:'flex',gap:8,marginTop:12}}>
              <button className="btn" onClick={applyFilters}>{t('btn.apply') || 'Apply'}</button>
              <button className="btn secondary" onClick={resetFilters}>{t('btn.reset') || 'Reset'}</button>
            </div>

          </aside>

          <section className="panel map-panel" ref={mapContainerRef}>
            <div id="map"></div>
            <div className="map-empty">{t('map.noReports') || 'No reports match filters'}</div>
          </section>

          <aside className="panel">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <h3>{t('queue.title') || 'Tickets'}</h3>
            </div>

            <div className="queue-list" role="list">
              {sortedQueue.map(r=>(
                <div key={r.id} className="queue-item" role="listitem">
                  <div className="thumb">
                    {(r.image_url || r.imagePath) ? (
                      <img src={r.image_url || r.imagePath} alt={r.category} style={{width:64,height:48,objectFit:'cover',borderRadius:6}} onError={(e)=>{ e.currentTarget.style.display='none'; }} />
                    ) : (t(`category.${r.category}`) || r.category)}
                  </div>
                  <div className="item-main">
                    <div
                      className="item-title clickable"
                      onClick={() => navigateToLocation(r)}
                      title="Click to view on map"
                    >
                      {t(`category.${r.category}`) || r.category}
                    </div>
                    <div className="item-meta">
                      <span className={`chip severity-${r.severity}`}>{t(`severity.${r.severity}`) || r.severity}</span>
                      <span className={`chip status-${r.status}`}>{t(`status.${r.status}`) || r.status}</span>
                      <span className="time-ago">{dayjs(r.createdAt).fromNow()}</span>
                    </div>
                  </div>
                  <div className="item-actions" style={{display:'flex',flexDirection:'column',gap:8,alignItems:'flex-end'}}>
                    <select value={r.status} onChange={(e)=> updateTicketStatus(r.id, e.target.value)}>
                      {availableStatuses.map(s => <option key={s} value={s}>{t(`status.${s}`) || s}</option>)}
                    </select>
                    <button className="btn ghost" onClick={()=> { setSelected(r); }}>{t('btn.view') || 'View'}</button>
                  </div>
                </div>
              ))}
            </div>
          </aside>
        </div>

        <footer className="footer">
          <div className="stats">
            <div><strong>{t('stats.total') || 'Total'}: </strong> {filtered.length}</div>
            <div className="chip severity-high">{filtered.filter(x=>x.severity==='high').length} {t('severity.high') || 'High'}</div>
            <div className="chip severity-medium">{filtered.filter(x=>x.severity==='medium').length} {t('severity.medium') || 'Medium'}</div>
            <div className="chip severity-low">{filtered.filter(x=>x.severity==='low').length} {t('severity.low') || 'Low'}</div>
          </div>
          <div style={{display:'flex',gap:12,alignItems:'center'}}>
            <label style={{display:'flex',alignItems:'center',gap:8}}>
              <input type="checkbox" checked={heatEnabled} onChange={e=>setHeatEnabled(e.target.checked)} /> {t('stats.heatmap') || 'Heatmap'}
            </label>
          </div>
        </footer>

        {/* Detail Drawer */}
        <div className={`drawer ${selected ? 'open' : ''}`} role="dialog" aria-hidden={!selected}>
          {selected ? (
            <div className="drawer-content" aria-live="polite">
              <button className="drawer-close" onClick={()=>setSelected(null)} aria-label="Close">×</button>
              <div className="drawer-header">
                <div className="drawer-thumb large">
                  {(selected.image_url || selected.imagePath) ? (
                    <img src={selected.image_url || selected.imagePath} alt={selected.category} style={{width:88,height:64,objectFit:'cover',borderRadius:6}} onError={(e)=>{ e.currentTarget.style.display='none'; }} />
                  ) : (t(`category.${selected.category}`) || selected.category)}
                </div>
                <div style={{marginLeft:12}}>
                  <h3 style={{margin:0}}>{t(`category.${selected.category}`) || selected.category}</h3>
                  <div style={{display:'flex',gap:8,alignItems:'center',marginTop:6}}>
                    <span className={`chip severity-${selected.severity}`}>{t(`severity.${selected.severity}`) || selected.severity}</span>
                    <span className={`chip status-${selected.status}`}>{t(`status.${selected.status}`) || selected.status}</span>
                    <span style={{color:'#6b7280',fontSize:12}}>{dayjs(selected.createdAt).fromNow()}</span>
                  </div>
                </div>
              </div>

              <div className="drawer-body">
                <p style={{marginTop:8}}><strong>{t('drawer.details') || 'Details'}</strong></p>
                {selected.notes ? <p>{selected.notes}</p> : <p style={{opacity:0.7}}>{t('drawer.noNotes') || 'No additional notes'}</p>}
                <p><strong>{t('label.submittedBy') || 'Submitted by'}:</strong> {selected.userName || (t('label.guest') || 'Guest')}</p>
                <p><strong>{t('label.place') || 'Place'}:</strong> {selected.address ? selected.address : `${selected.location.lat.toFixed(5)}, ${selected.location.lng.toFixed(5)}`}</p>
                <p><strong>{t('label.location') || 'Location'}:</strong> {selected.location.lat.toFixed(5)}, {selected.location.lng.toFixed(5)}</p>
                <p><strong>{t('label.createdAt') || 'Created'}:</strong> {dayjs(selected.createdAt).format('YYYY-MM-DD HH:mm')}</p>
              </div>

              <div className="drawer-actions">
                <select value={selected.status} onChange={(e)=> updateTicketStatus(selected.id, e.target.value)}>
                  {availableStatuses.map(s => <option key={s} value={s}>{t(`status.${s}`) || s}</option>)}
                </select>
                <button className="btn secondary" onClick={()=>openInMaps(selected)}>
                  {t('drawer.openMap') || 'Open Map'}
                </button>
              </div>
            </div>
          ) : null}
        </div>

      </div>

    </div>
  );
}

// mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);