maternal-app/maternal-web/app/track/sleep/page.tsx

'use client';

import { useState } from 'react';
import {
  Box,
  Typography,
  Button,
  Paper,
  TextField,
  IconButton,
  Alert,
  Chip,
  FormControl,
  FormLabel,
  RadioGroup,
  FormControlLabel,
  Radio,
} from '@mui/material';
import {
  ArrowBack,
  Bedtime,
  WbSunny,
  Save,
  Mic,
} from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { motion } from 'framer-motion';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { format } from 'date-fns';

const sleepSchema = z.object({
  startTime: z.string(),
  endTime: z.string(),
  quality: z.enum(['excellent', 'good', 'fair', 'poor']),
  notes: z.string().optional(),
}).refine((data) => new Date(data.endTime) > new Date(data.startTime), {
  message: 'End time must be after start time',
  path: ['endTime'],
});

type SleepFormData = z.infer<typeof sleepSchema>;

export default function SleepTrackPage() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<SleepFormData>({
    resolver: zodResolver(sleepSchema),
    defaultValues: {
      quality: 'good',
    },
  });

  const startTime = watch('startTime');
  const endTime = watch('endTime');

  const calculateDuration = () => {
    if (!startTime || !endTime) return null;
    const start = new Date(startTime);
    const end = new Date(endTime);
    const diff = end.getTime() - start.getTime();
    if (diff < 0) return null;

    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    return `${hours}h ${minutes}m`;
  };

  const setStartNow = () => {
    const now = format(new Date(), "yyyy-MM-dd'T'HH:mm");
    setValue('startTime', now);
  };

  const setEndNow = () => {
    const now = format(new Date(), "yyyy-MM-dd'T'HH:mm");
    setValue('endTime', now);
  };

  const onSubmit = async (data: SleepFormData) => {
    setError(null);

    try {
      // TODO: Call API to save sleep data
      console.log('Sleep data:', data);
      setSuccess(true);
      setTimeout(() => router.push('/'), 2000);
    } catch (err: any) {
      setError(err.message || 'Failed to log sleep');
    }
  };

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
            <IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
              <ArrowBack />
            </IconButton>
            <Typography variant="h4" fontWeight="600">
              Track Sleep
            </Typography>
          </Box>

          {success && (
            <Alert severity="success" sx={{ mb: 3 }}>
              Sleep logged successfully!
            </Alert>
          )}

          {error && (
            <Alert severity="error" sx={{ mb: 3 }}>
              {error}
            </Alert>
          )}

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
          >
            <Paper sx={{ p: 3, mb: 3 }}>
              <Box component="form" onSubmit={handleSubmit(onSubmit)}>
                {/* Start Time */}
                <Box sx={{ mb: 3 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
                    <Bedtime color="primary" />
                    <Typography variant="h6" fontWeight="600">
                      Sleep Start
                    </Typography>
                  </Box>
                  <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
                    <TextField
                      fullWidth
                      type="datetime-local"
                      {...register('startTime')}
                      error={!!errors.startTime}
                      helperText={errors.startTime?.message}
                      InputLabelProps={{ shrink: true }}
                    />
                    <Button variant="outlined" onClick={setStartNow} sx={{ minWidth: 100 }}>
                      Now
                    </Button>
                  </Box>
                </Box>

                {/* End Time */}
                <Box sx={{ mb: 3 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
                    <WbSunny color="warning" />
                    <Typography variant="h6" fontWeight="600">
                      Wake Up
                    </Typography>
                  </Box>
                  <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
                    <TextField
                      fullWidth
                      type="datetime-local"
                      {...register('endTime')}
                      error={!!errors.endTime}
                      helperText={errors.endTime?.message}
                      InputLabelProps={{ shrink: true }}
                    />
                    <Button variant="outlined" onClick={setEndNow} sx={{ minWidth: 100 }}>
                      Now
                    </Button>
                  </Box>
                </Box>

                {/* Duration Display */}
                {calculateDuration() && (
                  <Box sx={{ mb: 3, textAlign: 'center' }}>
                    <Chip
                      label={`Duration: ${calculateDuration()}`}
                      color="primary"
                      sx={{ fontSize: '1rem', py: 3 }}
                    />
                  </Box>
                )}

                {/* Sleep Quality */}
                <FormControl component="fieldset" sx={{ mb: 3, width: '100%' }}>
                  <FormLabel component="legend" sx={{ mb: 2 }}>
                    Sleep Quality
                  </FormLabel>
                  <RadioGroup row>
                    <FormControlLabel
                      value="excellent"
                      control={<Radio {...register('quality')} />}
                      label="Excellent"
                    />
                    <FormControlLabel
                      value="good"
                      control={<Radio {...register('quality')} />}
                      label="Good"
                    />
                    <FormControlLabel
                      value="fair"
                      control={<Radio {...register('quality')} />}
                      label="Fair"
                    />
                    <FormControlLabel
                      value="poor"
                      control={<Radio {...register('quality')} />}
                      label="Poor"
                    />
                  </RadioGroup>
                </FormControl>

                {/* Notes */}
                <TextField
                  fullWidth
                  label="Notes (optional)"
                  multiline
                  rows={3}
                  {...register('notes')}
                  sx={{ mb: 3 }}
                  placeholder="Any disruptions, dreams, or observations..."
                />

                {/* Voice Input Button */}
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
                  <Chip
                    icon={<Mic />}
                    label="Use Voice Input"
                    onClick={() => {/* TODO: Implement voice input */}}
                    sx={{ cursor: 'pointer' }}
                  />
                </Box>

                {/* Submit Button */}
                <Button
                  fullWidth
                  type="submit"
                  variant="contained"
                  size="large"
                  startIcon={<Save />}
                >
                  Save Sleep Session
                </Button>
              </Box>
            </Paper>
          </motion.div>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}