import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  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('hub.delhi@doormile.in');
  const [pwd, setPwd] = useState('password123');

  const handleSignIn = () => {
    navigate('/dashboard');
  };

  return (
    <Box sx={{ display: 'flex', minHeight: '100vh', width: '100vw', bgcolor: '#ffffff', overflow: 'hidden' }}>
      
      {/* Brand Side Panel */}
      <Box
        sx={{
          display: { xs: 'none', md: 'flex' },
          flexDirection: 'column',
          justifyContent: 'space-between',
          width: { md: '28%', lg: '27%', xl: '25%' },
          minWidth: '360px',
          p: 5,
          color: '#fff',
          background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
          position: 'relative',
          overflow: 'hidden',
          flexShrink: 0
        }}
      >
        {/* Background Decorative Circles */}
        <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 }} />
        
        {/* BLACK LOGO REPLACEMENT (Sidebar) */}
        <Box sx={{ filter: 'brightness(0) invert(0)', display: 'inline-flex' }}>
          <Logo height={24} />
        </Box>
        
        <Box sx={{ position: 'relative', my: 'auto' }}>
          <Typography variant="overline" sx={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600 }}>
            Doormile Hub Console
          </Typography>
          <Typography variant="h4" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, mt: 1, mb: 2, fontSize: { md: '1.8rem', lg: '2.2rem' } }}>
            Every parcel,
            <br /> handled with ease.
          </Typography>
          <Typography sx={{ color: 'rgba(255,255,255,0.8)', mb: 4, fontSize: '0.9rem', lineHeight: 1.5 }}>
            Receive parcels, sort them, and send them out for delivery or transfer to another city — all from one simple screen.
          </Typography>

          <Stack spacing={2.5}>
            {[
              { icon: BoltIcon, t: 'We tell you which shelf each parcel goes on' },
              { icon: LocalShippingOutlinedIcon, t: 'Scan parcels in as trucks arrive' },
              { icon: VerifiedOutlinedIcon, t: 'Keep an eye on cold-storage parcels' }
            ].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.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <f.icon fontSize="small" />
                </Box>
                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</Typography>
              </Stack>
            ))}
          </Stack>
        </Box>

        <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', mt: 3 }}>
          © 2026 Doormile Logistics Pvt. Ltd.
        </Typography>
      </Box>

      {/* Form Panel */}
      <Box 
        sx={{ 
          flexGrow: 1,
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center', 
          p: { xs: 3, sm: 6 },
          bgcolor: '#ffffff'
        }}
      >
        <Card 
          elevation={0}
          sx={{ 
            width: '100%', 
            maxWidth: 420, 
            p: { xs: 3, sm: 4.5 },
            border: '1px solid #eaeaea',
            borderRadius: 3,
            boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.02)'
          }}
        >
          {/* BLACK LOGO REPLACEMENT (Mobile View) */}
          <Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 3, filter: 'brightness(0)' }}>
            <Logo />
          </Box>
          
          <Typography variant="h4" sx={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem' }}>Hub Sign In</Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 4 }}>
            Sign in to your Doormile Hub operations account.
          </Typography>

          <Stack spacing={3}>
            <Box>
              <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
                Username / Email
              </Typography>
              <TextField 
                fullWidth 
                placeholder="Enter your email" 
                value={auth} 
                onChange={(e) => setAuth(e.target.value)} 
              />
            </Box>

            <Box>
              <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
                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" sx={{ color: '#C01227', '&.Mui-checked': { color: '#C01227' } }} />} 
                label={<Typography variant="body2" sx={{ color: '#555' }}>Remember me</Typography>} 
              />
              <Link href="#" underline="hover" variant="body2" sx={{ color: '#C01227', fontWeight: 600 }}>
                Forgot password?
              </Link>
            </Stack>
            
            <Button 
              fullWidth 
              size="large" 
              variant="contained" 
              onClick={handleSignIn}
              sx={{ 
                bgcolor: '#C01227', 
                color: '#fff',
                py: 1.5,
                fontWeight: 600,
                borderRadius: 2,
                textTransform: 'none',
                boxShadow: 'none',
                '&:hover': { 
                  bgcolor: '#9E0E20',
                  boxShadow: 'none'
                } 
              }}
            >
              Sign In
            </Button>

            <Box sx={{ textAlign: 'center', mt: 1 }}>
              <Typography variant="body2" color="text.secondary">
                New to Hub Operations?{' '}
                <Link 
                  href="#" 
                  onClick={(e) => { e.preventDefault(); navigate('/signup'); }} 
                  underline="hover" 
                  sx={{ color: '#C01227', fontWeight: 600 }}
                >
                  Create an account
                </Link>
              </Typography>
            </Box>
          </Stack>
        </Card>
      </Box>
    </Box>
  );
}