dashboard/components/MobileMockup.tsx

import React from 'react';
import {
  Kpi,
  Alert,
  CoopZone,
  Screen,
  BehaviorAnomaly,
  WeightStatistics,
  AlertSeverity,
  ManualWeighingRecord,
  FeedingEvent,
  MultiCoopWeightSummary,
} from '../types.ts';

import { PhoneShell, MobileHeader } from './mobile/MobileLayout.tsx';
import HomeScreen from './mobile/HomeScreen.tsx';
import AlertListScreen from './mobile/AlertListScreen.tsx';
import MortalityDetailScreen from './mobile/MortalityDetailScreen.tsx';
import OvercrowdingDetailScreen from './mobile/OvercrowdingDetailScreen.tsx';
import MapScreen from './mobile/MapScreen.tsx';
import ReportsScreen from './mobile/ReportsScreen.tsx';
import ManagerDashboardScreen from './mobile/ManagerDashboardScreen.tsx';
import OperatorTasksScreen from './mobile/OperatorTasksScreen.tsx';
import VetHealthDashboard from './mobile/VetHealthDashboard.tsx';
import ManualWeighingScreen from './mobile/ManualWeighingScreen.tsx';
import FeedSchedulingScreen from './mobile/FeedSchedulingScreen.tsx';
import MultiCoopWeightScreen from './mobile/MultiCoopWeightScreen.tsx';

interface MobileMockupProps {
  kpis: Record<string, Kpi>;
  alerts: Alert[];
  coopZones: CoopZone[];
  behaviorAnomalies: BehaviorAnomaly[];
  weightStats: WeightStatistics;
  manualWeighingData: ManualWeighingRecord[];
  feedingEvents: FeedingEvent[];
  multiCoopSummaryData: MultiCoopWeightSummary[];
  initialScreen: Screen;
}

const MobileMockup: React.FC<MobileMockupProps> = (props) => {
  // Navigation handlers are now no-ops for this display mode.
  const handleNavigate = () => {};
  const handleAlertClick = () => {};
  const handleBack = () => {};

  const renderScreen = () => {
    switch (props.initialScreen) {
      case 'home':
        return (
          <HomeScreen
            kpis={props.kpis}
            alerts={props.alerts}
            onNavigate={handleNavigate}
            onAlertClick={handleAlertClick}
          />
        );
      case 'alerts':
        return (
          <AlertListScreen
            alerts={props.alerts}
            onNavigate={handleNavigate}
            onAlertClick={handleAlertClick}
          />
        );
      case 'map':
        return <MapScreen onNavigate={handleNavigate} coopZones={props.coopZones} />;
      case 'reports':
        return <ReportsScreen onNavigate={handleNavigate} />;
      case 'mortalityDetail': {
        const mortalityAlert = props.alerts.find((a) =>
          a.message.toLowerCase().includes('mortalitas')
        );
        if (!mortalityAlert)
          return (
            <div className="text-white p-4 text-center text-sm">
              Contoh tidak tersedia: Tidak ada peringatan mortalitas.
            </div>
          );
        return <MortalityDetailScreen alert={mortalityAlert} onBack={handleBack} />;
      }
      case 'overcrowdingDetail': {
        const overcrowdingAlert = props.alerts.find((a) =>
          a.message.toLowerCase().includes('kepadatan')
        );
        if (!overcrowdingAlert)
          return (
            <div className="text-white p-4 text-center text-sm">
              Contoh tidak tersedia: Tidak ada peringatan kepadatan.
            </div>
          );
        return <OvercrowdingDetailScreen alert={overcrowdingAlert} onBack={handleBack} />;
      }
      case 'managerDashboard':
        return <ManagerDashboardScreen kpis={props.kpis} onNavigate={handleNavigate} />;
      case 'operatorTasks': {
        const tasks = props.alerts.filter(
          (a) => a.severity === AlertSeverity.CRITICAL || a.severity === AlertSeverity.WARNING
        );
        return <OperatorTasksScreen tasks={tasks} onNavigate={handleNavigate} />;
      }
      case 'vetHealthDashboard':
        return (
          <VetHealthDashboard
            onNavigate={handleNavigate}
            behaviorAnomalies={props.behaviorAnomalies}
            weightStats={props.weightStats}
          />
        );
      case 'manualWeighing':
        return (
          <ManualWeighingScreen
            onNavigate={handleNavigate}
            manualWeighingData={props.manualWeighingData}
          />
        );
      case 'feedScheduling':
        return (
          <FeedSchedulingScreen onNavigate={handleNavigate} feedingEvents={props.feedingEvents} />
        );
      case 'multiCoopWeight':
        return (
          <MultiCoopWeightScreen
            onNavigate={handleNavigate}
            summaryData={props.multiCoopSummaryData}
          />
        );
      default:
        return (
          <HomeScreen
            kpis={props.kpis}
            alerts={props.alerts}
            onNavigate={handleNavigate}
            onAlertClick={handleAlertClick}
          />
        );
    }
  };

  return (
    <PhoneShell>
      <MobileHeader />
      {renderScreen()}
    </PhoneShell>
  );
};

export default MobileMockup;