/**
 * ═══════════════════════════════════════════════════════════════════
 * Emergency In-App Component
 * ═══════════════════════════════════════════════════════════════════
 * 
 * Emergency form that displays emergency services route.
 * Triggered from chat when user types "EMERGENCY", or **embedded** in NuAsk NOW (`embedded={true}`) — transparent root, **Crisis HUD** (dark base, rose/red chrome, cyan→rose title gradients, readable semibold type) vs standalone light layout. Copy uses `languageCode` / SYS_MESSAGES_KV + user language preference.
 * **Loading UX:** While routes are fetched, show the loading state whenever `loading` is true **after** auth is ready (`canCallAPI`). Do not gate loading UI on `!canCallAPI` — that caused a flash of “No emergency services available.” before `route` was populated.
 * 
 * SYSTEM_MAP COMPLIANT:
 * - Bearer token is the ONLY identity source
 * - NO URL identity params
 * - All authenticated calls use window.SylvanFlowAuth.authenticatedFetch
 */

(function() {
  'use strict';

  const { useState, useEffect, useRef } = React;

  /** Safe English fallbacks when SYS_MESSAGES_KV fetch fails (never show [MISSING: …] in crisis UI). */
  const EMERGENCY_UI_FALLBACKS = {
    emergencyServicesRoute: 'Emergency services route ready',
    allInfoProvided: 'All information provided below',
    lifeThreateningWarning:
      '⚠️ **In a life-threatening emergency, dial your local emergency number immediately.**',
    callImmediately: 'Call immediately',
    nearestEmergencyServices: '📍 **Nearest Emergency Services',
    policeLabel: 'Police',
    hospitalLabel: 'Hospital',
    pharmacyLabel: 'Pharmacy',
    convenienceStoreLabel: 'Convenience Store',
    embassyLabel: 'Embassy',
    emergencyServiceLabel: 'Emergency Service',
    viewDetails: 'View Details',
    hideDetails: 'Hide Details',
    showToTaxiDriver: 'Show to Taxi Driver / Passerby:',
    english: 'English',
    local: 'Local',
    openInMaps: 'Open in Maps',
    call: 'Call',
    distance: 'Distance',
    estimatedTime: 'Estimated Time'
  };

  function pickEmergencyUiString(value, fallbackKey) {
    const v = typeof value === 'string' ? value.trim() : '';
    if (v && !/^\[MISSING:/i.test(v)) return v;
    return EMERGENCY_UI_FALLBACKS[fallbackKey] || '';
  }

  /** SYS labels often include a trailing colon; avoid Distance:: double punctuation. */
  function joinEmergencyLabelValue(label, value) {
    const trimmed = String(label || '').trim();
    if (!trimmed) return String(value ?? '');
    const separator = /[:：]\s*$/.test(trimmed) ? ' ' : ': ';
    return `${trimmed}${separator}${value}`;
  }

  function formatEmergencyFieldLabel(label, fallbackKey) {
    const text = pickEmergencyUiString(label, fallbackKey).trim();
    if (!text) return '';
    return /[:：]\s*$/.test(text) ? text : `${text}:`;
  }

  function EmergencyInApp({ tabParams, embedded }) {
    const containerRef = useRef(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [canCallAPI, setCanCallAPI] = useState(false);
    const [route, setRoute] = useState(null);
    const [region, setRegion] = useState('GLOBAL');
    const [languageCode, setLanguageCode] = useState(() => {
      if (tabParams?.languageCode) return tabParams.languageCode;
      if (typeof window !== 'undefined' && window.SylvanFlowState?.getLanguage) {
        return window.SylvanFlowState.getLanguage() || 'en';
      }
      return 'en';
    });
    const [emergencyNumbers, setEmergencyNumbers] = useState(null);
    const [expandedPOIs, setExpandedPOIs] = useState({});
    // ✅ FIX 2: State for translated UI strings (no hardcoded fallbacks)
    const [uiStrings, setUiStrings] = useState({
      emergencyServicesRoute: null,
      allInfoProvided: null,
      lifeThreateningWarning: null,
      callImmediately: null,
      nearestEmergencyServices: null,
      policeLabel: null,
      hospitalLabel: null,
      pharmacyLabel: null,
      convenienceStoreLabel: null,
      embassyLabel: null,
      emergencyServiceLabel: null,
      viewDetails: null,
      hideDetails: null,
      showToTaxiDriver: null,
      english: null,
      local: null,
      openInMaps: null,
      call: null,
      distance: null,
      estimatedTime: null
    });

    const embed = embedded === true;
    /** NuAsk NOW corridor skin vs legacy light emergency layout */
    const nu = (darkCls, lightCls) => (embed ? darkCls : lightCls);

    useEffect(() => {
      // ✅ HARD GATING: Emergency UI may render, but MUST NOT call protected endpoints until authChecked
      const sessionToken = localStorage.getItem('sylvanflow_session_token');
      if (sessionToken) {
        setCanCallAPI(true);
      } else {
        setLoading(false);
        return;
      }

      // ✅ Extract params from tabParams
      const emergencyId = tabParams?.emergency_id || null;

      if (!emergencyId) {
        setError('Missing emergency_id. Please request emergency services from chat.');
        setLoading(false);
        return;
      }

      // ✅ Use extracted logic (Flow-Tune logic handles emergency mode)
      if (!window.FlowTuneFormLogic) {
        setError('Flow-Tune form logic not loaded');
        setLoading(false);
        return;
      }

      // Load emergency routes
      window.FlowTuneFormLogic.loadRoutes(
        { emergencyId, mode: 'emergency' },
        (result) => {
          if (result.type === 'selected') {
            setRoute(result.route);
            setRegion(result.region || 'GLOBAL');
            setLanguageCode(result.languageCode || 'en');
            // Extract emergency numbers from result if available
            if (result.emergency_numbers) {
              setEmergencyNumbers(result.emergency_numbers);
            }
          } else {
            // Emergency routes are typically single route
            if (result.routes && result.routes.length > 0) {
              const emergencyRoute = result.routes[0];
              setRoute(emergencyRoute);
              setRegion(result.region || 'GLOBAL');
              setLanguageCode(result.languageCode || 'en');
              // Extract emergency numbers from result if available
              if (result.emergency_numbers) {
                setEmergencyNumbers(result.emergency_numbers);
              }
            }
          }
          setLoading(false);
        },
        (errorMsg) => {
          setError(errorMsg);
          setLoading(false);
        }
      );
    }, [tabParams]);

    // ✅ FIX 2: Load UI strings from SYS_MESSAGES_KV when language changes
    useEffect(() => {
      const loadUiStrings = async () => {
        const lang =
          tabParams?.languageCode ||
          languageCode ||
          (typeof window !== 'undefined' && window.SylvanFlowState?.getLanguage?.()) ||
          'en';
        
        try {
          if (typeof window !== 'undefined' && window.getSysMessage) {
            // ✅ FIX 2: Load existing emergency message keys from SYS_MESSAGES_KV
            // Note: Some UI action keys (view_details, hide_details, etc.) may not exist yet
            // UI will show [MISSING: key] placeholder if key not found (SYSTEM_MAP compliant)
            const [
              emergencyServicesRoute,
              allInfoProvided,
              lifeThreateningWarning,
              callImmediately,
              nearestEmergencyServices,
              policeLabel,
              hospitalLabel,
              pharmacyLabel,
              convenienceStoreLabel,
              embassyLabel,
              emergencyServiceLabel,
              viewDetails,
              hideDetails,
              showToTaxiDriver,
              english,
              local,
              openInMaps,
              call,
              distance,
              estimatedTime
            ] = await Promise.all([
              window.getSysMessage('sys:emergency:route_ready', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:all_info_provided', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:life_threatening_warning', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:call_immediately', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:nearest_services', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:police_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:hospital_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:pharmacy_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:convenience_store_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:embassy_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:emergency_service_label', lang), // ✅ EXISTS
              window.getSysMessage('sys:emergency:view_details', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:hide_details', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:show_to_taxi_driver', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:english', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:local', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:open_in_maps', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:call', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:distance', lang), // ⚠️ MISSING - needs to be added
              window.getSysMessage('sys:emergency:estimated_time', lang) // ⚠️ MISSING - needs to be added
            ]);
            
            setUiStrings({
              emergencyServicesRoute: pickEmergencyUiString(emergencyServicesRoute, 'emergencyServicesRoute'),
              allInfoProvided: pickEmergencyUiString(allInfoProvided, 'allInfoProvided'),
              lifeThreateningWarning: pickEmergencyUiString(
                lifeThreateningWarning,
                'lifeThreateningWarning'
              ),
              callImmediately: pickEmergencyUiString(callImmediately, 'callImmediately'),
              nearestEmergencyServices: pickEmergencyUiString(
                nearestEmergencyServices,
                'nearestEmergencyServices'
              ),
              policeLabel: pickEmergencyUiString(policeLabel, 'policeLabel'),
              hospitalLabel: pickEmergencyUiString(hospitalLabel, 'hospitalLabel'),
              pharmacyLabel: pickEmergencyUiString(pharmacyLabel, 'pharmacyLabel'),
              convenienceStoreLabel: pickEmergencyUiString(convenienceStoreLabel, 'convenienceStoreLabel'),
              embassyLabel: pickEmergencyUiString(embassyLabel, 'embassyLabel'),
              emergencyServiceLabel: pickEmergencyUiString(emergencyServiceLabel, 'emergencyServiceLabel'),
              viewDetails: pickEmergencyUiString(viewDetails, 'viewDetails'),
              hideDetails: pickEmergencyUiString(hideDetails, 'hideDetails'),
              showToTaxiDriver: pickEmergencyUiString(showToTaxiDriver, 'showToTaxiDriver'),
              english: pickEmergencyUiString(english, 'english'),
              local: pickEmergencyUiString(local, 'local'),
              openInMaps: pickEmergencyUiString(openInMaps, 'openInMaps'),
              call: pickEmergencyUiString(call, 'call'),
              distance: pickEmergencyUiString(distance, 'distance'),
              estimatedTime: pickEmergencyUiString(estimatedTime, 'estimatedTime')
            });
          }
        } catch (error) {
          if (window.uiLogger) {
            window.uiLogger.uiWarn('[EMERGENCY] Error loading UI strings:', error.message || error);
          }
        }
      };
      
      loadUiStrings();
    }, [languageCode, tabParams?.languageCode]);

    const togglePOIDetails = (poiId) => {
      setExpandedPOIs(prev => ({
        ...prev,
        [poiId]: !prev[poiId]
      }));
    };

    const getCategoryEmoji = (category) => {
      if (category === 'police') return '🚔';
      if (category === 'hospital') return '🏥';
      if (category === 'pharmacy') return '💊';
      if (category === 'convenience_store') return '🏪';
      if (category === 'embassy') return '🏛️';
      return '📍';
    };

    const getCategoryLabel = (category) => {
      // ✅ FIX 2: Use translated labels from SYS_MESSAGES_KV
      if (category === 'police') return uiStrings.policeLabel || '[MISSING: police_label]';
      if (category === 'hospital') return uiStrings.hospitalLabel || '[MISSING: hospital_label]';
      if (category === 'pharmacy') return uiStrings.pharmacyLabel || '[MISSING: pharmacy_label]';
      if (category === 'convenience_store') return uiStrings.convenienceStoreLabel || '[MISSING: convenience_store_label]';
      if (category === 'embassy') return uiStrings.embassyLabel || '[MISSING: embassy_label]';
      return uiStrings.emergencyServiceLabel || '[MISSING: emergency_service_label]';
    };

    const cleanPhone = (phone) => {
      if (!phone) return null;
      return String(phone).replace(/[\s\-\(\)]/g, '');
    };

    const formatDistance = (km) => {
      if (!km) return 'N/A';
      if (km < 1) return `${(km * 1000).toFixed(0)}m`;
      return `${km.toFixed(2)}km`;
    };

    // Emergency UX rule: prefer driving metrics. Walking is fallback only.
    const getEmergencyDistanceKm = (poi) => {
      const drivingKm = Number(poi?.navigation?.driving?.distance_km);
      if (Number.isFinite(drivingKm) && drivingKm > 0) return drivingKm;

      const directKm = Number(poi?.distance_km);
      if (Number.isFinite(directKm) && directKm > 0) return directKm;

      const walkingKm = Number(poi?.navigation?.walking?.distance_km);
      if (Number.isFinite(walkingKm) && walkingKm > 0) return walkingKm;

      const legacyDistance = Number(poi?.distance);
      if (Number.isFinite(legacyDistance) && legacyDistance > 0) return legacyDistance;

      return null;
    };

    const getEmergencyEtaInfo = (poi) => {
      const drivingMin = Number(poi?.navigation?.driving?.duration_min);
      if (Number.isFinite(drivingMin) && drivingMin > 0) {
        return { minutes: Math.round(drivingMin), modeLabel: 'Driving' };
      }

      const preferredMin = Number(poi?.travel_time_minutes);
      if (Number.isFinite(preferredMin) && preferredMin > 0) {
        return { minutes: Math.round(preferredMin), modeLabel: 'Driving' };
      }

      const walkingMin = Number(poi?.navigation?.walking?.duration_min);
      if (Number.isFinite(walkingMin) && walkingMin > 0) {
        return { minutes: Math.round(walkingMin), modeLabel: 'Walking fallback' };
      }

      const legacyMin = Number(poi?.travel_time);
      if (Number.isFinite(legacyMin) && legacyMin > 0) {
        return { minutes: Math.round(legacyMin), modeLabel: 'Estimated' };
      }

      return null;
    };

    if (!canCallAPI) {
      return (
        <div className={nu('rounded-xl border border-amber-400/25 bg-amber-950/30 px-4 py-3', 'p-4')}>
          <div
            className={nu(
              'rounded-lg border border-amber-400/20 bg-black/30 p-3 text-[11px] leading-relaxed text-amber-100/95',
              'mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded'
            )}
          >
            <p className={nu('text-[11px] text-amber-100/95', 'text-sm text-yellow-800')}>
              Authenticating... Emergency routes will load once authentication is verified.
            </p>
          </div>
        </div>
      );
    }

    if (loading) {
      return (
        <div className={nu('rounded-xl border border-rose-500/25 bg-black/50 px-5 py-8 text-center', 'p-4 text-center text-slate-500')}>
          {embed ? (
            <>
              <p className="font-mono text-[9px] uppercase tracking-[0.32em] text-rose-300/70">Routes</p>
              <p className="mt-2 text-[14px] font-semibold leading-snug text-white">Loading emergency routes…</p>
            </>
          ) : (
            <p>Loading Emergency Routes...</p>
          )}
        </div>
      );
    }

    if (error) {
      return (
        <div className={nu('rounded-xl border border-rose-500/30 bg-rose-950/25 px-4 py-5 text-center', 'p-4 text-center text-red-600')}>
          <p className={nu('text-[13px] font-medium leading-relaxed text-rose-100/90', '')}>{error}</p>
        </div>
      );
    }

    if (!route || !route.pois || route.pois.length === 0) {
      return (
        <div className={nu('rounded-xl border border-rose-500/20 bg-black/40 px-4 py-8 text-center', 'p-4 text-center text-slate-600')}>
          <p className={nu('text-[13px] font-medium leading-relaxed text-[#D1D5DB]', '')}>No emergency services available.</p>
        </div>
      );
    }
    return (
      <div
        ref={containerRef}
        className={
          embed
            ? 'w-full min-h-0 overflow-y-auto bg-transparent'
            : 'w-full h-full overflow-y-auto bg-white min-h-screen'
        }
      >
        <div className={embed ? 'max-w-full px-2.5 py-3 sm:px-3.5' : 'max-w-4xl mx-auto p-4'}>
          {/* Emergency Header */}
          <div
            className={nu(
              'relative mb-4 overflow-hidden rounded-2xl border border-rose-500/35 bg-gradient-to-b from-[#1a0e12] to-[#0a0809] p-4 shadow-[0_0_48px_-16px_rgba(244,63,94,0.32)] sm:p-5',
              'bg-gradient-to-br from-red-50 to-orange-50 rounded-xl p-6 mb-6 border-2 border-red-200 shadow-lg'
            )}
          >
            <div
              className={nu(
                'pointer-events-none absolute inset-0 opacity-[0.08]',
                'hidden'
              )}
              style={
                embed
                  ? {
                      backgroundImage:
                        'linear-gradient(rgba(244,63,94,0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(45,226,197,0.07) 1px, transparent 1px)',
                      backgroundSize: '20px 20px'
                    }
                  : undefined
              }
              aria-hidden
            />
            <h2
              className={nu(
                'relative mb-2 text-center text-[16px] font-bold leading-snug sm:text-[18px]',
                'text-2xl sm:text-3xl font-extrabold text-red-600 mb-3 text-center'
              )}
            >
              <span
                className={nu(
                  'bg-gradient-to-r from-cyan-100 via-rose-100 to-rose-200 bg-clip-text text-transparent',
                  ''
                )}
              >
                🚨 {uiStrings.emergencyServicesRoute || '[MISSING: route_ready]'}
              </span>
            </h2>
            <p
              className={nu(
                'relative mb-3 text-center text-[12px] font-medium leading-relaxed text-[#D1D5DB] sm:text-[13px]',
                'text-slate-700 text-center mb-4 text-base'
              )}
            >
              {uiStrings.allInfoProvided || '[MISSING: all_info_provided]'}
            </p>
            <div
              className={nu(
                'relative rounded-xl border border-rose-500/40 bg-rose-950/50 px-3 py-3 text-center text-[11px] font-medium leading-relaxed text-rose-50/95 sm:text-[12px]',
                'text-red-600 text-center font-semibold text-sm sm:text-base bg-red-50 rounded-lg py-2 px-4 border border-red-200'
              )}
            >
              ⚠️{' '}
              {uiStrings.lifeThreateningWarning ||
                '⚠️ **In a life-threatening emergency, dial your local emergency number immediately.**'}
            </div>
          </div>

          {/* Emergency Numbers */}
          {emergencyNumbers && (
            <div
              className={nu(
                'mb-4 rounded-2xl border border-rose-500/30 bg-[#1a1014]/95 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-5',
                'bg-white rounded-xl p-5 mb-6 border-2 border-red-300 shadow-lg'
              )}
            >
              <p className={nu('mb-1 text-center font-mono text-[9px] uppercase tracking-[0.28em] text-rose-300/60', 'hidden')}>
                Dial
              </p>
              <h3
                className={nu(
                  'mb-3 text-center text-[15px] font-bold tracking-wide text-rose-50',
                  'text-xl font-bold text-red-600 mb-4 text-center'
                )}
              >
                📞 {uiStrings.callImmediately || '[MISSING: call_immediately]'}
              </h3>
              <div className="flex flex-col gap-2.5">
                {emergencyNumbers.police && (
                  <a
                    href={`tel:${cleanPhone(emergencyNumbers.police)}`}
                    className={nu(
                      'block rounded-xl border border-rose-400/40 bg-gradient-to-br from-rose-200 via-rose-500 to-rose-900 px-4 py-3.5 text-center text-[15px] font-bold text-white shadow-[0_8px_28px_-6px_rgba(225,29,72,0.5)] active:opacity-90',
                      'block px-4 py-3 bg-red-600 text-white rounded-lg text-center font-semibold text-lg hover:bg-red-700 transition-colors shadow-md'
                    )}
                  >
                    🚔 Police: {emergencyNumbers.police}
                  </a>
                )}
                {emergencyNumbers.ambulance && emergencyNumbers.ambulance !== emergencyNumbers.police && (
                  <a
                    href={`tel:${cleanPhone(emergencyNumbers.ambulance)}`}
                    className={nu(
                      'block rounded-xl border border-rose-400/40 bg-gradient-to-br from-rose-200 via-rose-500 to-rose-900 px-4 py-3.5 text-center text-[15px] font-bold text-white shadow-[0_8px_28px_-6px_rgba(225,29,72,0.5)] active:opacity-90',
                      'block px-4 py-3 bg-red-600 text-white rounded-lg text-center font-semibold text-lg hover:bg-red-700 transition-colors shadow-md'
                    )}
                  >
                    🚑 Ambulance: {emergencyNumbers.ambulance}
                  </a>
                )}
                {emergencyNumbers.fire &&
                  emergencyNumbers.fire !== emergencyNumbers.police &&
                  emergencyNumbers.fire !== emergencyNumbers.ambulance && (
                    <a
                      href={`tel:${cleanPhone(emergencyNumbers.fire)}`}
                      className={nu(
                        'block rounded-xl border border-rose-400/40 bg-gradient-to-br from-rose-200 via-rose-500 to-rose-900 px-4 py-3.5 text-center text-[15px] font-bold text-white shadow-[0_8px_28px_-6px_rgba(225,29,72,0.5)] active:opacity-90',
                        'block px-4 py-3 bg-red-600 text-white rounded-lg text-center font-semibold text-lg hover:bg-red-700 transition-colors shadow-md'
                      )}
                    >
                      🚒 Fire: {emergencyNumbers.fire}
                    </a>
                  )}
              </div>
            </div>
          )}

          {/* Emergency Services List */}
          <div className="mb-6">
            <h3
              className={nu(
                'mb-3 text-center text-[11px] font-bold uppercase tracking-[0.16em] text-rose-200/90',
                'text-xl font-bold text-slate-900 mb-4 text-center'
              )}
            >
              📍 {uiStrings.nearestEmergencyServices || '[MISSING: nearest_services]'}
            </h3>
            
            {/* Missing Categories */}
            {route.missing_categories && route.missing_categories.length > 0 && (
              <div className="mb-6 space-y-3">
                {route.missing_categories.map((missing, idx) => {
                  const emoji = getCategoryEmoji(missing.category);
                  const type = getCategoryLabel(missing.category);
                  const reasonText = missing.reason === "none_open_in_area" ? "No open pharmacies found nearby" :
                                    missing.reason === "no_24h_store_found" ? "No 24-hour convenience stores found nearby" :
                                    missing.reason === "skipped_missing_place_of_birth" ? "Complete your profile (Place of Birth) to see embassy" :
                                    missing.reason === "not_found" ? "Not found nearby" :
                                    "Not available";
                  
                  return (
                    <div
                      key={`missing_${idx}`}
                      className={nu(
                        'rounded-xl border border-rose-500/20 bg-black/45 p-3.5 opacity-95',
                        'bg-slate-50 rounded-xl p-4 border-2 border-slate-200 opacity-75'
                      )}
                    >
                      <div
                        className={nu(
                          'flex items-center gap-2 text-[13px] font-semibold text-[#E5E7EB]',
                          'text-slate-600 text-base font-semibold flex items-center gap-2'
                        )}
                      >
                        {emoji} {type}
                      </div>
                      <div className={nu('mt-1.5 text-[12px] text-[#9CA3AF] leading-relaxed', 'text-slate-500 text-sm mt-1')}>
                        {reasonText}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
            
            {route.pois.map((poi, index) => {
              const poiId = poi.place_id || poi.id || `poi_${index}`;
              const isExpanded = expandedPOIs[poiId];
              const emoji = getCategoryEmoji(poi.category);
              const type = getCategoryLabel(poi.category);
              const mapsUrl = poi.maps_url || poi.map_url || null;
              const distanceKm = getEmergencyDistanceKm(poi);
              const etaInfo = getEmergencyEtaInfo(poi);
              
              return (
                <div
                  key={poiId}
                  className={nu(
                    'mb-3 overflow-hidden rounded-2xl border border-rose-500/30 bg-[#181014]/95 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] transition-all hover:border-rose-400/45',
                    'bg-white rounded-xl mb-4 border-2 border-teal-200 overflow-hidden shadow-lg hover:border-teal-300 transition-all'
                  )}
                >
                  {/* POI Header */}
                  <div
                    onClick={() => togglePOIDetails(poiId)}
                    className={
                      embed
                        ? `cursor-pointer flex items-center justify-between gap-2 p-3 sm:p-4 ${
                            isExpanded ? 'bg-rose-500/12' : 'bg-black/30'
                          }`
                        : `p-4 cursor-pointer flex justify-between items-center ${
                            isExpanded ? 'bg-teal-50' : 'bg-white'
                          }`
                    }
                  >
                    <div className="min-w-0 flex-1">
                      <div
                        className={nu(
                          'mb-0.5 text-[15px] font-semibold leading-snug text-white sm:text-[16px]',
                          'text-slate-900 text-lg sm:text-xl font-semibold mb-1'
                        )}
                      >
                        {emoji} {index + 1}. {poi.name || type}
                      </div>
                      <div
                        className={nu('text-[12px] font-medium text-rose-200/90', 'text-teal-600 text-sm font-medium')}
                      >
                        {type}
                      </div>
                    </div>
                    <button
                      type="button"
                      className={nu(
                        'shrink-0 cursor-pointer rounded-lg border border-rose-400/40 bg-black/40 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-rose-100 hover:bg-black/55',
                        'px-4 py-2 bg-teal-600 text-white border border-teal-700 rounded-lg cursor-pointer font-semibold text-sm hover:bg-teal-700 transition-colors'
                      )}
                    >
                      {isExpanded ? (uiStrings.hideDetails || '[MISSING: hide_details]') : (uiStrings.viewDetails || '[MISSING: view_details]')}
                    </button>
                  </div>

                  {/* POI Details (Expandable) */}
                  {isExpanded && (
                    <div
                      className={nu(
                        'border-t border-white/[0.08] bg-[#0c0a0a] p-3.5 sm:p-4',
                        'p-4 border-t-2 border-teal-100 bg-white'
                      )}
                    >
                      {poi.address && (
                        <div
                          className={nu(
                            'mb-2 text-[13px] font-semibold leading-snug text-white',
                            'mb-3 text-slate-900 font-semibold text-base'
                          )}
                        >
                          📍 {poi.address}
                        </div>
                      )}

                      {distanceKm && (
                        <div className={nu('mb-1.5 text-[12px] text-[#B8BCC6]', 'mb-2 text-slate-600 text-sm')}>
                          📏 {joinEmergencyLabelValue(uiStrings.distance, formatDistance(distanceKm))}
                        </div>
                      )}

                      {etaInfo && (
                        <div className={nu('mb-2 text-[12px] text-[#B8BCC6]', 'mb-3 text-slate-600 text-sm')}>
                          ⏱️{' '}
                          {joinEmergencyLabelValue(
                            uiStrings.estimatedTime,
                            `~${etaInfo.minutes} min (${etaInfo.modeLabel})`
                          )}
                        </div>
                      )}

                      {poi.phone && (
                        <div className="mb-3">
                          <a
                            href={`tel:${cleanPhone(poi.phone)}`}
                            className={nu(
                              'inline-block rounded-xl border border-rose-400/40 bg-gradient-to-br from-rose-200 via-rose-500 to-rose-900 px-4 py-3 text-[14px] font-bold text-white shadow-[0_8px_24px_-6px_rgba(225,29,72,0.45)] no-underline active:opacity-90',
                              'inline-block px-5 py-3 bg-teal-600 text-white rounded-lg text-decoration-none font-semibold text-base hover:bg-teal-700 transition-colors shadow-md'
                            )}
                          >
                            📞 {joinEmergencyLabelValue(uiStrings.call, poi.phone)}
                          </a>
                        </div>
                      )}

                      {/* Bilingual Instructions */}
                      {poi.instructions && (poi.instructions.english || poi.instructions.local) && (
                        <div
                          className={nu(
                            'mb-3 rounded-xl border border-rose-500/25 bg-gradient-to-br from-rose-950/60 to-[#0d1117] p-3.5',
                            'mb-4 p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg border-2 border-teal-200'
                          )}
                        >
                          <div
                            className={nu(
                              'mb-2 text-[12px] font-bold text-rose-200',
                              'text-teal-700 font-bold mb-3 text-base'
                            )}
                          >
                            📝 {uiStrings.showToTaxiDriver || '[MISSING: show_to_taxi_driver]'}
                          </div>
                          {poi.instructions.english && (
                            <div
                              className={nu(
                                'mb-2 text-[12px] leading-relaxed text-[#E5E7EB]',
                                'text-slate-900 mb-2 text-base leading-relaxed font-medium'
                              )}
                            >
                              🇬🇧 <strong>{formatEmergencyFieldLabel(uiStrings.english, 'english')}</strong> &quot;
                              {poi.instructions.english}&quot;
                            </div>
                          )}
                          {poi.instructions.local && poi.instructions.local !== poi.instructions.english && (
                            <div
                              className={nu(
                                'text-[12px] leading-relaxed text-[#E5E7EB]',
                                'text-slate-900 text-base leading-relaxed font-medium'
                              )}
                            >
                              🌏 <strong>
                                {formatEmergencyFieldLabel(
                                  poi.instructions.local_language || uiStrings.local,
                                  'local'
                                )}
                              </strong>{' '}
                              &quot;{poi.instructions.local}&quot;
                            </div>
                          )}
                        </div>
                      )}

                      {/* Photo */}
                      {poi.photo_url && (
                        <div className="mb-3">
                          <img
                            src={poi.photo_url}
                            alt={poi.name || type}
                            className="max-h-[300px] w-full rounded-lg object-contain"
                            onError={(e) => {
                              e.target.style.display = 'none';
                            }}
                          />
                        </div>
                      )}

                      {/* Map Link */}
                      {(mapsUrl || poi.map_url || poi.maps_url) && (
                        <div className="mt-3">
                          <a
                            href={mapsUrl || poi.map_url || poi.maps_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={nu(
                              'inline-block rounded-xl border border-rose-400/30 bg-[#1a1214] px-4 py-3 text-[13px] font-semibold text-rose-100 no-underline shadow-inner hover:border-rose-400/50 hover:bg-black/40',
                              'inline-block px-5 py-3 bg-teal-600 text-white rounded-lg text-decoration-none font-semibold text-base hover:bg-teal-700 transition-colors shadow-md'
                            )}
                          >
                            🗺️ {uiStrings.openInMaps || '[MISSING: open_in_maps]'}
                          </a>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  // Export to window
  if (typeof window !== 'undefined') {
    window.EmergencyInApp = EmergencyInApp;
  }
})();