import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  Grid,
  Card,
  Stack,
  Typography,
  TextField,
  InputAdornment,
  IconButton,
  Button,
  Checkbox,
  FormControlLabel,
  Link
} from '@mui/material';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import BoltIcon from '@mui/icons-material/Bolt';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';

import Logo from '@/components/Logo';

export default function Login() {
  const navigate = useNavigate();
  const [show, setShow] = useState(false);
  const [auth, setAuth] = useState('admin@doormile.in');
  const [pwd, setPwd] = useState('');

  return (
    <Grid container sx={{ minHeight: '100vh' }}>
      {/* Brand panel */}
      <Grid
        item
        md={6}
        sx={{
          display: { xs: 'none', md: 'flex' },
          flexDirection: 'column',
          justifyContent: 'space-between',
          p: 6,
          color: '#fff',
          background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
          position: 'relative',
          overflow: 'hidden'
        }}
      >
        <Box sx={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
        <Box sx={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
        <Logo onDark />
        <Box sx={{ position: 'relative' }}>
          <Typography variant="overline" sx={{ color: 'rgba(255,255,255,0.7)', letterSpacing: '0.14em' }}>
            One Connected System · One Promise Kept
          </Typography>
          <Typography variant="h2" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, mt: 0.5 }}>
            Delivering Trust.
            <br /> Beyond Boundaries.
          </Typography>
          <Typography sx={{ color: 'rgba(255,255,255,0.85)', mt: 2, maxWidth: 420 }}>
            The MileTruth™ AI command center for Connected Miles — first-mile, mid-mile and last-mile delivery, unified in one intelligent console.
          </Typography>
          <Stack spacing={1.5} sx={{ mt: 4 }}>
            {[
              { icon: BoltIcon, t: 'MileTruth™ AI route optimisation' },
              { icon: LocalShippingOutlinedIcon, t: 'EV-first real-time tracking & proof of delivery' },
              { icon: VerifiedOutlinedIcon, t: 'Cold-chain & chain-of-custody compliance' }
            ].map((f) => (
              <Stack key={f.t} direction="row" spacing={1.5} alignItems="center">
                <Box sx={{ width: 34, height: 34, borderRadius: 2, bgcolor: 'rgba(255,255,255,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <f.icon fontSize="small" />
                </Box>
                <Typography sx={{ color: 'rgba(255,255,255,0.92)' }}>{f.t}</Typography>
              </Stack>
            ))}
          </Stack>
        </Box>
        <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.7)' }}>
          © 2026 Doormile Logistics Pvt. Ltd.
        </Typography>
      </Grid>

      {/* Form panel */}
      <Grid item xs={12} md={6} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: { xs: 3, sm: 6 } }}>
        <Card sx={{ width: '100%', maxWidth: 420, p: { xs: 3, sm: 4.5 } }}>
          <Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 2 }}><Logo /></Box>
          <Typography variant="h3" sx={{ fontWeight: 700 }}>Welcome back</Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 3 }}>
            Sign in to your Doormile operations account.
          </Typography>

          <Stack spacing={2.5}>
            <Box>
              <Typography variant="subtitle2" sx={{ mb: 0.75 }}>Auth Name</Typography>
              <TextField fullWidth placeholder="Enter your auth name" value={auth} onChange={(e) => setAuth(e.target.value)} />
            </Box>
            <Box>
              <Typography variant="subtitle2" sx={{ mb: 0.75 }}>Password</Typography>
              <TextField
                fullWidth
                type={show ? 'text' : 'password'}
                placeholder="Enter your password"
                value={pwd}
                onChange={(e) => setPwd(e.target.value)}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
                        {show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
              />
            </Box>
            <Stack direction="row" justifyContent="space-between" alignItems="center">
              <FormControlLabel control={<Checkbox defaultChecked size="small" />} label={<Typography variant="body2">Remember me</Typography>} />
              <Link href="#" underline="hover" variant="body2" color="primary">Forgot password?</Link>
            </Stack>
            <Button fullWidth size="large" variant="contained" onClick={() => navigate('/dashboard')}>
              Sign In
            </Button>
          </Stack>
        </Card>
      </Grid>
    </Grid>
  );
}