// src/pages/RealEstateAgentDashboardPage.tsx

import React, { ReactElement } from 'react';
import {
  Container,
  Typography,
  Box,
  Grid,
  Card,
  CardContent,
  Divider,
  List,
  ListItem,
  ListItemText,
  ListItemIcon,
  Button,
} from '@mui/material';

import HomeIcon from '@mui/icons-material/Home';
import GavelIcon from '@mui/icons-material/Gavel';
import EventAvailableIcon from '@mui/icons-material/EventAvailable';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
import { DashboardProps } from 'pages/home/Dashboard';

// Mock Data for the Real Estate Agent Dashboard
interface AgentListing {
  id: number;
  address: string;
  status: 'active' | 'pending';
  offers: number;
  views: number;
}

interface AgentOffer {
  id: number;
  property_address: string;
  offer_amount: number;
  offer_date: string;
}

const mockAgentListings: AgentListing[] = [
  { id: 1, address: '123 Main St, Anytown', status: 'active', offers: 3, views: 250 },
  { id: 2, address: '456 Oak Ave, Anytown', status: 'pending', offers: 1, views: 180 },
  { id: 3, address: '789 Pine Ln, Othertown', status: 'active', offers: 0, views: 50 },
];

const mockAgentOffers: AgentOffer[] = [
  {
    id: 1,
    property_address: '123 Main St, Anytown',
    offer_amount: 510000,
    offer_date: 'August 5, 2025',
  },
];

const RealEstateAgentDashboard = ({ account }: DashboardProps): ReactElement => {
  return (
    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
      <Typography variant="h4" component="h1" gutterBottom>
        Agent Dashboard
      </Typography>
      <Grid container spacing={3}>
        {/* Listings Summary Card */}
        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <HomeIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  My Listings
                </Typography>
              </Box>
              <Typography variant="h3" sx={{ fontWeight: 'bold' }}>
                {mockAgentListings.length}
              </Typography>
              <Typography variant="subtitle1">Total Active Listings</Typography>
              <Divider sx={{ my: 1 }} />
              <Typography variant="body1">
                Total Offers: {mockAgentListings.reduce((sum, l) => sum + l.offers, 0)}
              </Typography>
            </CardContent>
          </Card>
        </Grid>

        {/* New Offers Card */}
        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <GavelIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  New Offers
                </Typography>
              </Box>
              {mockAgentOffers.length > 0 ? (
                <List dense>
                  {mockAgentOffers.map((offer) => (
                    <ListItem key={offer.id}>
                      <ListItemText
                        primary={`$${offer.offer_amount.toLocaleString()}`}
                        secondary={`On ${offer.property_address}`}
                      />
                    </ListItem>
                  ))}
                </List>
              ) : (
                <Typography variant="body1">No new offers at this time.</Typography>
              )}
              <Button fullWidth sx={{ mt: 2 }}>
                View All Offers
              </Button>
            </CardContent>
          </Card>
        </Grid>

        {/* Upcoming Showings Card */}
        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
          <Card>
            <CardContent>
              <Box display="flex" alignItems="center" mb={2}>
                <EventAvailableIcon color="primary" sx={{ fontSize: 36, mr: 1 }} />
                <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                  Upcoming Appointments
                </Typography>
              </Box>
              <List dense>
                <ListItem>
                  <ListItemIcon>
                    <PersonAddIcon />
                  </ListItemIcon>
                  <ListItemText
                    primary="Showing for John Doe"
                    secondary="123 Main St - 2:00 PM today"
                  />
                </ListItem>
                <ListItem>
                  <ListItemIcon>
                    <PersonAddIcon />
                  </ListItemIcon>
                  <ListItemText primary="Open House" secondary="789 Pine Ln - Sunday at 1:00 PM" />
                </ListItem>
              </List>
              <Button fullWidth sx={{ mt: 2 }}>
                View My Calendar
              </Button>
            </CardContent>
          </Card>
        </Grid>

        {/* Example of other cards */}
        <Grid size={{ xs: 12 }}>
          <Card>
            <CardContent>
              <Typography variant="h5" gutterBottom>
                Listing Performance
              </Typography>
              {/* A chart or a list of top-performing listings could go here */}
              <Typography variant="body1">
                123 Main St is your top-performing listing with 250 views.
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Container>
  );
};

export default RealEstateAgentDashboard;
