'use client';

import { useState } from 'react';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
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 BadgeOutlinedIcon from '@mui/icons-material/BadgeOutlined';
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import PersonOutlineRoundedIcon from '@mui/icons-material/PersonOutlineRounded';
import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
import StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';
import VerifiedUserOutlinedIcon from '@mui/icons-material/VerifiedUserOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';

interface Props {
  loading: boolean;
  error: string | null;
  onBack: () => void;
  onSubmit: (data: { email: string; password: string; nombre: string; telefono?: string }) => Promise<void>;
  onSwitchToLogin: () => void;
}

export default function StoreRegisterForm({ loading, error, onBack, onSubmit, onSwitchToLogin }: Props) {
  const [form, setForm] = useState({ email: '', password: '', confirm: '', nombre: '', telefono: '' });
  const [localError, setLocalError] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);

  const handleSubmit = () => {
    if (form.password !== form.confirm) {
      setLocalError('Las contraseñas no coinciden');
      return;
    }
    if (form.password.length < 6) {
      setLocalError('La contraseña debe tener al menos 6 caracteres');
      return;
    }
    setLocalError('');
    onSubmit({ email: form.email, password: form.password, nombre: form.nombre, telefono: form.telefono || undefined });
  };

  const displayError = localError || error;
  const canSubmit = !loading && !!form.email && !!form.password && !!form.nombre && !!form.confirm;

  return (
    <div style={{ display: 'grid', gap: 20, maxWidth: 480, 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: 14, 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)',
        }}>
          <PersonOutlineRoundedIcon sx={{ color: '#fff', fontSize: 34 }} />
        </div>
        <div style={{ textAlign: 'center' }}>
          <Typography component="h2" sx={{ fontWeight: 950, fontSize: 22, letterSpacing: '-0.4px', color: 'var(--store-text)', lineHeight: 1.2 }}>
            Crear cuenta
          </Typography>
          <Typography variant="body2" sx={{ color: 'var(--store-muted)', mt: 0.5, lineHeight: 1.5 }}>
            Accedé a tu historial, seguimiento y beneficios exclusivos
          </Typography>
        </div>

        {/* Trust chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[
            { label: 'Pedidos guardados', icon: <LocalShippingOutlinedIcon sx={{ fontSize: '14px !important' }} /> },
            { label: 'Precios especiales', icon: <StarBorderRoundedIcon sx={{ fontSize: '14px !important' }} /> },
            { label: 'Datos seguros', icon: <VerifiedUserOutlinedIcon sx={{ fontSize: '14px !important' }} /> },
          ].map((c) => (
            <Chip
              key={c.label}
              label={c.label}
              icon={c.icon}
              size="small"
              sx={{
                fontSize: 11, height: 26, fontWeight: 'var(--store-label-weight)',
                background: 'color-mix(in srgb, var(--store-primary) 10%, #ffffff)',
                color: 'var(--store-primary)', border: '1px solid color-mix(in srgb, var(--store-primary) 20%, transparent)',
                '& .MuiChip-icon': { color: 'var(--store-primary)' },
              }}
            />
          ))}
        </div>
      </div>

      {/* Campos */}
      <div style={{ display: 'grid', gap: 12 }}>
        <TextField
          label="Nombre y apellido"
          size="small"
          fullWidth
          required
          value={form.nombre}
          onChange={(e) => setForm({ ...form, nombre: e.target.value })}
          disabled={loading}
          autoComplete="name"
          placeholder="Ej: Juan Pérez"
          InputProps={{
            startAdornment: <InputAdornment position="start"><BadgeOutlinedIcon sx={{ fontSize: 18, color: 'var(--store-muted)' }} /></InputAdornment>,
          }}
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2.5, background: '#fff' } }}
        />
        <TextField
          label="Teléfono / WhatsApp"
          size="small"
          fullWidth
          value={form.telefono}
          onChange={(e) => setForm({ ...form, telefono: e.target.value })}
          disabled={loading}
          autoComplete="tel"
          placeholder="Ej: 0981 123 456"
          InputProps={{
            startAdornment: <InputAdornment position="start"><PhoneOutlinedIcon sx={{ fontSize: 18, color: 'var(--store-muted)' }} /></InputAdornment>,
          }}
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2.5, background: '#fff' } }}
        />
        <TextField
          label="Email"
          type="email"
          size="small"
          fullWidth
          required
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          disabled={loading}
          autoComplete="email"
          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' } }}
        />

        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, margin: '2px 0',
          color: 'var(--store-muted)', fontSize: 12,
        }}>
          <div style={{ flex: 1, height: 1, background: 'rgba(20,33,31,0.1)' }} />
          <LockOutlinedIcon sx={{ fontSize: 13 }} />
          <span style={{ whiteSpace: 'nowrap', fontWeight: 'var(--store-label-weight)' as unknown as number }}>Contraseña</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(20,33,31,0.1)' }} />
        </div>

        <TextField
          label="Contraseña"
          type={showPassword ? 'text' : 'password'}
          size="small"
          fullWidth
          required
          value={form.password}
          onChange={(e) => { setForm({ ...form, password: e.target.value }); setLocalError(''); }}
          disabled={loading}
          autoComplete="new-password"
          helperText={form.password && form.password.length < 6 ? 'Mínimo 6 caracteres' : 'Mínimo 6 caracteres'}
          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' } }}
        />
        <TextField
          label="Confirmar contraseña"
          type={showConfirm ? 'text' : 'password'}
          size="small"
          fullWidth
          required
          value={form.confirm}
          onChange={(e) => { setForm({ ...form, confirm: e.target.value }); setLocalError(''); }}
          disabled={loading}
          autoComplete="new-password"
          onKeyDown={(e) => e.key === 'Enter' && canSubmit && handleSubmit()}
          error={!!(localError && form.confirm)}
          InputProps={{
            startAdornment: <InputAdornment position="start"><LockOutlinedIcon sx={{ fontSize: 18, color: 'var(--store-muted)' }} /></InputAdornment>,
            endAdornment: (
              <InputAdornment position="end">
                <IconButton size="small" onClick={() => setShowConfirm((p) => !p)} edge="end" tabIndex={-1}>
                  {showConfirm ? <VisibilityOffOutlinedIcon sx={{ fontSize: 18 }} /> : <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />}
                </IconButton>
              </InputAdornment>
            ),
          }}
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2.5, background: '#fff' } }}
        />
      </div>

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

      <Button
        variant="contained"
        size="large"
        fullWidth
        disabled={!canSubmit}
        onClick={handleSubmit}
        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 }} /> Creando cuenta...</>
          : <><HowToRegOutlinedIcon sx={{ fontSize: 20, mr: 1 }} /> Crear cuenta y continuar</>}
      </Button>

      <Typography variant="caption" sx={{ textAlign: 'center', color: 'var(--store-muted)', lineHeight: 1.5 }}>
        Al crear una cuenta aceptás nuestros términos de uso y política de privacidad.
      </Typography>

      <Button
        variant="text"
        onClick={onSwitchToLogin}
        sx={{ fontWeight: 700, textTransform: 'none' }}
      >
        Ya tengo cuenta, iniciar sesión
      </Button>
    </div>
  );
}