maternal-app/maternal-web/app/analytics/advanced/page.tsx

'use client';

import React, { useState, useEffect } from 'react';
import { useAuth } from '@/lib/auth/AuthContext';
import { childrenApi, Child } from '@/lib/api/children';
import {
  analyticsApi,
  CircadianRhythm,
  AnomalyDetection,
  GrowthAnalysis,
  CorrelationAnalysis,
  TrendAnalysis,
} from '@/lib/api/analytics';
import { CircadianRhythmCard } from '@/components/analytics/CircadianRhythmCard';
import { AnomalyAlertsPanel } from '@/components/analytics/AnomalyAlertsPanel';
import { GrowthPercentileChart } from '@/components/analytics/GrowthPercentileChart';
import { CorrelationInsights } from '@/components/analytics/CorrelationInsights';
import { TrendAnalysisChart } from '@/components/analytics/TrendAnalysisChart';
import {
  Card,
  CardContent,
  CardHeader,
  Button,
  Alert,
  AlertTitle,
  Tabs,
  Tab,
  Box,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
} from '@mui/material';
import { Loader2, RefreshCw, Activity, Brain, TrendingUp, Baby, Link } from 'lucide-react';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { extractError } from '@/lib/utils/errorHandler';

export default function AdvancedAnalyticsPage() {
  const { user } = useAuth();
  const [children, setChildren] = useState<Child[]>([]);
  const [selectedChildId, setSelectedChildId] = useState<string>('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>('');
  const [activeTab, setActiveTab] = useState(0);

  // Analytics data states
  const [circadianData, setCircadianData] = useState<CircadianRhythm | null>(null);
  const [anomalyData, setAnomalyData] = useState<AnomalyDetection | null>(null);
  const [growthData, setGrowthData] = useState<GrowthAnalysis | null>(null);
  const [correlationData, setCorrelationData] = useState<CorrelationAnalysis | null>(null);
  const [sleepTrendData, setSleepTrendData] = useState<TrendAnalysis | null>(null);
  const [feedingTrendData, setFeedingTrendData] = useState<TrendAnalysis | null>(null);

  // Loading states for each component
  const [circadianLoading, setCircadianLoading] = useState(false);
  const [anomalyLoading, setAnomalyLoading] = useState(false);
  const [growthLoading, setGrowthLoading] = useState(false);
  const [correlationLoading, setCorrelationLoading] = useState(false);
  const [trendLoading, setTrendLoading] = useState(false);

  // Error states for each component
  const [circadianError, setCircadianError] = useState<Error | null>(null);
  const [anomalyError, setAnomalyError] = useState<Error | null>(null);
  const [growthError, setGrowthError] = useState<Error | null>(null);
  const [correlationError, setCorrelationError] = useState<Error | null>(null);
  const [trendError, setTrendError] = useState<Error | null>(null);

  const familyId = user?.families?.[0]?.familyId;

  useEffect(() => {
    if (familyId) {
      loadChildren();
    }
  }, [familyId]);

  useEffect(() => {
    if (selectedChildId && children.length > 0) {
      const childExists = children.some(child => child.id === selectedChildId);
      if (childExists) {
        loadAllAnalytics();
      } else {
        console.warn('[AdvancedAnalytics] Selected child not found, resetting');
        setSelectedChildId(children[0].id);
      }
    }
  }, [selectedChildId, children]);

  const loadChildren = async () => {
    if (!familyId) {
      setLoading(false);
      setError('No family found');
      return;
    }

    try {
      console.log('[AdvancedAnalytics] Loading children for familyId:', familyId);
      const data = await childrenApi.getChildren(familyId);
      console.log('[AdvancedAnalytics] Loaded children:', data);
      setChildren(data);

      if (data.length > 0) {
        const existingChildStillValid = data.some(child => child.id === selectedChildId);
        if (!selectedChildId || !existingChildStillValid) {
          setSelectedChildId(data[0].id);
        }
      }
      setError('');
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load children:', error);
      const errorData = extractError(error);
      setError(errorData.userMessage || errorData.message);
    } finally {
      setLoading(false);
    }
  };

  const loadAllAnalytics = () => {
    loadCircadianRhythm();
    loadAnomalies();
    loadGrowthAnalysis();
    loadCorrelations();
    loadTrends();
  };

  const loadCircadianRhythm = async () => {
    if (!selectedChildId) return;

    setCircadianLoading(true);
    setCircadianError(null);
    try {
      const data = await analyticsApi.getCircadianRhythm(selectedChildId, 14);
      setCircadianData(data);
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load circadian rhythm:', error);
      console.error("Circadian error:", extractError(error).message);
      setCircadianError(error as Error);
    } finally {
      setCircadianLoading(false);
    }
  };

  const loadAnomalies = async () => {
    if (!selectedChildId) return;

    setAnomalyLoading(true);
    setAnomalyError(null);
    try {
      const data = await analyticsApi.getAnomalies(selectedChildId, 30);
      setAnomalyData(data);
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load anomalies:', error);
      console.error("Anomalies error:", extractError(error).message);
      setAnomalyError(error as Error);
    } finally {
      setAnomalyLoading(false);
    }
  };

  const loadGrowthAnalysis = async () => {
    if (!selectedChildId) return;

    setGrowthLoading(true);
    setGrowthError(null);
    try {
      const data = await analyticsApi.getGrowthAnalysis(selectedChildId);
      setGrowthData(data);
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load growth analysis:', error);
      console.error("Growth error:", extractError(error).message);
      setGrowthError(error as Error);
    } finally {
      setGrowthLoading(false);
    }
  };

  const loadCorrelations = async () => {
    if (!selectedChildId) return;

    setCorrelationLoading(true);
    setCorrelationError(null);
    try {
      const data = await analyticsApi.getCorrelations(selectedChildId, 14);
      setCorrelationData(data);
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load correlations:', error);
      console.error("Correlations error:", extractError(error).message);
      setCorrelationError(error as Error);
    } finally {
      setCorrelationLoading(false);
    }
  };

  const loadTrends = async () => {
    if (!selectedChildId) return;

    setTrendLoading(true);
    setTrendError(null);
    try {
      const [sleepTrend, feedingTrend] = await Promise.all([
        analyticsApi.getTrends(selectedChildId, 'sleep'),
        analyticsApi.getTrends(selectedChildId, 'feeding'),
      ]);
      setSleepTrendData(sleepTrend);
      setFeedingTrendData(feedingTrend);
    } catch (error: any) {
      console.error('[AdvancedAnalytics] Failed to load trends:', error);
      console.error("Trends error:", extractError(error).message);
      setTrendError(error as Error);
    } finally {
      setTrendLoading(false);
    }
  };

  if (loading) {
    return (
      <ProtectedRoute>
        <AppShell>
          <div className="flex items-center justify-center min-h-screen">
            <Loader2 className="h-8 w-8 animate-spin" />
          </div>
        </AppShell>
      </ProtectedRoute>
    );
  }

  if (children.length === 0) {
    return (
      <ProtectedRoute>
        <AppShell>
          <div className="p-6">
            <Alert>
              <AlertTitle>No Children Found</AlertTitle>
              <AlertDescription>
                Add a child to your family to view advanced analytics.
              </AlertDescription>
            </Alert>
          </div>
        </AppShell>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AppShell>
        <div className="p-6 space-y-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">Advanced Analytics</h1>
              <p className="text-gray-600 mt-1">
                AI-powered insights and deep analysis of your child's patterns
              </p>
            </div>
            <Button onClick={loadAllAnalytics} variant="outline">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
          </div>

          {/* Child Selector */}
          <Card>
            <CardContent className="py-4">
              <div className="flex items-center gap-4">
                <label htmlFor="child-select" className="text-sm font-medium">
                  Select Child:
                </label>
                <Select
                  id="child-select"
                  value={selectedChildId}
                  onChange={(e) => setSelectedChildId(e.target.value as string)}
                  sx={{ minWidth: 200 }}
                >
                  {children.map((child) => (
                    <MenuItem key={child.id} value={child.id}>
                      {child.name}
                    </MenuItem>
                  ))}
                </Select>
              </div>
            </CardContent>
          </Card>

          {error && (
            <Alert variant="destructive">
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          {/* Analytics Tabs */}
          <Box sx={{ width: '100%' }}>
            <Tabs
              value={activeTab}
              onChange={(e, newValue) => setActiveTab(newValue)}
              variant="scrollable"
              scrollButtons="auto"
            >
              <Tab
                icon={<Brain style={{ width: 16, height: 16 }} />}
                iconPosition="start"
                label="Sleep Rhythm"
              />
              <Tab
                icon={<Activity style={{ width: 16, height: 16 }} />}
                iconPosition="start"
                label="Anomalies"
              />
              <Tab
                icon={<Baby style={{ width: 16, height: 16 }} />}
                iconPosition="start"
                label="Growth"
              />
              <Tab
                icon={<Link style={{ width: 16, height: 16 }} />}
                iconPosition="start"
                label="Correlations"
              />
              <Tab
                icon={<TrendingUp style={{ width: 16, height: 16 }} />}
                iconPosition="start"
                label="Trends"
              />
            </Tabs>

            <Box sx={{ py: 3 }}>
              {activeTab === 0 && (
                <CircadianRhythmCard
                  data={circadianData}
                  loading={circadianLoading}
                  error={circadianError}
                />
              )}

              {activeTab === 1 && (
                <AnomalyAlertsPanel
                  data={anomalyData}
                  loading={anomalyLoading}
                  error={anomalyError}
                />
              )}

              {activeTab === 2 && (
                <GrowthPercentileChart
                  data={growthData}
                  loading={growthLoading}
                  error={growthError}
                />
              )}

              {activeTab === 3 && (
                <CorrelationInsights
                  data={correlationData}
                  loading={correlationLoading}
                  error={correlationError}
                />
              )}

              {activeTab === 4 && (
                <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
                  <TrendAnalysisChart
                    data={sleepTrendData}
                    activityType="Sleep"
                    loading={trendLoading}
                    error={trendError}
                  />
                  <TrendAnalysisChart
                    data={feedingTrendData}
                    activityType="Feeding"
                    loading={trendLoading}
                    error={trendError}
                  />
                </div>
              )}
            </Box>
          </Box>
        </div>
      </AppShell>
    </ProtectedRoute>
  );
}