/**
 * FeatureLayout
 * 
 * Layout-Wrapper für Feature-Instanz-Seiten.
 * Stellt den Instanz-Kontext bereit und rendert Sidebar + Content.
 */

import React from 'react';
import { Outlet, Navigate, useLocation } from 'react-router-dom';
import { useCurrentInstance } from '../hooks/useCurrentInstance';
import { useFeaturesInitialized, useFeaturesLoading } from '../stores/featureStore';
import styles from './FeatureLayout.module.css';

// =============================================================================
// LOADING COMPONENT
// =============================================================================

const LoadingScreen: React.FC = () => (
  <div className={styles.loadingContainer}>
    <div className={styles.loadingSpinner} />
    <p>Lade Feature-Daten...</p>
  </div>
);

// =============================================================================
// ERROR COMPONENT
// =============================================================================

interface ErrorScreenProps {
  message: string;
  returnPath?: string;
}

const ErrorScreen: React.FC<ErrorScreenProps> = ({ message, returnPath = '/' }) => (
  <div className={styles.errorContainer}>
    <div className={styles.errorIcon}>⚠️</div>
    <h2>Zugriff nicht möglich</h2>
    <p>{message}</p>
    <a href={returnPath} className={styles.errorLink}>
      Zurück zur Übersicht
    </a>
  </div>
);

// =============================================================================
// FEATURE LAYOUT
// =============================================================================

/**
 * FeatureLayout rendert den Inhalt einer Feature-Instanz.
 * 
 * Prüft:
 * 1. Ob Features geladen sind
 * 2. Ob die Instanz existiert und gültig ist
 * 3. Ob der User Zugriff hat
 * 
 * Bei Erfolg: Rendert <Outlet /> für die verschachtelten Routes
 */
export const FeatureLayout: React.FC = () => {
  const location = useLocation();
  const initialized = useFeaturesInitialized();
  const loading = useFeaturesLoading();
  const { instance, mandate, feature, isValid, isLoading } = useCurrentInstance();
  
  // Warten bis Features geladen sind
  if (!initialized || loading || isLoading) {
    return <LoadingScreen />;
  }
  
  // Prüfen ob Instanz existiert und gültig ist
  if (!isValid) {
    console.warn('FeatureLayout: Invalid instance context', {
      path: location.pathname,
      hasMandate: !!mandate,
      hasFeature: !!feature,
      hasInstance: !!instance,
    });
    
    return (
      <ErrorScreen 
        message="Die angeforderte Feature-Instanz existiert nicht oder Sie haben keinen Zugriff."
      />
    );
  }
  
  // Alles OK - rendere Content
  return (
    <div className={styles.featureLayout}>
      {/* Header mit Instanz-Info */}
      <header className={styles.featureHeader}>
        <div className={styles.breadcrumb}>
          <span className={styles.mandateName}>{mandate?.name}</span>
          <span className={styles.separator}>/</span>
          <span className={styles.featureName}>{feature?.label?.de || feature?.code}</span>
          <span className={styles.separator}>/</span>
          <span className={styles.instanceName}>{instance?.instanceLabel}</span>
        </div>
        <div className={styles.roleIndicator}>
          <span className={styles.roleBadge}>{instance?.userRoles?.join(', ') || '-'}</span>
        </div>
      </header>
      
      {/* Content Area */}
      <main className={styles.featureContent}>
        <Outlet />
      </main>
    </div>
  );
};

// =============================================================================
// PROTECTED FEATURE ROUTE
// =============================================================================

interface ProtectedFeatureRouteProps {
  requiredView?: string;
  children: React.ReactNode;
}

/**
 * Wrapper für geschützte Feature-Routes
 * Prüft zusätzlich View-Berechtigungen
 */
export const ProtectedFeatureRoute: React.FC<ProtectedFeatureRouteProps> = ({
  requiredView,
  children,
}) => {
  const { instance, isValid } = useCurrentInstance();
  
  if (!isValid) {
    return <Navigate to="/" replace />;
  }
  
  // Prüfe View-Berechtigung wenn erforderlich
  if (requiredView) {
    const hasViewAccess = instance?.permissions?.views?.[requiredView] ?? false;
    
    if (!hasViewAccess) {
      return (
        <ErrorScreen 
          message={`Sie haben keine Berechtigung für diesen Bereich (${requiredView}).`}
          returnPath={`/mandates/${instance?.mandateId}/${instance?.featureCode}/${instance?.id}`}
        />
      );
    }
  }
  
  return <>{children}</>;
};

export default FeatureLayout;
