'use client';

import { Box, Typography, Grid, Card, CardContent, Button, Avatar, Chip } from '@mui/material';
import { PersonAdd, ContentCopy, People } from '@mui/icons-material';
import { useAuth } from '@/lib/auth/AuthContext';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function FamilyPage() {
  const { user } = useAuth();

  const handleInvite = () => {
    // Invite functionality to be implemented
    alert('Family invitation feature coming soon!');
  };

  const handleCopyCode = () => {
    // Copy share code to clipboard
    navigator.clipboard.writeText('FAMILY-CODE-123');
    alert('Family code copied to clipboard!');
  };

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
        <Box>
          <Typography variant="h4" fontWeight="600" gutterBottom>
            Family
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Manage your family members and share access
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<PersonAdd />}
          onClick={handleInvite}
        >
          Invite Member
        </Button>
      </Box>

      <Grid container spacing={3}>
        {/* Family Share Code */}
        <Grid item xs={12}>
          <Card>
            <CardContent>
              <Typography variant="h6" fontWeight="600" gutterBottom>
                Family Share Code
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                Share this code with family members to give them access to your family's data
              </Typography>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <Chip
                  label="FAMILY-CODE-123"
                  sx={{
                    fontSize: '1.1rem',
                    fontWeight: 600,
                    py: 2.5,
                    px: 1,
                  }}
                />
                <Button
                  variant="outlined"
                  startIcon={<ContentCopy />}
                  onClick={handleCopyCode}
                >
                  Copy Code
                </Button>
              </Box>
            </CardContent>
          </Card>
        </Grid>

        {/* Family Members */}
        <Grid item xs={12}>
          <Card>
            <CardContent>
              <Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}>
                Family Members
              </Typography>

              {/* Current User */}
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
                <Avatar sx={{ bgcolor: 'primary.main' }}>
                  {user?.name?.charAt(0).toUpperCase()}
                </Avatar>
                <Box sx={{ flex: 1 }}>
                  <Typography variant="body1" fontWeight="600">
                    {user?.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {user?.email}
                  </Typography>
                </Box>
                <Chip label="Admin" color="primary" size="small" />
              </Box>

              {/* Empty State */}
              <Box sx={{ textAlign: 'center', py: 4, borderTop: '1px solid', borderColor: 'divider' }}>
                <People sx={{ fontSize: 48, color: 'text.secondary', mb: 2 }} />
                <Typography variant="body2" color="text.secondary" gutterBottom>
                  No other family members yet
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                  Invite family members to collaborate on child care
                </Typography>
                <Button
                  variant="outlined"
                  startIcon={<PersonAdd />}
                  onClick={handleInvite}
                >
                  Invite First Member
                </Button>
              </Box>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}