/**
 * ═══════════════════════════════════════════════════════════════════
 * Flow-Tune In-App Component (Feature-Flagged)
 * ═══════════════════════════════════════════════════════════════════
 * 
 * Wrapper component that mounts Flow-Tune form logic inside app shell.
 * Uses extracted logic from pages/logic/flowTuneFormLogic.js
 * 
 * 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;

  function FlowTuneInApp({ tabParams }) {
    const containerRef = useRef(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [routes, setRoutes] = useState([]);
    const [selectedRoute, setSelectedRoute] = useState(null);
    const [isEmergency, setIsEmergency] = useState(false);
    const [region, setRegion] = useState('GLOBAL');
    const [languageCode, setLanguageCode] = useState('en');

    useEffect(() => {
      // ✅ HARD GATING: Must not call protected endpoints until authChecked === true
      // This is enforced by app.js renderComponent, but double-check here
      const sessionToken = localStorage.getItem('sylvanflow_session_token');
      if (!sessionToken) {
        setError('Authentication required. Please log in.');
        setLoading(false);
        return;
      }

      // ✅ Extract params from tabParams (from URL ?tab=flow-tune&flow_tune_id=...)
      const flowTuneId = tabParams?.flow_tune_id || null;
      const emergencyId = tabParams?.emergency_id || null;
      const mode = tabParams?.mode || (emergencyId ? 'emergency' : null);

      if (!flowTuneId && !emergencyId) {
        setError('Missing flow_tune_id or emergency_id');
        setLoading(false);
        return;
      }

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

      // Load routes
      window.FlowTuneFormLogic.loadRoutes(
        { flowTuneId, emergencyId, mode },
        (result) => {
          if (result.type === 'selected') {
            setSelectedRoute(result.route);
            setIsEmergency(result.isEmergency);
            setRegion(result.region || 'GLOBAL');
            setLanguageCode(result.languageCode || 'en');
          } else {
            setRoutes(result.routes || []);
            setIsEmergency(result.isEmergency);
            setRegion(result.region || 'GLOBAL');
            setLanguageCode(result.languageCode || 'en');
          }
          setLoading(false);
        },
        (errorMsg) => {
          setError(errorMsg);
          setLoading(false);
        }
      );
    }, [tabParams]);

    const handleSelectRoute = async (routeId) => {
      if (selectedRoute) {
        return; // Already selected
      }

      const flowTuneId = tabParams?.flow_tune_id || null;
      const emergencyId = tabParams?.emergency_id || null;
      const mode = tabParams?.mode || (emergencyId ? 'emergency' : null);

      window.FlowTuneFormLogic.selectRoute(
        { flowTuneId, emergencyId, mode, routeId },
        (result) => {
          const route = routes.find(r => (r.id || r.id) === routeId);
          if (route) {
            setSelectedRoute(route);
          }
        },
        (errorMsg) => {
          setError(errorMsg);
        }
      );
    };

    if (loading) {
      return (
        <div className="p-4 text-center text-slate-500">
          <p>Loading Flow-Tune routes...</p>
        </div>
      );
    }

    if (error) {
      return (
        <div className="p-4 text-center text-red-600">
          <p>{error}</p>
        </div>
      );
    }

    return (
      <div ref={containerRef} className="w-full h-full overflow-y-auto bg-[#e8f0f5]">
        <div className="max-w-4xl mx-auto p-4">
          <h2 className="text-2xl font-bold mb-4 text-center">
            {isEmergency ? '🚨 Emergency Services Route' : '🚶 Choose Your Perfect Walking Route'}
          </h2>
          
          {selectedRoute ? (
            <div className="bg-white rounded-lg p-6 shadow-lg">
              <h3 className="text-xl font-semibold mb-4">Route Selected</h3>
              <p className="text-slate-600">Route ID: {selectedRoute.id}</p>
              {/* TODO: Render full route details */}
            </div>
          ) : (
            <div className="space-y-4">
              {routes.map((route) => (
                <div key={route.id || route.id} className="bg-white rounded-lg p-6 shadow-lg">
                  <h3 className="text-lg font-semibold mb-2">Route {route.id || route.id}</h3>
                  <button
                    onClick={() => handleSelectRoute(route.id || route.id)}
                    className="mt-4 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700"
                  >
                    Choose This Route
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

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