'use client' import { useEffect, useState } from 'react' import Link from 'next/link' import { useRouter } from 'next/navigation' import { useLocale, useTranslations } from 'next-intl' import { ArrowLeft, Ban, Briefcase, Calendar, CreditCard, DollarSign, FileText, Hash, Heart, Save, Shield, Trophy, AlertTriangle, CheckCircle2, Circle, } from 'lucide-react' import ProtectedRoute from '@/components/ProtectedRoute' import Header from '@/components/Header' import SkinAvatar from '@/components/SkinAvatar' import { Button } from '@/components/ui/button' import { useAuth } from '@/contexts/AuthContext' import { authFetch } from '@/lib/fetchAuth' import { BIOGRAPHY_MAX } from '@/lib/characterCreation' import { MISSION_CATEGORIES } from '@/lib/characterProgress' interface CharacterJob { slot: number id: number name: string } interface CharacterMission { id: number category: string categoryLabel: string title: string description: string value: number current: number target: number percent: number completed: boolean } interface AchievementCategory { id: string completed: number total: number percent: number } interface FactionProfile { id: number name: string logo: string role: 'leader' | 'subleader' | 'member' rank: number rankName: string leader: string subLeader: string memberCount: number salary: number type: number typeLabel: string } interface CharacterDetail { id: number name: string health: number skin: number gender: 'male' | 'female' age: number city?: string walkStyleName?: string biography?: string cash: number bank: number phone: string | null document: number level: number registeredAt: string | null lastConnection: string | null avatar: string posX?: number | null posY?: number | null posZ?: number | null MiembroFaccion?: number | null LiderFaccion?: number | null factionRank?: number faction?: FactionProfile | null banStatus?: number banReason?: string | null banDate?: string | null bannedBy?: string | null jobs: CharacterJob[] missions: CharacterMission[] achievementCategories: AchievementCategory[] } const FACTION_NAMES: Record = { 1: 'Los Santos Police Department', } function getFactionName(id?: number | null) { if (!id || !Number.isFinite(id)) return 'Civilian' return FACTION_NAMES[id] || `Faction #${id}` } function getRoleBadgeClass(role: FactionProfile['role']) { switch (role) { case 'leader': return 'bg-amber-500/15 text-amber-300 border-amber-500/35' case 'subleader': return 'bg-blue-500/15 text-blue-300 border-blue-500/35' default: return 'bg-slate-500/15 text-slate-300 border-slate-500/35' } } function formatMySqlDate(input: string | null): string { if (!input || input === 'none') return '—' const raw = String(input).trim() const dmY = raw.match(/(?:\d{2}:\d{2}:\d{2}\s*-\s*)?(\d{2})\/(\d{2})\/(\d{4})$/) if (dmY) { const [, dd, mm, yyyy] = dmY const dt = new Date(Number(yyyy), Number(mm) - 1, Number(dd)) return isNaN(dt.getTime()) ? `${dd}/${mm}/${yyyy}` : dt.toLocaleDateString() } const yMd = raw.match(/^(\d{4})-(\d{2})-(\d{2})(?:\s+\d{2}:\d{2}:\d{2})?$/) if (yMd) { const [, yyyy, mm, dd] = yMd const dt = new Date(Number(yyyy), Number(mm) - 1, Number(dd)) return isNaN(dt.getTime()) ? `${dd}/${mm}/${yyyy}` : dt.toLocaleDateString() } const t = Date.parse(raw) if (!Number.isNaN(t)) return new Date(t).toLocaleDateString() return raw } export default function CharacterProfilePage({ characterId }: { characterId: number }) { const t = useTranslations('dashboard.characterProfile') const td = useTranslations('dashboard') const locale = useLocale() const router = useRouter() const { user, loading: authLoading } = useAuth() const [character, setCharacter] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [biography, setBiography] = useState('') const [savingBio, setSavingBio] = useState(false) const [bioMessage, setBioMessage] = useState(null) const [activeCategory, setActiveCategory] = useState('welcome') useEffect(() => { if (authLoading) return if (!user) { router.replace(`/${locale}/login`) return } const loadCharacter = async () => { setLoading(true) setError(null) try { const response = await authFetch(`/api/user/characters/${characterId}`) const data = await response.json() if (!response.ok) { setError(data.error || t('error')) return } setCharacter(data.character) setBiography(data.character.biography || '') } catch { setError(t('error')) } finally { setLoading(false) } } loadCharacter() }, [authLoading, user, characterId, locale, router, t]) const handleSaveBiography = async () => { if (!user || !character) return setSavingBio(true) setBioMessage(null) try { const response = await authFetch(`/api/user/characters/${characterId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ biography }), }) const data = await response.json() if (!response.ok) { setBioMessage(data.error || t('bioSaveError')) return } setCharacter(data.character) setBiography(data.character.biography || '') setBioMessage(t('bioSaved')) } catch { setBioMessage(t('bioSaveError')) } finally { setSavingBio(false) } } const filteredMissions = character?.missions.filter((mission) => mission.category === activeCategory) ?? [] return ( <>
{t('back')} {loading ? (
{t('loading')}
) : error || !character ? (

{error || t('error')}

) : (
{/* Header */}

{character.name}

ID #{character.id} {' '} {character.faction?.name || getFactionName(character.MiembroFaccion)} {character.document > 0 && ( {t('document', { id: character.document })} )} {t('level', { level: character.level })}

{td('characters.details.cash')}

${character.cash.toLocaleString()}

{td('characters.details.bank')}

${character.bank.toLocaleString()}

{td('characters.details.health')}

{character.health}

{character.faction && (
{character.faction.logo}

{character.faction.name}

{character.faction.role === 'leader' ? t('roleLeader') : character.faction.role === 'subleader' ? t('roleSubLeader') : t('roleMember')}

{character.faction.rankName} · {character.faction.typeLabel}

{character.faction.salary > 0 && ( )}
)}

{t('biographyTitle')}