import React, { StrictMode, Component, ReactNode, ErrorInfo } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n';
import { startSettingsSync } from './lib/serverSettings';
import { startViewport } from './lib/viewport';
import { useStore } from './lib/store';
import { startAutoTranslate } from './lib/autoTranslate';
import { refreshDeviceName } from './lib/deviceManager';
import { siteAllowed, showNotOfficial } from './lib/siteGuard';
import { startKeyboardWatch } from './lib/keyboard';
import { startElastic } from './lib/elastic';
import { startSystemBars } from './lib/systemBars';
import { readProbeParam, startKbProbe, probeOff } from './lib/kbProbe';

// नक़ल से बचाव: असली पते के अलावा कहीं और (या किसी और साइट के फ़्रेम में) ऐप नहीं चलता
if (!siteAllowed()) { showNotOfficial(); throw new Error('Uttam Vyapar: this address is not allowed'); }

// कीबोर्ड जाँच (पते में ?kbjanch=1 हो तभी चालू) — सबसे पहले, ताकि बाक़ी चीज़ें उसके बटन के हिसाब से चलें
readProbeParam();
startKbProbe();
// पुराने संस्करणों में दुकान का लोगो फ़ोन में अलग से भी सेव होता था और वह दूसरी (नई) दुकान पर दिख जाता था।
// अब लोगो सिर्फ़ दुकान के अपने रिकॉर्ड में रहता है — फ़ोन में बचे पुराने लोगो एक बार साफ़ (जगह भी ख़ाली होती है)।
try {
  const old: string[] = [];
  for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i) || ''; if (k === 'uttam_current_store_logo' || k.startsWith('uttam_store_logo_')) old.push(k); }
  old.forEach((k) => localStorage.removeItem(k));
} catch {}
// फ़ोन पर "डेस्कटॉप दृश्य" चुना हो तो पन्ना डेस्कटॉप चौड़ाई में खुले
startViewport();
// कीबोर्ड खुलने पर नीचे के बटन उसके ऊपर रहें और नीचे का मेनू छिपे
if (!probeOff('noWatch')) startKeyboardWatch();
// ऊपर/नीचे पहुँचकर और खींचने पर हल्का खिंचाव
startElastic();
// Android ऐप: ऊपर/नीचे की फ़ोन वाली पट्टी का रंग थीम के साथ
startSystemBars();

// ऐप की तरह खुला हो (APK या होम स्क्रीन से) तो बटन/मेनू पर वेबसाइट जैसा चुनाव-घेरा और लंबा-दबाव मेनू न आए
try {
  const w = window as any;
  if (w.Capacitor?.isNativePlatform?.() || window.matchMedia?.('(display-mode: standalone)').matches || w.navigator?.standalone === true) {
    document.documentElement.classList.add('uv-app');
  }
} catch {}

// पूरे ऐप का पाठ चुनी हुई भाषा में (पन्ना बनने से पहले ही चालू)
if (!probeOff('noTr')) startAutoTranslate(useStore.getState().language);

// इस डिवाइस का असली मॉडल और ब्राउज़र पहचानकर सहेज लें (लाइसेंस की खिड़की में वही दिखता है)
refreshDeviceName().catch(() => {});

// एडमिन पैनल की सेटिंग (कीमतें, बैनर...) सर्वर से लेकर हर डिवाइस पर एक जैसी रखें
startSettingsSync();

/**
 * नया संस्करण अपने-आप लागू करना:
 * होस्टिंग पर नई फ़ाइलें डालने के बाद ब्राउज़र पुराना (कैश वाला) पन्ना न दिखाता रहे,
 * इसलिए ऐप खुलते ही नया संस्करण जाँचा जाता है और मिलते ही पन्ना एक बार अपने-आप ताज़ा होता है।
 * (बिल बनाते समय बीच में ताज़ा नहीं होता — उस पन्ने से हटने पर होता है।)
 */
/**
 * दूसरी, पक्की जाँच: होस्टिंग पर रखी version.json में हर बिल्ड की अलग पहचान होती है।
 * वह इस खुले हुए ऐप की पहचान से अलग निकले तो ऐप की पुरानी फ़ाइलों का कैश हटाकर पन्ना एक बार नए सिरे से खुलता है।
 * सिर्फ़ फ़ाइलों का कैश हटता है — बिल, सामान, ग्राहक, लॉगिन और सेटिंग को हाथ नहीं लगाया जाता।
 * (इसी वजह से अब नया रूप देखने के लिए ब्राउज़र का डेटा साफ़ करने की ज़रूरत नहीं है।)
 */
declare const __UV_BUILD__: string | undefined;
const UV_BUILD: string = typeof __UV_BUILD__ !== 'undefined' ? String(__UV_BUILD__) : '';
let newBuildWaiting = '';
const editingBill = () => /\/dashboard\/(billing|sale\/)/.test(window.location.hash);
async function applyNewBuild(build: string): Promise<void> {
  try { if (sessionStorage.getItem('uv_reloaded_for') === build) return; sessionStorage.setItem('uv_reloaded_for', build); } catch (e) {}
  try { const regs = await navigator.serviceWorker.getRegistrations(); await Promise.all(regs.map((r) => r.unregister())); } catch (e) {}
  try { const keys = await caches.keys(); await Promise.all(keys.map((k) => caches.delete(k))); } catch (e) {}
  // पता वही, बस साथ में नई पहचान — ताकि ब्राउज़र पुराना index.html न दे
  window.location.replace(window.location.pathname + '?v=' + encodeURIComponent(build) + window.location.hash);
}
async function checkBuild(): Promise<void> {
  if (!UV_BUILD || (window as any).Capacitor?.isNativePlatform?.()) return;
  try {
    const res = await fetch('./version.json?t=' + Date.now(), { cache: 'no-store' });
    if (!res.ok) return;
    const build = String((await res.json())?.build || '');
    if (!build || build === UV_BUILD) return;
    if (editingBill()) { newBuildWaiting = build; return; }      // बिल बनाते समय बीच में नहीं; उस पन्ने से हटते ही
    await applyNewBuild(build);
  } catch (e) {}
}
if (typeof window !== 'undefined') {
  window.addEventListener('hashchange', () => { if (newBuildWaiting && !editingBill()) { const b = newBuildWaiting; newBuildWaiting = ''; applyNewBuild(b); } });
}

if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
  let hadController = !!navigator.serviceWorker.controller;
  let reloaded = false;
  let pendingReload = false;
  const busy = () => /\/dashboard\/(billing|sale\/)/.test(window.location.hash);
  const doReload = () => {
    if (reloaded) return;
    reloaded = true;
    window.location.reload();
  };
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    if (!hadController) { hadController = true; return; } // पहली बार इंस्टॉल: ताज़ा करने की ज़रूरत नहीं
    if (busy()) { pendingReload = true; return; }
    doReload();
  });
  window.addEventListener('hashchange', () => { if (pendingReload && !busy()) doReload(); });
  const checkUpdate = () => {
    navigator.serviceWorker.getRegistration().then(r => r?.update()).catch(() => {});
    checkBuild();
  };
  window.addEventListener('load', () => {
    checkUpdate();
    setInterval(checkUpdate, 30 * 60 * 1000);
  });
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') checkUpdate();
    else if (pendingReload) doReload();
  });
}

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

class RootErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('App Unhandled Exception:', error, errorInfo);
  }

  handleReload = () => {
    window.location.reload();
  };

  handleReset = () => {
    localStorage.clear();
    sessionStorage.clear();
    window.location.href = window.location.origin + window.location.pathname;
  };

  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#1d3050',
          color: '#ffffff',
          fontFamily: 'system-ui, -apple-system, sans-serif',
          padding: '24px',
          textAlign: 'center'
        }}>
          <div style={{
            maxWidth: '480px',
            backgroundColor: 'rgba(255, 255, 255, 0.08)',
            border: '1px solid rgba(255, 255, 255, 0.15)',
            borderRadius: '24px',
            padding: '32px 24px',
            boxShadow: '0 20px 40px rgba(0,0,0,0.4)'
          }}>
            <div style={{
              width: '64px',
              height: '64px',
              margin: '0 auto 16px',
              borderRadius: '20px',
              backgroundColor: '#2563eb',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <img src="./icon.png" alt="Logo" style={{ width: '48px', height: '48px', borderRadius: '14px' }} />
            </div>
            
            <h2 style={{ fontSize: '20px', fontWeight: 900, marginBottom: '8px' }}>
              उत्तम व्यापार (UttamVyapar)
            </h2>
            <p style={{ fontSize: '13px', color: '#93c5fd', marginBottom: '24px' }}>
              एप्लिकेशन को लोड करने में सहायता की आवश्यकता है। कृपया नीचे दिए गए बटन पर क्लिक करें।
            </p>

            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
              <button
                type="button"
                onClick={this.handleReload}
                style={{
                  backgroundColor: '#2563eb',
                  color: '#ffffff',
                  border: 'none',
                  padding: '12px 24px',
                  borderRadius: '14px',
                  fontSize: '13px',
                  fontWeight: 'bold',
                  cursor: 'pointer'
                }}
              >
                🔄 पुनः लोड करें (Reload)
              </button>
              <button
                type="button"
                onClick={this.handleReset}
                style={{
                  backgroundColor: 'rgba(255, 255, 255, 0.15)',
                  color: '#ffffff',
                  border: '1px solid rgba(255, 255, 255, 0.3)',
                  padding: '12px 20px',
                  borderRadius: '14px',
                  fontSize: '13px',
                  fontWeight: 'bold',
                  cursor: 'pointer'
                }}
              >
                डेटा रीसेट करें (Reset & Start)
              </button>
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RootErrorBoundary>
      <App />
    </RootErrorBoundary>
  </StrictMode>,
);