import React from 'react';
import MobileMockup from './MobileMockup.tsx';
import { Screen } from '../types/common.ts';
import { MobileIcon } from './icons/Icons.tsx';
import { useAppContext } from '../context/AppContext.tsx';
import RoleSection from './mobile/shared/RoleSection.tsx';
import MockupContainer from './mobile/shared/MockupContainer.tsx';

const MobileAppPage: React.FC = () => {
  const {
    kpis,
    alerts,
    coopZones,
    behaviorAnomalies,
    weightStats,
    manualWeighingData,
    feedingEvents,
    multiCoopSummaryData,
  } = useAppContext();

  const managerScreens: { title: string; screen: Screen }[] = [
    { title: 'Ringkasan Eksekutif', screen: 'managerDashboard' },
    { title: 'Perbandingan Bobot Kandang', screen: 'multiCoopWeight' },
    { title: 'Data Timbangan Manual', screen: 'manualWeighing' },
  ];

  const operatorScreens: { title: string; screen: Screen }[] = [
    { title: 'Dasbor & Notifikasi', screen: 'home' },
    { title: 'Jadwal Pakan Hari Ini', screen: 'feedScheduling' },
    { title: 'Detail Penanganan Mortalitas', screen: 'mortalityDetail' },
  ];

  const vetScreens: { title: string; screen: Screen }[] = [
    { title: 'Dasbor Kesehatan Hewan', screen: 'vetHealthDashboard' },
    { title: 'Semua Notifikasi', screen: 'alerts' },
    { title: 'Detail Kepadatan', screen: 'overcrowdingDetail' },
  ];

  const commonProps = {
    kpis,
    alerts,
    coopZones,
    behaviorAnomalies,
    weightStats,
    manualWeighingData,
    feedingEvents,
    multiCoopSummaryData,
  };

  return (
    <main className="px-4 sm:px-6 lg:px-8 pb-8 bg-gray-50">
      <div className="flex items-center mb-8">
        <MobileIcon className="text-3xl text-red-600 mr-4" />
        <div>
          <h1 className="text-3xl font-bold text-gray-800">Desain & Prototipe Aplikasi Mobile</h1>
          <p className="mt-1 text-gray-600">
            Visualisasi alur pengguna dan antarmuka untuk setiap peran di aplikasi pendamping
            mobile.
          </p>
        </div>
      </div>

      <RoleSection
        title="Manajer Peternakan"
        icon={<i className="fa-solid fa-user-tie"></i>}
        borderColor="border-red-500"
      >
        {managerScreens.map(({ title, screen }) => (
          <MockupContainer key={screen} title={title}>
            <MobileMockup {...commonProps} initialScreen={screen} />
          </MockupContainer>
        ))}
      </RoleSection>

      <RoleSection
        title="Operator Kandang"
        icon={<i className="fa-solid fa-hard-hat"></i>}
        borderColor="border-blue-500"
      >
        {operatorScreens.map(({ title, screen }) => (
          <MockupContainer key={screen} title={title}>
            <MobileMockup {...commonProps} initialScreen={screen} />
          </MockupContainer>
        ))}
      </RoleSection>

      <RoleSection
        title="Dokter Hewan"
        icon={<i className="fa-solid fa-user-md"></i>}
        borderColor="border-green-500"
      >
        {vetScreens.map(({ title, screen }) => (
          <MockupContainer key={screen} title={title}>
            <MobileMockup {...commonProps} initialScreen={screen} />
          </MockupContainer>
        ))}
      </RoleSection>
    </main>
  );
};

export default MobileAppPage;