// src/pages/AttorneyDashboardPage.tsx

import React, { ReactElement, useEffect, useState } from 'react';
import {
  Container,
  Typography,
  Box,
  Grid,
  Card,
  CardContent,
  Divider,
  List,
  ListItem,
  ListItemText,
  ListItemIcon,
  Button,
  Alert,
} from '@mui/material';
import FolderIcon from '@mui/icons-material/Folder';
import EventIcon from '@mui/icons-material/Event';
import DescriptionIcon from '@mui/icons-material/Description';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import { DashboardProps } from 'pages/home/Dashboard';
import { useNavigate } from 'react-router-dom';
import { AttorneyAPI } from 'types';
import { axiosInstance } from '../../../../../axiosApi';
import DashboardLoading from './DashboardLoading';
import DashboardErrorPage from './DashboardErrorPage';
import { AxiosResponse } from 'axios';

// Mock Data for the Attorney Dashboard
interface AttorneyCase {
  id: number;
  title: string;
  status: 'active' | 'closed' | 'urgent';
  deadline: string;
}

const mockAttorneyCases: AttorneyCase[] = [
  { id: 1, title: 'Closing for 123 Main St', status: 'urgent', deadline: 'August 15, 2025' },
  { id: 2, title: 'Contract Review - 456 Oak Ave', status: 'active', deadline: 'August 20, 2025' },
  { id: 3, title: 'Title Search - 789 Pine Ln', status: 'active', deadline: 'September 1, 2025' },
];

const AttorneyDashboard = ({ account }: DashboardProps): ReactElement => {
  const [attorney, setAttorney] = useState<AttorneyAPI | null>(null);
  const [loadingData, setLoadingData] = useState<boolean>(true);
  const navigate = useNavigate();
  useEffect(() => {
    const fetchAttorney = async () => {
      try {
        const { data }: AxiosResponse<AttorneyAPI[]> = await axiosInstance.get('/attorney/');
        if (data.length > 0) {
          setAttorney(data[0]);
        }
      } catch (error) {
        console.log(error);
      } finally {
        setLoadingData(false);
      }
    };
    fetchAttorney();
  }, []);
  if (loadingData) {
    return <DashboardLoading />;
  }
  if (attorney === null) {
    return <DashboardErrorPage />;
  }
  return (
    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
      <Typography variant="h4" component="h1" gutterBottom color="background.paper">
        Attorney Dashboard
      </Typography>
      {!account.profile_created && (
        <Alert severity="warning" sx={{ mb: 2 }}>
          Please set up your <a href="/profile">profile</a>
        </Alert>
      )}
      <Grid container spacing={3}>
        {/* Active Cases Card */}
        <Grid size={{ xs: 12, md: 6 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <FolderIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  Active Cases
                </Typography>
              </Box>
              <List>
                {mockAttorneyCases.map((c) => (
                  <React.Fragment key={c.id}>
                    <ListItem>
                      <ListItemIcon>
                        {c.status === 'urgent' ? (
                          <WarningIcon color="warning" />
                        ) : (
                          <CheckCircleIcon color="success" />
                        )}
                      </ListItemIcon>
                      <ListItemText primary={c.title} secondary={`Deadline: ${c.deadline}`} />
                    </ListItem>
                    <Divider component="li" />
                  </React.Fragment>
                ))}
              </List>
              <Button fullWidth sx={{ mt: 2 }}>
                View All Cases
              </Button>
            </CardContent>
          </Card>
        </Grid>
        {/* Upcoming Deadlines Card */}
        <Grid size={{ xs: 12, md: 6 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <EventIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  Upcoming Deadlines
                </Typography>
              </Box>
              <List>
                {mockAttorneyCases
                  .filter((c) => c.status === 'urgent')
                  .map((c) => (
                    <ListItem key={c.id}>
                      <ListItemIcon>
                        <WarningIcon color="warning" />
                      </ListItemIcon>
                      <ListItemText primary={c.title} secondary={`Due by: ${c.deadline}`} />
                    </ListItem>
                  ))}
              </List>
              <Button fullWidth sx={{ mt: 2 }}>
                View Calendar
              </Button>
            </CardContent>
          </Card>
        </Grid>
        {/* Documents to Review Card */}
        <Grid size={{ xs: 12 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <DescriptionIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  Documents Requiring Action
                </Typography>
              </Box>
              <List dense>
                <ListItem>
                  <ListItemText
                    primary="Contract for 123 Main St"
                    secondary="Needs your signature"
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Title Report for 456 Oak Ave"
                    secondary="Awaiting your review"
                  />
                </ListItem>
              </List>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Container>
  );
};

export default AttorneyDashboard;
