'use client';

import { useState } from 'react';
import Link from 'next/link';
import { PawPrint, Eye, EyeOff, Mail, Lock, User, Calendar, MapPin } from 'lucide-react';
import { DISTRITOS } from '@/lib/validations/auth';

export default function RegisterPage() {
  const [showPass, setShowPass]  = useState(false);
  const [loading, setLoading]    = useState(false);
  const [error, setError]        = useState<string | null>(null);
  const [success, setSuccess]    = useState(false);

  const [form, setForm] = useState({
    name:            '',
    email:           '',
    password:        '',
    confirmPassword: '',
    birthdate:       '',
    district:        '',
    terms:           false,
  });

  const set = (k: keyof typeof form) => (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => setForm((f) => ({ ...f, [k]: e.target.type === 'checkbox' ? (e.target as HTMLInputElement).checked : e.target.value }));

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      const res = await fetch('/api/auth/register', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify(form),
      });

      const data = await res.json();

      if (!res.ok) {
        setError(data.error ?? 'Erro ao criar conta. Tenta de novo.');
      } else {
        setSuccess(true);
      }
    } catch {
      setError('Erro de rede. Verifica a tua ligação.');
    } finally {
      setLoading(false);
    }
  };

  const inputStyle: React.CSSProperties = {
    width:        '100%',
    padding:      '12px 16px 12px 40px',
    background:   'var(--cream)',
    border:       '1.5px solid var(--parchment)',
    borderRadius: '10px',
    fontFamily:   'var(--font-body)',
    fontSize:     '15px',
    color:        'var(--soil)',
    outline:      'none',
    transition:   'border-color 180ms ease',
    minHeight:    '48px',
  };

  const labelStyle: React.CSSProperties = {
    fontFamily:    'var(--font-accent)',
    fontSize:      '11px',
    fontWeight:    400,
    letterSpacing: '0.08em',
    textTransform: 'uppercase' as const,
    color:         'var(--soil-faint)',
  };

  if (success) {
    return (
      <div style={{ textAlign: 'center', maxWidth: '420px', padding: '48px 24px' }}>
        <div style={{ fontSize: '56px', marginBottom: '16px' }}>🐾</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '28px', color: 'var(--soil)', marginBottom: '12px' }}>
          Conta criada!
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', color: 'var(--soil-mid)', marginBottom: '24px', lineHeight: 1.6 }}>
          Bem-vindo/a à PawLink. Já podes explorar animais e fazer adopções.
        </p>
        <Link href="/auth/login" className="btn btn-primary" style={{ justifyContent: 'center' }}>
          Entrar na conta
        </Link>
      </div>
    );
  }

  return (
    <div
      style={{
        width:        '100%',
        maxWidth:     '480px',
        background:   'var(--linen)',
        border:       '1px solid var(--parchment)',
        borderRadius: '20px',
        padding:      'clamp(28px, 5vw, 44px)',
        boxShadow:    'var(--shadow-warm-md)',
      }}
    >
      {/* Marca */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '28px' }}>
        <PawPrint size={20} style={{ color: 'var(--terra)' }} />
        <span className="logo" style={{ fontSize: '18px' }}>PawLink</span>
      </div>

      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '28px', color: 'var(--soil)', marginBottom: '6px', lineHeight: 1.15 }}>
        Criar conta.
      </h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--soil-mid)', marginBottom: '28px' }}>
        Já tens conta?{' '}
        <Link href="/auth/login" style={{ color: 'var(--terra)', fontWeight: 500 }}>
          Entrar
        </Link>
      </p>

      {error && (
        <div style={{ background: 'rgba(196,80,26,0.08)', border: '1px solid rgba(196,80,26,0.25)', borderRadius: '10px', padding: '12px 16px', marginBottom: '20px', fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--terra)' }}>
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {/* Nome */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-name" style={labelStyle}>Nome completo</label>
          <div style={{ position: 'relative' }}>
            <User size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
            <input id="reg-name" type="text" value={form.name} onChange={set('name')} placeholder="O teu nome" required autoComplete="name" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
          </div>
        </div>

        {/* Email */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-email" style={labelStyle}>Email</label>
          <div style={{ position: 'relative' }}>
            <Mail size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
            <input id="reg-email" type="email" value={form.email} onChange={set('email')} placeholder="o.teu@email.pt" required autoComplete="email" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
          </div>
        </div>

        {/* Password */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-password" style={labelStyle}>Palavra-passe</label>
          <div style={{ position: 'relative' }}>
            <Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
            <input id="reg-password" type={showPass ? 'text' : 'password'} value={form.password} onChange={set('password')} placeholder="Mín. 8 caract., 1 maiúscula, 1 número" required autoComplete="new-password" style={{ ...inputStyle, paddingRight: '44px' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
            <button type="button" onClick={() => setShowPass(s => !s)} style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--soil-faint)', padding: '4px', display: 'flex', alignItems: 'center' }} aria-label={showPass ? 'Ocultar' : 'Mostrar'}>
              {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
            </button>
          </div>
        </div>

        {/* Confirmar password */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-confirm" style={labelStyle}>Confirmar palavra-passe</label>
          <div style={{ position: 'relative' }}>
            <Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
            <input id="reg-confirm" type="password" value={form.confirmPassword} onChange={set('confirmPassword')} placeholder="Repetir palavra-passe" required autoComplete="new-password" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
          </div>
        </div>

        {/* Data de nascimento */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-birth" style={labelStyle}>Data de nascimento (mínimo 18 anos)</label>
          <div style={{ position: 'relative' }}>
            <Calendar size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
            <input id="reg-birth" type="date" value={form.birthdate} onChange={set('birthdate')} required style={{ ...inputStyle, colorScheme: 'light' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
          </div>
        </div>

        {/* Distrito */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <label htmlFor="reg-district" style={labelStyle}>Distrito</label>
          <div style={{ position: 'relative' }}>
            <MapPin size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none', zIndex: 1 }} />
            <select id="reg-district" value={form.district} onChange={set('district')} required style={{ ...inputStyle, appearance: 'none', paddingLeft: '40px', cursor: 'pointer' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')}>
              <option value="">Selecciona o teu distrito</option>
              {DISTRITOS.map(d => <option key={d} value={d}>{d}</option>)}
            </select>
          </div>
        </div>

        {/* Termos */}
        <label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--soil-mid)', lineHeight: 1.5 }}>
          <input type="checkbox" checked={form.terms} onChange={set('terms')} required style={{ marginTop: '3px', width: '16px', height: '16px', accentColor: 'var(--terra)', flexShrink: 0 }} />
          Aceito os{' '}
          <Link href="/terms" target="_blank" style={{ color: 'var(--terra)' }}>Termos de Utilização</Link>
          {' '}e a{' '}
          <Link href="/privacy" target="_blank" style={{ color: 'var(--terra)' }}>Política de Privacidade</Link>.
        </label>

        <button
          id="register-submit"
          type="submit"
          className="btn btn-primary"
          disabled={loading}
          style={{ width: '100%', justifyContent: 'center', marginTop: '8px', opacity: loading ? 0.75 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}
          aria-label="Criar conta PawLink"
        >
          {loading ? 'A criar conta…' : 'Criar conta'}
        </button>
      </form>
    </div>
  );
}