'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { User, MapPin, Calendar, Heart, Gift, Settings, LogOut, ChevronRight } from 'lucide-react';

interface UserProfile {
  id:            string;
  name:          string;
  email:         string;
  district:      string;
  role:          string;
  emailVerified: boolean;
  createdAt:     string;
  _count:        { reservations: number; donations: number };
}

interface Reservation {
  id:        string;
  date:      string;
  status:    string;
  animal: {
    name:    string;
    species: string;
    photos:  { url: string }[];
    shelter: { name: string; district: string };
  };
}

export default function AccountPage() {
  const [user,         setUser]         = useState<UserProfile | null>(null);
  const [reservations, setReservations] = useState<Reservation[]>([]);
  const [loading,      setLoading]      = useState(true);

  useEffect(() => {
    Promise.all([
      fetch('/api/users/me').then(r => r.json()),
      fetch('/api/reservations').then(r => r.json()),
    ])
      .then(([u, r]) => {
        setUser(u);
        setReservations(Array.isArray(r) ? r : []);
      })
      .finally(() => setLoading(false));
  }, []);

  const statusColor: Record<string, string> = {
    PENDING:   'var(--amber)',
    CONFIRMED: 'var(--sage)',
    CANCELLED: 'var(--soil-faint)',
    COMPLETED: 'var(--sage)',
  };
  const statusLabel: Record<string, string> = {
    PENDING:   'Pendente',
    CONFIRMED: 'Confirmada',
    CANCELLED: 'Cancelada',
    COMPLETED: 'Concluída',
  };

  if (loading) {
    return (
      <div style={{ maxWidth: '800px', margin: '0 auto', padding: 'var(--space-7) var(--space-5)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          {[1,2,3].map(i => (
            <div key={i} className="skeleton" style={{ height: '80px', borderRadius: '12px' }} />
          ))}
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div style={{ textAlign: 'center', padding: 'var(--space-9) var(--space-5)' }}>
        <p style={{ fontFamily: 'var(--font-body)', color: 'var(--soil-mid)', marginBottom: '20px' }}>
          Precisas de estar autenticado para ver esta página.
        </p>
        <Link href="/auth/login" className="btn btn-primary">Entrar</Link>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: 'var(--space-7) var(--space-5)' }}>
      {/* Header da conta */}
      <div style={{ marginBottom: 'var(--space-7)' }}>
        <p className="eyebrow" style={{ marginBottom: '8px' }}>A tua conta</p>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px, 5vw, 40px)', color: 'var(--soil)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
          Olá, <em style={{ fontStyle: 'italic', color: 'var(--terra)' }}>{user.name.split(' ')[0]}.</em>
        </h1>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 'var(--space-4)', marginBottom: 'var(--space-7)' }}>
        {[
          { icon: Heart,   label: 'Reservas',  value: user._count.reservations },
          { icon: Gift,    label: 'Doações',    value: user._count.donations },
        ].map(({ icon: Icon, label, value }) => (
          <div key={label} style={{ background: 'var(--linen)', border: '1px solid var(--parchment)', borderRadius: '16px', padding: '20px', display: 'flex', alignItems: 'center', gap: '14px', boxShadow: 'var(--shadow-warm-sm)' }}>
            <div style={{ width: '40px', height: '40px', borderRadius: '12px', background: 'var(--terra-glow)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon size={18} style={{ color: 'var(--terra)' }} />
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-accent)', fontSize: '11px', color: 'var(--soil-faint)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px' }}>{label}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '22px', color: 'var(--soil)' }}>{value}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Informação pessoal */}
      <section style={{ background: 'var(--linen)', border: '1px solid var(--parchment)', borderRadius: '16px', padding: '24px', marginBottom: 'var(--space-6)', boxShadow: 'var(--shadow-warm-sm)' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '18px', color: 'var(--soil)', marginBottom: '20px', fontStyle: 'italic' }}>
          Dados pessoais
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          {[
            { icon: User,     label: 'Nome',      value: user.name },
            { icon: Settings, label: 'Email',     value: user.email },
            { icon: MapPin,   label: 'Distrito',  value: user.district },
            { icon: Calendar, label: 'Membro desde', value: new Date(user.createdAt).toLocaleDateString('pt-PT', { year: 'numeric', month: 'long' }) },
          ].map(({ icon: Icon, label, value }) => (
            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px', background: 'var(--cream)', borderRadius: '10px' }}>
              <Icon size={16} style={{ color: 'var(--soil-faint)', flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-accent)', fontSize: '10px', color: 'var(--soil-faint)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '15px', color: 'var(--soil)', marginTop: '2px' }}>{value}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Histórico de reservas */}
      <section>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '18px', color: 'var(--soil)', marginBottom: '16px', fontStyle: 'italic' }}>
          As tuas reservas
        </h2>

        {reservations.length === 0 ? (
          <div style={{ background: 'var(--linen)', border: '1px solid var(--parchment)', borderRadius: '16px', padding: '40px', textAlign: 'center' }}>
            <div style={{ fontSize: '40px', marginBottom: '12px', opacity: 0.4 }}>🐾</div>
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--soil-mid)', marginBottom: '20px' }}>
              Ainda não tens reservas. Começa por explorar os animais disponíveis.
            </p>
            <Link href="/main/animals" className="btn btn-primary" style={{ justifyContent: 'center' }}>
              Explorar animais
            </Link>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {reservations.map((res) => (
              <div
                key={res.id}
                style={{ background: 'var(--linen)', border: '1px solid var(--parchment)', borderRadius: '12px', padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', boxShadow: 'var(--shadow-warm-sm)', flexWrap: 'wrap' }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
                  {res.animal.photos[0] && (
                    <img src={res.animal.photos[0].url} alt={res.animal.name} style={{ width: '48px', height: '48px', borderRadius: '10px', objectFit: 'cover', flexShrink: 0 }} />
                  )}
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '16px', color: 'var(--soil)' }}>{res.animal.name}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '13px', color: 'var(--soil-mid)' }}>
                      {res.animal.shelter.name} · {new Date(res.date).toLocaleDateString('pt-PT', { day: 'numeric', month: 'long', year: 'numeric' })}
                    </div>
                  </div>
                </div>
                <span style={{ fontFamily: 'var(--font-accent)', fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: statusColor[res.status] ?? 'var(--soil-mid)', padding: '5px 12px', background: `${statusColor[res.status]}18`, borderRadius: '100px', border: `1px solid ${statusColor[res.status]}40` }}>
                  {statusLabel[res.status] ?? res.status}
                </span>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Logout */}
      <div style={{ marginTop: 'var(--space-7)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--parchment)' }}>
        <Link
          href="/api/auth/signout"
          style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--soil-mid)', textDecoration: 'none', padding: '10px 0' }}
        >
          <LogOut size={15} />
          Terminar sessão
        </Link>
      </div>
    </div>
  );
}