import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Grid, Card, CardContent, Stack, Button, TextField, MenuItem, Typography, Divider,
  Autocomplete, FormControlLabel, Checkbox, Box
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import AddIcon from '@mui/icons-material/Add';

import PageHeader from '@/components/PageHeader';
import { locations, tenantsList, tenants } from '@/data/mock';

const TIME_SLOTS = ['09:00 - 11:00', '11:00 - 13:00', '13:00 - 15:00', '15:00 - 17:00', '17:00 - 19:00'];

const SectionTitle = ({ children }) => (
  <>
    <Typography variant="h5" sx={{ fontWeight: 600 }}>{children}</Typography>
    <Divider sx={{ mt: 1, mb: 2.5 }} />
  </>
);

function AddressFields({ saveForLater, onSaveForLater }) {
  return (
    <Grid container spacing={2.5}>
      <Grid item xs={12} md={6}>
        <TextField fullWidth label="Contact Name" placeholder="Enter contact name" />
      </Grid>
      <Grid item xs={12} md={6}>
        <TextField fullWidth label="Contact Number" placeholder="+91 ..." />
      </Grid>
      <Grid item xs={12}>
        <TextField fullWidth label="Address" placeholder="Enter full address" multiline minRows={2} />
      </Grid>
      <Grid item xs={12} md={6}>
        <TextField fullWidth label="Door No / Street" placeholder="e.g. 24, 1st Cross" />
      </Grid>
      <Grid item xs={12} md={6}>
        <TextField select fullWidth label="Location" defaultValue="">
          {locations.map((l) => <MenuItem key={l} value={l}>{l}</MenuItem>)}
        </TextField>
      </Grid>
      <Grid item xs={12} md={6}>
        <TextField fullWidth label="Postcode" placeholder="e.g. 560102" />
      </Grid>
      <Grid item xs={12} md={6}>
        <TextField fullWidth label="Landmark" placeholder="Nearby landmark" />
      </Grid>
      <Grid item xs={12}>
        <FormControlLabel
          control={<Checkbox checked={saveForLater} onChange={(e) => onSaveForLater(e.target.checked)} />}
          label="Save for later"
        />
      </Grid>
    </Grid>
  );
}

export default function CreateOrder() {
  const navigate = useNavigate();
  const [deliveryDate, setDeliveryDate] = useState(dayjs());
  const [slot, setSlot] = useState('');
  const [savePickup, setSavePickup] = useState(false);
  const [saveDrop, setSaveDrop] = useState(false);

  return (
    <>
      <PageHeader
        title="Create Order"
        breadcrumbs={[{ label: 'Orders', to: '/orders' }, { label: 'Create Order' }]}
      />

      <Card>
        <CardContent sx={{ p: { xs: 2, md: 3 } }}>
          {/* Top row */}
          <Grid container spacing={2.5} sx={{ mb: 1 }}>
            <Grid item xs={12} md={4}>
              <Autocomplete
                options={locations}
                renderInput={(params) => <TextField {...params} label="Location" placeholder="Select location" />}
              />
            </Grid>
            <Grid item xs={12} md={4}>
              <Autocomplete
                options={tenantsList}
                renderInput={(params) => <TextField {...params} label="Client" placeholder="Select client" />}
              />
            </Grid>
            <Grid item xs={12} md={4}>
              <Autocomplete
                options={tenants.map((t) => `${t.name} — ${t.address}`)}
                renderInput={(params) => <TextField {...params} label="Business Location" placeholder="Select business location" />}
              />
            </Grid>
          </Grid>

          <Box sx={{ mt: 3 }}>
            <SectionTitle>Pickup Details</SectionTitle>
            <AddressFields saveForLater={savePickup} onSaveForLater={setSavePickup} />
          </Box>

          <Box sx={{ mt: 3 }}>
            <SectionTitle>Drop Details</SectionTitle>
            <AddressFields saveForLater={saveDrop} onSaveForLater={setSaveDrop} />
          </Box>

          <Box sx={{ mt: 3 }}>
            <SectionTitle>Schedule</SectionTitle>
            <Grid container spacing={2.5}>
              <Grid item xs={12} md={6}>
                <DatePicker
                  label="Delivery Date"
                  value={deliveryDate}
                  onChange={setDeliveryDate}
                  slotProps={{ textField: { fullWidth: true } }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField select fullWidth label="Pickup Time Slot" value={slot} onChange={(e) => setSlot(e.target.value)}>
                  {TIME_SLOTS.map((s) => <MenuItem key={s} value={s}>{s}</MenuItem>)}
                </TextField>
              </Grid>
              <Grid item xs={12}>
                <TextField fullWidth label="Notes" placeholder="Special instructions for this order" multiline minRows={3} />
              </Grid>
            </Grid>
          </Box>

          <Divider sx={{ mt: 3 }} />
          <Stack direction="row" spacing={1.5} justifyContent="flex-end" sx={{ mt: 2.5 }}>
            <Button variant="outlined" onClick={() => navigate('/orders')}>
              Cancel
            </Button>
            <Button variant="contained" startIcon={<AddIcon />} onClick={() => navigate('/orders')}>
              Create Order
            </Button>
          </Stack>
        </CardContent>
      </Card>
    </>
  );
}