import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Grid, Stack, Button, IconButton, Typography, Box, TextField, MenuItem, Chip,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import AutorenewIcon from '@mui/icons-material/Autorenew';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import TwoWheelerOutlinedIcon from '@mui/icons-material/TwoWheelerOutlined';
import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
import RouteOutlinedIcon from '@mui/icons-material/RouteOutlined';
import PersonAddAltOutlinedIcon from '@mui/icons-material/PersonAddAltOutlined';

import PageHeader from '@/components/PageHeader';
import StatCard from '@/components/StatCard';
import MainCard from '@/components/MainCard';
import StatusChip from '@/components/StatusChip';
import UserAvatar from '@/components/UserAvatar';
import { orders, riders } from '@/data/mock';
import { inr } from '@/utils/format';

const ZONES = ['Zone A', 'Zone B', 'Zone C', 'Zone D'];
const PROFIT = [42, 58, 36, 50, 28, 64];

// derive assignment rows from orders + riders mock
const ROWS = orders.slice(0, 6).map((o, i) => ({
  ...o,
  zone: ZONES[i % ZONES.length],
  rider: riders[i % riders.length].name,
  profit: PROFIT[i % PROFIT.length]
}));

export default function AssignOrders() {
  const navigate = useNavigate();
  const [payment, setPayment] = useState('all');
  const [rider, setRider] = useState('auto');

  return (
    <>
      <PageHeader
        title={
          <Stack direction="row" spacing={1.5} alignItems="center">
            <IconButton onClick={() => navigate('/orders')} size="small"><ArrowBackIcon /></IconButton>
            <span>Assign Orders</span>
          </Stack>
        }
        breadcrumbs={[{ label: 'Orders', to: '/orders' }, { label: 'Assign Orders' }]}
        action={
          <Button variant="outlined" startIcon={<AutorenewIcon />}>Re-Assign</Button>
        }
      />

      <Grid container spacing={2.5} sx={{ mb: 1 }}>
        <Grid item xs={12} sm={6} lg={3}><StatCard title="Orders" value={8} icon={Inventory2OutlinedIcon} caption="To assign" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard title="Riders" value={5} icon={TwoWheelerOutlinedIcon} color="info" caption="Available" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard title="Zones" value={4} icon={MapOutlinedIcon} color="warning" caption="Covered" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard title="Kilometer" value={64} icon={RouteOutlinedIcon} color="success" caption="Total route" /></Grid>
      </Grid>

      <MainCard title="Assignment Plan" noPadding sx={{ mt: 1.5 }}>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>#</TableCell>
                <TableCell>Zone</TableCell>
                <TableCell>Tenant</TableCell>
                <TableCell>Order Location</TableCell>
                <TableCell>Pickup</TableCell>
                <TableCell>Delivery</TableCell>
                <TableCell>Notes</TableCell>
                <TableCell>Rider</TableCell>
                <TableCell>Type</TableCell>
                <TableCell align="right">Profit</TableCell>
                <TableCell align="right">Charges</TableCell>
                <TableCell align="right">KMS</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {ROWS.map((r) => (
                <TableRow key={r.id} hover>
                  <TableCell sx={{ fontWeight: 600, color: 'primary.main' }}>{r.id}</TableCell>
                  <TableCell>
                    <Chip size="small" label={r.zone} sx={{ bgcolor: 'primary.lighter', color: 'primary.dark', fontWeight: 600 }} />
                  </TableCell>
                  <TableCell>{r.tenant}</TableCell>
                  <TableCell>{r.location}</TableCell>
                  <TableCell>{r.pickup}</TableCell>
                  <TableCell>{r.drop}</TableCell>
                  <TableCell><Typography variant="caption" color="text.secondary" noWrap>{r.notes || '—'}</Typography></TableCell>
                  <TableCell>
                    <Stack direction="row" spacing={1} alignItems="center">
                      <UserAvatar name={r.rider} size={28} />
                      <Typography variant="body2">{r.rider}</Typography>
                    </Stack>
                  </TableCell>
                  <TableCell><StatusChip status={r.payment} /></TableCell>
                  <TableCell align="right" sx={{ color: 'success.main', fontWeight: 600 }}>{inr(r.profit)}</TableCell>
                  <TableCell align="right" sx={{ fontWeight: 600 }}>{inr(r.charges)}</TableCell>
                  <TableCell align="right">{r.kms}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </MainCard>

      <Box sx={{ mt: 2.5 }}>
        <Grid container spacing={2.5} alignItems="center">
          <Grid item xs={12} sm={6} md={3}>
            <TextField select fullWidth size="small" label="Choose Payment" value={payment} onChange={(e) => setPayment(e.target.value)}>
              <MenuItem value="all">All Payments</MenuItem>
              <MenuItem value="prepaid">Prepaid</MenuItem>
              <MenuItem value="cod">COD</MenuItem>
            </TextField>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <TextField select fullWidth size="small" label="Choose Rider" value={rider} onChange={(e) => setRider(e.target.value)}>
              <MenuItem value="auto">Auto Assign</MenuItem>
              {riders.map((rd) => <MenuItem key={rd.id} value={rd.id}>{rd.name}</MenuItem>)}
            </TextField>
          </Grid>
        </Grid>
      </Box>

      <Stack direction="row" spacing={1.5} justifyContent="flex-end" sx={{ mt: 2.5 }}>
        <Button variant="outlined" startIcon={<ArrowBackIcon />} onClick={() => navigate('/orders')}>Back</Button>
        <Button variant="contained" startIcon={<PersonAddAltOutlinedIcon />} onClick={() => navigate('/orders')}>
          Assign Orders
        </Button>
      </Stack>
    </>
  );
}