// -----------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits québécois
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Profile.tsx : profil utilisateur — carte de membre Groupe KA (KA-ID),
//   profil Groupe KA en lecture seule (bio, emploi, ville, âge, site, réseaux
//   sociaux — géré sur groupe-ka.com), informations du compte, actions
// -----------------------------------------------------------------------------
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { fetchMe, logout, type Me, type Socials } from '../api'

const fmtEpoch = (ts: number | null | undefined): string => {
  if (!ts) return '—'
  return new Date(ts * 1000)
    .toLocaleDateString('fr-CA', { day: 'numeric', month: 'long', year: 'numeric' })
    .replace(/^1 /, '1ᵉʳ ')
}

const SOCIAL_BASE: Record<string, string> = {
  instagram: 'https://www.instagram.com/',
  facebook: 'https://www.facebook.com/',
  x: 'https://x.com/',
  linkedin: 'https://www.linkedin.com/in/',
  tiktok: 'https://www.tiktok.com/@',
  youtube: 'https://www.youtube.com/@',
}

const SOCIAL_LABELS: { key: keyof Socials; label: string }[] = [
  { key: 'instagram', label: 'Instagram' },
  { key: 'facebook', label: 'Facebook' },
  { key: 'x', label: 'X (Twitter)' },
  { key: 'linkedin', label: 'LinkedIn' },
  { key: 'tiktok', label: 'TikTok' },
  { key: 'youtube', label: 'YouTube' },
]

/** « @pseudo » ou « pseudo » -> URL complète de la plateforme ; URL laissée telle quelle */
function socialUrl(key: string, value: string): string {
  const v = value.trim()
  if (/^https?:\/\//i.test(v)) return v
  if (key === 'website') return `https://${v}`
  return (SOCIAL_BASE[key] ?? 'https://') + v.replace(/^@/, '')
}

/** Profil géré au HUB Groupe KA — LECTURE SEULE (l'édition se fait sur
 *  groupe-ka.com/compte, une seule saisie pour les huit plateformes). */
function HubProfileSection({ me }: { me: Me }) {
  const socials = SOCIAL_LABELS.filter((s) => (me.socials?.[s.key] ?? '').trim())
  return (
    <section className="hub-profile">
      <h2>Mon profil Groupe KA</h2>
      {me.bio && <p className="hub-bio">{me.bio}</p>}
      <div className="hub-chips">
        {(me.job_title || me.company) && (
          <span className="hub-chip">
            {[me.job_title, me.company].filter(Boolean).join(' · ')}
          </span>
        )}
        {me.city && <span className="hub-chip">{me.city}</span>}
        {me.age != null && <span className="hub-chip">{me.age} ans</span>}
        {me.website && (
          <a className="hub-chip hub-chip-link" href={socialUrl('website', me.website)}
             target="_blank" rel="noopener noreferrer">Site web ↗</a>
        )}
        {socials.map((s) => (
          <a key={s.key} className="hub-chip hub-chip-link"
             href={socialUrl(s.key, me.socials![s.key]!)}
             target="_blank" rel="noopener noreferrer" title={s.label}>
            {s.label} ↗
          </a>
        ))}
      </div>
      <div className="hub-actions">
        <a className="btn btn-primary"
           href="https://www.groupe-ka.com/compte"
           target="_blank" rel="noopener noreferrer">
          Modifier mon profil sur groupe-ka.com ↗
        </a>
      </div>
      <p className="hub-hint">
        Votre profil est géré au niveau du groupe : une seule saisie, visible
        sur les huit plateformes du groupe.
      </p>
    </section>
  )
}

export default function Profile() {
  const [me, setMe] = useState<Me | null | undefined>(undefined) // undefined = chargement
  const [copied, setCopied] = useState(false)
  const navigate = useNavigate()

  useEffect(() => {
    fetchMe()
      .then((r) => setMe(r.user))
      .catch(() => setMe(null))
  }, [])

  const copyKaId = async () => {
    if (!me?.ka_id) return
    try {
      await navigator.clipboard.writeText(me.ka_id)
      setCopied(true)
      setTimeout(() => setCopied(false), 1800)
    } catch {
      /* presse-papiers indisponible : tant pis */
    }
  }

  if (me === undefined) {
    return (
      <div className="page profil">
        <p className="profil-loading">Chargement…</p>
      </div>
    )
  }

  if (me === null) {
    return (
      <div className="page profil">
        <h1>Mon profil</h1>
        <p className="profil-lede">
          Connectez-vous avec votre compte <strong>KA ID</strong> — le même
          identifiant de membre sur toutes les plateformes du Groupe KA.
        </p>
        <a className="btn btn-primary" href="/api/auth/ka/login?next=%2Fprofil">
          Se connecter avec KA ID
        </a>
      </div>
    )
  }

  return (
    <div className="page profil">
      <h1>
        {me.name ? <>Salut, {me.name.split(' ')[0]}.</> : <>Mon profil</>}
      </h1>

      {/* ——— Carte de membre Groupe KA ——— */}
      <div className="pc" role="img" aria-label={`Carte de membre ${me.ka_id}`}>
        <div className="pc-watermark" aria-hidden="true">KA</div>
        <div className="pc-head">
          <span className="pc-brand">
            Groupe <span className="pc-ka">KA</span>
          </span>
          <span className="pc-label">Carte de membre · Groupe KA</span>
        </div>
        <div className="pc-id-block">
          <span className="pc-id-label">KA-ID</span>
          <span className="pc-id">{me.ka_id}</span>
        </div>
        <div className="pc-foot">
          <div className="pc-holder">
            <span className="pc-holder-name">{me.name || me.email}</span>
            {me.role_label && (
              <span className="pc-role-badge">{me.role_label}</span>
            )}
            <span className="pc-holder-since">
              Membre depuis le {fmtEpoch(me.created)}
            </span>
          </div>
          {me.picture && (
            <img className="pc-avatar" src={me.picture} alt="" referrerPolicy="no-referrer" />
          )}
        </div>
        <div className="pc-strip" aria-hidden="true">
          {Array.from({ length: 28 }).map((_, i) => (
            <i key={i} />
          ))}
        </div>
      </div>

      <button className={`btn btn-secondary pc-copy ${copied ? 'ok' : ''}`} onClick={copyKaId}>
        {copied ? '✓ Copié' : 'Copier mon KA-ID'}
      </button>

      {/* ——— Profil Groupe KA (lecture seule, géré sur groupe-ka.com) ——— */}
      {me.profile_source === 'groupe-ka' && <HubProfileSection me={me} />}

      {/* ——— Informations ——— */}
      <section className="profil-grid">
        <div className="pg-item">
          <span className="pg-label">Nom</span>
          <span className="pg-value">{me.name || '—'}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Courriel</span>
          <span className="pg-value">{me.email || '—'}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Identifiant membre</span>
          <span className="pg-value mono">{me.ka_id}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Connexion</span>
          <span className="pg-value">
            {me.provider === 'google' ? 'Compte Google (via KA ID)' : 'KA ID (groupe-ka.com)'}
          </span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Membre depuis</span>
          <span className="pg-value">{fmtEpoch(me.created)}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Dernière connexion</span>
          <span className="pg-value">{fmtEpoch(me.last_login)}</span>
        </div>
      </section>

      <p className="profil-note">
        Votre <strong>KA-ID</strong> est votre identifiant unique dans
        l'écosystème{' '}
        <a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">
          Groupe KA
        </a>{' '}
        — il vous suit sur toutes les plateformes du groupe. Fabri-Ka ne
        conserve que les informations de ce profil ; rien d'autre, et jamais
        revendues.
      </p>

      {/* ——— Actions ——— */}
      <div className="profil-actions">
        <button
          className="btn btn-secondary"
          onClick={async () => {
            await logout()
            navigate('/')
            window.location.reload()
          }}
        >
          Se déconnecter
        </button>
      </div>
    </div>
  )
}