'use client';

import { useState } from 'react';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';

interface Props {
  loading: boolean;
  error: string | null;
  onBack: () => void;
  onSubmit: (email: string, password: string) => Promise<void>;
  onSwitchToRegister: () => void;
}

export default function StoreLoginForm({ loading, error, onBack, onSubmit, onSwitchToRegister }: Props) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const canSubmit = !loading && !!email && !!password;

  return (
    <div style={{ display: 'grid', gap: 20, maxWidth: 440, margin: '0 auto', width: '100%' }}>
      <button
        type="button"
        onClick={onBack}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
          color: 'var(--store-muted)', fontSize: 13, cursor: 'pointer', padding: 0, justifySelf: 'start',
          fontWeight: 'var(--store-body-weight)' as unknown as number,
        }}
      >
        <ArrowBackRoundedIcon sx={{ fontSize: 16 }} />
        Volver
      </button>

      {/* Header visual */}
      <div style={{ display: 'grid', justifyItems: 'center', gap: 12, paddingBottom: 4 }}>
        <div style={{
          width: 72, height: 72, borderRadius: '50%', display: 'grid', placeItems: 'center',
          background: 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 70%, #6366f1))',
          boxShadow: '0 16px 36px color-mix(in srgb, var(--store-primary) 34%, transparent)',
        }}>
          <LoginRoundedIcon sx={{ color: '#fff', fontSize: 32 }} />
        </div>
        <div style={{ textAlign: 'center' }}>
          <Typography component="h2" sx={{ fontWeight: 950, fontSize: 22, letterSpacing: '-0.4px', color: 'var(--store-text)', lineHeight: 1.2 }}>
            Bienvenido de vuelta
          </Typography>
          <Typography variant="body2" sx={{ color: 'var(--store-muted)', mt: 0.5 }}>
            Ingresá con tu cuenta para continuar
          </Typography>
        </div>
      </div>

      {/* Campos */}
      <div style={{ display: 'grid', gap: 12 }}>
        <TextField
          label="Email"
          type="email"
          size="small"
          fullWidth
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          autoComplete="email"
          disabled={loading}
          placeholder="tu@email.com"
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <EmailOutlinedIcon sx={{ fontSize: 18, color: 'var(--store-muted)' }} />
              </InputAdornment>
            ),
          }}
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2.5, background: '#fff' } }}
        />
        <TextField
          label="Contraseña"
          type={showPassword ? 'text' : 'password'}
          size="small"
          fullWidth
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          autoComplete="current-password"
          disabled={loading}
          onKeyDown={(e) => e.key === 'Enter' && canSubmit && onSubmit(email, password)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <LockOutlinedIcon sx={{ fontSize: 18, color: 'var(--store-muted)' }} />
              </InputAdornment>
            ),
            endAdornment: (
              <InputAdornment position="end">
                <IconButton size="small" onClick={() => setShowPassword((p) => !p)} edge="end" tabIndex={-1}>
                  {showPassword
                    ? <VisibilityOffOutlinedIcon sx={{ fontSize: 18 }} />
                    : <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />}
                </IconButton>
              </InputAdornment>
            ),
          }}
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2.5, background: '#fff' } }}
        />
      </div>

      {error && (
        <Alert severity="error" sx={{ borderRadius: 2.5, fontSize: 13 }}>
          {error}
        </Alert>
      )}

      <Button
        variant="contained"
        size="large"
        fullWidth
        disabled={!canSubmit}
        onClick={() => onSubmit(email, password)}
        sx={{
          borderRadius: 2.5, fontWeight: 800, fontSize: 15, py: 1.4,
          background: canSubmit
            ? 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 78%, #6366f1))'
            : undefined,
          boxShadow: canSubmit ? '0 10px 28px color-mix(in srgb, var(--store-primary) 34%, transparent)' : 'none',
          transition: 'all 200ms ease',
        }}
      >
        {loading
          ? <><CircularProgress size={18} color="inherit" sx={{ mr: 1 }} /> Iniciando sesión...</>
          : <><LoginRoundedIcon sx={{ fontSize: 20, mr: 1 }} /> Ingresar a mi cuenta</>}
      </Button>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10,
        color: 'var(--store-muted)', fontSize: 12,
      }}>
        <div style={{ height: 1, background: 'rgba(20,33,31,0.1)' }} />
        <span>¿Aún no tenés cuenta?</span>
        <div style={{ height: 1, background: 'rgba(20,33,31,0.1)' }} />
      </div>

      {/* Antes esto era un texto que mandaba al usuario a volver atrás y buscar la
          opción. Registrarse desde acá es un click. */}
      <Button
        variant="outlined"
        size="large"
        fullWidth
        onClick={onSwitchToRegister}
        sx={{ borderRadius: 2.5, fontWeight: 700 }}
      >
        Crear una cuenta
      </Button>
    </div>
  );
}